Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Selektory

Email Drukuj PDF

Tematy: Selektory proste | Selektory uniwersalne | Selektory potomka | | Selektory rodzeństwa | Selektor atrybutu | Identyfikatory | Klasy | Pseudoklasy | Pseudoelementy | Grupowanie selektorów

Pojęcie „selektor”, które do tej pory wystąpiło kilka razy w niniejszym kursie, jest jednym z najważniejszych elementów składowych CSS. To właśnie dzięki selektorowi możemy przypisać wybranemu elementowi konkretny styl. Selektory wykorzystywane podczas tworzenia własnych arkuszy stylów mogą przybierać różne formy. Specyfikacja przewiduje wykorzystanie następujących rodzajów selektorów:

  • selektory proste,

  • selektory uniwersalne,

  • selektory potomka,

  • selektory dziecka,

  • selektory sąsiednie lub rodzeństwa,

  • selektory identyfikatora,

  • selektory klasy,

  • pseudoklasy,

  • pseudoelementy.

Selektory proste

Konstrukcja stylu wykorzystującego selektor prosty nie należy do zbyt skomplikowanych i wygląda tak jak na poniższym przykładzie.

P

{

color:red;

font-size:14pt;

}

Jak widzisz, selektorem jest znacznik języka XHTML/HTML przypisany do elementu, który chcesz w danym momencie formatować. Styl zdefiniowany dla przykładowego selektora P będzie odnosił się wyłącznie do akapitów zamkniętych w znacznikach <p></p> i nie będzie wpływał na pozostałe elementy strony WWW.

Selektory uniwersalne

Styl zaprezentowany poniżej jest przykładem selektora prostego i odnosi się tylko do elementów zamkniętych pomiędzy znacznikami <p></p>.

P

{

color:red;

font-size:14pt;

}

W związku z tym wszystkie inne elementy, np. nagłówki czy tabele, nadal będą formatowane w sposób domyślny. Oczywiście sytuacja taka jest zupełnie poprawna i dzięki temu praca z CSS jest bardzo prosta i przyjemna. Jeden wpis i mamy załatwione wszystkie akapity — to jest to!

Zdarza się, że zachodzi potrzeba zdefiniowania jakiegoś typu formatowania w ten sposób, aby zadziałał on na cały dokument. Bardzo dobrym przykładem takiej sytuacji może być tło, które zazwyczaj powinno być identyczne dla całego dokumentu. Odpowiedni styl może przyjąć następującą postać:

*

{

background-color:white;

}

Warto zwrócić uwagę na to, że selektorem jest gwiazdka. Symbol ten jest spotykany przy listowaniu zawartości folderów czy też zakładaniu filtrów.

dir *.txt

copy *.* c:\temp

W każdym przypadku gwiazdka zastępowała jakieś elementy, np. w pierwszym przykładzie polecenie dir wyświetla wszystkie pliki z rozszerzeniem txt. Natomiast drugi przypadek kopiuje wszystkie pliki z bieżącej lokalizacji do katalogu temp na dysku C:\.

Również kaskadowe arkusze stylów mają podobne podejście do roli gwiazdki, dzięki czemu istnieje możliwość zdefiniowania uniwersalnych stylów. Innymi słowy, użycie gwiazdki zwalnia z wypisywania nazw poszczególnych selektorów.

Przyjrzyjmy się pierwszej sytuacji, w której zależało mi na tym, aby ustawić kolor czerwony dla wszystkich akapitów, nagłówków stopnia pierwszego i list na przykładowej stronie.

P

{

color:red;

}

UL

{

color:red;

}

H1

{

color:red;

}

Definiowanie w ten sposób właściwości wszystkich elementów mija się z celem, ponieważ jest bardzo pracochłonne. Na szczęście, używając selektora uniwersalnego, można to znacznie uprościć, a cały arkusz skrócić do jednego wpisu. Przykład widoczny poniżej pozwala na uzyskanie identycznego efektu końcowego jak we wcześniejszym listingu. 

*

{

color:red;

}

Innym selektorem uniwersalnym jest BODY.

BODY

{

color:red;

}

Uniwersalność BODY wynika z jego roli w hierarchii dokumentu. Dokładnie chodzi o funkcję dziedziczenia (pojęcie dziedziczenia zostało opisane w oddzielnym rozdziale kursu) pewnych wartości ze znaczników stojących wyżej.

Selektory "potomka"

W przypadku selektora „potomka” najlepszym rozwiązaniem jest rozpoczęcie jego omawiania od konkretnego przykładu. Dzięki temu działanie tej konstrukcji powinno być znacznie bardziej zrozumiałe.

Przykładowy styl dla nagłówka stopnia pierwszego wygląda tak jak w poniższym przykładzie:

H1

    {

    font-size:20pt;

    }

Jeżeli chcemy, aby jakiś fragment tego nagłówka był sformatowany według innych zasad, to należy arkusz uzupełnić o następującą konstrukcję:

H1 SPAN

    {

    font-size:10pt;

    }

Kod XHTML/HTML potrafiący skorzystać z selektora „potomka” będzie wyglądał następująco:

<h1>Nagłówek stopnia pierwszego</h1>

<h1>Nagłówek stopnia pierwszego <span>w którym zastosowałem selektor potomka</span></h1>

Pierwszy z przykładowych nagłówków stopnia pierwszego ma wysokość równą 20pt. W przypadku drugiego nagłówka użyto selektora potomka, dzięki czemu połowa tekstu ma wysokość 20pt — czyli tak jak pierwszy nagłówek, natomiast druga część została wyświetlona czcionką o wysokości równej 10pt.

Poniżej zamieszczam jeszcze jeden przykład zastosowania selektora „potomka”.

Arkusz stylów ma następującą postać:

P

{

font-size:14pt;

}

P SPAN

{

font-style:italic;

font-size:20pt;

}

Przykładowy kod XHTML/HTML wykorzystujący selektor potomka zadeklarowany powyżej może przybrać następującą formę.

<p>

Przykładowy kod XHTML/HTML wykorzystujący <span>selektor potomka</span> zadeklarowany powyżej może przybrać następującą postać.

</p>

Również tym razem efekt działania selektora potomka zobaczymy tylko dla tej części akapitu, która dodatkowo jest zamknięta w znacznik <span></span>.

Selektory "dziecka"

Selektory dziecka są wynikiem zależności panujących pomiędzy poszczególnymi znacznikami języka HTML. Przykład opisanego selektora znajduje się poniżej.

P > SPAN

{

font-style:italic;

text-decoration:underline;

color:green;

}

Dany styl zadziała w przypadku, gdy wewnątrz bloku tekstu zostanie umieszczony znacznik <span></span>.

<p>Dowolny tekst, w którym widać efekt działania <span>selektora dziecka</span>.</p>

W tym przypadku <span></ span > jest „dzieckiem” <p></p> i tylko w takiej sytuacji zostanie odpowiednio sformatowany. Jeżeli rozbudujemy powyższy przykład o następne linie zgodnie z poniższym listingiem, to formatowaniu zostanie poddany tylko tekst znajdujący się wewnątrz znacznika <span></span>, który z kolei ograniczony jest przez <p></p>, natomiast inne elementy, które nie są „dziećmi” <p></p>, pomimo że również zamknięte są w <span></span>, pozostaną bez zmian.

<p>Dowolny tekst, w którym widać efekt działania <span>selektora dziecka</span>.</p>

<span>Tekst zamknięty wewnątrz znacznika span, który nie jest formatowany za pomocą selektora dziecka.</span>

Selektor „dziecka” nie jest poprawnie obsługiwany przez starsze wersje przeglądarek (m.in. Internet Explorer). Na rysunku 2.1 zamieściłem przykład działania powyższego listingu, tak by osoby używające starych przeglądarek mogły zobaczyć, w jaki sposób element ten powinien działać. Jednocześnie radzę, abyś obowiązkowo przeprowadził aktualizację swojej przeglądarki do nowszej wersji.

Rysunek 2.1. Przykład działania selektora „dziecka”

Selektory "rodzeństwa"

Również w przypadku tego typu selektorów opieramy się na zależnościach obowiązujących w języku XHTML/HTML. Na podstawie tego rodzaju selektora możemy przypisać styl elementowi bezpośrednio sąsiadującemu z innymi. By warunek został spełniony, oba selektory muszą mieć wspólnego „rodzica”. Przykładem takiego selektora jest poniższy listing.

