Tablice Informatyczne CSS

CSS

Tablice informatyczne

WSTAWIANIE STYLÓW

1. Styl lokalny

2. Rozciągnięcie stylu

kod

opis

Selektor – dowolny znacznik HTML

przykład

<p style=”color: red”>tekst</p>

kod

opis

Znacznik <span> obejmuje dowolny fragment dokumentu, możemy nim
objąć kilka różnych elementów w lini

3. Wydzielone bloki

kod

opis

Znacnikiem <div> możemy edytować większy fragment dokumentu

4. Wewnętrzny arkusz stylów

kod

<head>
(…)
  <style type=”text/css”>
  Selektor { cecha: wartość … }
  Selektor { cecha: wartość … }
  </style>
(…)
</html>

opis

Wewnętrzny arkusz stylów musi być w ramach <head>. Możemy go
zastosować gdy elementy strony które chcemy sformatować wielokrotnie
się powtarzają

5. Zewnętrzny arkusz stylów

kod

opis

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

6. Kaskadowośd styli

opis

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

SELEKTORY ELEMENTÓW

1. Selektor uniwersalny

kod

* {cecha: wartość }

opis

Przypisuje cechy wszystkim elementom na stronie

interpretuje

IE, Netscape 6, Firefox, Opera 5

2. Selektor potomka

kod

Przodek1 przodek2 potomek {cecha: wartość }

opis

Selektor potomka to selektor który leży niżej w hierarchii drzewa
dokumentu niż selektor przodka

przykład

p b { color: red }

opis
przykładu

jeśli znacznik

<b>

znajdzie się w ramach akapitu

<p>

to będzie on

czerwony, poza znacznikiem

<p>

nie będzie on zmieniał koloru

interpretuje

IE, Netscape 6, Firefox, Opera 5

3. Selektor dziecka

kod

p > b { color: red }

opis

Selektor dziecka leży niżej w hierarchii od rodzica czyli w tym
przykładzie

jest rodzicem a

dzieckiem

interpretuje

IE 7.0, Netscape 6, Firefox, Opera 5

4. Selektor braci

kod

brat1 + brat2 {cecha: wartość }

opis

Selektory braci leżą na tym samym poziomie hierarchii drzewa
dokumentu

interpretuje

IE 7.0, Netscape 6, Firefox, Opera 5

5. Grupowanie selektorów

kod

selektor1, selektor2, …. {cecha: wartość }

opis

Pozwala nadać te same cechy kilku selektorom na różnych poziomach
hierarchii drzewa dokumentu naraz

przykład

b, i, u {color: red }

Przykład hierarchii dzrewa dokumentu

HTML

HEAD BODY

TITTLE H1 P

TABLE

B U

TR TR

TD TD TD TD

SELEKTORY ATRYBUTÓW

1. Selektor atrybuta

kod

selektor [atrybut] {cecha: wartość}

opis

[atrybut] oznacza parametr nadany znacznikowi z poziomu (X)HTML (np.
title=”…”)

przykład

p[title] {color: red}

opis
przykładu

Każdy akapit któremu nadamy atrybut title=”…”, powinien być koloru
czerwonego

2. Selektor atrybutu o określonej wartośdi

kod

selektor [atrybut=”wartość”] {cecha: wartość}

opis

Jeśli dany selektor będzie miał nadany atrybut z wartością to przyjmje on
cechy i wartości z CSS-a

przykład

p[title=”To jest akapit”] {color: red}

opis
przykładu

Każdy akapit który będzie posiadać atrybut:

title=”To jest

akapit”

będzie on koloru czerwonego

3. Selektor atrybutu zawierający określony wyraz

kod

selektor [atrybut~=”wyraz”] {cecha: wartość}

opis

Jeśli we właściwości atrybutu danego selektora będzie zadeklarowany
wyraz, to selektor będzie koloru czerwonego

przykład

p[title~=”jest”] {color: red}

opis
przykładu

Jeśli w opisie akapitu będzie zawarte słowo:

„jest”

to będzie on koloru

czerwonego

SELEKTORY SPECJALNE

1. Klasy selektorów

kod

selektor.klasa {cecha: wartość}

opis

Klasy selektorów pozwalają zaoszczędzid często wpisywania stylu inline
Wystarczy w pliku .css po selektorze wpisad kropkę i dowolny wyraz, a w
pliku .html przy znaczniku należy wpisad 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

2. Selektor identyfikatora

kod

