начало → тема 2 → основные правила языка CSS

02. Основные правила языка CSS

На этой странице:

Вверх Формат стилевого определения

Язык CSS очень прост. В CSS-коде записывается цепочка определений. Определение содержит заголовочную часть — селектор и тело в фигурных скобках. Внутри тела записывается список правил.

CSS-определение

Правила отделяются друг от друга символом “;”. Последняя точкой с запятой не обязательна, но её лучше записывать, чтобы избежать ошибки при пополнении списка правил.

Селектор связывает определение с элементами HTML. Правила описывают свойства элементов. Браузер применяет указанные правила к тем элементам, которые задаёт селектор.

В примере записано CSS-определение, которое будет применяться ко всем элементам P. В примере задано два правила. Первое назначает красный цвет для текста, второе — увеличивает текущий размер шрифта в 2 раза.

CSS-правило

Синтаксис языка CSS допускает написание ключевых слов в любом регистре. Так свойство color может быть записано и как COLOR. Для лучшей читаемости кода рекомендуется записывать ключевые слова языка в нижнем регистре (color).

Пробелы (и концы строк) можно использовать для улучшения читаемости кода, они игнорируются браузером, кроме пробела между числом и единицей измерения.

Наименование единицы измерения пишется слитно с числовым значением свойства. Запись font-size:200 % является ошибочной, правильная запись: font-size: 200% (или font-size:200%).

Каждое правило строится по формуле: свойство: значение. Свойство — это ключевое слово языка (такое, как color или font-size). Значение — это параметр или набор параметров, которые предусмотрены в CSS отдельно для каждого свойства.

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

Ниже приводится абзац, для которого применены два стилевых правила: color:red и font-size:200%.

К этому абзацу применены два стилевых правила. Первое окрашивает текст в красный цвет, второе увеличивает размер шрифта в два раза.

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

Комментарии в любом языке облегчают разработчику жизнь, как нить Ариадны, помогая найти путь в лабиринтах кода.

Комментарии в языке CSS записываются при помощи конструкции /* Это комментарий CSS */: 

/* Определение для абзацев */
/* ----------------------- */
P 
{
  color:red;      /* красный текст */
  font-size:200%; /* шрифт, увеличенный в 2 раза */
}

Вверх Как CSS работает совместно с HTML

P
{
  color:red;
  font-size:200%;
}

Вот мы придумали CSS-определение. Возникает вопрос: где его надо записать, чтобы оно работало?

Существуют три способа расположения стилевых определений:

  • в отдельном CSS-файле;
  • в головной части HTML-файла;
  • в открывающем теге отдельного элемента HTML.

CSS в отдельном файле

Самое правильное — сохранять CSS-определения в отдельном файле с расширением css.

Для связи стилевого файла с файлами HTML в головной части последних нужно записывать элемент LINK с указанием имени стилевого файла. Пусть стилевой файл назван style.css. Тогда элемент LINK будет выглядеть следующим образом: 

<LINK rel="stylesheet" type="text/css" href="style.css">

Рассмотрим пример.

Файл style.css 

P
{
  color:red;
  font-size:200%;
}

Файл index.htm

Посмотреть

Обратите внимание: все абзацы документа (элементы P) записываются красным цветом с размером шрифта увеличенным в 2 раза. На остальные элементы (H1, PRE, HR) стилевое определение не подействовало. И это понятно, ведь в качестве селектора в нём записано: P.

Почему хранение CSS-определений в отдельном файле является самым правильным решением? Это понятно: за внешний вид сотен HTML отвечает единственный файл. Изменения в этом файле окажут влияние сразу на все страницы сайта, без просмотра их HTML-кода и редактирования. Замечательно!

CSS в головной части HTML-файла

Правила позволяют записывать CSS-определения внутри элемента STYLE, который должен размещаться в головной части HTML-кода:

Файл index.htm

Посмотреть

Стилевые определения располагаются внутри элемента STYLE “запакованные” в HTML-комментарии (для браузеров, которые не поддерживают CSS).

Понятно, что правила, заданные в STYLE действуют только внутри того HTML, в котором они записаны.

Когда может потребоваться такая форма совмещения CSS с HTML? В двух случаях:

  1. Если HTML-файл один (редкий случай).
  2. Если нужно для конкретного документа записать специальный набор определений, которые дополняют или изменяют общие правила, описанные в отдельном стилевом файле.

На самом деле, и в этих случаях рекомендуется записывать CSS в отдельном файле. В первом варианте — на случай появления других файлов HTML. Во втором — на случай распространения стилевых особенностей данного документа на некоторые другие. Для подсоединения к HTML нескольких стилевых файлов нужно записывать столько же элементов LINK со ссылками на соответствующие CSS: 

<LINK rel="stylesheet" type="text/css" href="main.css">
<LINK rel="stylesheet" type="text/css" href="part.css">

В приведённом выше примере к HTML будут подключены два стилевых файла: один общий — main.css, другой с описанием особенностей — part.css. Порядок следования элементов LINK важен. Если в part.css переопределяются некоторые указания (например, красный цвет в абзацах заменяется зелёным), то LINK с part.css должен быть последним.

CSS в открывающем теге отдельного элемента

Стилевые правила разрешается внедрять прямо в открывающие теги элементов при помощи атрибута style:

Файл index.htm

Посмотреть

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

CSS, внедрённый прямо в элемент (скажем, в абзац), будет работать только для этого конкретного элемента (конкретного абзаца) и ни для какого другого.

Когда нужно пользоваться атрибутом style для записи CSS-правил? Практически — никогда! CSS введён для того, чтобы освободить HTML от визуальных описаний, оставив в нём только структурную разметку. Если мы начнём использовать CSS в тегах, то тем самым снова нарушим основной постулат правильного кодирования, который Джеффри Зельдман в своей книге “Web-дизайн по стандартам” сформулировал так: “содержание и дизайн должны спать в разных кроватях”.

Для чего же тогда введён атрибут style, если пользоваться им настоятельно не рекомендуется (а это так)? Во-первых, для синтаксической полноты языковой связки HTML+CSS. А кроме того, для следующих двух случаев:

  1. Стилевые указания в HTML применяются к единственному элементу на странице.
  2. Для того чтобы в данном конкретном элементе отменить (переназначить) стилевые правила, описанные в отдельном файле CSS или в головной части текущего HTML.

На самом деле, и в этих случаях рекомендуется записывать CSS в отдельном файле. В первом варианте — на случай появления других стилевых описаний. Во втором — на случай распространения стилевых особенностей данного элемента на некоторые другие. А главное, для того, чтобы уложить содержание и дизайн по “разным кроватям”!

начало → тема 2 → основные правила языка CSS