Webhelp.pl / Kursy offline





 
  
MENU: Webhelp.pl  Newsy  Artykuły  HTML zone  Skrypty  Download  Forum  Narzędzia online  E-mail


Spis treści:
1. Wstęp
2. Cascading Style Sheet 1
3. Dziedziczenie
4. Selektory
5. CSS - przegladarki




Selektory
4.1. Grupowanie.
Jeżeli
kilka selektorów posiada te same deklaracje, to można je zgrupowanać w jedną
deklarację, a poszczególne elementy będą oddzielić przecinkami. Na przykład:



H1
{ font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }



można
zapisać również jako:



H1,
H2, H3 { font-family: sans-serif }



4.2.
Selektory potomne.
Czasami
autorzy chcą wyróżnić elementy, które zawierają się wewnątrz innych
elementów w dokumencie (np. element EM, który znajduje się w elemencie H1).
Następujące deklaracje:



H1
{ color: red }
EM { color: red }



mimo, że
ich celem jest zmiana koloru tekstu, który znajduje się wewnątrz tych elementów
(H1, EM), to nie będzie widać żadnego efektu w przypadku:



<H1>This
headline is <EM>very</EM> important</H1>



Można to
zmienić poprzez zmianę koloru na niebieski (blue), kiedy znacznik
EM znajdzie się wewnątrz znacznika H1, co pokazuje
poniższy przykład:



H1
{ color: red }
EM { color: red }
H1 EM { color: blue }



Inny
przypadek to:



<H1>This
<SPAN class="myclass">headline
is <EM>very</EM> important</SPAN></H1>



I tutaj
powinien znaleźć się selektor:



H1
* EM



gdyż
selektor w postaci H1 EM nie da żadnego rezultatu, ponieważ
element EM znajduje się wewnątrz jeszcze innego elementu jakim
jest znacznik SPAN.
4.3.
Selektory 'dzieci'
Selektor
'dziecko' występuje wtedy, gdy znacznik 'dziecko' znajduje się wewnątz innego
znacznika. Selektor 'dziecko' składa się z dwóch lub więcej selektorów
oddzielonych znakiem ">".
Poniższa instrukcja ustawia wygląd wszystkich znaczników P, które
są 'dziećmi' w stosunku do znacznika BODY:



BODY
> P { line-height: 1.3 }



Poniższy
przykład przedstawia kombinację selektorów potomnych i selektorów 'dzieci':



DIV
OL>LI P



Opis:
w tym przypoadku znacznik P jest elementem potomnym w stosunku do LI;
znacznik LI musi być 'dzieckiem' znacznika OL;
znacznik OL musi być elementem potomnym w stosunku do DIV.
4.4.
Atrybuty selektorów.
CSS2
pozwala autorom zawężać opisy wyglądu poszczególnych elementów. Na przykład
można opisać wygląd elementów o konkretnych atrybutach zdefiniowanych w
dokumencie.
Atrybuty selektorów mogą wyglądać następująco:



[att]
kiedy
element ma atrybut 'att' i jakąkolwiek jego wartość.


[att=val]
kiedy
wartość atrybutu 'att' jest równa 'val'.


[att~=val]
kiedy
wartość atrybutu 'att' jest słowem lub zbiorem słów oddzielonych
'spacją', a jedno z tych słów jest równe wartości 'val'. Wartość
'val' nie może zawierać 'spacji'.


[att|=val]
kiedy
wartość atrybutu 'att' rozpoczyna się wyrazem określonym przez wartość
'val'.



Dla przykładu,
poniższa instrukcja dotyczy wszystkich znaczników H1, które mają
określony atrybut title:



H1[title]
{ color: blue; }



Poniższy
przykład dotyczy przypadku, kiedy znacznik SPAN musi posiadać
wartość example atrybutu class:



SPAN[class=example]
{ color: blue; }



Inny
przykład pokazuje występowanie dwóch atrybutów w znaczniku SPAN:



SPAN[hello="Cleveland"][goodbye="Columbus"]
{ color: blue; }



Poniższy
przykład pokazuje jak ukryć wszystkie elementy, których wartość atrybutu LANG
jest równa 'fr' (tzn. kiedy język jest francuski):



*[LANG=fr]
{ display : none }



Poniższy
przykład pokazuje wykorzystanie "|=" i dotyczy znaczników,
których wartość atrybutu LANG rozpoczynają się od 'en'
(np.: 'en', 'en-US', 'en-cockney'):



*[LANG|="en"]
{ color : red }



4.5.
Inne
W opisie
wyglądu użytym w HTML autorzy mogą używać kropki (.) jako
alternatywnego rozwiązania w stosunku do "~=" w
przypadku atrybutu o nazwie class. Czyli, DIV.wartosc
jest równoważny zapisowi DIV[class~=wartosc]. Na przykład, można
przypisać informację o wyglądzie do wszystkich elementów, których atrybut class~="wartosc":



*.wartosc
{ color: green }


lub
inaczej:


