5. Синтаксис css.

Цель CSS. Основные элементы синтаксиса: листы, правила, блоки объявлений, селекторы и т.п. Виды селекторов. Примеры свойств.

Cascading Style Sheets (CSS) - каскадные таблицы стилей. Таблицы стилей - попытка отделить детали дизайна странички от ее структуры и содержания. CSS позволяет назначить всем объектам стиль, описание которого может храниться в отдельном файле. Используя CSS, ты можешь изменить размер шрифта во всех страницах сайта, исправив только один файл с описанием стилей. Самое главное, что не придется менять уже готовые HTML документы, лежащие на сервере. Браузер пользователя сам обратится к файлу (по ссылке) со стилями и придаст страничке нужный облик.

Главный строительный блок CSS — это правила. Можно сказать, что сама таблица стилей состоит из набора правил.

Каждое правило имеет две основные части: селектор (selector) и блок объявлений (declaration block). Селектор определяет, к чему будут применяться стили, блок объявлений — какие стили применяем. Блок объявлений состоит из одного или нескольких объявлений (declarations), а каждое объявление — это сочетание свойства (property) и его значения (value).

Составление CSS правил:

• Первым указывается селектор (к чему применяем стили). Допускается указывать несколько селекторов через запятую.

• Далее идет блок объявлений в фигурных скобках (собственно список применяющихся стилей).

• Отдельные объявления внутри блока объявлений разделяются точкой с запятой. После последнего объявления в каждом правиле точку с запятой можно не ставить.

• Каждое объявление представляет собой имя CSS свойства и его желаемое значение, разделенные двоеточием.

Типы селекторов правил CSS:

• Тег —  div{color:red}

• id - #back{color:red}. Т.е. когда в селекторах стоит решетка #, а за ней какое-то слово, значит мы ищем элемент с таким атрибутом id, и для него применяем правило. Значение атрибута id всегда уникальное. Лучше его применять в отдельных областях (шапка сайта, левая колонка, футер), т.е. создаем здесь элементы с уникальным атрибутом id.

• Класс - .blue{color:blue}. Т.е. когда элементы в разных частях страницы имеют одинаковое оформление. Значение атрибута не уникальное, т.е. его можно применять у разных элементов. Можно применять пробелы, чтобы отделять друг от друга разные классы. Атрибут «класс» лучше использовать при описании элементов, которые могут повторяться в разных областях.

• Атрибуты - [title]{background:#ffc;}. И так можно задавать правила для любого атрибута. В атрибутах можно указывать и точное значение (см. пример ниже) и правило для него. При этом учитывается регистр слов.

• Псевдоклассы. «Псевдо» — потому что в коде никаких классов нет. Это состояние вашего элемента, которое формируется в результате построения вашего документа (т.е. можно описывать элементы в зависимости от их месторасположения в документе) или от состояния, которое получается в результате ваших действий (например, навели мышкой на элемент, у него появился псевдокласс, увели мышку с элемента, псевдокласс исчез).