CSS стили предназначены для визуального форматирования страницы. Они могут быть встроены в элемент, в саму страницу или находится во внешнем файле. Рассмотрим, как подключить и использовать css-форматирование.

Стиль как атрибут элемента

Стиль можно добавить непосредственно к элементу, использовав атрибут style. Этот стиль имеет, как правило, более высокий приоритет, но, если его нужно изменить в нескольких местах, это будет сделать достаточно трудно. Поэтому применяют такое решение редко. Такое стилевое оформление называется внутренним, встроенным или инлайновым:

Встраивание тегов на страницу

Стили также могут быть встроены на страницу. Для этого в блоке head размещают теги style:

Внимание! Тег style обязательно должен быть закрыт. Иначе вы не увидите текста страницы!

Такого рода форматирование касается только данной конкретной страницы. Чтобы аналогичным образом отформатировать другую страницу, необходимо будет скопировать все, что есть в тегах style и добавить в <head> другой страницы. Т.е. этот способ подходит для создания тестовых страниц, но не подходит для использования на сайте, где большинство страниц имеет одинаковое форматирование.

Подключение внешнего файла стилей

Весь css-код размещают в отдельном css-файле. По сути это обычный текстовый файл, который содержит код в формате css и имеет расширение .css.

В атрибуте href записывается путь к css-файлу, как правило, относительный. Например, если файл называется style.css и находится в папке css, то в теге link будет такая запись:

Внимание! В css-файле можно размещать только код и комментарии в css-синтаксисе, но не в HTML-синтаксисе!

Запись css-правил

Внутри css-файла все правила записывают в следующем виде:

Т.е. правила пишутся внутри фигурных скобок в виде пар свойство: значение свойства, разделенных точкой с запятой. После последнего правила ставить точку с запятой необязательно.
В качестве селектора может выступать какой-нибудь элемент, группа элементов, класс или id (см. статью о селекторах css). Более сложные селекторы рассмотрим позже.

Импорт css-файла

Определяется директивой @import, которую записывают либо внутри основного css-файла, либо в тегах style. Строка с импортом всегда должна быть в самом начале css-файла или сразу за открывающимся тегом <style>. После нее можно записывать другие css-правила.

Комментарии в CSS

Комментарии в CSS предназначены для того, чтобы скрыть часть css-кода. Код в комментариях не влияет на форматирование. Записываются комментарии так:

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

Очень часто комментарии используют, чтобы указать разделы сайта в css-файле, для которых пишутся правила форматирования. Такой код становится намного читабельней:

Все, что находится между /* */ не интерпретируется браузером, как css, поэтому внутри этих знаков можно использовать дополнительные пробелы, черточки и т.д. для улучшения зрительного восприятия.

 

Автор: Админ

3 комментария

  1. Мне все понравилось, потому что все хорошо объяснено. Спасибо.

  2. Просто и понятно. Буду пользоваться всеми способами подключения стилей.

  3. Спасибо. Все понятно.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *