tekst
Tekst
/* w HTML-u*/ 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: