CSS tablice informatyczne


CSS Tablice informatyczne
WSTAWIANIE STYLÓW
5. Grupowanie selektorów
1. Styl lokalny selektor1, selektor2, & . {cecha: wartość }
kod
&
Pozwala nadać te same cechy kilku selektorom na różnych poziomach
kod opis
hierarchii drzewa dokumentu naraz
Selektor  dowolny znacznik HTML
opis
b, i, u {color: red }
przykład

tekst


przykład
Przykład hierarchii dzrewa dokumentu
2. Rozciągnięcie stylu
&
kod
HTML
Znacznik obejmuje dowolny fragment dokumentu, możemy nim
opis
objąć kilka różnych elementów w lini
HEAD BODY
TITTLE H1 P TABLE
3. Wydzielone bloki
&

kod
B U TR TR
Znacnikiem
możemy edytować większy fragment dokumentu
opis
TD TD TD TD
4. Wewnętrzny arkusz stylów

kod
(& )

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

1. Selektor atrybuta
Wewnętrzny arkusz stylów musi być w ramach . Możemy go
opis
zastosować gdy elementy strony które chcemy sformatować wielokrotnie selektor [atrybut] {cecha: wartość}
kod
się powtarzają
[atrybut] oznacza parametr nadany znacznikowi z poziomu (X)HTML (np.
opis
title= &  )
p[title] {color: red}
5. Zewnętrzny arkusz stylów
przykład
Każdy akapit któremu nadamy atrybut title= &  , powinien być koloru
opis
kod
(& ) czerwonego
przykładu
href= style.css />
2. Selektor atrybutu o określonej wartośdi
(& )
selektor [atrybut= wartość ] {cecha: wartość}
kod
Zewnętrzny arkusz stylów pozwala na odwołanie się do pliku ze stylami Jeśli dany selektor będzie miał nadany atrybut z wartością to przyjmje on
opis opis
css który posiada wcześniej zdefiniowane właściwości selektorów cechy i wartości z CSS-a
p[title= To jest akapit ] {color: red}
przykład
Każdy akapit który będzie posiadać atrybut: title= To jest
6. Kaskadowośd styli opis
akapit będzie on koloru czerwonego
przykładu
Czyli prirytety (ważność styli, pierwszeństwo)
opis
1. Styl lokalny (inline)
2. Rozciągnięcie stylu (span)
3. Selektor atrybutu zawierający określony wyraz
3. Wydzielone bloki (div)
selektor [atrybut~= wyraz ] {cecha: wartość}
kod
4. Wewnętrzny arkusz stylów
Jeśli we właściwości atrybutu danego selektora będzie zadeklarowany
5. Import stylów do wewnętrznego arkusza opis
wyraz, to selektor będzie koloru czerwonego
6. Zewnętrzny arkusz stylów
7. Import stylów do zewnętrznego arkusza p[title~= jest ] {color: red}
przykład
Jeśli w opisie akapitu będzie zawarte słowo:  jest to będzie on koloru
opis
czerwonego
przykładu
SELEKTORY ELEMENTÓW
UWAGA !!
SELEKTORY SPECJALNE
W języku XHTML wszystkie selektory muszą byd pisane małymi literami
UWAGA !!
Te polecenia interpretują tylko: IE, Netscape 6, Firefox, Opera 5
1. Selektor uniwersalny
* {cecha: wartość }
kod
1. Klasy selektorów
Przypisuje cechy wszystkim elementom na stronie
opis
selektor.klasa {cecha: wartość}
kod
IE, Netscape 6, Firefox, Opera 5
interpretuje
Klasy selektorów pozwalają zaoszczędzid często wpisywania stylu inline
opis
Wystarczy w pliku .css po selektorze wpisad kropkę i dowolny wyraz, a w
2. Selektor potomka
pliku .html przy znaczniku należy wpisad class= klasa
Przodek1 przodek2 potomek {cecha: wartość }
kod
p.nazwa_klasy {color: red} /* w CSS */
przykład
Selektor potomka to selektor który leży niżej w hierarchii drzewa
opis

Tekst

/* w HTML-u*/
dokumentu niż selektor przodka
Wystarczy obok znacznika w HTML-u wpisać class= nazwa_klasy
opis
p b { color: red }
przykład
a akapit będzie czerwony
przykładu
jeśli znacznik znajdzie się w ramach akapitu

