Наследование и группирование в CSS

Здравствуйте, уважаемые читатели! Сегодня в рамках рубрики «Учебник CSS» важнейшие понятия группирования и наследования в CSS. Кто уже давно следит за моими публикациями, наверное, уже проникся мыслью о необходимости постижения основ каскадных таблиц стилей (Cascading Style Sheets). И это правильно, поскольку современный вебмастер непременно должен знать базовые понятия и алгоритм применения основных знаний HTML и CSS на практике.

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

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

Группирование в CSS

Возьмем для примера теги заголовков h1 h2 h3, стили которых прописаны в файле style.css. Например, так:

h1 {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 2.5em;
    color:#fffffd;
}
h2 {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 1.8em;
    color: #265a8b;
}
h3 {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 1.7em;
    color:#6b6b4e;
}

Если вы внимательно посмотрите, то можете заметить, что для тегов всех заголовков есть одна общая составляющая стилей CSS, а именно значение font-family, которое определяет вид шрифта. Можно объединить селекторы h1-h3 по этому признаку и составить для них общее правило касательно значения font-family:

h1, h2, h3 {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
}

А индивидуальные свойства для каждого селектора, которые не являются общими, оформить отдельно:

h1 {
    font-size: 2.5em;
    color:#fffffd;
}
h2 {
    font-size: 1.8em;
    color: #265a8b;
}
h3 {
   font-size: 1.7em;
   color:#6b6b4e;
}

Это и есть группирование в CSS. Оно позволяет несколько оптимизировать записи оформления стилей и дает возможность упростить чтение документа. Думаю, с этим мы разобрались, ничего сложного здесь нет, переходим к понятию наследования.

Наследование в CSS

Как совершенно явно вытекает из самого названия, наследование предполагает перенос правил стилей для элементов, находящихся внутри других. Такие элементы называются дочерними и они наследуют стилевые свойства своих родителей. Наиболее удачным примером, на котором можно наглядно исследовать нюансы наследования CSS, является, на мой скромный взгляд, таблица html, которая создается с помощью тегов table, tr и td. Допустим, заданы свойства оформления для тега table:

table {
    color: green; /* Цвет текста */
    background: #faee81; /* Песочный цвет фона таблицы */
    border: blue solid 2px; /* Рамка вокруг таблицы */
    padding: 5px; /* Поля вокруг текста */
}

Теперь составим простенькую таблицу из 4 ячеек:

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

На вебстранице она будет выглядеть следующим образом:

Для данной таблицы установлен зеленый цвет текста, поэтому в ячейках слова приняли этот оттенок. Это следствие того, что дочерний элемент тег td наследует свойства своего родителя тега table. Надеюсь, здесь все ясно. Но нужно понимать, что не все стилевые свойства подвержены наследованию.

Например, border определяет рамку вокруг таблицы, но не вокруг ячеек, поэтому эти ячейки не выделены рамкой внутри таблицы. Также не наследуется свойство background. Однако, в этом случае возникает вопрос: почему же цвет фона ячеек приобрел песочный цвет, который указан в качестве значения родительского тега table, если он не наследуется?

Здесь все дело в том, что у свойства background в качестве значения по умолчанию для тега td выступает transparent, то есть прозрачность. Таким образом, цвет фона родительского элемента “просматривается” сквозь фон дочернего элемента, который является прозрачным. Отмечу, что во многих случаях для большинства свойств CSS предусмотрены значения по умолчанию. Поэтому, если для какого-то свойства явно не заданы параметры, до вступает в силу предусмотренное значение по умолчанию.

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

body {
    font-family: Tahoma, Arial, Helvetica, sans-serif; /* Стиль шрифта */
    color: black; /* Черный цвет текста */
   }

Теперь любой абзац на данной вебстранице, например, такой:

<p>Цвет текста данного абзаца черный, поскольку он наследует свойства родительского элемента тега body.</p>

Будет оформлен соответствующим стилем:

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

body {
    font-family: Tahoma, Arial, Helvetica, sans-serif; /* Стиль шрифта */
    color: black; /* Черный цвет текста */
   }
p.top {
    color: blue; /* Синий цвет текста */
   }

Теперь обычный параграф на странице будет иметь такой вид:

А уникальный параграф с отдельно прописанным значением color будет таким:

Вот так, используя там, где это необходимо, алгоритмы группирования и наследования, можно максимально оптимизировать файл стилей, сделав его одновременно легко читаемым. Я уже упоминал выше что не все свойства CSS наследуются, поэтому приведу вам одну из страниц официального сайта W3C, где вы при желании можете почерпнуть более подробную информацию по этому вопросу. Итак, страница «Full property table»:

На скриншоте красной рамкой обведены данные о том, какие свойства CSS наследуются, а какие — нет. И напоследок разъясню более подробно по столбцам, какая информация здесь представлена:

• «Name» — название CSS свойства;
• «Values» — все возможные значения для этого свойства;
• «Initial value» — начальное значение для данного свойства, которое используется по умолчанию (об этом я упоминал)
• «Applies to» — к каким элементам применяется правило, в которое входит свойство CSS;
• «Inherited?» — наследуется это правило или нет.

Это все, о чем я хотел сегодня вам рассказать. Постарался преподать нюансы группирования и наследования CSS максимально доступно и эффективно. Как это у меня получилось? Судить вам. Уровень вашей активности даст ответ на этот вопрос.