Видеокурс по созданию сайтов | Как работают принципы CSS (наследование и специфичность, позиционирование элементов).

Видеокурс

Создание CSS-сайтов в Dreamweaver 8

Комментарии к видеоурокам

Урок #5. Как работают принципы CSS?
47 минут

Наследование и специфичность

«Две взаимосвязанные концепции — специфичность и наследование — могут стать как вашими лучшими друзьями, так и самыми страшными кошмарами... не обязательно именно в этом порядке. CSS позволяет применять правила сразу к нескольким элементам. Не будь такого механизма, в таблицах стилей пришлось бы устанавливать взаимно-однозначное соответствие между правилами и элементами — это непрактично и громоздко» (Из книги Дэйва Ши и Молли Е. Хольцшлаг «Философия CSS-дизайна»).

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

То есть фон страницы должен быть белым, поля с четырех сторон равны нулю. И такой код повторяется на каждой странице сайта. Если автор сайта захочет изменить фон или поля, ему придется буквально править каждую страничку.

А можно предложить другой вариант: код сократить — <body>. Добавить в таблице стилей правило:

body {
background: #FFFFFF;
margin: 0;
}

Таким бразом, уменьшается HTML-код, а то правило, которое было создано для body, автоматически применяется к каждой странице. И в случае изменения фона нам достаточно внести поправку оди раз в таблице стилей.

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

Позиционирование с помощью CSS

Позиционирование с помощью CSS — очень точная техника при размещении элементов. Вы можете расположить любой объект (картинку, текстовый блок, флешку) в любом месте страницы.

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

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

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

Статьи