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

Лекция

Привет, сегодня поговорим про способы добавления стилей на страницу в css, обещаю рассказать все что знаю. Для того чтобы лучше понимать что такое способы добавления стилей на страницу в css , настоятельно рекомендую прочитать все из категории Каскадные таблицы стилей CSS/ CSS3.

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

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

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

Пример 3.1. Подключение связанных стилей

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Стили</title>
  <link rel="stylesheet" href="http://htmlbook.ru/mysite.css">
  <link rel="stylesheet" href="http://www.htmlbook.ru/main.css">
 </head>
 <body>
   <h1>Заголовок</h1>
   <p>Текст</p>
 </body>
</html>

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

Содержимое файла mysite.css подключаемого посредством тега <link> приведено в примере 3.2.

Пример 3.2. Файл со стилем

H1 {
  color: #000080;
  font-size: 200%;
  font-family: Arial, Verdana, sans-serif;
  text-align: center;
}
P {
  padding-left: 20px;
}

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

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

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

Пример 3.3. Использование глобального стиля

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Глобальные стили</title>
  <style>
   H1 { 
    font-size: 120%; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    color: #333366; 
   }
  </style>
 </head>
 <body>
  <h1>Hello, world!</h1>
 </body>
</html>

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

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

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

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

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

Пример 3.4. Использование внутреннего стиля

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Внутренние стили</title>
 </head>
 <body>
  <p style="font-size: 120%; font-family: monospace; color: #cd66cc">Пример текста</p>
</body>
</html>

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

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

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

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

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

Пример 3.5. Сочетание разных методов

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Подключение стиля</title>
  <style>
   H1 { 
    font-size: 120%; 
    font-family: Arial, Helvetica, sans-serif; 
    color: green; 
   }
  </style>
 </head>
 <body>
   <h1 style="font-size: 36px; font-family: Times, serif; color: red">Заголовок 1</h1>
   <h1>Заголовок 2</h1>
 </body>
</html>

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

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

Рис. 3.3. Результат применения стилей

Импорт CSS

В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Этот метод допускается использовать совместно со связанными или глобальными стилями, но никак не с внутренними стилями. Общий синтаксис следующий.

@import url("имя файла") типы носителей;
@import "имя файла" типы носителей;

После ключевого слова @import указывается путь к стилевому файлу одним из двух приведенных способов — с помощью url или без него. В примере 3.6 показано, как можно импортировать стиль из внешнего файла в таблицу глобальных стилей.

Пример 3.6. Импорт CSS

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Импорт</title>
  <style>
   @import url("style/header.css");
   H1 { 
    font-size: 120%; 
    font-family: Arial, Helvetica, sans-serif; 
    color: green; 
   }
  </style>
 </head> 
 <body>
   <h1>Заголовок 1</h1>
   <h2>Заголовок 2</h2>
 </body>
</html>

В данном примере показано подключение файла header.css, который расположен в папке style.

Аналогично происходит импорт и в файле со стилем, который затем подключается к документу (пример 3.7).

Пример 3.7. Импорт в таблице связанных стилей

@import "/style/print.css";
@import "/style/palm.css"; 
BODY {
 font-family: Arial, Verdana, Helvetica, sans-serif;
 font-size: 90%;
 background: white;
 color: black;
}

В данном примере показано содержимое файла mysite.css, который добавляется к нужным документам способом, показанным в примере 3.1, а именно с помощью тега <link>.

Вопросы для проверки

1. Сайт имеет более ста HTML-документов, имеющих одинаковое стилевое оформление. Какой способ подключения CSS подходит лучше всего?

Связанные стили.
Глобальные стили.
Блочные стили.
Внутренние стили.
Экспорт стиля.

2. В данном примере, какой цвет будет у текста на веб-странице?

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цвет текста</title>
  <style>
   HTML { color: black; }  
   BODY { color: red; }
   P { color: green; }
  </style>
 </head>
 <body>
  <p style="color: blue;"><span style="color: olive;">Текст</span></p>
 </body>
</html>

Черный
Красный
Зеленый
Синий
Оливковый

3. Какой HTML-код применяется для подключения внешнего CSS-файла?

<style>mystyle.css</style>
<style>@mystyle.css</style>
<link rel="stylesheet" href="http://htmlbook.ru/mystyle.css">
<link>@import url(mystyle.css)</link>
<stylesheet>mystyle.css</stylesheet>

4. Какой атрибут используется для определения внутреннего стиля?

style
class
styles
font
link

Ответы

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

2. Оливковый.

3. <link rel="stylesheet" href="http://htmlbook.ru/mystyle.css">

4. style

На этом все! Теперь вы знаете все про способы добавления стилей на страницу в css, Помните, что это теперь будет проще использовать на практике. Надеюсь, что теперь ты понял что такое способы добавления стилей на страницу в css и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Каскадные таблицы стилей CSS/ CSS3

Из статьи мы узнали кратко, но содержательно про способы добавления стилей на страницу в css

Ответы на вопросы для самопроверки пишите в комментариях, мы проверим, или же задавайте свой вопрос по данной теме.

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

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

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

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

Импорт CSS

Вопросы для проверки

Ответы

Комментарии

Оставить комментарий

Каскадные таблицы стилей CSS/ CSS3

Термины: Каскадные таблицы стилей CSS/ CSS3