CSS
Tablice informatyczne
WSTAWIANIE STYLÓW
1. Styl lokalny
2. Rozciągnięcie stylu
kod
<selektor style=”cecha: wartość…”>…</selektor>
opis
Selektor – dowolny znacznik HTML
przykład
<p style=”color: red”>tekst</p>
kod
<span style=”cecha: wartość”>…</span>
opis
Znacznik <span> obejmuje dowolny fragment dokumentu, możemy nim
objąć kilka różnych elementów w lini
3. Wydzielone bloki
kod
<div stlye=”cecha: wartość”>…</div>
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
<head>
(…)
<link rel=”Stylesheet” type=”text/css”
href=”style.css”/>
(…)
</head>
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
p
jest rodzicem a
b
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-small | x-small | small | medium | large | x-large
| xx-large
czyli:
najmniejsza | mniejsza | mała | średnia | duża |
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
- 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
px
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)
pt
Punkt drukarski (1/72 części cala)
cm
Centymetr
mm
Milimetr
in
Cal
em
Jednostka drukarska em (typowa szerokośd litery m)
en
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:
center | left | right | top | bottom |
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
tv
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.
E
Kojarzy każdy element E (element typu E).
E F
Kojarzy każdy element F, który jest potomkiem elementu E.
E > F
Kojarzy każdy element F, który jest dzieckiem elementu E.
E + F
Kojarzy każdy element F bezpośrednio poprzedzany przez element E.
Selektory atrybutów
E[atr]
Kojarzy każdy element E z ustawionym atrybutem "atr" (na
jakąkolwiek wartość).
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"].
E#ident
Kojarzy każdy element E z identyfikatorem ID równym "ident".
Selektory pseudoelementów
P:first-line
Kojarzy pierwszą linię akapitu P.
P:first-letter
Kojarzy pierwszą literę akapitu P.
E:before
Wstawia treść przed zawartością elementu E.
E:after
Wstawia treść po zawartości elementu E.
Selektory pseudoklas
E:first-child
Kojarzy element E, jeśli E jest pierwszym dzieckiem jego rodzica.
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).
Wyszukiwarka
Podobne podstrony:
Tablice Informatyczne CSS
Tablice informatyczne CSS CheatSheet
Tablice Informatyczne CSS
05 0 dzienik budowy, tablica informacyjna Dz U 2002 nr108poz953
html tablice informatyczne helion F562QEMR3Y6PKJHIGA2JQ7ZSV4JT3ZIQ6266GGQ
załacznik 1 zapyt. ofert. na tablice informacyjne Pługa 2012, Przegrane 2012, Rok 2012, poczta 08.08
access 2003 tablice informatyczne helion R5FMD3WVP2A4HQ6Q6NK6XH3AWD76HXYJGHWY7AI
2012 11 14 zapytanie ofertowe tablice informacyjneid 28108
Zmienne tablicowe, INFORMATYKA, INFORMATYKA sem. III, 2.Prograowanie strukturalne i obiektowe
Zapytanie cenowe tablice informacyjne PCV, Przegrane 2012, Rok 2012, mail 20.12 Milicz 52 tablice pł
c++ tablice informatyczne(helion)1 XAPJAUPZ7P4A7LZKARWEMELBWAHIPG7T4KYP46Y
TABLICE w c++, INFORMATYKA
ZAPYTANIE OFERTOWE tabliczka informacyjna przedszkole (1), Przegrane 2012, Rok 2012, mail 18.05 Wart
Zapytanie ofertowe nr 6 wykonanie 10 tablic informacyjnych do Zielonej Ścieżki Zdrowia, Przegrane 2
Zmiana zapytania ofertowgo na tablice informacyjne ul. Pługa 2012, Przegrane 2012, Rok 2012, poczta
Tablice informacyjne
informacja o wyborze tablice informacyjne
załacznik 2 zapyt. ofert. na tablice informacyjne Pługa 2012, Przegrane 2012, Rok 2012, poczta 08.08
więcej podobnych podstron