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

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

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

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

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

←   Апрель 2009   →
 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
Автор
ImHoster.net

Статистика

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

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


Дата: 2009-04-19

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

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

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

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

Рецепты HTML и CSS

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

Добрый день.

На сайте htmlbook.ru появился новый справочник по тегам HTML в формате CHM.

Что нового в этой версии

  • Все параметры вынесены отдельно, к каждому параметру добавлена таблица с браузерами: Chrome, Internet Explorer, Firefox, Safari, Opera.
  • Добавлены универсальные параметры тегов, такие как: class, dir, id, lang, style, title.
  • Добавлен список событий JavaScript: onclick, onfocus, onblur и др.
  • Приведены значения параметров: цвет, названия цветов, MIME-типы, коды языков.
  • Для полноты справочника, в него включены некоторые нестандартные теги.
  • Имеется список спецсимволов.

Внимание! Справочник распространяется по цене, которую вы сами готовы за него заплатить. Поэтому при оплате вы можете указать 10, 100 рублей или любую другую сумму по вашему желанию.

Описание справочника htmlbook.ru/books/?id=6

Прямая ссылка для оплаты

Сегодня продолжаем тему об CSS.

18. Наследование

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

Разберем наследование на примере таблицы. Особенностью таблиц можно считать строгую иерархическую структуру тегов. Вначале следует контейнер <TABLE> внутри которого добавляются теги <TR>, а затем идет тег <TD>. Если в стилях для селектора TABLE задать цвет текста, то он автоматически устанавливается для содержимого ячеек, как показано в примере 18.1.

Пример 18.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">
   TABLE {
    color: red; /* Цвет текста */
    background: #333; /* Цвет фона таблицы */
    border: 2px solid red; /* Красная рамка вокруг таблицы */
   }
  </style>
 </head>
 <body>
  <table cellpadding="4" cellspacing="0">

   <tr>
    <td>Ячейка 1</td><td>Ячейка 2</td>
   </tr>
   <tr>

    <td>Ячейка 3</td><td>Ячейка 4</td>
   </tr>
  </table>
 </body>

</html>

В данном примере для всей таблицы установлен красный цвет текста, поэтому в ячейках он также применяется, поскольку тег <TD> наследует свойства тега <TABLE>. При этом следует понимать, что не все стилевые свойства наследуются. Так, border задает рамку вокруг таблицы в целом, но никак не вокруг ячеек. Аналогично не наследуется значение свойства background. Тогда почему цвет фона у ячеек в данном примере темный, раз он не наследуется? Дело в том, что у свойства background в качестве значения по умолчанию выступает transparent, т.е. прозрачность. Таким образом цвет фона родительского элемента «проглядывает» сквозь дочерний элемент.

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

Наследование позволяет задавать значения некоторых свойств единожды, определяя их для родителей верхнего уровня. Допустим, требуется установить цвет и шрифт для основного текста. Достаточно воспользоваться селектором BODY, добавить для него желаемые свойства, и цвет текста внутри абзацев и других текстовых элементов поменяется автоматически (пример 18.2).

Пример 18.2. Параметры текста для всей веб-страницы

<!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">

   BODY {
    font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта */
    color: navy; /* Синий цвет текста */
   }
  </style>
 </head>
 <body>
  <p>Цвет текста этого абзаца синий.</p>
 </body>

</html>

В данном примере рубленый шрифт и цвет текста абзацев устанавливается с помощью селектора BODY. Благодаря наследованию уже нет нужды задавать цвет для каждого элемента документа в отдельности. Однако бывают варианты, когда требуется все-таки изменить цвет для отдельного контейнера. В этом случае придется переопределять нужные параметры явно, как показано в примере 18.3.

Пример 18.3. Изменение свойств наследуемого элемента

<!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">

   BODY {
    font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта */
    color: navy; /* Синий цвет текста */
   }
   P.red {
    color: maroon; /* Темно-красный цвет текста */
   }
  </style>
 </head>
 <body>
  <p>Цвет текста этого абзаца синий.</p>
  <p class="red">А у этого абзаца цвет текста уже другой.</p>

 </body>
</html>

В данном примере цвет первого абзаца наследуется от селектора BODY, а для второго установлен явно через класс с именем red.

Задание

1. Используя группирование и наследование сократите приведенный стиль.

a:link {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-size: 11px;
  color: #3A681A;
}
a:visited {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #3A681A;
  text-decoration: none;  
}
a:hover {
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #5CA22E;
}
a:active {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #DC0000;
}
 .pole {
  border: 1px solid #008000;
  width: 95px;
  font-size: 11px;
  background-color: #E7F2D7;
  height: 17px;
}
 .pole2 {
  border: 1px solid #008000;
  font-size: 11px;
  background-color: #E7F2D7;
  height: 17px;
}
Copyright 2007—2009 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное