calypso

Co to jest CSS?

Skrót CSS (czyli Cascading Style Sheets) - po polsku tłumaczy się jako kaskadowe arkusze stylów. Jest to język niezbędny do kontroli wyglądu strony internetowej.

Tak jak język html służy do umieszczenia na stronie treści (czyli tekstu, grafik, hiperłączy, dźwięku, video itp.), tak CSS używany jest do kontrolowania wyglądu tych elementów (czyli decydujemy np. o kolorze czy wyrównaniu tekstu, położeniu obrazków, wyglądzie tła strony itp.)

Reguły CSS

Język CSS składa się ze zbioru reguł. Każda reguła określa wygląd konkretnych elementów html (np. tekstu zawartego w znacznikach <p>, nagłówków <h1>-<6>, obrazków <img>, hiperłączy <a> i wielu innych).

Konstrukcja reguły CSS

Reguły CSS konstruujemy według następującego wzoru:

Reguła CSS może być złożona i zawierać więcej niż jedną modyfikację wyglądu:

Jak widać, w regułach CSS występuje kilka elementów, w niezmiennej kolejności:

• selektor

   - odpowiada za wyszukanie elementu (lub grupy elementów html), których wygląd będzie zmieniany. Np. selektor p odszuka w dokumencie wszystkie znaczniki <p> i zastosuje do nich określoną przez nas regułę. Więcej o selektorach możesz dowiedzieć się TUTAJ

• nawias klamrowy

   - {} - otwieramy go zaraz po selektorze (po spacji), zamykamy na końcu reguły. Zawiera w sobie wszystkie reguły, jakie ma otrzymać wskazany element html.

• właściwość

   - konkretna zmiana wyglądu, jaką nadajemy elementowi html. Np. właściwość background-color określi kolor tła. Właściwości wpisujemy po nawiasie klamrowym, po wpisanej wartości wstawiamy dwukropek i spację.

• wartość

   - występuje po każdej właściwości. Na końcu należy postawić średnik ; Np. wartość blue dla właściwości color określa kolor niebieski.

Przykładowa reguła CSS może wyglądać następująco:

Ta reguła określa wygląd każdego znacznika <p>:

• Właściwość color określa kolor tekstu, wartość orange oznacza kolor pomarańczowy.
• Właściwość background-color określa kolor tła elementu <p>, wartość black oznacza kolor czarny.
• Właściwość border określa ramkę elementu <p>, zaś wartości: 1px – oznacza grubość ramki wynoszącą 1 piksel, solid – oznacza ramkę jako linię ciągłą, black – oznacza kolor jako czarny.