Стили css - cssmake.ru

Что такое атрибуты:

У всех html элементов есть свойства, которые называются атрибутами. У этих атрибутов есть значения. В теге элемента может быть использовано любое количество атрибутов, разделенных пробелом.

В приведенном ниже примере показаны примеры атрибутов для html элементов:

<h1 id="section1">
<img src ="mainimage" title ="main image">
<img title ="small.gif" width ="100" height ="100">
<a href ="foo.htm">
<p class ="maintext">
<form style ="padding: 10px">

Селекторы атрибутов

Селекторы атрибутов используются для выбора элементов на основе их атрибутов. Например, вы можете выбрать любое изображение на html странице, которое называется, к примеру, "small.gif". И все правила описанные в css будут работать только для изображений с именем "small.gif".

img [src="/small.gif"] {
border:1px solid #000;
}

Существует 4 типа селекторов атрибутов : Первый заключается в выборе атрибута селектора. В примере ниже будут выбраны селекторы атрибутов (в данном случае "img"):

img [title] {
border:1px solid #000;
}
img [width] {
border:1px solid #000;
}
img [alt] {
border:1px solid #000;
}

Второй тип заключается в выборе свойстваселектора

img [src="/small.gif"] {
border:1px solid #000;
}

Третий тип заключается в выборе на основании определенного значения свойства. В приведенном ниже примере правило будет действовать для изображений у которых атрибут alt="small".

img [alt~="small"] {
border:1px solid #000;
}

Четвертый тип заключается в выборе на основании того, есть ли в значении артибуте дефис "-"

img [title|="small"] {
border:1px solid #000;
}

К сожалению, селекторы атрибутов не поддерживаются браузерами IE5, IE5.5, IE6.