P + SPAN

{

font-style:italic;

text-decoration:underline;

color:green;

}

Zgodnie z tym, co napisałem powyżej, znaczniki <p> oraz <span> muszą ze sobą sąsiadować.

<p>To jest tekst akapitu.</p> <span>A tutaj działa selektor rodzeństwa.</span>

<span>Natomiast ten tekst, pomimo że jest zamknięty w span, już nie jest formatowany, bo nie sąsiaduje bezpośrednio z akapitem.</span>

W powyższym kodzie wyraźnie widać, iż blok tekstu sąsiaduje ze znacznikiem <span>, natomiast drugi znacznik <span> bezpośrednio nie sąsiaduje z <p>.

Podobnie jak selektor „dziecka”, również ten przykład nie działa w starszych przeglądarkach (np. Internet Explorer). Osoby korzystające ze starszych przeglądarek na poniższym rysunku 2.2 mogą sprawdzić efekt działania przykładu.

Rysunek 2.2. Przykład działania selektora „rodzeństwa”

Selektor atrybutu

Niemal każdy znacznik języka XHTML/HTML może być uzupełniony o atrybuty przypisane do niego przez specyfikację, np.

<h1 title=”czerwony”>Nagłówek stopnia pierwszego</h1>

Dzięki kolejnej odsłonie specyfikacji CSS możemy tak skonstruować selektor, aby odnosił się on do konkretnego znacznika i jego atrybutu. Rozwiązanie to nosi nazwę selektora atrybutu.

Przykład arkusza stylów:

H1[title]

{

color:red;

}

Przykład kodu:

<h1 title="czarny">Pierwszy nagłówek z atrybutem</h1>

<h1 title="czerwony">Drugi nagłówek z atrybutem</h1>

<h1>Trzeci nagłówek bez atrybutów</h1>

Efektem działania powyższych listingów będzie wyświetlenie wszystkich nagłówków stopnia pierwszego z atrybutem title za pomocą koloru czerwonego. Natomiast nagłówki bez atrybutu zachowają domyślne formatowanie.

Idąc za ciosem, można jeszcze dokładniej przypisać formatowanie i uzależnić je od wartości, jaką przybiera wybrany atrybut.

H1[title=czerwony]

{

color:red;

}

Przykład kodu:

<h1 title="czarny">Pierwszy nagłówek z atrybutem</h1>

<h1 title="czerwony">Drugi nagłówek z atrybutem</h1>

<h1>Trzeci nagłówek bez atrybutów</h1>

W tym przypadku tylko drugi z przykładowych nagłówków będzie wyświetlony za pomocą koloru czerwonego, ponieważ tylko jego atrybut oraz wartość odpowiadają definicji stylu w przykładowym arkuszu.

Użytkownicy starszych przeglądarek, w których nie działa omawiany selektor, mogą zobaczyć efekt jego działania na rysunku 2.3.

Rysunek 2.3. Przykład działania selektora atrybutu

Identyfikatory

Dotychczas opisane selektory pozwalały na przypisanie danego formatowania wszystkim elementom odpowiadającym użytemu selektorowi. Przykład stylu zamieszczony poniżej określał, iż wszystkie akapity powinny zostać sformatowane za pomocą czcionki o kolorze zielonym i wysokości 14pt.

P

{

color:green;

font-size:14pt;

}

Twórcy kaskadowych arkuszy stylów od samego początku dostrzegli konieczność zróżnicowania podobnych elementów, w efekcie czego wprowadzili identyfikator — id.

Zasada działania identyfikatora, co widać na poniższym przykładzie, jest stosunkowo prosta.

P

{

color:green;

font-size:14pt;

}

P#pochyly

{

font-style:italic;

font-size:20pt;

}

Odpowiedni wpis składa się z selektora, do którego planujemy przypisać identyfikator, oraz z nazwy poprzedzonej znakiem #. Wywołanie tak przygotowanego identyfikatora ma następującą postać:

<p>Blok tekstu o kolorze zielonym i czcionce 14pt</p>

<p id="pochyly">Blok tekstu o kolorze zielonym i czcionce 20pt</p>

<p>Blok tekstu o kolorze zielonym i czcionce 14pt</p>

Jeżeli chcemy przygotować identyfikator uniwersalny, którego użycie jest możliwe w dowolnym elemencie strony, to powinien on przybrać następującą postać:

#czerwony

{

color:red;

}

Wywołanie takiego identyfikatora wygląda dokładnie tak samo jak poprzednio, z tą drobną różnicą, że może nastąpić w dowolnym znaczniku.

<p id=”czerwony”>Treść akapitu</p>

<h1 id=”czerwony”>Treść nagłówka stopnia pierwszego</h1>

<td id=”czerwony”>Tekst wewnątrz komórki</td>

Klasy

Klasy są kolejnym podstawowym pojęciem w kaskadowych arkuszach stylów. Budowa klasy ma następującą postać:

selektor.nazwaklasy

    {

    font-size:12 pt;

    color:green;

    }

Zwróć uwagę na fakt występowania kropki po selektorze lub przed nazwą klasy. Jest to element obowiązkowy i bez tego dalsza praca nie miałaby większego sensu.

Podobnie jak w przypadku identyfikatora, tak zdefiniowana klasa może zostać użyta tylko w tym selektorze, do którego została przypisana, np.:

p.moja

{

color:green;

font-size:14pt;

}

Powinna zostać wywołana w znaczniku <p></p> w następujący sposób:

<p class=”moja”>Treść akapitu</p>

Jak widać na powyższym przykładzie, klasa jest wywoływana w dokumencie za pomocą atrybutu class, który może zostać umieszczony niemal w dowolnym znaczniku kodu HTML.

Specyfikacja CSS przewiduje możliwość zdefiniowana takiej klasy, której użycie jest możliwe w różnych znacznikach. Odpowiednia konstrukcja może mieć następującą postać:

.moja

{

color:red;

font-size:12pt;

font-style:italic;

}

Wywołanie tak określonej klasy również odbywa się za pomocą atrybutu class.

<p class=”moja”>Przykład akapitu z określoną klasą</p>

<ol class=”moja”>

<h1 class=”moja”>Przykład nagłówka z określoną klasą</h1>

Dokładniejsza analiza uniwersalnych definicji klas oraz identyfikatorów prowadzi do wniosku, że w działaniu niczym się one nie różnią. Jednak specyfikacja zakłada, że dany identyfikator może wystąpić tylko raz w całym dokumencie, natomiast klasę można powielać do woli. Oczywiście najczęściej używane przeglądarki w tym przypadku nie są do końca zgodne ze specyfikacją, dlatego identyfikatorów, podobnie jak klas, możemy używać tyle razy, ile razy uznamy to za konieczne. Działanie takie jest błędem, ale nie wpływa na poprawność działania strony.

Poniżej znajduje się prosty przykład, w którym wyraźnie widać zasadę działania klas w dokumencie XHTML/HTML.

Listing arkusza CSS

P

{

font-size:14pt;

color:green;

}

.moja

{

font-style:italic;

font-size:20pt;

color:red;

}

Listing fragmentu kodu XHTML/HTML

<p>Blok tekstu o kolorze zielonym i czcionce 14pt</p>

<p class="moja">Blok tekstu, w którym użyłem klasy o nazwie .moja</p>

<p>Blok tekstu o kolorze zielonym i czcionce 14pt</p>

<ol class="moja">

  <li>lista, w której użyłem klasy o nazwie .moja</li>

  <li>lista, w której użyłem klasy o nazwie .moja</li>

</ol>

Pseudoklasy

Specyfikacja CSS przewiduje kilka ściśle określonych klas pozwalających na formatowanie niektórych elementów dokumentu. Do najpopularniejszych z całą pewnością zaliczają się pseudoklasy odsyłaczy :link oraz :visited. Poniżej zamieściłem przykładowy arkusz wykorzystujący obie pseudoklasy w połączeniu z selektorem A.

A:link

    {

    color:red;

    }

A:visited

    {

    color:green;

    }

Szalenie istotnym elementem w tej konstrukcji jest dwukropek występujący pomiędzy selektorem a nazwą klasy. Pierwsza z prezentowanych pseudoklas, A:link, odpowiada za wygląd hiperłącza, jeżeli nie zostało ono jeszcze odwiedzone. Przykładowa definicja sformatuje odnośnik za pomocą koloru czerwonego.

Element A:visited odpowiada za formatowanie hiperłącza już odwiedzonego i w naszym przypadku taki odnośnik będzie miał kolor zielony.

Oczywiście zdefiniowane pseudoklasy nie kończą się na dwóch zaprezentowanych powyżej i specyfikacja przewiduje jeszcze kilka dodatkowych pseudoklas.

Dzięki pseudoklasie :hover możliwe jest dokonanie zmiany pewnych elementów po najechaniu na nie urządzeniem wskazującym (np. myszą). Na pewno każdy widział takie strony WWW, na których odnośniki tekstowe zmieniały kolor po najechaniu na nie kursorem myszy; to właśnie dzięki tej pseudoklasie. Oczywiście odnośnik to nie jedyny przykład wykorzystania :hover.

Pseudoklasa :hover nie jest obsługiwana przez stare wersje przeglądarki Netscape Navigator. Ignorują one jej działanie i element nie zmienia formatowania po najechaniu na niego kursorem myszy. Oczywiście można ją stosować, gdyż nie ma ona wpływu na sam wygląd domyślnego odnośnika.

Poniżej znajduje się przykład prostego arkusza stylów odpowiedzialnego za formatowanie wyglądu wszystkich odnośników w dokumencie XHTML/HTML.

/* Definicja odsyłacza podstawowego*/

 

A

    {

    font-size:12pt;

    text-decoration:none;

    }

A:link

    {

    color:navy;

    }

A:visited

    {

    color:green;

    }

A:hover

    {

    color:red;

    text-decoration:underline;

    }

W pierwszej definicji określono te elementy, które są wspólne dla wszystkich odsyłaczy. Następne wpisy formatują odsyłacze przy wykorzystaniu pseudoklas i nadają im specyficzne cechy wyglądu.

Niestety, życie bywa trudne i większość nowoczesnych stron wymaga stosowania na nich odnośników o zróżnicowanej wielkości lub wyglądzie. Na szczęście w specyfikacji CSS znajdziemy sposób na zróżnicowanie odnośników na stronie. Do wykonania tego zadania wystarczy połączyć zdobyte wcześniej informacje o klasach oraz pseudoklasach.

Poniżej znajduje się listing arkusza styków, w którym uwzględniono dwa rodzaje odnośników.

/* Definicja odsyłacza podstawowego*/

A

    {

    font-size:24pt;

    text-decoration:none;

    }

A:link

    {

    color:navy;

    }

A:visited

    {

    color:green;

    }

A:hover

    {

    color:red;

    text-decoration:underline;

    }

/* Definicja odsyłacza mniejszego*/

A.maly

    {

    font-size: 12pt;

    }

W kodzie strony w celu zróżnicowania rozmiaru czcionki w odnośnikach należy skorzystać z klasy o nazwie maly.

<ul>

<li><a href="http://danowski.pl" class="maly">Bartosz Danowski</a></li>

<li><a href="http://onet.pl">Portal Onet.pl</a></li>

<li><a href="http://helion.pl">Wydawnictwo Helion</a></li>

</ul>

Można również określić oddzielne formatowanie dla każdego stanu odnośnika. Poniżej znajduje się konkretny przykład.

/*Normalne odnosniki*/

A

    {

    font-size:24pt;

    text-decoration:none;

    }

A:link

    {

    color:navy;

    }

A:visited

    {

    color:green;

    }

A:hover

    {

    color:red;

    text-decoration:underline;

    }

 

/*Male odnosniki*/

A.maly

    {

    font-size: 12pt;

    }

A.maly:link

    {

    color:silver;;

    }

A.maly:visited

    {

    color:yellow;

    }

A.maly:hover

    {

    color:black;

    text-decoration:none;

    }

Kolejną dostępną pseudoklasą jest :active, która pozwala nadać dowolne formatowanie elementowi po nakierowaniu na niego wskaźnika myszy i wciśnięciu przycisku, ale przed jego zwolnieniem. Pseudoklasy tej można używać jako uzupełnienia definicji odnośników, o których pisałem wcześniej, lub jako elementu poprawiającego czytelność formularzy.

A:active

    {

    color:silver;

    }

Jeżeli chcemy, by właśnie wyświetlany odsyłacz z menu był formatowany innym kolorem, to z pomocą może nam przyjść kolejna pseudoklasa, o nazwie :focus. Definicja takiej pseudoklasy wygląda następująco:

A:focus

    {

    color:braun;

    }

W drugiej specyfikacji kaskadowych arkuszy stylów znajdują się jeszcze pseudoklasy :lang oraz :first-child. Pierwsza z nowych klas z założenia miała pozwolić na formatowanie wielojęzykowych dokumentów.

<p lang="pl">Jak się masz</p>

<p lang="en">How are you</p>

Przyjrzyjmy się powyższemu listingowi, na którym zostały zadeklarowane dwa akapity. Pierwszy z nich ma przypisany atrybut lagn=”pl” i powinien zawierać tekst w języku polskim. Drugi natomiast ustawia język akapitu jako angielski. Dla tak przygotowanego dokumentu HTML za pomocą pseudoklasy :lang możemy w prosty sposób przypisać dowolne formatowanie.

P

{

font-size:14pt;

color:navy;

}

P:lang(pl)

{

font-weight:bold;

color:black;

}

P:lang(en)

{

font-style:italic;

}     

Rysunek 2.4. Przykład działania pseudoklasy :lang dla posiadaczy starszych przeglądarek

Bardzo ciekawą pseudoklasą jest :first-child, która umożliwia określenie formatowania dla pierwszego dziecka wybranego elementu. Przykładowy kod może mieć następującą postać:

P

{

font-size:14pt;

}

P:first-child

{

font-size:10pt;

font-styl:italic;

}

Natomiast kod dokumentu może wyglądać mniej więcej tak:

<div>

<p>Pierwszy akapit w ramach większego bloku DIV</p>

<p>Drugi akapit w ramach większego bloku DIV</p>

</div>

<div>

<p>Pierwszy akapit w ramach większego bloku DIV</p>

<p>Drugi akapit w ramach większego bloku DIV</p>

</div>

Powyższy arkusz stylów dla każdego akapitu ustawia czcionkę 14-punktową. Dodatkowo pierwszy akapit w bloku DIV będzie wyglądał nieco inaczej, gdyż użyta czcionka będzie pochyła i o wysokości 10 punktów.

Pseudoklasa :first-child jest poprawnie obsługiwana przez nowe przeglądarki. Natomiast użytkownicy starszych przeglądarek efekt działania tego elementu mogą zobaczyć na rysunku 2.5.

Rysunek 2.5. >Efekt działania pseudoklasy :first-child

Pseudoelementy

Ciekawą grupę selektorów stanowią pseudoelementy, które pozwalają nam na przypisanie kolejnych wymyślnych stylów do elementów strony WWW.

Pseudoelement :first-letter pozwala na formatowanie pierwszej litery w bloku tekstu. Przykładowy arkusz spowoduje powiększenie pierwszej litery do wielkości 100 punktów i nadanie jej koloru czerwonego.

P

    {

    color:navy;

    font-size:30pt;

    }

P:first-letter

    {

    color:red;

    font-size:100pt;

    }

Efektem działania powyższego arkusza stylów będzie powiększona pierwsza litera każdego akapitu występującego w dokumencie XHTML/HTML.

<p>Pierwsza litera tego akapitu zostanie powiększona za pomocą pseudoelementu :first-letter.</p>

Oczywiście nic nie stoi na przeszkodzie, by pseudoelement :first-letter stosować z innymi znacznikami. Przykładem takiego postępowania może być poniższy listing, na którym połączyłem ten element z nagłówkiem stopnia pierwszego.

H1

    {

    color:navy;

    font-size:30pt;

    }

H1:first-letter

    {

    color:red;

    font-size:100pt;

    }

Przykładowy kod XHTML/HTML:

<h1>Księgarnia helion.pl</h1>

Kolejnym pseudoelementem jest :first-line, który w przeciwieństwie do poprzednika obejmuje formatowaniem całą pierwszą linię, a nie tylko pierwszą literę.

P

    {

    color:navy;

    font-size:12pt;

    }

P:first-line

    {

    color:red;

    font-size:20pt;

    font-weight:bold;

    }

Przykładowy kod XHTML/HTML:

