Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Декабрь 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 40


Номер: 40

Дата: 2008-12-15

Архив Рассылки

Самоучитель HTML

Самоучитель CSS

Справочник по CSS
Самоучитель по HTML и CSS

Добрый день.

Готовится к выпуску новая электронная книжка «Рецепты HTML и CSS», где в форме вопросов и ответов собраны популярные темы, связанные с версткой страниц - от добавления тени до двухколонного макета.

На данный момент имеется: 118 рецептов, 15 макетов таблиц, 6 макетов верстки.

Идей и планов еще много, но понял, что если все попытаться реализовать, то книга не выйдет ни в этом, ни в следующем году. Так что оставшиеся идеи переносятся на следующую версию.

Скачать демо-версию
http://htmlbook.ru/download/?id=9

В демо-версии доступна только одна глава "Фоновая картинка", можно также посмотреть список всех рецептов.

Выход книги 22 декабря.

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

Многие теги различаются по своему действию в зависимости от того, какие в них используются параметры. Например, тег <INPUT> может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счет изменения значение параметра type. При этом добавление правил стиля к селектору INPUT применит стиль одновременно ко всем созданным с помощью этого тега элементам. Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы атрибутов (параметров тегов). Они позволяют установить стиль тега по присутствию определенного параметра или его значения.

Рассмотрим несколько типичных вариантов применения таких селекторов.

Простой селектор атрибута

Устанавливает стиль для элемента, если задан специфичный параметр тега. Его значение в данном случае не важно. Синтаксис применения такого селектора следующий.

[атрибут] { Описание правил стиля }
Селектор[атрибут] { Описание правил стиля }

Стиль применяется к тем тегам, внутри которых добавлен указанный атрибут. Пробел между именем селектора и квадратными скобками не допускается.

В примере 8.1 показано изменение стиля тега <Q>, в том случае, если к нему добавлен параметр title.

Пример 8.1. Вид элемента в зависимости от его параметра

<!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="Из законов Фергюссона-Мержевича">После того, как веб-страница 
   будет корректно отображаться в одном браузере, выяснится, 
   что она неправильно показывается в другом</q>.</p>

 </body>
</html>

Результат примера показан на рис. 8.1.

Рис. 13.1

Рис. 8.1. Изменение стиля элемента в зависимости от применения параметра title

В данном примере меняется цвет текста внутри контейнера <Q>, когда к нему добавляется параметр title. Обратите внимание, что для селектора Q[title] нет нужды повторять стилевые атрибуты, поскольку они наследуются от селектора Q.

Селектор атрибута со значением

Устанавливает стиль для элемента в том случае, если задано определенное значение специфичного атрибута. Синтаксис применения следующий.

[атрибут="значение"] { Описание правил стиля }
Селектор[атрибут="значение"] { Описание правил стиля }

В первом случае стиль применяется ко всем тегам, которые содержат указанное значение атрибута. А во втором — только к определенным селекторам.

В примере 8.2 показано изменение стиля ссылки в том случае, если тег <A> содержит параметр target со значением _blank. При этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей добавляем небольшой рисунок перед текстом ссылки.

Пример 8.2. Стиль для открытия ссылок в новом окне

<!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.png') 0 6px no-repeat; /* Параметры фонового рисунка */
    padding-left: 15px; /* Смещаем текст вправо */
   }
  </style>
 </head>
 <body>
  
   <p><a href="link1.html">Обычная ссылка</a> | 
      <a href="link2" target="_blank">Ссылка в новом окне</a></p>
  
 </body>
</html>

Результат примера показан ниже (рис. 8.2).

Рис. 13.2

Рис. 8.2. Изменение стиля элемента в зависимости от значения параметра target

В данном примере рисунок к ссылке добавляется с помощью атрибута background. В его функции входит создание повторяющейся фоновой картинки, но повторение фона можно отменить через значение no-repeat, что в итоге даст единственное изображение.

