Per modificare lo stile degli elementi contenenti vari parametri, nei CSS sono stati introdotti selettori di attributi. Permettono di impostare lo stile di un tag in base alla presenza di un determinato parametro o al suo valore. Nota: i selettori di attributo sono supportati da Internet Explorer versione 7.0 e successive ed è necessario aggiungere il <!DOCTYPE> corretto affinché gli esempi funzionino correttamente. Diamo un'occhiata a diversi usi tipici di tali selettori.
Selettore di attributi semplice
Imposta lo stile per un elemento se viene specificato un attributo specifico. Il suo significato non è importante in questo caso. La sintassi per l'utilizzo di tale selettore è la seguente.
[атрибут]{ Описание правил стиля } Селектор[атрибут]{ Описание правил стиля }
Lo spazio tra il nome del selettore e le parentesi quadre non è consentito. L'Esempio 12.1 mostra come viene stilizzato il tag <Q> quando gli viene aggiunto un parametro title. Esempio 12.1. Tipo di elemento in base al suo parametro
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Селекторы атрибутов</title><style type="text/css">Q{
font-style: italic;/* Курсивное начертание */
quotes:"\00AB""\00BB";/* Меняем вид кавычек в цитате */}Q[title]{
color: maroon;/* Цвет текста */}</style></head><body><p>Продолжая известный закон Мерфи, который гласит:<q>Если неприятность
может случиться, то она обязательно случится</q>, можем ввести свое наблюдение:<q title="Из законов Фергюсона-Мержевича">После
того, How веб-page будет корректно отображаться в одном браузере, выяснится,
что она неправильно показывается в другом</q>.</p></body></html>
Il risultato dell'esempio è mostrato in Fig. 12.1 In questo esempio, il colore del testo all'interno del contenitore 7lt;Q> cambia quando vi viene aggiunto il parametro title. Si noti che per il selettore Q[titolo] non è necessario ripetere gli attributi poiché sono ereditati dal selettore Q.
Selettore di attributi con valore
Imposta lo stile per un elemento se viene specificato un valore specifico per un parametro specifico. La sintassi dell'applicazione è la seguente.
[атрибут="meaning"]{ Описание правил стиля } Селектор[атрибут="meaning"]{ Описание правил стиля }
Nel primo caso, lo stile viene applicato a tutti gli elementi che contengono il valore dell'attributo specificato. E nel secondo - solo ad alcuni selezionatori. L'Esempio 12.2 mostra come cambiare lo stile del collegamento se il tag A contiene un parametro target="_blank". In questo caso il collegamento si aprirà in una nuova finestra e per mostrarlo, utilizzando gli stili, aggiungiamo una piccola immagine davanti al testo del collegamento. Esempio 12.2. Stile per l'apertura dei collegamenti in una nuova finestra
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Селекторы атрибутов</title><style type="text/css">A[target="_blank"]{
background:url(blank.gif) no-repeat 02px;/* Параметры фонового рисунка */
padding-left:15px;/* Смещаем текст вправо */}</style></head><body><p><a href="link1.html">Обычная link</a>|<a href="link2" target="_blank">Ссылка в новом окне</a></p></body></html>
Il risultato dell'esempio è mostrato di seguito (Figura 12.2). In questo esempio, un'immagine viene aggiunta al collegamento utilizzando l'attributo background. La sua funzione è quella di creare un'immagine di sfondo ripetuta, ma la ripetizione dello sfondo può essere annullata tramite l'argomento no-repeat, ottenendo come risultato un'unica immagine.
L'attributo inizia con un valore specifico
Imposta lo stile per un elemento se l'attributo inizia con il valore specificato. La sintassi dell'applicazione è la seguente.
[атрибут^="meaning"]{ Описание правил стиля } Селектор[атрибут^="meaning"]{ Описание правил стиля }
Nel primo caso, lo stile viene applicato a tutti gli elementi che iniziano con il valore dell'attributo specificato. E nel secondo - solo ad alcuni selezionatori. Supponiamo che il tuo sito debba separare lo stile dei collegamenti regolari da quelli esterni, ovvero collegamenti che portano ad altri siti. Per evitare di aggiungere Auna nuova classe al tag, utilizzeremo i selettori di attributo. I collegamenti esterni sono caratterizzati dall'aggiunta di un protocollo all'indirizzo, ad esempio il protocollo HTTP viene utilizzato per accedere ai documenti ipertestuali. Pertanto, i collegamenti esterni iniziano con la parola chiave http:// e la aggiungiamo al selettore A, come mostrato nell'esempio 12.3. Esempio 12.3. Modifica dello stile xrif
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Селекторы атрибутов</title><style type="text/css">A[href^="http://"]{
font-weight: bold;/* Жирное начертание */}</style></head><body><p><a href="link1.html">Обычная link</a>|<a href="http://htmlbook.ru" target="_blank" rel="nofollow">Внешняя link на сайт htmlbook.ru</a></p></body></html>
Il risultato dell'esempio è mostrato di seguito (Fig. 12.3) . In questo esempio, i collegamenti esterni sono evidenziati in grassetto. Puoi anche utilizzare la tecnica mostrata nell'Esempio 12.2 e aggiungere una piccola immagine al collegamento, che indicherà che il collegamento porta a un altro sito.
L'attributo termina con un valore specifico
Imposta lo stile per un elemento se l'attributo termina con il valore specificato. La sintassi dell'applicazione è la seguente.
[атрибут$="meaning"]{ Описание правил стиля } Селектор[атрибут$="meaning"]{ Описание правил стиля }
Nel primo caso lo stile viene applicato a tutti gli elementi che terminano con il valore dell'attributo specificato. E nel secondo - solo ad alcuni selezionatori. In questo modo è possibile separare automaticamente lo stile per i siti del dominio ru e per i siti di altri domini come com, come mostrato nell'esempio 12.4. Esempio 12.4. Stile per diversi domini
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Селекторы атрибутов</title><style type="text/css">A[href$=".ru"]{/* Если link заканчивается на .ru */
background:url(ru.gif) no-repeat;/* Параметры фонового рисунка */
padding-left:10px;/* Смещаем текст вправо */}A[href$=".com"]{/* Если link заканчивается на .com */
background:url(com.gif) no-repeat;
padding-left:10px;}</style></head><body><p><a href="http://www.yandex.com" rel="nofollow">Yandex.Com</a>|<a href="http://www.yandex.ru" rel="nofollow">Yandex.Ru</a></p></body></html>
Questo esempio contiene due collegamenti che portano a domini diversi: come ru. Allo stesso tempo, ciascuno di questi collegamenti ha la propria immagine di sfondo aggiunta utilizzando gli stili. Gli attributi di stile verranno aggiunti solo per quei collegamenti hrefil cui parametro termina con ".ru" o ".com". Tieni presente che aggiungendo una barra ( http://www.yandex.ru/ ) o l'indirizzo della pagina ( http://www.yandex.ru/fun.html ) al nome di dominio, cambieremo in tal modo la fine e lo stile non verrà applicato. In questo caso è preferibile utilizzare un selettore in cui un valore specifico può trovarsi in qualsiasi punto dell'attributo.
Il valore si trova ovunque nell'attributo
Sono disponibili opzioni per applicare lo stile a un selettore con un attributo specifico, di cui fa parte un valore. Tuttavia non è noto con esattezza se l'argomento inizi o finisca con questo valore. Quindi dovrebbe essere utilizzata la seguente sintassi.
[атрибут*="meaning"]{ Описание правил стиля } Селектор[атрибут*="meaning"]{ Описание правил стиля }
Il valore può apparire ovunque nell'argomento, ad esempio all'inizio, alla fine o in qualche punto intermedio. L'importante è che ne faccia parte. Pertanto, l'Esempio 12.5 mostra un cambiamento nello stile dei collegamenti in cui appare la parola “htmlbook”. Esempio 12.5. Stile per diversi siti
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Селекторы атрибутов</title><style type="text/css">[href*="htmlbook"]{
background: yellow;/* Желтый цвет фона */}</style></head><body><p><a href="http://www.htmlbook.ru/html/" rel="nofollow">Tagи HTML</a>|<a href="http://stepbystep.htmlbook.ru" rel="nofollow">Шаг за шагом</a>|<a href="http://webimg.ru" rel="nofollow">Графика для Веб</a></p></body></html>
Il risultato di questo esempio è mostrato in Fig. 12.4 Esistono altri tipi di selettori di argomenti, ma sono usati abbastanza raramente, quindi ne ometteremo la descrizione. Collegamento alla fonte originale: http://stepbystep.htmlbook.ru/?id=54
Nota: i selettori di attributo sono supportati da Internet Explorer versione 7.0 e successive ed è necessario aggiungere il <!DOCTYPE> corretto affinché gli esempi funzionino correttamente. Diamo un'occhiata a diversi usi tipici di tali selettori.
In questo esempio, il colore del testo all'interno del contenitore 7lt;Q> cambia quando vi viene aggiunto il parametro title. Si noti che per il selettore Q[titolo] non è necessario ripetere gli attributi poiché sono ereditati dal selettore Q.
In questo esempio, un'immagine viene aggiunta al collegamento utilizzando l'attributo 
. In questo esempio, i collegamenti esterni sono evidenziati in grassetto. Puoi anche utilizzare la tecnica mostrata nell'Esempio 12.2 e aggiungere una piccola immagine al collegamento, che indicherà che il collegamento porta a un altro sito.
Esistono altri tipi di selettori di argomenti, ma sono usati abbastanza raramente, quindi ne ometteremo la descrizione. Collegamento alla fonte originale: http://stepbystep.htmlbook.ru/?id=54
GO TO FULL VERSION