Селекторы
Итак, селектор - это формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля.
Простой селектор представляет собой селектор типа, селектор класса либо id-селектор, за которым могут следовать селекторы псевдоклассов и селекторы атрибутов (о последних в данном кратком описании умолчим).
Селектор - это последовательность простых селекторов, разделенных пробелами либо символами ">" и "+" . Указанные разделители имеют следущий смысл.
Пробел в последовательности селекторов соответствует понятию "селектор потомков".
Символ ">" в последовательности селекторов соответствует понятию "дочерний селектор".
Символ "+" в последовательности селекторов соответствует понятию "сестринский селектор".
Селекторы можно (и в ряде случаев, ради рациональности, нужно) группировать, разделяя запятыми. Например, следующая последовательность одинаковых объявлений, задающих цвет символов заголовков первых трех уровней:
h1 { color: navy; } h2 { color: navy; } h3 { color: navy; }
равносильна
h1, h2, h3 { color: navy; }
Селекторы класса
Обычные классы
Селекторы класса позволяют задавать различные стилевые описания для одного и того же HTML-элемента. Название класса указывается после названия элемента и отделяется точкой.
div.red { color: #FF0000; } div.blue { color: #0000FF; } div.fantasy { color: rosybrown; font-size: 24px; }
Универсальный селектор класса
При определении с помощью универсального селектора класс не связывается с конкретным элементом. Такой класс можно применять с любыми элементами, для которых объявленные стилевые свойства имеют смысл. Формально, в таком описании вместо имени элемента следует ставить символ * , например,
*.spring { color: mediumspringgreen; },
однако на практике допустима следующая запись без * :
.spring { color: mediumspringgreen; }
Применение классов стилей
Определенный в таблице стилей класс связывается с HTML-элементм при помощи атрибута class. Для объявленных выше классов в документе HTML (XHTML) это можно сделать, например, так:
<div class="red">... <div class="fantasy">... <div class="spring">... <p class="spring">... <td class="spring">...
По существу, классы позволяют нам расширять структурную логику веб-документа в тех случаях, когда определенных в стандарте элементов не хватает для описания реалий нашего конкретного документа.
Скажем, контент требует выделения особым стилем эпиграфов, терминов, неких особых ссылок. Тогда можно ввести, например, классы
.epigraph {text-align:right; font-style:italic;} .term {background:pink;} a.special {color:navy; font-weight:bold; text-decoration:underline;}
Селекторы id
Свойства id селекторов схожи с свойствами классами. Они также могут использоваться для любого html элемента. id селекторов обозначаются в виде решетки (#). Далее показаны примеры id:
#navigation {width:12em; color:#333;}
div#navigation {width:12em; color:#333;}
Основное отличие id от классов селекторов заключается в том, что id могут использоваться только один раз на странице, в то время как классы - неограниченное количество раз.
Блочная модель в CSS. Плавающая модель в CSS. Позиционирование и визуализация.
Как известно, любой HTML/XHTML-документ состоит из элементов (тегов), образующих некую иерархию. Веб-мастер использует CSS, чтобы принудить браузер определенным образом оформить и отобразить содержимое элементов, превратив его в красиво оформленный документ.
Практически любой элемент браузер воспринимает как прямоугольную область, так, как показано в примере ниже. Это поведение браузера назвается Box Model ("блочная" или "коробочная" модель).
Предположим, мы имеем на входе:
<span>Какой-то контент</span>
В приведенном примере бордюры изображены для наглядности, по умолчанию они имеют нулевую толщину и не видны.
Благодаря CSS мы можем переопределить характеристики каждого блока-прямоугольника - его положение на странице, цвета, толщину и наличие границ, а также шрифт и оформление содержимого блока.
Прямоугольная область, содержащая элемент, состоит из четырёх частей. Это:
Собственно, содержимое элемента (контент)
Бордюр (рамка, англ. "border")
Пространство между содержимым элемента и бордюром (англ. "padding").
Внешнее пространство между бордюром и невидимой границей прямоугольника (англ. "margin").
Существует два типа элементов - блочные ("block") и внутритекстовые ("inline", можно называть как "встроенные").
Блочные (block) элементы
Занимают до 100% ширины родительского элемента. При этом соседним элементам придется подвинуться вниз. Так, например, h1 является блочным элементом - всякий следующий за ним элемент будет отображен ниже.