<p>Kolejnym pseudoelementem jest :first-line, który w przeciwieństwie do poprzednika obejmuje formatowaniem całą pierwszą linię, a nie tylko pierwszą literę.</p>

Zarówno :first-letter, jak i :first-line są poprawnie obsługiwane przez najpopularniejsze przeglądarki stron WWW.

Poza :first-letter oraz :first-line w specyfikacji umieszczono jeszcze dwa inne pseudoelementy: :after oraz :before. Oba elementy służą do umieszczania tekstu przed i za formatowanym elementem strony. Poniżej zamieszczam odpowiedni przykład.

P:before

    {

    content:"WAŻNA WIADOMOŚĆ";

    font-size:15pt;

    font-style:italic;   

    font-weight:bold;

    }

P:after

    {

    content:"AUTOR Bartosz Danowski";

    font-size:15pt;

    font-style:italic;

    font-weight:bold;

    }

Przykładowy kod XHTML/HTML:

<p>Poza :first-letter oraz :first-line w specyfikacji umieszczono jeszcze dwa inne pseudoelementy: :after oraz :before. Oba elementy służą do umieszczania tekstu przed i za formatowanym elementem strony. </p>

Oba prezentowane pseudoelementy — :after oraz :before — działają poprawnie w najnowszych wersjach popularnych przeglądarek. Użytkownicy MS Internet Explorer efekt działania tej funkcji mogą zobaczyć na rysunku 2.6.

Rysunek 2.6. Przykład działania pseudoelementów :after oraz :before

Grupowanie selektorów

Na początek prosty przykład arkusza stylów określającego kolor dla nagłówków i akapitów.

H1

{

color:green;

}

H2

{

color:green;

}

P

{

color:green;

}

Dzięki temu, że selektory można dowolnie grupować, jeżeli pewne wartości mają obowiązywać dla każdego z nich, powyższy zapis można znacznie uprościć. Poszczególne selektory wchodzące w skład grupy rozdzielamy przecinkami. Poniżej przedstawiono przykład zgrupowanych selektorów h1, h2 oraz p.

H1, H2, P

    {

    color:green;

    }

Styl powyższego przykładu spowoduje nadanie koloru zielonego wszystkim nagłówkom stopnia pierwszego i drugiego oraz blokom tekstu. Oczywiście nic nie stoi na przeszkodzie, by do powyższego przykładu dodać kolejne style, np. bloku tekstu, określające wysokość czcionki jako 15 punktów.

H1, H2, P

    {

    color:red;

    }

P

    {

    font-size:15pt;

    }

Taka definicja stylów użyje koloru czerwonego do formatowania zgrupowanych elementów oraz czcionki o wysokości 15 punktów w każdym bloku tekstu.

Jeżeli zamierzasz grupować różne rodzaje selektorów uzupełnione o dodatkowe elementy, np. klasy, identyfikatory czy pseudoklasy lub pseudoelementy, to musisz pamiętać o tym, aby zachować prawidłowy zapis takich definicji. Na początku przyjrzyjmy się następującemu fragmentowi kodu XHTML/HTML:

<div id="moja">

  <h1>Pierwsza lista</h1>

  <ul>

    <li>Pierwsza pozycja</li>

    <li>Druga pozycja</li>

  </ul>

</div>

<div>

  <h1>Druga lista</h1>

  <ul>

    <li>Pierwsza pozycja</li>

    <li>Druga pozycja</li>

  </ul>

</div>

Załóżmy teraz, że dla nagłówków oraz list występujących w bloku z identyfikatorem moja chcemy użyć kursywy oraz podkreślenia, a reszta dokumentu ma pozostać bez zmian. Zanim przygotujemy zapis w arkuszu stylów, warto zwrócić uwagę, że do realizacji zadania niezbędny będzie selektor potomka.

W naszym przykładzie poprawnie zgrupowane selektory powinny mieć następującą postać:

div#moja h1,

div#moja ul

{

  color:green;

font-style:italic;

}

Natomiast zapis zgodny z poniższym wzorem jest błędny i jego użycie spowoduje, że pierwszy nagłówek oraz obie listy będą formatowane zgodnie z założeniami.

div#moja h1, ul

{

  color:green;

font-style:italic;

}

 

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15226298