- •1. Общие сведения о css
- •1. Разделение оформления и содержания
- •2. Добавление стиля на веб-страницу
- •2.1. Таблица связанных стилей
- •2.2. Таблица глобальных стилей
- •3. Cинтаксис css
- •3.1. Свойства css
- •3.2. Селекторы тегов
- •Селекторы атрибутов
- •Простой селектор атрибута
- •Селектор атрибута со значением
- •Атрибут начинается с определенного значения
- •Атрибут оканчивается определенным значением
- •Значение встречается в любом месте атрибута
- •Группирование
- •4. Псевдоклассы
- •Псевдоклассы, определяющие состояние элементов
- •2. Более высокий приоритет имеет значение, указанное в коде ниже
- •3. Описание стилей начинайте с селекторов верхнего уровня
- •4. Группируйте селекторы с одинаковыми параметрами и значениями
- •5. Используйте идентификаторы и классы
- •6. Применяйте универсальные стилевые параметры
Селекторы атрибутов
Для изменения стиля элементов, содержащих различные параметры, в CSS введены селекторы атрибутов. Они позволяют установить стиль тега по присутствию определенного параметра или его значения.
Рассмотрим несколько типичных вариантов применения таких селекторов.
Простой селектор атрибута
Устанавливает стиль для элемента, если задан специфичный атрибут. Его значение в данном случае не важно. Синтаксис применения такого селектора следующий.
Селектор[атрибут] { Описание правил стиля }
Пробел между именем селектора и квадратными скобками не допускается.
В следующем показано изменение стиля тега <p>, в том случае, если к нему добавлен атрибут title.
<style type="text/css">
p[title] {
color: green; /* Цвет текста */
}
</style>
В данном примере меняется цвет текста внутри контейнера <p>, когда к нему добавляется параметр title независимо от значения этого атрибута.
Селектор атрибута со значением
Устанавливает стиль для элемента в том случае, если задано определенное значение указанного атрибута. Синтаксис применения следующий.
Селектор[атрибут="значение"] { Описание правил стиля }
Например:
<style type="text/css">
A[target="_blank"] {
color: green;
padding-left: 15px; /* Смещение текста вправо */
}
</style>
</head>
<body>
<p><a href="link1.html">Обычная ссылка</a> |
<a href="link2" target="_blank">Ссылка в новом окне</a></p>
</body>
</html>
В этом примере вторая гиперссылка будет выведена зеленым цветом со смещением аправо на 15 пикселов так как в теге этой гиперссылки имеется атрибут target со значеним “_blank”.
Атрибут начинается с определенного значения
Устанавливает стиль для элемента в том случае, если указанный атрибут начинается с указанного значения. Синтаксис применения следующий.
Селектор[атрибут^="значение"] { Описание правил стиля }
Например:
<style type="text/css">
A[href^="http://"] {
font-weight: bold; /* Жирное начертание */
}
</style>
</head>
<body>
<p><a href="link1.html">Обычная ссылка</a> |
<a href="http://htmlbook.ru" target="_blank">Внешняя ссылка на сайт htmlbook.ru</a></p>
</body>
</html>
В этом примере гиперссылки, начинающиеся с указания протокола http://, будут выделены жирным шрифтом.
Атрибут оканчивается определенным значением
Устанавливает стиль для элемента в том случае, если указанный атрибут оканчивается указанным значением. Синтаксис применения следующий.
Селектор[атрибут$="значение"] { Описание правил стиля }
Например:
<style type="text/css">
A[href$=".ua"] { /* Если ссылка заканчивается на .ua */
background-color: lightblue;
padding-left: 10px;
}
A[href$=".com"] { /* Если ссылка заканчивается на .com */
background-color: yellow;
padding-left: 20px;
}
</style>
</head>
<body>
<p><a href="http://www.yandex.com">Yandex.com</a> |
<a href="http://www.yandex.ua">Yandex.ua</a></p>
</body>
</html>
В данном примере содержатся две ссылки, ведущие на разные домены — com и ua. При этом для к каждой ссылки с помощью стилей устанавливается цвет фона . Если ссылка заканчивается на ”.ua“, то она выводится на светло-синем фоне (lightblue), а если ссылка заканчивается на ”.com”, то она выводится на желтом фоне.