Добавить в закладки  |
Оставайтесь на связи
|
open
Добавить в закладки |
Оставайтесь на связи
|
toggle shelf
 |
 Это курс по современному конструктору сайтов "Joomla". Он предназначен для тех, кто не хочет тратить много времени на изучение всех аспектов сайтостроения, которые требуются для создания професионнальных сайтов с собственной системой управления, с регистрацией пользователей, комментариями, форумом и т.д. Скачать курс Евгения Попова - Профессиональный сайт за один день |
| Способы добавления стилей на web-страницу |
|
|
|
| Автор Administrator | |||
| 01.04.2011 г. | |||
Связанные стилиПри использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <link>. Данный тег помещается в контейнер <head>, как показано в примере 1.3. Значения атрибутов тега <link> — rel и type остаются неизменными независимо от кода, как приведено в данном примере. Значение href задает путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте. Содержимое файла mysite.css подключаемого посредством тега <link> приведено в примере 1.4.  Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т.е. таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него. Глобальные стилиПри использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в данном случае прямо на странице с помощью контейнера <style>, как показано в примере 1.5. В данном примере определен стиль тега <h1>, который затем можно повсеместно использовать на данной веб-странице (рис. 1.5).  Рис. 1.5. Вид заголовка, оформленного с помощью стилей Внутренние стилиВнутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут style, а его значением выступает набор стилевых правил (пример 1.6). В данном примере стиль тега <p> задается с помощью атрибута style, в котором через точку с запятой перечисляются стилевые свойства (рис. 1.6).  Рис. 1.6. Использование внутренних стилей для изменения вида текста Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объем файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем глобальный стиль и в последнюю очередь связанный стиль. В примере 1.7 применяется сразу два метода добавления стиля в документ. В данном примере первый заголовок задается красным цветом размером 36 пикселов с помощью внутреннего стиля, а следующий — зеленым цветом через таблицу глобальных стилей (рис. 1.7). Рис. 1.7. Последние новости:
Старые новости:
|
|||
| ← Базовый синтаксис CSS | Типы стилей → |
Возможно, Вам необходимо зарегистрироваться на сайте или авторизоваться. |
