Основной формат правила css (селектор, свойства): синтаксис. Виды селекторов (селектор типа, селектор класса, id-селектор, контекстные селекторы).
Правило CSS - это структурная единица таблицы стилей, которая содержит описание стилей для определенного элемента. Правило состоит из селектора, который всегда располагается слева, и блока объявления стилей, который заключается в фигурные скобки и следует непосредственно за селектором (рисунок). Каждое объявление в свою очередь состоит из свойства и его значения. Именно свойство и определяет вид стиля, который будет применяться к элементу.
Правило может содержать несколько объявлений, отделенных точкой с запятой. После последнего объявления точку с запятой можно не ставить.
Для удобства чтения и редактирования таблиц стилей ее правила обычно записывают таким образом, чтобы каждое объявление располагалось на отдельной строке. Например:
H2 { color: purple; font: bold 16pt Verdana, sans-serif; } |
Селектор типа определяет HTML-элементы, к которым будет применен стиль. Следующее правило, к примеру, задает синий цвет текста для всех заголовков первого уровня:
1 |
h1 { color: blue; } |
Теперь рассмотрим два селектора, для которых сразу необходимо отметить, в чем их отличие, дабы впоследствии не возникало путаницы. Селектор id используется для описания свойств элемента, который встречается в документе только один раз (то есть является уникальным). Двух тегов с одинаковым значением селектора id быть не может.
Чаще всего селекторы id применяются к основному тегу блочной верстки div. Синтаксис использования идентификатора может быть осуществлен двумя способами, в одном из которых упоминается непосредственно тег:
Однако, поскольку идентификатор id применяется только к уникальным элементам, название тега спереди можно опустить и в подавляющем количестве случаев запись селектора с набором определенных свойств выглядит так:
Поэтому, если вы увидите спереди знак решетки #, то знайте, что имеете дело с селектором id.
Если селектор id задает свойства CSS для уникального элемента, то классы (class) дают возможность определить стиль отображения для сколь угодно большого числа элементов. То есть различным тегам может соответствовать один и тот же селектор class, которому соответствуют определенные стили.
Синтаксис для классов следующий:
Но, как в случае с идентификатором, обычно название тега спереди опускается и запись для данного селектора начинается с точки:
Таким образом, если вы вдруг встретите в файле CSS запись с точкой впереди селектора, будете знать, что данные свойства присвоены элементам вебстраницы, атрибутами тегов которых является class.
При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определённом контексте. Например, задать стиль для тега <b> только когда он располагается внутри контейнера <p>. Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого.
Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий.
Тег1 Тег2 { ... }
В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1, как показано ниже.
<Тег1>
<Тег2> ... </Тег2>
</Тег1>
Виды таблиц CSS: внедренные таблицы стилей с помощью атрибута style (синтаксис, примеры), внутренние таблицы стилей с помощью элемента STYLE (синтаксис, примеры), внешние таблицы стилей с помощью элемента LINK (синтаксис, примеры).
Смотреть 18 вопрос