Kaskadowe arkusze stylów CSS: selektory atrybutów









Tematy: wprowadzenie | selektory elementów | selektory atrybutów | selektory specjalne
selektory pseudoklas | selektory pseudoelementów





Strona główna kursu
Style
Wstęp
Narzędzia
Budowa stylu
Selektory
Kaskadowość i dziedziczenie
Wstawianie stylów
Jednostki miary
Własności czcionek
Własności tekstu
Kolor i tło
Marginesy i odstępy
Obramowania
Wykazy
Tabele
Rozmiary
Pozycjonowanie
Wyświetlanie
Obrys
Własności drukowania
Zawartość generowana
Suwaki







Selektory atrybutów

Selektory zostały rozszerzone na atrybuty elementów. Jak
pamiętamy, elementy mogą przybierać określone atrybuty, na przykład
akapit może być wyrównany do prawego marginesu (align="right"). Można to
wykorzystać do nadawania pewnych wartości: jeśli akapit jest wyrównany
do prawej, to jest wyświetlany na czerwono.

Ogólna postać selektora atrybutów jest następująca:

element[atrybut relacja wartość] {deklaracja stylu}

Przykładowo:

p[align=right] {color: red; }

akapit justowany do prawej strony, w kolorze czerwonym.

Style te najlepiej jest definiować w nagłówku strony lub w zewnętrznym arkuszu.

Interpretacja: Netscape 6, Opera 7, Internet Explorer 7

Relacja może być przedstawiona czterema sposobami, co odpowiada czterem poniższym typom selektora atrybutów. Jedną z relacji jest zastosowany tu znak =.

a. Prosty selektor atrybutu

Element[atrybut] {deklaracja stylu}

lub

[atrybut] {deklaracja stylu}
Na przykład:

h1[title] {font-family: Verdana; color:green}

Każdy tytuł stopnia pierwszego, w którym znajdzie się atrybut
title, będzie wyświetlany za pomocą czcionki Verdana w kolorze zielonym.

Tytuł stopnia pierwszego z atrybutem Title

Interpretacja: Netscape 6, Opera 5, Internet Explorer 7.

[title] {font-family: Georgia}

Dowolny element z atrybutem title (o dowolnej jego wartości)
będzie wyświetlany za pomocą czcionki Georgia.

<p title="akapit">Akapit z atrybutem title, zapisany czcionką Georgia.</p>

Akapit z atrybutem title, zapisany czcionką Georgia.

Interpretacja: Netscape 6, Opera 7, Internet Explorer 7.

b. Selektor atrybutu o określonej wartości

Selektor ten określa formatowanie, gdy atrybut ma konkretną wartość.

Element[atrybut="wartość"] {deklaracja stylu}

lub

[atrybut="wartość"] {deklaracja stylu}

Na przykład:

h2[title="rozdział"] {font-family: Impact}

Treść tytułu

Każdy tytuł stopnia drugiego, w którym znajdzie się atrybut
title="rozdział", będzie wyświetlany za pomocą czcionki Impact.

[title="ważne"] {font-weight: bold}

Każdy element z atrybutem title="ważne" będzie wyświetlany za
pomocą czcionki pogrubionej.

To jest bardzo ważny akapit

Interpretacja: Netscape 6, Opera 7, Internet Explorer 7.

Jak łatwo zauważyć, selektor atrybutu o określonej wartości
różni się od prostego selektora atrybutu konkretną wartością atrybutu.

Selektor atrybutu o określonej wartości ma jeszcze dwie
odmiany, które można przedstawić następująco:

c. Selektor atrybutu zawierający ciąg znaków ze spacjami

[atrybut~=wartość]

W tej odmianie ciąg znaków podany jako wartość może być
fragmentem wartości atrybutu konkretnego elementu. Przykładowo:

h3[title~="rozdział"] {font-family:Georgia}

<h3 title="to jest kolejny rozdział">Tytuł stopnia trzeciego</h3>

Tytuł stopnia trzeciego

Interpretacja: Netscape 6, Opera 5, Internet Explorer 7.

Taka postać stylu będzie się odnosić do wszystkich tytułów
stopnia pierwszego, w których atrybut title będzie zawierać wyraz
rozdział, np. title="rozdział pierwszy", title="rozdział drugi" itd.
Zwróćmy uwagę, że wyrazy w title są rozdzielone spacjami.

d. Selektor atrybutu zawierający ciąg znaków z dywizami

Ta odmiana została przewidziana do obsługi wartości
zawierających dywizy (łączniki).

[atrybut|=wartość]

Podanie w arkuszu definicji:

*[title|="en"] {color: green}

spowoduje objęcie nią wszystkich elementów, które mają atrybut
title zawierający en-a, en-b itd. Jest to wykorzystywane np. w
obsłudze języków, których kody są rozróżniane, choć początek jest taki
sam: en-us, en-uk.

A paragraph in UK-English

Interpretacja: Netscape 6, Opera 5, Internet Explorer 7.