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

Применение таблиц стилей основано на принципе разделения информативной и оформительской частей работы над веб-страницами.

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

• шрифты;

• оформление текста;

• цвет фона и переднего плана;

• управление отображением;

• управление списками;

• оформление таблиц;

• размеры элементов;

• отображение элементов;

• границы, отступы, поля;

• управление версткой страниц;

• управление интерфейсом.

Одно из фундаментальных средств CSS — каскад стилей. Стили могут быть указаны

• в рамках элемента;

• документа;

• внешнего документа.

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

Каскадная таблица стилей — это текстовый файл, обычно сохраняемый с расширением .сss. Он создается с помощью обычного текстового редактора или с помощью редактора со встроенной поддержкой каскадных таблиц стилей CSS. Файл содержит правила для синтаксического анализатора браузера по отображению данных. Эти правила состоят из селекторов и объявлений, которые определяют, каким образом данные должны быть представлены пользователю. Селекторы обычно ссылаются на отдельные HTML-элементы, а объявления определяют, каким образом тот или иной выбранный элемент отображается. Объявления содержат пары свойство-значение. Каждое свойство назначает определенное значение. Синтаксис правила CSS приведен ниже:

Селектор {свойство:значение; свойство:значение;...}

HTML-документ связывается с внешней таблицей стилей посредством дескриптора <LINK>:

<link rel="stylesheet" type="text/css" href=URI>

Внутренняя таблица стилей обычно приводится в заголовке документа посредством дескриптора <STYLE>:

<style type="text/css"> <!-- Селектор1 {свойство: значение} Селектор2 {свойство: значение} Селектор3 {свойство: значение}

... --> </style>

В рамках HTML-элемента его стиль определяется атрибутом style:

<ДЕСКРИПТОР style="свойство:значение; свойство:значение;...">

Селекторы стилей

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

• Селектор типа элемента - задаёт стиль всякому элементу данного типа. Обозначается ключевым словом дескриптора соответствующего элемента. Универсальный селектор "*" позволяет задать стиль для каждого элемента документа, независимо от его типа;

• Селектор класса и псевдокласса - для стиля подмножества элементов одного типа или нескольких различных. Селектор класса обозначается произвольным именем с префиксом ".". К кокретному любому элементу стиль можно применить, указав имя класса в атрибуте class <ДЕСКРИПТОР class="имя"> Псевдоклассы имеют свои предопределённые имена. С помощью такого селектора можно выделить элементы документа, имеющие определённый динамический статус. Обозначается ДЕСКРИПТОР:псевдокласс;

  Таблица 2.1. Специальные псевдоклассы
  Имя	Описание
  link	Адресная ссылка <A>, по которой ещё не выполнялся переход
  visited	Адресная ссылка <A>, по которой уже выполнялся переход
  active	Элемент, активизированный щелчком мыши
  hover	Элемент с курсором мыши (без щелчка)
  focus	Элемент в фокусе (готовый принять ввод с клавиатуры)

• Селектор атрибута - для стиля эелементов с определённым атрибутом (или определённым его значением. Обозначается ДЕСКРИПТОР[атрибут=значение];

• Селектор идентификатора - для стиля отдельного элемента с указанным идентификатором. Обозначается ДЕСКРИПТОР#идентификатор

Можно использовать простые селекторы, именем одного тега, но можно строить и более сложные селекторы:

• A> B Такой селектор определяет элемент вида В, который является дочерним для А.

• A> B:first-child Этот селектор определяет первый дочерний элемент.

• А1+А2 Такой селектор отбирает два соседних элемента одного уровня.

• А1, А2 ... Аn Группирование селекторов позволяет сократить описание стилей в случае, если несколько элементов должны иметь одинаковый стиль.

• A:first-line позволяет задать особый формат первой строки текстового содержания элемента.

• A:first-letter позволяет задать особый формат первого символа.

• A:before позволяет вставить генерируемый текст перед содержимым элемента (например, маркер).

• A:after позволяет вставить генерируемый текст после содержимого элемента.