selektor#identyfikator {cecha: wartość}
/* lub */
#identyfikator {cecha: wartość}
id=”…” /*W HTML-u obok znacznika*/

opis

Występuje tylko raz w hierarchii drzewa dokumentu.

UWAGA !!

W języku XHTML wszystkie selektory muszą byd pisane małymi literami

UWAGA !!

Tych poleceo nie interpretuje przeglądarka IE 6 oraz starsze wersje, w IE 7 wszystko działa

UWAGA !!

Te polecenia interpretują tylko: IE, Netscape 6, Firefox, Opera 5

SELEKTORY PSEUDOELEMENTÓW

Pseudoelementy pozwalają odnieśd się do specjalnych elementów struktury dokumentu
bez konieczności wprowadzania dodatkowych znaczników do kodu źródłowego. Pozwalają
również automatycznie generowad pewną zawartośd w określonych miejscach dokumentu

1. Pierwsza linia

kod

selektor:first-line {cecha: wartość}

opis

Polecenie raz zdefiniowane w arkuszu stylów nadaje opisane
właściwości pierwszym linijkom danego selektora

przykład

p:first-line {color: red}

opis
przykładu

Wszystkie pierwsze linijki akapitów w dokumencie będą czerwone

interpretuje

IE 6, IE 7, Netscape 6, Firefox, Opera 5

2. Pierwsza litera

kod

selektor:first-letter {cecha: wartość}

opis

Nadaje właściwości dla pierwszej litery tekstu w danym selektorze

interpretuje

IE 6, IE 7, Netscape 6, Firefox, Opera 5

3. Tekst, obraz, wartośd atrybutu; przed selektorem

kod

selektor:before {content: „treść”
url(obrazek.gif) attr(atrybut);}

opis

Polecenie to pozwala na umieszczenie tekstu lub grafiki przed
zawartością selektora. Polecenie attr(atrybut) wyświetla wartośd
atrybutu przypisanego dla selektroa z poziomu HTML

interpretuje

Netscape 6, Firefox, Opera 5

3. Tekst, obraz, wartośd atrybutu; po selektorze

kod

selektor:after {content: „treść”
url(obrazek.gif) attr(atrybut);}

opis

Polecenie to pozwala na umieszczenie tekstu , grafiki oraz wartości
atrybutu selektora za zawartością selektora.

interpretuje

Netscape 6, Firefox, Opera 5

SELEKTORY PSEUDOKLAS

1. Właściwości i zachowanie odsyłaczy

Pseudoklasy są dynamiczne tzn. element „nabywa” lun „traci” pseudoklasę podczas
interakcji z użytkownikiem
Pseudoklasy można podzielid na trzy grupy:
a) Pseudoklasy linków:   :link,   :visited
b) Pseudoklasy dynamiczne:    :active,   :hover,    :focus
     c) Inne:    :lang(),   :first-child

kod

:link {cecha: wartość}

opis

Polecenie nadaje określone właściwości dla wszystkich podstawowych
odsyłaczy, które nie zostały jeszcze odwiedzone przez użytkownika

kod

:visited {cecha: wartość}

opis

Polecenie nadaje określone właściwości dla wszystkich odsyłaczy które
zostąły już odwiedzone przez użytkownika

kod

selektor:hover {cecha: wartość}

opis

Polecenie nadaje określone właściwości dla elementów, nad którymi
znajduje się wskaźnik myszki. (IE 6 – tylko dla odsyłaczy)

kod

selektor:active {cecha: wartość}

opis

Polecenie nadaje okreslone właściwości dla elementów, które zostały
aktywowane prze użytkownika, np.: kiedy użytkownik wciśnie i
przytrzyma przycisk na odsyłaczu, aktywacja będzie miała miejsce do
zwolnienia przycisku myszki (IE 6 – tylko dla odsyłaczy)

interpretuje

IE,Netscape 6, Firefox, Opera 5

UWAGA !!

Pseudoklasy w podpunkcie pierwszym zostały napisane w takiej kolejności aby
prawidłowo sformatowały odsyłacze na stronie

2. Zogniskowanie

kod

selektor:focus {cecha: wartość}

opis

Polecenie pozwala nadad określone atrybuty formatowania dla
elementu (np. odsyłacza lub pola formularza), który przyjmuje w danej
chwili zoogniskowanie. Przykładowo dotyczy to odsyłacza, wybranego
za pomocą klawisza tabulatora czy pola formularza, w którym znalazł
się kursor.

interpretuje

Netscape 6, Firefox, Opera 7

3. Pierwsze dziecko

kod