.wartosc
{ color: green }



Poniższy
przykład dotyczy tylko znacznika H1, którego atrybut class~="wartosc":



H1.wartosc
{ color: green }



Wykonanie
tej instrukcji w pierwszej linii poniższego dokumentu HTML nie spowoduje
ustawienia koloru tekstu na zielony, zaś w drugiej linii tak. Spójrz:



<H1>Ten
tekst nie jest w kolorze zielonym.</H1>
<H1 class="wartosc">Ten tekst jest w kolorze
zielonym.</H1>



W
przypadku większej ilości wartości atrybutu class, każda wartość
musi być oddzielona kropką ".".
Poniższy
przykład pokazuje instrukcję, w której znacznik P powinien mieć
za wartości atrybutu class wyrazy: wart1 i wart2
oddzielone klawiszem spacji:



P.wart1.wart2
{ color: green}



Instrukcja
ta zadziała w przypadku, gdy class="wart1 jest jakas tam i wart2
tez", ale nie zadziała jeżeli class="wart1 jest jakas
tam".
4.6.
Pseudoklasy
:first-child
- występuje wtedy, gdy znacznik jest pierwszym 'dzieckiem' innego znacznika. Na
przykład:



DIV
> P:first-child { text-indent: 0 }



Powyższym
przypadek dotyczy sytuacji gdy znacznik P będzie pierwszym
'dzieckiem' znacznika DIV. Poniższy przykład HTML obrazuje to
chyba najlepiej:



<P>
Ostatni element P przed 'opis'.
<DIV class="opis">
<P> Pierwszy element P wewnątrz 'opis'.
</DIV>



Zaś
przypadku poniższego ona nie dotyczy:



<P>
Ostatni element P przed 'opis'.
<DIV class="opis">
<H2>Note</H2>
<P> Pierwszy element P wewnątrz 'opis'.
</DIV>



:link
- dotyczy odsyłaczy, które nie zostały jak do tej pory wybrane (odwiedzone)
Przykład:



A:link
{ color: green }



jest równoważny



:link
{ color: green}



Istnieje
możliwość zmiany wyglądu wybranych odsyłaczy, np.:



A.inny:link
{ color: red }



oraz w
dokumencie HTML:



<A
href="http://www.domena.com/" class="inny">Odsyłacz
do innej strony</A>



:visited
- dotyczy odsyłaczy, które zostały już wcześniej wybrane (odwiedzone)
Przykład:



A:visited
{ color: yellow }



:hover
- dotyczy odsyłaczy, nad którymi znajduje się kursor (wskaźnik myszy)
Przykład:



A:hover
{ color: blue }



:active
- dotyczy odsyłacza, który został wybrany przez użytkownika; jest to okres
czasu od momentu wybrania odsyłacza (najechania wskaźnikiem myszy nad odsyłacz
i kliknięcie lewym przyciskiem myszy) do momentu przejścia do określonej
przez odsyłacz strony
Przykład:



A:active
{ color: purple }



:focus
- dotyczy odsyłacza, który jest teraz podświetlony (aktywny); dotyczy
klawiatury
Przykład:



A:focus
{ color: white }



Istnieje
możliwość łączenia selektorów dotyczących odsyłaczy, np.:



A:focus:hover
{ color: lime }



Powyższy
zapis określa kolor czcionki odsyłacza w przypadku podświetlenia odsyłacza
przy użyciu klawiatury lub poprzez umieszczenie wskaźnika myszy nad odsyłaczem.
:first-line
- określa styl pierwszej sformatowanej linii danego bloku
Przykład:



P:first-line
{ font-weight: bold }



Powyższy
zapis oznacza, że należy zmienić grubość czcionki w przypadku każdej
pierwszej linii paragrafu.
Należy
pamiętać, że pseudoelement :first-line odnosi się tylko do elementów
blokowych i może on posiadać właściwości odnoszące się do czcionki,
koloru i tła, a także właściwości: 'word-spacing', 'letter-spacing', 'text-decoration',
'vertical-align', 'text-transform', 'line-height', 'text-shadow', 'clear'.
:first-letter
- określa styl pierwszej litery (znaku) w bloku, elemencie
Przykład:



P:first-letter
{ font-size: 4em; text-transform: uppercase }



:before
- określa zawartość umieszczoną przed danym blokiem lub elementem
Przykład:



P:before
{ content: counter(numer, upper-roman) ". " }



Powyższy
przykład numeruje kolejne paragrafy wstawiając przed zawartością każdego z
nich wartość w postaci kolejnej liczby rzymskiej oraz łańcucha ".
".
:after
- określa zawartość umieszczoną po danym bloku lub elemencie
Przykład:



P:after
{ content: "." }



Powyższy
przykład stawia kropkę na końcu każdego paragrafu.
Autor:
Krzysztof Stelmach
[e-mail]
 Kurs udostępnił :http://www.asp.z.pl





Contents  copyright
© 2000-2002 by  Webhelp.pl
All rights reserved.