Способы добавления стилей на страницу - «CSS»
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
  • 21 октября 2025, 18:27
Как выбрать между 1С:ERP Управление холдингом и 1С:Управление холдингом 8?
Популярные статьи
  • 28 октября 2025, 10:30
Инсайдер раскрыл главную игру ноябрьской подборки PS Plus до официального анонса - «Новости сети»
Наш опрос
Помогли мы вам



Наши новости
      
      
  • 24 марта 2016, 17:40
Написание эффективного кода
  • 24 марта 2016, 16:20
Базовый синтаксис CSS
Разное и интересное
  • 21 октября 2025, 18:27
Как выбрать между 1С:ERP Управление холдингом и 1С:Управление холдингом 8?
  • 02 мая 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
16-03-2016, 18:25
Способы добавления стилей на страницу - «CSS»
Рейтинг:
Категория: Учебник CSS / Добавления стилей

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

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

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

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML><html> <head>  <meta charset="utf-8">  <title>Стили</title>  <link rel="stylesheet" href="https://hs-design.ru/mysite.css">  <link rel="stylesheet" href="https://hs-design.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. Использование глобального стиля

HTML5CSS 2.1IECrOpSaFx

<!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).

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

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

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

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

HTML5CSS 2.1IECrOpSaFx

<!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).

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

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

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

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

HTML5CSS 2.1IECrOpSaFx

<!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).

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

Импорт CSS

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

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

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

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

HTML5CSS 2.1IECrOpSaFx

<!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 подходит лучше всего?

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

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>
  1. Чёрный
  2. Красный
  3. Зелёный
  4. Синий
  5. Оливковый

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

  1. <style>mystyle.css</style>
  2. <style>@mystyle.css</style>
  3. <link rel="stylesheet" href="https://hs-design.ru/mystyle.css">
  4. <link>@import url(mystyle.css)</link>
  5. <stylesheet>mystyle.css</stylesheet>

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

  1. style
  2. class
  3. styles
  4. font
  5. link

Ответы

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

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

3. <link rel="stylesheet" href="https://hs-design.ru/mystyle.css">

4. style

Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее. Связанные стили При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег . Данный тег помещается в контейнер , как показано в примере 3.1. Пример 3.1. Подключение связанных стилей HTML5 CSS 2.1 IE Cr Op Sa Fx Значение атрибута тега — rel остаётся неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте. Содержимое файла mysite.css подключаемого посредством тега приведено в примере 3.2. Пример 3.2. Файл со стилем Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т. е. таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него. Глобальные стили При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в данном случае прямо на той же странице с помощью контейнера , как показано в примере 3.3. Пример 3.3. Использование глобального стиля HTML5 CSS 2.1 IE Cr Op Sa Fx В данном примере задан стиль тега , который затем можно повсеместно использовать на данной веб-странице (рис. 3.1). Рис. 3.1. Вид заголовка, оформленного с помощью стилей Внутренние стили Внутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут style, а его значением выступает набор стилевых правил (пример 3.4). Пример 3.4. Использование внутреннего стиля HTML5 CSS 2.1 IE Cr Op Sa Fx В данном примере стиль тега задаётся с помощью атрибута style, в котором через точку с запятой перечисляются стилевые свойства (рис. 3.2). Рис. 3.2. Использование внутренних стилей для изменения вида текста Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объём файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков. Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым имеет приоритет внутренний стиль, затем глобальный стиль и в последнюю очередь связанный стиль. В примере 3.5 применяется сразу два метода добавления стиля в документ. Пример 3.5. Сочетание разных методов HTML5 CSS 2.1 IE Cr Op Sa Fx В данном примере первый заголовок задаётся красным цветом размером 36 пикселов с помощью внутреннего стиля, а следующий — зелёным цветом через таблицу глобальных стилей (рис. 3.3). Рис. 3.3. Результат применения стилей Импорт CSS В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Этот метод допускается использовать совместно со связанными или глобальными стилями, но никак не с внутренними стилями. Общий синтаксис следующий. После ключевого слова @import указывается путь к стилевому файлу одним из двух приведенных способов — с помощью url или без него. В примере 3.6 показано, как можно импортировать стиль из внешнего файла в таблицу глобальных стилей. Пример 3.6. Импорт CSS HTML5 CSS 2.1 IE Cr Op Sa Fx В данном примере показано подключение файла header.css, который расположен в папке style. Аналогично происходит импорт и в файле со стилем, который затем подключается к документу (пример 3.7). Пример 3.7. Импорт в таблице связанных стилей В данном примере показано содержимое файла mysite.css, который добавляется к нужным документам способом, показанным в примере 3.1, а именно с помощью тега . Вопросы для проверки 1. Сайт имеет более ста HTML-документов, имеющих одинаковое стилевое оформление. Какой способ подключения CSS подходит лучше всего? Связанные стили. Глобальные стили. Блочные стили. Внутренние стили. Экспорт стиля. 2. В данном примере, какой цвет будет у текста на веб-странице? Чёрный Красный Зелёный Синий Оливковый 3. Какой HTML-код применяется для подключения внешнего CSS-файла? mystyle.css @mystyle.css @import url(mystyle.css) mystyle.css 4. Какой атрибут используется для определения внутреннего стиля? style class styles font link Ответы 1. Связанные стили. 2. Оливковый. 3. 4. style
Просмотров: 4 459
Комментариев: 0:   16-03-2016, 18:25
Распечатать
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:


Другие новости по теме:
ДОБАВИТЬ БАННЕР