to będzie on
opis
czerwony, poza znacznikiem

nie będzie on zmieniał koloru
przykładu
2. Selektor identyfikatora
IE, Netscape 6, Firefox, Opera 5
interpretuje
selektor#identyfikator {cecha: wartość}
kod
/* lub */
3. Selektor dziecka
#identyfikator {cecha: wartość}
id= &  /*W HTML-u obok znacznika*/
p > b { color: red }
kod
Występuje tylko raz w hierarchii drzewa dokumentu.
opis
Selektor dziecka leży niżej w hierarchii od rodzica czyli w tym
opis
przykładzie p jest rodzicem a b dzieckiem
IE 7.0, Netscape 6, Firefox, Opera 5
interpretuje
SELEKTORY PSEUDOELEMENTÓW
4. Selektor braci
Pseudoelementy pozwalają odnieśd się do specjalnych elementów struktury dokumentu
brat1 + brat2 {cecha: wartość }
kod
bez konieczności wprowadzania dodatkowych znaczników do kodu zródłowego. Pozwalają
Selektory braci leżą na tym samym poziomie hierarchii drzewa
opis
również automatycznie generowad pewną zawartośd w określonych miejscach dokumentu
dokumentu
IE 7.0, Netscape 6, Firefox, Opera 5
interpretuje
4. Aączenie selektorów
1. Pierwsza linia
Należy wypisad je jeden po drugim aby je połączyd w nas"!epującej
opis
selektor:first-line {cecha: wartość}
kod
kolejności
Polecenie raz zdefiniowane w arkuszu stylów nadaje opisane
opis
1. Selektor typu lub selektor uniwersalny
właściwości pierwszym linijkom danego selektora
2. Selektory atrybutów, selektor identyfikatora, selektor klasy lub
p:first-line {color: red}
przykład
selektory pseudoklas (w dowolnej kolejności)
Wszystkie pierwsze linijki akapitów w dokumencie będą czerwone
opis 3. Selektroy pseudoelementów
przykładu
IE 6, IE 7, Netscape 6, Firefox, Opera 5
interpretuje
WAAŚCIWOŚCI SELEKTORÓW
2. Pierwsza litera Jednostki miary kaskadowych arkuszy stylu
Pisel. Nie zalecane ze względu na brak skalowania. Obowiązuje w
px
selektor:first-letter {cecha: wartość}
kod
przypadku określenia szerokośdi i wysokości obrazów rastowych
Nadaje właściwości dla pierwszej litery tekstu w danym selektorze
opis
(element języków HTML i XHTML)
IE 6, IE 7, Netscape 6, Firefox, Opera 5
interpretuje
Punkt drukarski (1/72 części cala)
pt
Centymetr
cm
3. Tekst, obraz, wartośd atrybutu; przed selektorem
Milimetr
mm
selektor:before {content:  treść
kod
Cal
in
url(obrazek.gif) attr(atrybut);}
Jednostka drukarska em (typowa szerokośd litery m)
em
Polecenie to pozwala na umieszczenie tekstu lub grafiki przed
opis
Jednostka drukarska en (typowa szerokośd litery n)
en
zawartością selektora. Polecenie attr(atrybut) wyświetla wartośd
Rozmiar obliczany względem rozmiaru elementu nadrzędnego lub
atrybutu przypisanego dla selektroa z poziomu HTML %
standardowego rozmiaru danego elementu.
Netscape 6, Firefox, Opera 5
interpretuje
1. Czcionki
3. Tekst, obraz, wartośd atrybutu; po selektorze
Wielkośd czcionki: xx-small | x-small | small | medium | large | x-large
font-size
| xx-large czyli: najmniejsza | mniejsza | mała | średnia | duża |
selektor:after {content:  treść
kod
url(obrazek.gif) attr(atrybut);} 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
Polecenie to pozwala na umieszczenie tekstu , grafiki oraz wartości
opis
długośdi
atrybutu selektora za zawartością selektora.
Rodzaj czcionki (krój np.:  Tmes New Roman ) rodzaje czcionek:
Netscape 6, Firefox, Opera 5 font-family
interpretuje
serif - czcionka szeryfowa ( Times New Roman , Georgia)
sans-serif - czcionka bezszeryfowa (Arial, Veranda)
monospace- czcionka o stałej szerokości znaków (Courier,  Courier
SELEKTORY PSEUDOKLAS
New )
cursive - czcionka mająca pewne cechy pochyłej
Pseudoklasy są dynamiczne tzn. element  nabywa lun  traci pseudoklasę podczas
fantasy - czcionka dekoracyjna
interakcji z użytkownikiem
Rodzaje czcionki podajemy zawsze na koocu jako alternatywe jeśli
użytkownik nie będzie posiadał danej w systemie, zostanie
Pseudoklasy można podzielid na trzy grupy:
wyświetlona czcionka podobna do niej
a) Pseudoklasy linków: :link, :visited
Styl czcionki: normal | italic | oblique czyli: normalna | pochylona |
font-style
b) Pseudoklasy dynamiczne: :active, :hover, :focus
również pochylona
c) Inne: :lang(), :first-child
Waga czcionki czyli pogrubienie. Wartości absolutne : normal | bold |
font-weight
100, 200, 300 czyli: normalna | pogrubiona | wartośd pogrubienia
UWAGA !!
Wariant czcionki normal | small-caps czyli: czcionka normalna |
font-wariant
Pseudoklasy w podpunkcie pierwszym zostały napisane w takiej kolejności aby
kapitaliki czyli tekst napisany wielkimi literami lecz czcionką o wielkości
prawidłowo sformatowały odsyłacze na stronie
małuch liter
Atrybuty mieszane. Jako wartoś możemy wpisad konkretne wartości
font
1. Właściwości i zachowanie odsyłaczy 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
:link {cecha: wartość}
kod
niektóre można pominąd):
Polecenie nadaje określone właściwości dla wszystkich podstawowych
opis
font-style
odsyłaczy, które nie zostały jeszcze odwiedzone przez użytkownika
font-variant
:visited {cecha: wartość}
kod
font-weight
Polecenie nadaje określone właściwości dla wszystkich odsyłaczy które
opis
font-size
zostąły już odwiedzone przez użytkownika
line-height
selektor:hover {cecha: wartość}
kod font-family
Jako wartośd atrybutu możemy również podad:
Polecenie nadaje określone właściwości dla elementów, nad którymi
opis
caption  czcionka do podpisywania kontrolek
znajduje się wskaznik myszki. (IE 6  tylko dla odsyłaczy)
icon  czcionka etykiet ikon
selektor:active {cecha: wartość}
kod
menu - menu
Polecenie nadaje okreslone właściwości dla elementów, które zostały
opis
message-box  okno dialogowe
aktywowane prze użytkownika, np.: kiedy użytkownik wciśnie i
small-caption  etykiety małych kontrolek
przytrzyma przycisk na odsyłaczu, aktywacja będzie miała miejsce do
status-bar  pasek statusu okna
zwolnienia przycisku myszki (IE 6  tylko dla odsyłaczy)
IE,Netscape 6, Firefox, Opera 5
interpretuje
2. Tekst
Jako kolor należy podad definicje koloru np.: #BEBEBE
color
2. Zogniskowanie
Dekoracja teksty none | underline | line-through | overline | blink
text-decoration
selektor:focus {cecha: wartość} czyli : normalnie | podkreślenie | przekreślenie | nadkreślenie |
kod
migotanie tekstu (tylko Netscape, Firefox, Opera 7)
Polecenie pozwala nadad określone atrybuty formatowania dla
opis
Transformacaj tekstu. Jako wartośd należy podad:
text-transform
elementu (np. odsyłacza lub pola formularza), który przyjmuje w danej
none  bez zmian
chwili zoogniskowanie. Przykładowo dotyczy to odsyłacza, wybranego
capitalize  zmiana pierwszych liter wszystkich wyrazów na welke
za pomocą klawisza tabulatora czy pola formularza, w którym znalazł
uppercase  zmiana wszystkich liter na wielkie
się kursor.
lowercase  zmiana wszystkich liter na małe
Netscape 6, Firefox, Opera 7
interpretuje
Wyrównanie tekstu: left | right | center | justify czyli: do lewego
text-align
marginesu | do prawego | na środek | do obu marginesów
3. Pierwsze dziecko
Wcięcie. Jako wcięcie podajemy konkretną wartośd, używając
text-indent
1. Dowolny rodzic
kod
jednostki długości (polecenie tworzy wcięcie w pierwszej linijce
dziecko:first-child {cecha: wartość}
tekstu)
2. Określony rodzic
Odstęp między wierszami
line-height
rodzic > dziecko:first-child {cecha: wartość}
Odstęp między wyrazami
word-spacing
1. Pozwala nadad określone właściwości dla elementów, będących
opis
Odstęp między literami
letter-spacing
pierwzym dzieckiem dowolnego innego elementu. Rodzaj znacznika
rodzica w tym przypadku nie ma znaczenia. Białe znaki
white-space
2. Pozwala określid znacznik rodzica normal -
IE7, Netscape 6, Firefox, Opera 7.2 pre -
interpretuje
nowrap -
pre-wrap -
pre-line -
Atrybuty mieszane obramowania
3. Tło border
Należy wpisad po kolei (ze spacją):
Kolor tła, należy podad definicje koloru
background-color
szerokośd
Obrazek jako tło selektora, należy podad jako wartośd:
backgroun-image
obowiązkowo
styl
url(ścieżka dostępu)
kolor
Polecenie definiuje sposób powtarzania się obrazka
background-repeat
Atrybuty mieszane górnego obramowania
border-top
jako tło:
Atrybuty mieszane prawego obramowania
border-right
Repeat  powtarzanie tła w obu kierunkach
Repeat x  powtarzanie tła w kierunku poziomym Atrybuty mieszane dolnego obramowania
border-bottom
Repeat y  powtarzanie tła w kierunku pionowym
Atrybuty mieszane lewego obramowania
border-left
No repeat  brak powtarzania tła
Zaczepienie tła: scroll | fixed czyli: przewijanie tła | tło
background-attachment
6. Wykazy
nieruchome
Wygląd wyróżnika wyrazu:
list-style-type
Pozycja obrazka jako tło
background-position
disc  koło
1. Jedna wartośd: center | left | right | top | bottom |
circle  okrąg
odległośd od lewej krawędzi
square  kwadrat
2. Dwie wartośdi (oddzielone spacją): left top | right top
decimal - liczby arabskie
| left bottom | right bottom | odległośd od lewej i
lower-alpha - małe litery
prawej
upper-alpha - duże litery
Atrybuty mieszane, jako wartośd należy podad wartośdi
background
upper-roman - duże liczby rzymskie
atrybutów tła w następującej kolejności:
lower-roman - małe liczby rzymskie
1. Kolor tła
none - brak wyróżnika (markera)
2. Tło obrazkowe
Określa, jak będą zawijane wiersze wykazu, które nie
3. Powtarzanie tła list-style-position
zmieszczą się w jednej linii. Możliwe są tutaj dwa
4. Zaczepienie tła
przypadki:
5. Pozycja tła
outside - wyróżniki na zewnątrz wykazu (domyślnie).
Wartośd none będzie oznaczad usunięcie tła
inside - wyróżniki wewnątrz wykazu.
4. Marginesy
Wyróżnik obrazkowy, należy podad:
list-style-image
Marginesy zewnętrzne url(ścieżka dostępu)
Atrybuty mieszane, czyli jako wartośd podajemy po Atrybuty mieszane
margin list-style
kolei wartości marginesów w kolejnośdi: (góra, prawy, Natomiast jako "wartości atrybutów" należy wpisad
dolny, lewy) lub (górny i dolny, lewy i prawy) kolejne wartości (oddzielone spacjami), jakie mają przyjąd
poszczególne atrybuty wykazu. Są to:
Odstęp popmiędzy danym elementem a elementem
margin-top
poprzedzającym typ stylu
Odstęp od prawej krawędzi strony zawijanie tekstu
margin-right
wyróżnik obrazkowy
Odstęp popmiędzy danym elementem a elementem
margin-bottom
Odstęp wyróżnika
następnym marker-offset
Odstęp od lewej krawędzi strony
margin-left
7. Rozmiary
Marginesy wewnętrzne
Atrybuty mieszane, czyli jako wartośd podajemy po Szerokosd danego elementu
padding width
kolei wartości marginesów w kolejnośdi: (góra, prawy,
Wysokośd danego elementu
height
dolny, lewy) lub (górny i dolny, lewy i prawy)
Maksymalna szerokośd danego obiektu
max-width
Margines górny wewnętrzny
padding-top
Minimalna szerokośd danego obiektu
min-width
Margines prawy wewnętrzny
padding-right
Maksymalna wysokośd danego obiektu
max-height
Margines dolny wewnętrzny
padding-bottom
Minimalna wysokośd danego obiektu
min-height
Margines lewy wewnętrzny
padding-left
Przepełnienie  Określa co zrobid, gdy zawartośd
overflow
elementu nie mieści się w rozmiarach podanych przez
5. Obramowania
width oraz height.
Atrybuty mieszane wartości grubości obramowania
border-width visible - pokazanie całej zawartości bez względu na
Jedna wartośd  dla wszystkich krawędzi rozmiary (domyślnie)
Dwie wartości  krawędzie poziome i pionowe
hidden - ukrycie nadmiaru (nie obsługuje Netscape 7 i
Cztery wartości  górna, prawa, dolna, lewa Opera 6)
Wartości: scroll - suwaki do przewijania (nie obsługuje Opera 6)
thin | medium | thick | lub wartości czyli:
auto - pokazanie suwaków jeśli to konieczne (nie
Cienkie | średnie | grube | i wiadomo
obsługuje Opera 6)
Szerokośd górnego obramowania
border-top-width
8. Pozycjonowanie
Szerokośd prawego obramowania
border-right-width
Polecenie pozycjonowania relatywnego (względnego)
position: relative;
Szerokośd dolnego obramowania
border-bottom-width
pozwala przesunąd wybrany element w dowolną stronę
Szerokosd lewego obramowania
border-left-width
względem jego położenia spoczynkowego
Atrybuty mieszane stylu obramowania
border-style
Polecenie pozycjonowania absolutnego (bezwzględnego)
position: absolute;
Jedna wartośd  dla wszystkich krawędzi
pozwala przesunąd wybrany element w dowolną stronę
Dwie wartości  krawędzie poziome i pionowe
względem wybranych brzegów strony lub ewentualnie
Cztery wartości  górna, prawa, dolna, lewa
ramki albo "obejmującego bloku"
Wartości:
Polecenie to działa podobnie jak pozycjonowanie
position: fixed;
none  brak
absolutne, z tą różnicą, że pozycja elementu jest zawsze
hidden  ukryty
obliczana względem krawędzi okna przeglądarki
dashed  linia kreskowa
Dodatkowo element taki jest nieruchomy podczas
solid  linia ciągła
przewijania strony.
double  linia ciągła podwójna
groove  rowek
UWAGA! Polecenie nie interpretuje MSIE 7.0.
dotted  linia kropkowa
Pozycjonowanie statyczne (domyslne)
position: static
ridge  grzbiet
Polecenie okresla kolejnośd nakładania elementów
z-index
inset  ramka
(warstwy) przy czym najpierw musimy określid
outset - przycisk
pozycjonowanie
styl górnego obramowania
border-top-style
Sposób wyświetlania elementu:
display
styl prawego obramowania
border-right-style
block - element będzie wyświetlony w bloku (odstęp z
styl dolnego obramowania
border-bottom-style
góry i z dołu)
styl lewego obramowania inline - element będzie wyświetlony w linii
border-left-style
(sąsiadująco z innymi)
Atrybuty mieszane stylu obramowania
border-color
list-item - element wykazu:

  • ...

  • Jedna wartośd  dla wszystkich krawędzi
    none - element nie będzie wyświetlany
    Dwie wartości  krawędzie poziome i pionowe
    Widzialnośd:
    visibility
    Cztery wartości  górna, prawa, dolna, lewa
    visible - element będzie widoczny na ekranie
    Kolor górnego obramowania
    border-top-color
    (domyślnie)
    Kolor prawego obramowania
    border-right-color
    hidden - element zostanie ukryty, a w jego miejsce
    Kolor dolnego obramowania
    border-bottom-color
    pojawi się pusta przestrzeń o takich samych rozmiarach jak
    Kolor lewego obramowania
    border-left-color element (gdyby był widoczny)
    Ustawienie w poziomie:
    float 9. Kursory
    left - element ustawiony po lewej stronie, względem
    Odpowiada za kształt, jaki przybierze wskaznik myszki,
    cursor
    elementów sąsiadujących
    po naprowadzeniu go na dany element. Możliwe są
    right - element ustawiony po prawej stronie,
    tutaj następujące wartości:
    względem elementów sąsiadujących
    crosshair  krzyżyk
    none - element nie sąsiaduje z innymi
    default - kursor domyślny (strzałka)
    Ustawienie w pionie:
    vertical-align pointer - wskaznik (wskazuje odsyłacz)
    baseline - wyrównuje linię bazową elementu do linii
    move - "przesuo"
    bazowej elementu nadrzędnego (domyślnie)
    text - kursor tekstowy
    middle - ustawia element na środku wysokości
    wait - "poczekaj"
    elementów sąsiadujących
    progress - "postęp"
    text-top - wyrównuje szczyt elementu do szczytu
    help - kursor pomocy
    tekstu elementu nadrzędnego
    text-bottom - wyrównuje podstawę elementu do 10. Typy mediów
    podstawy tekstu elementu nadrzędnego all Dla wszystkich urządzeń
    super - tworzy indeks górny z elementu, ale nie
    aural Syntezatory mowy (słuchowe arkusze stylów) -
    zmienia wielkości tekstu
    CSS 2.1
    sub - tworzy indeks dolny z elementu, ale nie
    wprowadza zamiast tego typ speech
    zmienia wielkości tekstu
    braille Urządzenia do czytania braillem (dla niewidomych)
    top - wyrównuje szczyt elementu do szczytu
    najwyższego elementu linii, w której się znajduje embossed Drukarki brailla
    bottom - wyrównuje podstawę elementu do
    handheld Urządzenia ręczne (zwykle mały ekran, czarno-białe,
    podstawy elementu położonego najniżej w linii, w
    ograniczone pasmo)
    której się znajduje
    wartośd w jednostkach długości - przesunięcie
    print Materiały drukowane nieprzezroczyste i podgląd
    ponad (wartości dodatnie) lub poniżej (wartości
    wydruku
    ujemne) linii bazowej
    projection Prezentacje projektorowe lub nadruki na folii
    wartośd procentową - przesunięcie ponad (wartości
    rzutnikowej
    dodatnie) lub poniżej (wartości ujemne) linii bazowej
    screen Kolorowy ekran komputerowy
    względem wysokości linii
    Przyleganie do elementy pływającego np. obrazka:
    clear
    tty
    Media używające siatki o stałej szerokości znaków
    left - lewy bok elementu nie przylega do
    jak dalekopisy, terminale lub przenośne urządzenia z
    poprzedzającego elementu pływającego
    ograniczonymi możliwościami wyświetlania
    right - prawy bok nie przylega
    tv Odbiorniki telewizyjne (niska rozdzielczość, kolor,
    both - żaden bok nie przylega
    ograniczone przewijanie, dostępny dzwięk)
    none - brak ograniczeo
    SELEKTORY W SKRÓCIE
    Wzór Znaczenie Opis
    Selektory elementów
    * Kojarzy każdy element. Selektor uniwersalny
    E 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
    Kojarzy każdy element E z ustawionym atrybutem "atr" (na
    E[atr] Prosty selektor atrybutu
    jakąkolwiek wartość).
    Kojarzy każdy element E, którego atrybut "atr" ma wartość dokładnie
    E[atr="wart"] Selektor atrybutu o określonej wartości
    "wart".
    Kojarzy każdy element E, którego wartość atrybutu "atr" jest listą
    Selektor atrybutu zawierającego określony
    E[atr~="wart"] oddzielonych spacjami wartości, a jedna z nich ma dokładnie wartość
    wyraz
    "wart".
    Kojarzy każdy element E, którego atrybut "lang" ma rozdzieloną
    E[lang|="en"] Selektor atrybutu zawierającego łączniki
    łącznikami listę wartości, zaczynającą się (z lewej strony) od "en".
    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
    Kojarzy element E, jeżeli E jest kotwicą hiperlinku (odsyłaczem),
    Odsyłacz podstawowy
    E:link
    której cel (strona docelowa) jeszcze nie został odwiedzony (:link)
    E:visited
    lub został już odwiedzony (:visited). Odsyłacz odwiedzony
    Aktywacja
    E:active
    Kojarzy E podczas pewnych akcji użytkownika (:active -
    E:hover Wskazanie myszką
    aktywacja, :hover - wskazanie, :focus - zogniskowanie).
    E:focus
    Zogniskowanie
    Kojarzy element typu E, jeżeli jest napisany w języku c (np.: pl -
    E:lang(c) Atrybut języka
    polski, en - angielski).


    Wyszukiwarka

    Podobne podstrony:
    Linux Tablice informatyczne
    zasady sc i zasady etyki ksc tablica informacyjna
    Tablice Informatyczne Oracle PL SQL
    tablica informacyjna

    więcej podobnych podstron