Синтаксис CSS

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

Давайте рассмотрим эти правила на примере:

В данном примере селектором является "h1", свойствами являются "color", "margin-left" и "font-size", а их значениями соответственно являются "red", "200px" и "20pt". Что это всё означает? А это означает следующее, что элемент внутри тега <h1> станет красным, с отступом слева в 200 пикселей и размером в 20 пунктов.

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

1) Контекстные селекторы.

2) Селектор ID.

3) Селектор CLASS.

4) Селекторы параметров.

5) Стандартный селектор.

Мы с Вами рассмотрели только один стандартный селектор, когда в его качестве выступает обычный HTML-тег (в примере выше, этим тегом был <h1>).

Первые четыре типа селектора CSS обсудим в другой статье в основах CSS. А пятый тип давайте разберём ещё раз.

Первое, что необходимо сделать - это написать HTML-тег (любой из HTML-стандарта). Потом в фигурных скобках указать его свойства и через двоеточие значение. Уверен, что здесь всё понятно.

И, напоследок, хочется сразу разобрать тему псевдоэлементов. Псевдоэлементы нужны для настройки свойств определённого состояния элемента. Например, состояние "наведение мышки" на ссылку, "щелчок мышки" по ссылке и тому подобные вещи. Или, например, первая строка текста. И ещё много чего ещё. Опять же полный набор псевдоэлементов можно посмотреть в справочнике. Я же покажу, как их использовать:

В данном случае, мы задали следующий стиль: посещённые ссылки (состояние "ссылка уже была нажата") красного цвета, а не посещённые ссылки (состояние "ссылка ещё не была нажата") будут синего цвета. Как видите, псевдоэлементы задаются через двоеточие. То есть пишется тег, у которого могут быть псевдоэлементы, дальше ставится двоеточие и пишется название псевдоэлемента. Потом, как обычно, указываются свойства и их значения. И если у данных элементов будет соответствующее псевдоэлементу состояние, то стили будут к нему применены.

Надеюсь, что я познакомил Вас с основами синтаксиса CSS. Если Вы это освоили, то можно двигаться дальше в освоении процесса самостоятельного создания сайта. Кстати, насчёт справочника. Вот даю возможность скачать справочник CSS в chm формате. Там имеется полный набор свойств всех элементов и их возможных значений: Скачать справочник по CSS в chm.