Свежее на сайте:

Вопросы (FAQ)

СТАТЬИ Administrator 17098 Hits
Популярные вопросы от новичков

О графическом редакторе Adobe Photoshop CS6

СТАТЬИ Administrator 27377 Hits 1 Comments
ВСЯ ПРАВДА О ADOBE PHOTOSHOP CS6 Краткое описаниеПрежде, чем мы начнем описание, хотелось бы отметить, что…
показать все

Способы добавления стилей на web-страницу

E-mail

Close

Изучаем CSS - Уроки верстки сайтов

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



Связанные стили

При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <link>. Данный тег помещается в контейнер <head>, как показано в примере 1.3.
Введение в CSS - добавляем стили на сайт

Значения атрибутов тега <link> — rel и type остаются неизменными независимо от кода, как приведено в данном примере. Значение href задает путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте. Содержимое файла mysite.css подключаемого посредством тега <link> приведено в примере 1.4.

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

Глобальные стили

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

Введение в CSS - добавляем стили на сайт
В данном примере определен стиль тега <h1>, который затем можно повсеместно использовать на данной веб-странице (рис. 1.5).

Введение в CSS - уроки создания сайтов
Рис. 1.5. Вид заголовка, оформленного с помощью стилей

Внутренние стили

Внутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей  веб-странице. Для определения стиля используется атрибут style, а его значением выступает набор стилевых правил (пример 1.6).

Введение в CSS - добавляем стили на сайт
В данном примере стиль тега <p> задается с помощью атрибута style, в котором через точку с запятой
перечисляются стилевые свойства (рис. 1.6).

Введение в CSS - уроки создания сайтов
Рис. 1.6. Использование внутренних стилей для изменения вида текста

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

Введение в CSS - добавляем стили на сайт
В данном примере первый заголовок задается красным цветом размером 36 пикселов с помощью внутреннего стиля, а следующий — зеленым цветом через таблицу глобальных стилей (рис. 1.7). Рис. 1.7.

Введение в CSS - уроки создания сайтов
Рис. 1.7. Результат применения стилей

источник: designjunkie.ru

Комментарии:

У Вас недостаточно прав для добавления комментариев.
Возможно, Вам необходимо зарегистрироваться на сайте или пройти авторизацию.

КОММЕНТАРИИ

You are here СТАТЬИ - Способы добавления стилей на web-страницу