Каскадные таблицы стилей (Cascading Style Sheets css)

Для изменения оформления внешнего вида html-странички часто используют различные таблицы стилей. Идея их применения – отделение параметров внешнего вида документа от массива дескрипторов, определяющих структуру. Причины использования таблиц стилей:

• возможность меняя таблицу стилей менять внешний вид документа, не затрагивая его содержания;

• возможность применения одной таблицы ко многим документам, что позволяет легко придерживаться одного стилевого оформления для разных страниц;

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

Таблицы стилей записываются в отдельный текстовый файл (файлов может быть несколько) с расширением .css или в элементе заголовка style.

Правила определения стиля (синтаксис) для языка CSS состоят из селекторов (selectors) и деклараций (declarations). ↓ Селекторы позволяют определять набор элементов текста html к которым будет применен данный стиль. Для каждого селектора необходимо указать набор деклараций. ↓ Декларации определяют, как будут отображаться соответствующие элементы.

↓h1 {font–family: Arial; font – size: 48 pt; color: red}

h1 – селектор, в фигурных скобках набор деклараций. Декларация состоит из свойства (property), за которым следует двоеточие, пробел и значение, затем точка с запятой. Свойства аналогичны атрибутам, иногда их написание и написание значений совпадают.

Правило лучше располагать так:

h1 {

font–family: Arial;

front – size: 48 pt;

color: red

}

Специализация селекторов.

Все селекторы можно разделить на несколько видов. Виды показывают, для каких элементов языка HTML будет применен стиль.

↓- селекторы элементов определены для всех экземпляров определенного элемента текста HTML:

Элемент (имя тега без < >) {имя параметра: значение; имя параметра: значение; …}

↓Пример: h1 {font–family: Arial; front – size: 48 pt; color: red}

↓- селекторы классов определены для всех экземпляров элемента HTML принадлежащих к определенному классу

элемент.имя_класса {параметр: значение; … }

или

.имя_класса {параметр: значение; … }

↓Пример: p.question {color: green} (абзац.вопрос)

.question {color: green}

при использовании следует указывать соответствующий класс в документе HTML

<p class = “question”> … </p>

↓- селекторы идентификаторов используются для отдельных экземпляров, определенных с помощью атрибута id. Каждый элемент может быть обозначен собственным идентификатором. В одном документе все идентификаторы должны быть различны.

элемент(может не быть)#имя индивидуального стиля {параметр: значение; …}

↓Пример. В файле с таблицей стиля селектор идентификатора может быть описан так: p#question{color: green; text-align: center}

↓или так:

#question{color: green; text-align: center}

В файле с HTML-страничкой описанный стиль будет использоваться так:

<p id=”question”> … </p>

- селекторы псевдоклассов используются для описания стиля гиперссылок <a>

a: link {color: blue} - неиспользованная ссылка

a: visited {color: green} - использованная ссылка

a: active {color: red} - активная ссылка

a: hover {color: red; font-wight: bold} – при наведении курсора на ссылку

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

p, li, h1 { font–family: Arial }

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

#menu p { font–family: Arial } (стиль будет применён к абзацу, вложенному в элемент со значением идентификатора menu).

p blockquote { font–family: Arial } (стиль будет применён к цитате, которая является частью абзаца)

blockquote p { font–family: Arial } (стиль будет применён к абзацу, являющемуся частью цитаты)

#menu p.term { font–family: Arial } (стиль будет применён к абзацу, который относится к классу term и находится в разделе со значением идентификатора menu).