1. Wstęp
Arkusze stylów CSS (Cascading Style Sheets) pozwalają na bardziej efektywną kontrolę nad formatowaniem dokumentów niż zwykły HTML. Niektóre ustawienia niemożliwe w zwykłym HTML-u, stają się możliwe dzięki wykorzystaniu CSS. Wyraz kaskadowy oznacza to, że można łączyć informacje o stylach z wielu źródeł - styl ogólny z pliku zewnętrznego może być połączony ze stylami specyficznymi dla danego elementu, zdefiniowanymi za pomocą atrybutu STYLE. Definicje stylu obowiązują kaskadowo - sformatowania zawarte w ostatnich arkuszach dominują nad definicjami wcześniejszymi.
Zadaniem poniższego skryptu jest omówienie ogólnych zasad, jak również zalet stosowania stylów CSS oraz przedstawienie głównych atrybutów, pogrupowanych na cztery kategorie: atrybuty odnoszące się do czcionki, do akapitu, do elementów kwadratowych i innych. Do skryptu dołączony jest edytor HTML-owy, dzięki któremu użytkownik może szybko sprawdzić działanie dowolnego atrybutu.
---------------------------------------------------------------------------
2. Postać kaskadowego arkusza stylów
Formatowanie w CSS składa się z dwóch części: selektora i deklaracji. Selektor to nic innego jak nazwa znacznika HTML, np. H2, P, TABLE, TD. Deklaracja zawiera dwie części: właściwość (lub atrybut) i wartość.
Przykład:
H2 { color:blue; font-size:11pt; }
H2 - znacznik HTML - selektor
color, font-size - pierwsza część deklaracji - właściwość
blue, 11pt - druga część deklaracji - wartość
W deklaracji pomiędzy właściwością a wartością musi być użyty znak dwukropka (:) lub znak równości(=), np. color:blue lub color=blue. Należy zwrócić uwagę, żeby poszczególne deklaracje rozdzielić średnikiem. Ostatnia deklaracja nie musi być zakończona średnikiem.
---------------------------------------------------------------------------
3. Sposoby definiowania arkusza stylu
Istnieją trzy sposoby definiowania arkuszy stylów:
1. wpisany - wprowadzony w wybrany znaczniku (dominujący)
2. osadzony - umieszczony wewnątrz znacznika "STYLE"
3. zewnętrzny - wszystkie definicje stylu znajdują się w zewnętrznym pliku o rozszerzeniu nazwy .css
3.1. Wpisany arkusz stylu
Styl wpisany jest wprowadzony wewnątrz dokumentu HTML w wybranym znaczniku i parametryzuje zmiany tylko w nim.
Przykład:
BODY
P style="font-size: 8pt; color:red; text-align:center; text-decoration:line-through;"
Wszystkie ustawienia wprowadza się w parametrze STYLE=. Następnie, po znaku " wpisuje się deklaracje, które rozdziela się średnikiem.
Ustawienia powyższe stosują sie tylko do tego akapitu. Gdybyśmy ponownie użyli znacznika P te ustawienia stracą moc.
Styl wpisany ma zastosowanie tam, gdzie zachodzi potrzeba drobnych zmian w stylu. Ustawienia tak wprowadzone stają się dominujące nad stylem osadzonym i zewnętrznym.
3.2. Osadzony arkusz stylu
Styl osadzony jest również umieszczony wewnątrz dokumentu HTML, ale najczęściej wprowadza się go w nagłówku (w sekcji HEAD). Definicje stylów znajdują się między znacznikami STYLE.
Poszczególne definicje stylów formatujące dany znacznik umieszcza sie w nawiasie klamrowym, każdy parametr również rozdziela się średnikiem. Tak zdefiniowany znacznik wystarczy użyć w dokumencie.
Osadzony arkusz stylu definiuje atrybuty dla całego dokumentu. Ustawienia tak wprowadzone stają się dominujące tylko nad stylem zewnętrznym. Są bardzo wygodne, gdy dokument zawiera obszerny tekst z urozmaiconymi fragmentami. Zmian nie trzeba wprowadzać w każdym fragmencie osobno, ale w jednym miejscu (w sekcji HEAD)
3.3. Zewnętrzny arkusz stylu
Wszystkie definicje stylu w zewnętrznym lub też łączonym arkuszu stylu są zamieszczone w pliku zewnętrznym, z którym strona www jest połączona hiperłączem. Plik ten może mieć dowolnę nazwę, ale musi mieć rozszerzenie nazwy .css, np. styl.css.
H2 {font-size: 12pt; color:red; text-align:center;}
P {font-size: 10pt; color:#123456; text-align:right;}
TD {border-color: blue; padding:5; border-style:dotted; border-width:2}
Osadzony arkusz stylu definiuje atrybuty dla wszystkich dokumentów, w których znajduje się odnośnik - LINK rel=stylesheet href="pliki/styl.css" type="text/css". Znacznik LINK zamieszcza się najczęściej w sekcji HEAD i zawiera:
rel - typ: "stylesheet";
href - nazwę i położenie pliku .css, w którm zamieszczone są definicje stylów;
type - typ opisu wyglądu określonego przez: "text/css".
Jest bardzo wygodny dla serwisu www złożonego z wielu stron. Takie rozwiązanie ma dwie zalety:
- treść opisu może być zmieniana bez modyfikacji źródłowego dokumentu HTML,
- pliki CSS mogą być współdzielone przez kilka dokumentów.
---------------------------------------------------------------------------
4. Grupowanie definicji stylów
Żeby definicje stylu były przejrzyste należy dbać o ich porządek. Pozwala to zredukować liczbę definicji i ułatwia modyfikację stylu. Istnieją dwa sposoby porządkowania
- grupowanie definicji stylów - tworzenie klas.
4.1. Grupownie definicji stylów
Jeżeli identyczne atrybuty stylów stosowane są do różnych elementów można je zgrupować.
Przykład:
H1,H2 {font-family: verdana, helvetica; color: #112233}
H1 H2 {font-size: 20pt}
Krój czcionki oraz kolor dla nagłówka H1 i H2 są takie same, natomiast rozmiary czcionek są różne.
4.2. Tworzenie klas
Raz zdefiniowany znacznik P w zewnętrznym albo osadzonym arkuszu ma określone ustawienia i można go oczywiście modyfikować, ale wówczas cały tekst przyjmuje te ustawienia. Czasami zachodzi potrzeba urozmaicenia różnych fragmentów tekstu. Możemy wówczas zastosować tzw. klasy. Zdefiniujmy dwie klasy, które będą się różnić rozmiarem czcionki.
Przykład:
P. {font-size: 12pt; color: #778899}
P.mala {font-size: 6pt}
P.duza {font-size: 20pt}
Nazwa klasy może być dowolna i zawsze umieszczana jest po kropce. Nazwa klasy nie powinna zawierać polskich znaków. Deklaracja może wyglądać również tak:
Przykład:
P {font-size: 12pt; color: #778899}
.mala {font-size: 6pt}
.duza {font-size: 17pt}
Żeby teraz zastosować zdefiniowane klasy należy w danym znaczniku użyć atrybutu class, którego wartością jest nazwa klasy, np.
Przykład:
P class="mala"
Należy zauważyć, że jeżeli w klasie nie ma zadeklarowanego jakiegoś atrybutu to jest on dziedziczony od swojego "ojca". W naszym przypadku tekst, w którym zastosowaliśmy klasę "mala" lub "duza" dziedziczy kolor od znacznika P. O dziedziczeniu zajmiemy się jeszcze w punkcie 5.
---------------------------------------------------------------------------
5. Dziedziczenie
Dziedziczenie w arkuszu stylu polega na przejęciu jakiegoś atrybutu od swojego nadrzędnego znacznika, którego nazwiemy ojcem. Schemat dziedziczenia jest następujący:
- znacznikiem nadrzędnym jest HTML, któremu podlegają znaczniki HEAD i BODY
- znacznikowi HEAD podlega: TITLE
- znacznikowi BODY podlegają: H1, H2, H3, H4, H5, H6, P, A, UL - temu znowu podlegają LI, TABLE - temu znowu podlegają TR i TD.
Jak widać znacznik HTML jest znacznikiem nadrzędnym. Pod nim znajdują się znaczniki HEAD oraz BODY. W opisie wyglądu dziedziczenie odgrywa bardzo ważną rolę.
Przykład:
BODY {margin-top:0.5cm; margin-left:4cm; margin-right:2cm}
H2 {margin-left:5cm}
Nagłówek H1 nie został wcześniej określony, więc dziedziczy marginesy od znacznika "ojcowskiego" zwanego BODY. Można też powiedzieć, że znacznik H1 jest "dzieckiem" w stosunku do znacznika BODY.
Nagłówek H2 również dziedziczy marginesy od swojego znacznika "ojcowskiego" BODY, ale deklaracja w H2: margin-left:5cm anuluje margines lewy znacznika BODY, pozostałe marginesy pozostają nie zmienione.
Należy zauważyć, że jeżeli w klasie nie ma zadeklarowanego jakiegoś atrybutu to jest on dziedziczony od swojego "ojca". Jeżeli jest zdefiniowany atrybut w danym znaczniku to staje się on obowiązkowy, mimo innego zadeklarowania u swojego "ojca".
--------------------------------------------------------------------------
6. Jednostki
W atrybutach można wykorzystać następujące jednostki:
Piksel [px] - używana do określenia rozmiaru elementów graficznych
Punkt [pt] - używana do określania rozmiaru czcionki i innych wartości związanych z długością; jest to jednostka bezwzględna, która nie jest skalowalna względem środowiska.
Centymetr [cm] - używana do określania wartości związanych z długością;
Cal [in] - podobnie jak centymetr
Procent [%] - jednostka względna - uzależniona od rozdzielczości
[em] - jednostka względna - zależna od rozmiaru elementu sąsiadującego.
ZAGADNIENIA
---------------------------------------------------------------------------
7. Atrybuty arkusza stylu
Poniżej podano najważniejsze atrybuty. Usystematyzowano je według zastosowania: atrybuty formatujące czcionkę, akapit, elementy kwadratowe (tabele, ramki, linie) oraz inne.
dla czcionki:
COLOR
FONT-FAMILY
FONT-SIZE
FONT-WEIGHT
FONT-STYLE
FONT-VARIANT
TEXT-DECORATION
TEXT-TRANSFORM
WORD-SPACING
LETTER-SPACING
dla akapitu:
TEXT-ALIGN
LINE-HEIGHT
MARGIN
dla elementów kwadratowych:
POSITION
PADDING
BORDER
BACKGROUND
HEIGHT
WIDTH
OVERFLOW
FLOAT
CLIP
inne:
CURSOR
!IMPORTANT
SCROLLBAR
Wszystkie te deklaracje można sprawdzić na stronie: "http://www.mickiewicz.lc.pl/ti/style". Na tej stronie istnieje równiez link do edytora html-owego, w którym mozna przetestować działanie atrybutów arkuszy stylów.
---------------------------------------------------------------------------
Autor:
Adam Strzelczyk, e-mail: as@klub.chip.pl |