1. Dowolny rodzic

dziecko:first-child {cecha: wartość}

2. Określony rodzic

rodzic > dziecko:first-child {cecha: wartość}

opis

1. Pozwala nadad określone właściwości dla elementów, będących
pierwzym dzieckiem dowolnego innego elementu. Rodzaj znacznika
rodzica w tym przypadku nie ma znaczenia.
2. Pozwala określid znacznik rodzica

interpretuje

IE7, Netscape 6, Firefox, Opera 7.2

4. Łączenie selektorów

opis

Należy wypisad je jeden po drugim aby je połączyd w nas™epującej
kolejności
1. Selektor typu lub selektor uniwersalny
2. Selektory atrybutów, selektor identyfikatora, selektor klasy lub
selektory pseudoklas (w dowolnej kolejności)
3. Selektroy pseudoelementów

WŁAŚCIWOŚCI SELEKTORÓW

1. Czcionki

font-size

Wielkośd czcionki:

| xx-large

czyli:

większa | największa

można również inaczej określid:

smaller | larger

czyli :

mniejsza | większa

można też określid za pomocą jednostki

długośdi

font-family

Rodzaj czcionki (krój np.: ‘Tmes New Roman’) rodzaje czcionek:

serif

- czcionka szeryfowa (‘Times New Roman’, Georgia)

sans-serif

- czcionka bezszeryfowa (Arial, Veranda)

monospace

- czcionka o stałej szerokości znaków (Courier, ‘Courier

New’)

cursive

- czcionka mająca pewne cechy pochyłej

fantasy

- czcionka dekoracyjna

Rodzaje czcionki podajemy zawsze na koocu jako alternatywe jeśli
użytkownik nie będzie posiadał danej w systemie, zostanie
wyświetlona czcionka podobna do niej

font-style

Styl czcionki:

normal | italic | oblique

czyli:

normalna | pochylona |

również pochylona

font-weight

Waga czcionki czyli pogrubienie. Wartości absolutne :

normal | bold |

100, 200, 300

czyli:

normalna | pogrubiona | wartośd pogrubienia

font-wariant

Wariant czcionki

normal | small-caps

czyli:

czcionka normalna |

kapitaliki czyli tekst napisany wielkimi literami lecz czcionką o wielkości
małuch liter

font

Atrybuty mieszane. Jako wartoś możemy wpisad konkretne wartości
atrybutów dotyczących czcionek które będą odzdzielane od siebie
spacjami. Należy je wpisywad w następującej kolejności (przy czym
niektóre można pominąd):

font-style

font-variant

font-weight

font-size

line-height

font-family

Jako wartośd atrybutu możemy również podad:

caption

– czcionka do podpisywania kontrolek

icon

– czcionka etykiet ikon

- menu

message-box

– okno dialogowe

small-caption

– etykiety małych kontrolek

status-bar

– pasek statusu okna

2. Tekst

color

Jako kolor należy podad definicje koloru np.:

#BEBEBE

text-decoration

Dekoracja teksty

none | underline | line-through | overline | blink

czyli :

normalnie | podkreślenie | przekreślenie | nadkreślenie |

migotanie tekstu (tylko Netscape, Firefox, Opera 7)

text-transform

Transformacaj tekstu. Jako wartośd należy podad:

none

– bez zmian

capitalize

– zmiana pierwszych liter wszystkich wyrazów na welke

uppercase

– zmiana wszystkich liter na wielkie

lowercase

– zmiana wszystkich liter na małe

text-align

Wyrównanie tekstu:

left | right | center | justify

czyli:

do lewego

marginesu | do prawego | na środek | do obu marginesów

text-indent

Wcięcie. Jako wcięcie podajemy konkretną wartośd, używając
jednostki długości (polecenie tworzy wcięcie w pierwszej linijce
tekstu)

line-height

Odstęp między wierszami

word-spacing

Odstęp między wyrazami

letter-spacing

Odstęp między literami

white-space

Białe znaki

normal -

pre -

nowrap -

pre-wrap -

pre-line -

Jednostki miary kaskadowych arkuszy stylu

Pisel. Nie zalecane ze względu na brak skalowania. Obowiązuje w
przypadku określenia szerokośdi i wysokości obrazów rastowych
(element <img> języków HTML i XHTML)

Punkt drukarski (1/72 części cala)

Centymetr

Milimetr

Cal

Jednostka drukarska em (typowa szerokośd litery m)

Jednostka drukarska en (typowa szerokośd litery n)