Атрибут начинается с определенного значения

Устанавливает стиль для элемента в том случае, если атрибут начинается с указанного значения. Синтаксис применения следующий.

[атрибут^="значение"] { Описание правил стиля }
Селектор[атрибут^="значение"] { Описание правил стиля }

В первом случае стиль применяется ко всем элементам, которые начинаются с заданного значения атрибута. А во втором — только к определенным селекторам. Использование кавычек не обязательно.

Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок — ссылки, которые ведут на другие сайты. Чтобы не добавлять к тегу <A> новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http://, его и добавляем к селектору A, как показано в примере 8.3.

Пример 8.3. Изменение стиля внешней ссылки

<!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">Обычная ссылка</a> | 
  <a href="http://htmlbook.ru" target="_blank">Внешняя 
  ссылка на сайт htmlbook.ru</a></p>
  
 </body>
</html>

Результат примера показан ниже (рис. 8.3).

Рис. 13.3

Рис. 8.3. Изменение стиля для внешних ссылок

В данном примере внешние ссылки выделяются жирным начертанием. Также можно воспользоваться показанным в примере 8.2 приемом и добавлять к ссылке небольшое изображение, которое будет сообщать, что ссылка ведет на другой сайт.

Атрибут оканчивается определенным значением

Устанавливает стиль для элемента в том случае, если атрибут оканчивается указанным значением. Синтаксис применения следующий.

[атрибут$="значение"] { Описание правил стиля }
Селектор[атрибут$="значение"] { Описание правил стиля }

В первом случае стиль применяется ко всем элементам, которые завершаются заданным значением атрибута. А во втором — только к определенным селекторам.

Таким способом можно автоматически разделять стиль для сайтов домена ru и для сайтов других доменов вроде com, как показано в примере 8.4.

Пример 8.4. Стиль для разных доменов

<!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"] { /* Если ссылка заканчивается на .ru */
    background: url('ru.png') no-repeat 0 6px; /* Добавляем фоновый рисунок */
    padding-left: 12px; /* Смещаем текст вправо */
   }
   A[href$=".com"] { /* Если ссылка заканчивается на .com */
    background: url('com.png') no-repeat 0 6px;
    padding-left: 12px;
   }
  </style>
 </head>
 <body>
  
  <p><a href="http://www.yandex.com">Yandex.Com</a> | 
     <a href="http://www.yandex.ru">Yandex.Ru</a></p>
  
 </body>
</html>

В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 8.4). Стилевые атрибуты будут добавляться только для тех ссылок, параметр href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться не будет. В этом случае лучше воспользоваться селектором, в котором определенное значение может находиться в любом месте атрибута.

Рис. 13.4

Рис. 8.4. Добавление картинки к ссылкам

Рецепты CSS

Чем заменить тег <NOBR>?

Тег <NOBR> предназначен для текста, чтобы он отображался без переносов. Из-за того, что этот тег не входит в спецификацию HTML, код с ним не пройдет валидацию. Тем не менее, браузеры вполне понимают указанный тег, и текст внутри контейнера <NOBR> выводят одной строкой. Стилями все же пользоваться гораздо удобнее и современнее, поэтому для текста следует указать стилевой атрибут white-space со значением nowrap, как показано в примере 1.

Пример 1. Текст без переносов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
 <head> 
  <title>NOBR</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
  <style type="text/css">
   .nobr { white-space: nowrap; }
  </style>
 </head> 
 <body> 
  <h1><span class="nobr">Lorem ipsum dolor sit amet, 
  consectetuer adipiscing elit</span></h1> 
  <p><span class="nobr">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
  sed diem nonummy nibh euismod tincidunt ut lacreet dolore 
  magna aliguam erat volutpat.</span> Ut wisis enim ad minim veniam, 
  quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
  ut aliquip ex ea commodo consequat.</p> 
 </body> 
</html>
Copyright 2007—2008 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное