Создание CSS стилей

Каскадные таблицы стилей (CSS) не не призваны заменить обычный HTML-код, а, напротив, являются дополнением к уже существующим элементам HTML. Ознакомившись с основами CSS, вы сразу заметите, насколько этот механизм понятен и удобен в использовании.

Свойство CSS связывается с соответствующим HTML-элементом и указывает браузеру как именно следует воспроизводить объект на экране.

В состав оператора, или правила стиля CSS, входят следующие компоненты:

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

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

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Пример использования стилей CSS</title>

   <style>
      p {color: green;} 
      em {color: red;}
      body {font-size: xx-large;}
   </style>

</head>

<body>
Для данного абзаца задан размер xx-large.
<p>
   Этот текст отображается символами зеленого цвета 
   того же размера, что и в предыдущем абзаце.
</p>
<p>
   Данный абзац выглядит как и предыдущий, но текст 
   между тегом em, <em>показывается красным</em>.
</p>
</body>
</html>

Простой пример использования CSS

Включение CSS-выражений в состав Web-страницы

Существует несколько способов включения стилевых свойств CSS в состав Web-документа.

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

Существуют четыре HTML-тега и три HTML-атрибута, которые могут использоваться для включения CSS-данных на Web-страницу. Это теги <style>, <span>, <div> и <link> и атрибуты style, class и id. Теги используются для модификации Web-документа, его части, либо отдельного HTML-элемента. Атрибуты могут быть присоединены к любому существующему элементу и влияют на формируемое им изображение.

Для связывания CSS-выражений с HTML-элементами используется специальный тег, которому ставится в соответствие CSS-выражение (селектор). Описание помещается в фигурные скобки и отделяется от селектора одним или несколькими пробелами (см. пример выше).

Правила написания CSS стилей

Для лучшего усваивания правил написания CSS свойств проиллюстрирум их на изображении: