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

Каскадные таблицы стили CSS (Cascading Style Sheets) – стандарт стилей, объявленный консорциумом W3C. Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тегами от внешних.

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

CSS – абстракция, в которой внешний вид Web-документа определяется отдельно от его содержания.

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

Внутренние стили определяются атрибутом style конкретных тегов. Внутренний стиль действует только на определенные такими тегами элементы. Этот метод мало отличается от традиционного HTML.

Пример

Абзац с текстом синего цвета

Абзац с текстом красного цвета

Результат

Абзац с текстом синего цвета

Абзац с текстом красного цвета

Не стоит использовать внутренние стили слишком часто, так как тогда Web-документ оказывается перегружен кодом и его внешний вид трудно изменить.

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

Глобальные стили CSS располагаются в контейнере

, расположенном в свою очередь в контейнере

...

Атрибут

type="text/css"

, ранее обязательный для тега

.........

Серый цвет текста во всех абзацах Web-страницы

Серый цвет текста во всех абзацах Web-страницы

Результат

Серый цвет текста во всех абзацах Web-страницы

Серый цвет текста во всех абзацах Web-страницы

Внешние (связанные) стили

Внешние (связанные) стили определяются в отдельном файле с расширением css. Внешние стили позволяют всем страницам сайта выглядеть единообразно. Для связи с файлом, в котором описаны стили, используется тег , расположенный в контейнере .... В этом теге должны быть заданы два атрибута: rel="stylesheet" и href, определяющиЙ адрес файла стилей.

Пример

    ..................
    .........

Подключение стилей

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

p {
    text-indent: 30px;
    font-size: 14px;
    color: #666;
}

Объявление стиля – это пара свойство CSS: значение CSS.

Например: color: red

• color свойство CSS, определяющее цвет текста;
• red значение CSS, определяющее красный цвет.

При внутреннем подключении стиля правило CSS, которое является значением атрибута style, состоит из объявлений стиля, разделенных точкой с запятой. Например:

...