Rozmiar obliczany względem rozmiaru elementu nadrzędnego lub
standardowego rozmiaru danego elementu.

3. Tło

background-color

Kolor tła, należy podad definicje koloru

backgroun-image

Obrazek jako tło selektora, należy podad jako wartośd:
url(ścieżka dostępu)

background-repeat

Polecenie definiuje sposób powtarzania się obrazka
jako tło:

Repeat

– powtarzanie tła w obu kierunkach

Repeat x

– powtarzanie tła w kierunku poziomym

Repeat y

– powtarzanie tła w kierunku pionowym

No repeat

– brak powtarzania tła

background-attachment

Zaczepienie tła:

scroll | fixed

czyli:

przewijanie tła | tło

nieruchome

background-position

Pozycja obrazka jako tło
1. Jedna wartośd:

odległośd od lewej krawędzi

2. Dwie wartośdi (oddzielone spacją):

left top | right top

| left bottom | right bottom | odległośd od lewej i
prawej

background

Atrybuty mieszane, jako wartośd należy podad wartośdi
atrybutów tła w następującej kolejności:

1. Kolor tła
2. Tło obrazkowe
3. Powtarzanie tła
4. Zaczepienie tła
5. Pozycja tła

Wartośd

none

będzie oznaczad usunięcie tła

4. Marginesy

Marginesy zewnętrzne

margin

Atrybuty mieszane, czyli jako wartośd podajemy po
kolei wartości marginesów w kolejnośdi: (góra, prawy,
dolny, lewy) lub (górny i dolny, lewy i prawy)

margin-top

Odstęp popmiędzy danym elementem a elementem
poprzedzającym

margin-right

Odstęp od prawej krawędzi strony

margin-bottom

Odstęp popmiędzy danym elementem a elementem
następnym

margin-left

Odstęp od lewej krawędzi strony

Marginesy wewnętrzne

padding

Atrybuty mieszane, czyli jako wartośd podajemy po
kolei wartości marginesów w kolejnośdi: (góra, prawy,
dolny, lewy) lub (górny i dolny, lewy i prawy)

padding-top

Margines górny wewnętrzny

padding-right

Margines prawy wewnętrzny

padding-bottom

Margines dolny wewnętrzny

padding-left

Margines lewy wewnętrzny

5. Obramowania

border-width

Atrybuty mieszane wartości grubości obramowania

Jedna wartośd – dla wszystkich krawędzi

Dwie wartości – krawędzie poziome i pionowe

Cztery wartości – górna, prawa, dolna, lewa

Wartości:

thin | medium | thick | lub wartości

czyli:

Cienkie | średnie | grube | i wiadomo

border-top-width

Szerokośd górnego obramowania

border-right-width

Szerokośd prawego obramowania

border-bottom-width

Szerokośd dolnego obramowania

border-left-width

Szerokosd lewego obramowania

border-style

Atrybuty mieszane stylu obramowania

Jedna wartośd – dla wszystkich krawędzi

Dwie wartości – krawędzie poziome i pionowe

Cztery wartości – górna, prawa, dolna, lewa

Wartości:

none

– brak

hidden

– ukryty

dashed

– linia kreskowa

solid

– linia ciągła

double

– linia ciągła podwójna

groove

– rowek

dotted

– linia kropkowa

ridge

– grzbiet

inset

– ramka

outset

- przycisk

border-top-style

styl górnego obramowania

border-right-style

styl prawego obramowania

border-bottom-style

styl dolnego obramowania

border-left-style

styl lewego obramowania

border-color

Atrybuty mieszane stylu obramowania

Jedna wartośd – dla wszystkich krawędzi

Dwie wartości – krawędzie poziome i pionowe

Cztery wartości – górna, prawa, dolna, lewa

border-top-color

Kolor górnego obramowania

border-right-color

Kolor prawego obramowania

border-bottom-color

Kolor dolnego obramowania

border-left-color

Kolor lewego obramowania

border

Atrybuty mieszane obramowania
Należy wpisad po kolei (ze spacją):

szerokośd

styl

kolor

border-top

Atrybuty mieszane górnego obramowania

border-right

Atrybuty mieszane prawego obramowania

border-bottom

Atrybuty mieszane dolnego obramowania

border-left

Atrybuty mieszane lewego obramowania

obowiązkowo

6. Wykazy

list-style-type

Wygląd wyróżnika wyrazu:

disc

– koło

circle

– okrąg

square

– kwadrat

decimal

- liczby arabskie

lower-alpha

- małe litery

upper-alpha

- duże litery

upper-roman

- duże liczby rzymskie

lower-roman

- małe liczby rzymskie

none

- brak wyróżnika (markera)

list-style-position

Określa, jak będą zawijane wiersze wykazu, które nie
zmieszczą się w jednej linii. Możliwe są tutaj dwa
przypadki:

outside

- wyróżniki na zewnątrz wykazu (domyślnie).

inside

- wyróżniki wewnątrz wykazu.

list-style-image

Wyróżnik obrazkowy, należy podad:

url(ścieżka dostępu)

list-style

Atrybuty mieszane
Natomiast jako "wartości atrybutów" należy wpisad
kolejne wartości (oddzielone spacjami), jakie mają przyjąd
poszczególne atrybuty wykazu. Są to:

typ stylu

zawijanie tekstu

wyróżnik obrazkowy

marker-offset

Odstęp wyróżnika

7. Rozmiary

width

Szerokosd danego elementu

height

Wysokośd danego elementu

max-width

Maksymalna szerokośd danego obiektu

min-width

Minimalna szerokośd danego obiektu

max-height

Maksymalna wysokośd danego obiektu

min-height

Minimalna wysokośd danego obiektu

overflow

Przepełnienie –

Określa co zrobid, gdy zawartośd

elementu nie mieści się w rozmiarach podanych przez
width oraz height.

visible

- pokazanie całej zawartości bez względu na

rozmiary (domyślnie)

hidden

- ukrycie nadmiaru (nie obsługuje Netscape 7 i

Opera 6)

scroll

- suwaki do przewijania (nie obsługuje Opera 6)

auto

- pokazanie suwaków jeśli to konieczne (nie

obsługuje Opera 6)

8. Pozycjonowanie

position: relative;

Polecenie pozycjonowania relatywnego (względnego)
pozwala przesunąd wybrany element w dowolną stronę
względem jego położenia spoczynkowego

position: absolute;

Polecenie pozycjonowania absolutnego (bezwzględnego)
pozwala przesunąd wybrany element w dowolną stronę
względem wybranych brzegów strony lub ewentualnie
ramki albo "obejmującego bloku"

position: fixed;

Polecenie to działa podobnie jak pozycjonowanie
absolutne, z tą różnicą, że pozycja elementu jest zawsze
obliczana względem krawędzi okna przeglądarki
Dodatkowo element taki jest nieruchomy podczas
przewijania strony.

UWAGA! Polecenie nie interpretuje MSIE 7.0.

position: static

Pozycjonowanie statyczne (domyslne)

z-index

Polecenie okresla kolejnośd nakładania elementów
(warstwy) przy czym najpierw musimy określid
pozycjonowanie

display

Sposób wyświetlania elementu:

block

- element będzie wyświetlony w bloku (odstęp z

góry i z dołu)

inline

- element będzie wyświetlony w linii

(sąsiadująco z innymi)

list-item

- element wykazu: <li>...</li>

none

- element nie będzie wyświetlany

visibility

Widzialnośd:

visible

- element będzie widoczny na ekranie

(domyślnie)

hidden

- element zostanie ukryty, a w jego miejsce

pojawi się pusta przestrzeń o takich samych rozmiarach jak
element (gdyby był widoczny)

float

Ustawienie w poziomie:

left

- element ustawiony po lewej stronie, względem

elementów sąsiadujących

right

- element ustawiony po prawej stronie,

względem elementów sąsiadujących

none

- element nie sąsiaduje z innymi

vertical-align

Ustawienie w pionie:

baseline

- wyrównuje linię bazową elementu do linii

bazowej elementu nadrzędnego (domyślnie)

middle

- ustawia element na środku wysokości

elementów sąsiadujących

text-top

- wyrównuje szczyt elementu do szczytu

tekstu elementu nadrzędnego

text-bottom

- wyrównuje podstawę elementu do

podstawy tekstu elementu nadrzędnego

super

- tworzy indeks górny z elementu, ale nie

zmienia wielkości tekstu

sub

- tworzy indeks dolny z elementu, ale nie

zmienia wielkości tekstu

top

- wyrównuje szczyt elementu do szczytu

najwyższego elementu linii, w której się znajduje

bottom

- wyrównuje podstawę elementu do

podstawy elementu położonego najniżej w linii, w
której się znajduje

wartośd w jednostkach długości

- przesunięcie

ponad (wartości dodatnie) lub poniżej (wartości
ujemne) linii bazowej

wartośd procentową

- przesunięcie ponad (wartości

dodatnie) lub poniżej (wartości ujemne) linii bazowej
względem wysokości linii

clear

Przyleganie do elementy pływającego np. obrazka:

left

- lewy bok elementu nie przylega do

poprzedzającego elementu pływającego

right

- prawy bok nie przylega

both

- żaden bok nie przylega

none

- brak ograniczeo

9. Kursory

cursor

Odpowiada za kształt, jaki przybierze wskaźnik myszki,
po naprowadzeniu go na dany element. Możliwe są
tutaj następujące wartości:

crosshair

– krzyżyk

default

- kursor domyślny (strzałka)

pointer

- wskaźnik (wskazuje odsyłacz)

move

- "przesuo"

text

- kursor tekstowy

wait

- "poczekaj"

progress

- "postęp"

help

- kursor pomocy

10. Typy mediów

all

Dla wszystkich urządzeń

aural

Syntezatory mowy (słuchowe arkusze stylów) -
CSS 2.1
wprowadza zamiast tego typ speech

braille

Urządzenia do czytania braillem (dla niewidomych)

embossed

Drukarki brailla

handheld

Urządzenia ręczne (zwykle mały ekran, czarno-białe,
ograniczone pasmo)

Materiały drukowane nieprzezroczyste i podgląd
wydruku

projection

Prezentacje projektorowe lub nadruki na folii
rzutnikowej

screen

Kolorowy ekran komputerowy

tty

Media używające siatki o stałej szerokości znaków
jak dalekopisy, terminale lub przenośne urządzenia z
ograniczonymi możliwościami wyświetlania

Odbiorniki telewizyjne (niska rozdzielczość, kolor,
ograniczone przewijanie, dostępny dźwięk)

SELEKTORY W SKRÓCIE

Wzór

Znaczenie

Opis

Selektory elementów

Kojarzy każdy element.

Selektor uniwersalny

Kojarzy każdy element E (element typu E).

Selektor typu

E F

Kojarzy każdy element F, który jest potomkiem elementu E.

Selektor potomka

E > F

Kojarzy każdy element F, który jest dzieckiem elementu E.

Selektor dziecka

E + F

Kojarzy każdy element F bezpośrednio poprzedzany przez element E.

Selektor braci

Selektory atrybutów

E[atr]

Kojarzy każdy element E z ustawionym atrybutem "atr" (na
jakąkolwiek wartość).

Prosty selektor atrybutu

E[atr="wart"]

Kojarzy każdy element E, którego atrybut "atr" ma wartość dokładnie
"wart".

Selektor atrybutu o określonej wartości

E[atr~="wart"]

Kojarzy każdy element E, którego wartość atrybutu "atr" jest listą
oddzielonych spacjami wartości, a jedna z nich ma dokładnie wartość
"wart".

Selektor atrybutu zawierającego określony
wyraz

E[lang|="en"]

Kojarzy każdy element E, którego atrybut "lang" ma rozdzieloną
łącznikami listę wartości, zaczynającą się (z lewej strony) od "en".

Selektor atrybutu zawierającego łączniki

Selektory specjalne

DIV.wart

Tylko HTML. To samo co DIV[class~="wart"].

Klasy selektorów

E#ident

Kojarzy każdy element E z identyfikatorem ID równym "ident".

Selektor identyfikatora

Selektory pseudoelementów

P:first-line

Kojarzy pierwszą linię akapitu P.

Pierwsza linia

P:first-letter

Kojarzy pierwszą literę akapitu P.

Pierwsza litera

E:before

Wstawia treść przed zawartością elementu E.

Przed...

E:after

Wstawia treść po zawartości elementu E.

Po...

Selektory pseudoklas

E:first-child

Kojarzy element E, jeśli E jest pierwszym dzieckiem jego rodzica.

Pierwsze dziecko

E:link
E:visited

Kojarzy element E, jeżeli E jest kotwicą hiperlinku (odsyłaczem),
której cel (strona docelowa) jeszcze nie został odwiedzony (:link)
lub został już odwiedzony (:visited).

Odsyłacz podstawowy

Odsyłacz odwiedzony

E:active
E:hover
E:focus

Kojarzy E podczas pewnych akcji użytkownika (:active -
aktywacja, :hover - wskazanie, :focus - zogniskowanie).

Aktywacja

Wskazanie myszką

Zogniskowanie

E:lang(c)

Kojarzy element typu E, jeżeli jest napisany w języku c (np.: pl -
polski, en - angielski).

Atrybut języka