kod
selektor#identyfikator {cecha: wartość}
/* lub */
#identyfikator {cecha: wartość}
id=”…” /*W HTML-u obok znacznika*/
opis
Występuje tylko raz w hierarchii drzewa dokumentu.
2. Selektor identyfikatora
selektor.klasa {cecha: wartość}
Klasy selektorów pozwalają zaoszczędzić często wpisywania stylu inline Wystarczy w pliku .css po selektorze wpisać kropkę i dowolny wyraz, a w pliku .html przy znaczniku należy wpisać class=”klasa”
przykład
p.nazwa_klasy {color: red} /* w CSS */
<p class=”nazwa_klasy”>Tekst</p> /* w HTML-u*/
opis przykładu
Wystarczy obok znacznika w HTML-u wpisać class=”nazwa_klasy” a akapit będzie czerwony
1. Klasy selektorów
UWAGA !!
Te polecenia interpretują tylko: IE, Netscape 6, Firefox, Opera 5
selektor [atrybut~=”wyraz”] {cecha: wartość}
Jeśli we właściwości atrybutu danego selektora będzie zadeklarowany wyraz, to selektor będzie koloru czerwonego
p[title~=”jest”] {color: red}
Jeśli w opisie akapitu będzie zawarte słowo: „jest” to będzie on koloru czerwonego
3. Selektor atrybutu zawierający określony wyraz
selektor [atrybut=”wartość”] {cecha: wartość}
Jeśli dany selektor będzie miał nadany atrybut z wartością to przyjmje on cechy i wartości z CSS-a
p[title=”To jest akapit”] {color: red}
Każdy akapit który będzie posiadać atrybut: title=”To jest akapit” będzie on koloru czerwonego
2. Selektor atrybutu o określonej wartośći
Tych poleceń nie interpretuje przeglądarka IE 6 oraz starsze wersje, w IE 7 wszystko działa
selektor [atrybut] {cecha: wartość}
[atrybut] oznacza parametr nadany znacznikowi z poziomu (X)HTML (np. title=”…”)
p[title] {color: red}
Każdy akapit któremu nadamy atrybut title=”…”, powinien być koloru czerwonego
1. Selektor atrybuta
SELEKTORY ATRYBUTÓW
HTML
HEAD BODY
TITTLE H1 P TABLE
B U TR TR
TD TD TD TD
Przykład hierarchii dzrewa dokumentu
selektor1, selektor2, …. {cecha: wartość }
Pozwala nadać te same cechy kilku selektorom na różnych poziomach hierarchii drzewa dokumentu naraz
b, i, u {color: red }
5. Grupowanie selektorów
<head>
(…)
<link rel=”Stylesheet” type=”text/css” href=”style.css”/>
</head>
Zewnętrzny arkusz stylów pozwala na odwołanie się do pliku ze stylami css który posiada wcześniej zdefiniowane właściwości selektorów
5. Zewnętrzny arkusz stylów
* {cecha: wartość }
Przypisuje cechy wszystkim elementom na stronie
interpretuje
IE, Netscape 6, Firefox, Opera 5
SELEKTORY ELEMENTÓW
Czyli prirytety (ważność styli, pierwszeństwo)
1. Styl lokalny (inline)
2. Rozciągnięcie stylu (span)
3. Wydzielone bloki (div)
4. Wewnętrzny arkusz stylów
5. Import stylów do wewnętrznego arkusza
6. Zewnętrzny arkusz stylów
7. Import stylów do zewnętrznego arkusza
...
Dob3rman