Отправляет 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 - 42


Номер: 42

Дата: 2008-12-21

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

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

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

Справочник по CSS

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

Добрый день.

В ночь с 21 на 22 декабря происходит зимнее солнцестояние, когда наблюдается самая длительная ночь в году. В честь этого дня и приближающихся новогодних праздников объявляется акция. Каждому, кто купит электронную книжку «Рецепты HTML и CSS» до 18 января, в подарок дается справочник по тегам HTML. На сегодняшний день это самый удобный и лучший справочник по тегам на русском языке. Стоимость 70 руб.

Сама книга содержит 117 рецептов, 15 способов оформления таблиц и 6 модульных сеток. Отдельно прилагаются все используемые в рецептах примеры с необходимыми файлами. Тематика охватывает все актуальные темы: создание скругленных уголков, добавление тени, слои и верстка, модульные сетки и многое другое. Для ознакомления со списком рецептов доступа демо-версия.

Сегодня завершаем тему с селекторами.

Селекторы атрибутов (продолжение)

Значение встречается в любом месте атрибута

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

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

Значение может располагаться в любом месте аргумента, например, в начале, в конце или где-то посередине. Главное, что оно является его частью. Так, в примере 8.5 показано изменение стиля ссылок, в которых встречается слово «htmlbook».

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

<!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/">Теги HTML</a> | 
  <a href="http://stepbystep.htmlbook.ru">Шаг за шагом</a> | 
  <a href="http://webimg.ru">Графика для Веб</a></p>
 </body>
</html>

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

Рис. 8.5

Рис. 8.5. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»

Одно из нескольких значений атрибута

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

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

Стиль применяется в том случае, если у атрибута имеется указанное значение или оно входит в список значений, разделяемых пробелом (пример 8.6).

Пример 8.6. Стиль в зависимости от имени класса

<!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"> 
   [class~="block"] h3 { color: green; } 
  </style> 
 </head>  
 <body> 
  <div class="block tag"> 
   <h3>Заголовок</h3> 
  </div> 
 </body> 
</html>

В данном примере зеленый цвет текста применяется к селектору H3, если имя класса у слоя задано как block. Отметим, что аналогичный результат можно получить, если использовать конструкцию *= вместо ~=.

Дефис в значении атрибута

В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения параметров id и class. Для изменения стиля элементов, в значении которых применяется дефис, следует воспользоваться следующим синтаксисом.

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

Стиль применяется к элементам, у которых атрибут начинается с указанного значения или с фрагмента значения, после которого идет дефис (пример 8.7).

Пример 8.7. Дефисы в значениях

<!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">
   DIV[class|="block"] {
    background: #306589; /* Цвет фона */
    color: #acdb4c; /* Цвет текста */
    padding: 5px; /* Поля */
   }
   DIV[class|="block"] A {
    color: #fff; /* Цвет ссылок */
   }
  </style>
 </head>
 <body>
  <div class="block-menu-therm">
   <h2>Термины</h2>
   <div class="content">
     <ul class="menu">
      <li><a href="t1.html">Буквица</a></li>
      <li><a href="t2.html">Выворотка</a></li>
      <li><a href="t3.html">Выключка</a></li>
      <li><a href="t4.html">Интерлиньяж</a></li>
      <li><a href="t5.html">Капитель</a></li>
      <li><a href="t6.html">Начертание</a></li>
      <li><a href="t7.html">Отбивка</a></li>
     </ul>
   </div>
  </div>
 </body>
</html>

В данном примере имя класса задано как block-menu-therm, поэтому в стилях используется конструкция |="block", поскольку значение начинается именно с этого слова и в значении встречаются дефисы.

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

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

Вопросы для проверки

1. Необходимо задать цвет фона у текстового поля. Какой стиль для этой цели подойдет?

  1. INPUT[type="text"] { background: #acdacc; }
  2. INPUT[type="textinput"] { background: #acdacc; }
  3. INPUT[type="textfield"] { background: #acdacc; }
  4. INPUT[type="textarea"] { background: #acdacc; }
  5. INPUT[type="texts"] { background: #acdacc; }

2. Какой стиль необходимо использовать, чтобы изменить цвет текста только у второго абзаца?

<p class="text text1-count1-text">Первый абзац</p>
<p class="text text2-count2-text">Второй абзац</p>
<p class="text text3-count3-text">Третий абзац</p>

  1. P[class|="text2"] { color: red; }
  2. P[class^="text2"] { color: red; }
  3. P[class~="text2"] { color: red; }
  4. P[class*="text2"] { color: red; }
  5. P[class$="text2"] { color: red; }

3. К каким элементам будет применяться следующий стиль?

[class~="lorem"] { background: #666; }

  1. <p class="lorem-ipsum">Lorem ipsum dolor sit amet</p>
  2. <div class="lorem-ipsum dolor">Lorem ipsum dolor sit amet</div>
  3. <p class="ipsum-lorem">Lorem ipsum dolor sit amet</p>
  4. <div class="lorem ipsum">Lorem ipsum dolor sit amet</div>
  5. <p><span class="1orem ipsum">Lorem ipsum dolor sit amet</span></p>

Задание

1. Создайте таблицу, в которой при наличии параметра border, вокруг ячеек выводилась рамка синего цвета.

2. Напишите стиль, который добавляет к ссылкам рисунок, соответствующий файлу на который ведет ссылка. Используются файлы следующего типа: PDF, HTML, DOC.

Copyright 2007—2008 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное