Style kaskadowe CSS


Kaskadowe arkusze stylów to rozszerzenie języka HTML o nowe możliwości renderowania stron. Dzięki stylom CSS można w jednym miejscu zdefiniować format i pozycję wszystkich elementów strony. Wybranym znacznikom można nadawać właściwości, które nie były wcześniej dostępne, można w prosty sposób z dużą dokładnością pozycjonować rozmieszczenie składników strony.
Zaletą arkusza stylów jest uproszczenie formatowania strony, zmniejszenie ilości kodu na stronie. Zamiast wielokrotnie wpisywać właściwości przy każdym znaczniku, definiuje się je tylko raz w CSS i odwołuje się do nich za pomocą identyfikatora ID lub klasy.
W tym kursie w prosty sposób opisane zostaną zasady tworzenia stylów, podstawowe właściwości jakie można nadawać obiektom. Tworząc własne strony warto wykorzystywać style kaskadowe, gdyż strona wykonana na DIVach jest prostsza, a lepiej wygląda.

Opis wszystkich właściwości stylów zebrany jest w tablicy stylów CSS


Jak zdefiniować style?

Jest kilka sposobów umieszczania stylów w zależności czy mają dotyczyć jednego znacznika, całej strony, czy wszystkich stron serwisu.
Najmniej polecaną metodą jest wpisywanie stylu dla każdego obiektu. W takim przypadku trzeba wielokrotnie powtarzać ten sam kod przy wielu znacznikach.

<P style="color: red; text-decoration: bold;">Przykładowy akapit. </P>

Lepszym rozwiązaniem jest umieszczenie arkusza stylów w nagłówku strony, wtedy zdefiniowane tu style będą dotyczyć wszystkich obiektów na stronie. Przykład arkusza stylów w części <HEAD> poniżej.

<HEAD>
<title>Tytuł strony</title>
<style type="text/css">
P.1_klasa { 1_wlasciwosc:wartosc; 2_wlasciwosc:wartosc;}
TABLE { 1_własciwosc:wartosc; 2_wlasciwosc: wartosc;}
</style>
</HEAD>

Jeśli nasz serwis ma wiele stron i chcemy by miały podobny format, nie trzeba przepisywać stylów na każdej stronie, można to zrobić w zewnętrznym pliku tekstowym z rozszerzeniem CSS, a w części nagłówkowej każdej ze stron wpisać linijkę kodu odwołującą się do tego pliku. Wygląda to tak:

<link rel="stylesheet" href="style.css" type="text/css" />

W praktyce może się zdarzyć, że oprócz zewnętrznego arkusza stylów umieszczamy dodatkowe style dla strony lub wybranego znacznika, wtedy pierwszeństwo będzie miał ten styl, który jest bliżej.



Klasy (class)

Definiując właściwości jakiegoś obiektu dla całego dokumentu, bylibyśmy skazani na jednolity wygląd wszędzie gdzie on wystąpi. To nie zawsze jest pożądane. Przykładowo teks objęty znacznikami akapitu P może inaczej wyglądać w głównym bloku tekstu, a inaczej w stopce. Aby to osiągnąć można selektorom nadawać dodatkowe nazwy klas i definiować dla nich osobno właściwości.
Definicja w arkuszu stylów składa się z selektora, który jest odpowiednikiem znaczników HTML, jednak tu występuje bez ostrych nawiasów. Po nazwie selektora jest kropka i nazwa klasy. Dalej może być dwukropek i nazwa pseudoklasy. W nawiasach klamrowych wypisane są właściwości, które dotyczą danego selektora.
Selektor może mieć zdefiniowane kilka właściwości oddzielonych od siebie znakiem średnika. Poniżej przykładowy arkusz stylów.

P.1_klasa { 1_wlasciwosc:wartosc; 2_wlasciwosc:wartosc;}
TABLE.prawa { 1_własciwosc:wartosc; 2_wlasciwosc: wartosc;}
TD { 1_własciwosc:wartosc; 2_wlasciwosc: wartosc;}
A:link {color:blue;}
A:hover {color:red; text-decoration:underline;}

Aby w dokumencie HTML odwołać się zdefiniowanych stylów należy w znaczniku umieścić nazwę klasy.

<P class="1_klasa">Ten tekst otrzyma formatowanie określone dla klasy 1_klasa </p>

Oprócz klas selektorom można nadawać identyfikatory. Różnica jest taka, że identyfikator musi być unikalny. Jest on przypisany tylko do jednego obiektu.



Dziedziczenie

W strukturze dokumentu HTML obiekty występują w pewnej hierarchii. Występuje tu zależność "dziecka" od "rodzica".
Przykładowo jeśli utworzymy selektor P i nadamy mu nową nazwę klasy to automatycznie przejmuje on właściwości niezdefiniowanego selektora P oraz dodatkowo ma nowe cechy przypisane dla nowo utworzonej klasy.
Zasada dziedziczenia ułatwia definiowanie stylów, bo nie trzeba wszystkich właściwości powtarzać w nowych klasach jeśli mogą je przejąć od swojego "rodzica". Można też pozbyć się właściwości dziedziczonej przez ponowne jej zdefiniowanie w nowej nazwie klasy.



Kaskadowość

Kolejną ważna cechą stylów jest ich kaskadowość, czyli zachowanie kolejności oddziaływania stylów. Te określone w zewnętrznym pliku mogą mieć wpływ na wszystkie strony serwisu lecz jeśli ten sam obiekt jest dodatkowo definiowany przez style zapisane w nagłówku strony, to on będzie miał pierwszeństwo i może zmienić styl określony w zewnętrznym pliku. Podobnie ważniejszy będzie styl określony wewnątrz znaczników, bo może zmienić właściwości podane w pliku zewnętrznym i w części nagłówkowej strony.
Warto o tej właściwości pamiętać formatując strony. W pliku zewnętrznym nadawać selektorom cechy powtarzające się na wszystkich stronach serwisu. W części nagłówkowej tylko te które dotyczą jednej strony, a w poszczególnych znacznikach stosować style gdy zachodzi wyjątkowa potrzeba zmiany właściwości pojedynczych obiektów.
W hierarchii ważności jeszcze mniejsze znaczenie mają style importowane z innej strony, a w przypadku gdy styl dla wybranych obiektów nie został nigdzie określony przeglądarka zastosuje swoje własne style.


Jednostki miary

Selektorom we właściwościach można nadawać wielkości wyrażone w wartościach absolutnych lub relatywnych.
Jednostki relatywne to takie których wartość jest proporcjonalna do wielkości ekranu. Np.:

  • em - wysokość czcionki
  • ex - wysokość litery
  • px - piksele

Jednostki absolutne są stałe bez względu na wielkość ekranu, czy liter.

  • mm - milimetry
  • cm - centymetry
  • in - cale
  • pt - punkty
  • pc - pika

Przykład stosowania jednostek relatywnych:

P { font-size: 0.8em; text-indent: 4em }
// wysokości czcionki akapitu 0.8 standardowej i wcięcie 4 - krotnej wysokości czcionki

Przykład stosowania jednostek absolutnych:

H2 {font-size: 1.2cm}
// wysokość czcionki w nagłówku H2 = 1,2cm