CSS – каскадные таблицы стилей. Обзор, история, верстка
Синтаксис в CSS
Таким образом, стиль CSS (рис 4.2) состоит из селектора, который всегда располагается слева, и блока объявления стилей, который заключается в фигурные скобки и следует непосредственно за селектором.
Отдельное объявление в свою очередь состоит из свойства и его значения. Свойства обозначают вид стиля, который будет применен к элементу, выбранному с помощью селектора. Примеры свойств: color - задает цвет элемента, font-size - задает размер шрифта, padding-left - задает отступ слева, border - задает рамку вокруг элемента.
Собственно, это практически все правила синтаксиса каскадных таблиц стилей. Можно добавить, что один стиль может содержать сколько угодно комбинаций свойств: значение и пары отделяются друг от друга точкой с запятой. CSS селекторы не зависят от регистра, поэтому названия селекторов могут быть написаны как прописными, так и строчными буквами. Например, селекторы h1 и H1 совершенно равноправны.
Псевдокласс.
Псевдокласс позволяет учитывать различные условия или события при определении свойств HTM тэга.
Рассмотрим пример. Как вы знаете, ссылки специфицируются в HTML тэге <a>. В CSS мы также можем использовать a в качестве селектора:
a {
color: blue;
}Ссылка может иметь разные состояния. Например, её уже посетили /visited или ещё нет. Можно использовать псевдоклассы для установки разных стилей посещённых и непосещённых ссылок.
a:link {
color: blue;
}
a:visited {
color: red;
}Используйте |a:link| и |a:visited| для непосещённых и посещённых ссылок, соответственно. Активные ссылки имеют псевдокласс a:active, и a:hover, когда указатель - над ссылкой.
Мы рассмотрим каждый их этих четырёх псевдоклассов на примерах и с объяснениями.
Псевдокласс: link
Псевдокласс :link используется для ссылок на страницы, которые пользователь ещё не посещал.
В примере кода непосещённые ссылки - синие.
a:link {
color: #6699CC;
}Псевдокласс: visited
Псевдокласс :visited используется для ссылок на страницы, которые пользователь посетил. В примере кода посещённые ссылки - фиолетовые.
a:visited {
color: #660099;
}Псевдокласс: active
Псевдокласс :active используется для активных ссылок.
В примере активные ссылки имеют жёлтый фон.
a:active {
background-color: #FFFF00;
}Псевдокласс: hover
Псевдокласс :hover используется для ссылок, над которыми находится указатель мыши.
Это можно использовать для создания интересных эффектов. Например, если мы хотим, чтобы ссылки становились оранжевыми и курсивными при прохождении указателя над ними, то наш CSS должен выглядеть так:
a:hover {
color: orange;
font-style: italic;
}Модель форматирования. Чтобы правильно применять правила форматирования, следует представлять как в каскадных стилях происходит форматирование элементов, т.е. на что можно влиять и что можно изменять в отображении элемента. Модель форматирования CSS ориентирована на представление любого элемента html в окружении вложенных прямоугольных блоков.
Блок содержимого элемента (рис 4.3) отделен от границы отступами. Самым внешним блоком является поле. Свойства таблицы стилей позволяют устанавливать размеры и цвета всех блоков, составляющих в сумме отображаемый элемент. "Поле" всегда прозрачно, поэтому его цвет наследует цвет родителя элемента (для <p> - это <body> ). Отступ всегда имеет цвет фона самого элемента. Все перечисленные блоки в совокупности составляют блок форматирования или отображения элемента, т.е. видимое в окне браузера изображение элемента. Размеры блока форматирования элемента складываются из размеров самого элемента и размеров отступов границы и полей. Блоковые элементы. Каждый элемент модели форматирования имеет свойство display, а его параметры: none, block, list-item, inline.
- none - определяет отображается или нет элемент
- block - элемент является блоком
- list-item - элемент является списком
- inline - встроенный элемент
Элементы могут иметь еще свойство float: none, left, right
- none - элемент не плавающий
- left, right - элемент плавающий, сдвигается влево или вправо до поля отступа или границы другого блокового элемента.
Элемент выводится при этом из нормального потока отображения и форматируется как блоковый элемент, а нормальный поток отображения будет обтекать его с правой или с левой стороны. Блоковые элементы - это элементы, у которых свойство display = block или list-item, а также элементы со значением свойства float, отличным от значения none. Их форматирование связано с установкой значений соответствующих параметров вложенных блоков, составляющих элемент в целом.
Горизонтальное форматирование элемента определяется значениями 7 свойств:
- margin-left - левое поле
- margin-right - правое поле
- border-left - левая граница
- border-right - правая граница
- padding-left - левый отступ
- padding-right - правый отступ
- width - ширина
Ширина элемента ( width ) - расстояние между левым и правым внутренними краями. Высота элемента ( height ) - расстояние между внутренним верхом и низом. Вертикальное форматирование блоковых, но не плавающих элементов. У них значения параметров "верхнее поле" и "нижнее поле" определяют минимальное расстояние до границ блоков, окружающих их элементов. Если у двух примыкающих элементов определены не нулевые значения параметров полей, то поля этих двух элементов сливаются в одно, со значением, равным максимальной высоте поля одного из двух элементов. Встроенные элементы. Элементы, которые не форматируются как блоковые, являются встроенными элементами ( inline ). Они совместно с другими элементами используют область строки. Свойства форматирования элементов. Все доступные свойства форматирования элементов в документе html разбиты на 9 категорий:
- Шрифт - устанавливает типографские свойства шрифтов
- Цвет и фон - определяет цвет текста и фона, а также картинки в качестве фона
- Текст - определяет выравнивание, форматирование, разрядку текста
- Блок - свойство форматирования блоковых элементов
- Визуальное форматирование - свойства, связанные с блоками отображения элементов, их позиционированием и отображением списков
- Фильтры и переходы - определяют мультимедийные эффекты и преобразования графических изображений.
- Печать - определяет спецификацию разрыва страницы
- Псевдоклассы - включаются свойства: @import, cursor, important
- Все остальные свойства
Позиционирование в CSS
Box-модель в CSS и типы позиционирования.
Прежде чем приступить, советую вам прочитать статью Box-модель в CSS. В двух словах: каждый элемент в html - это прямоугольник, для которого можно указать величины внутренних и внешних отступов, а также границу, которая разделяет их.
Схемы позиционирования определяют где должен располагаться этот прямоугольник, а также как он должен влиять на элементы вокруг себя.
Свойство position в CSS может принимать пять значений:
- absolute
- relative
- fixed
- static
- inherit
Значение static используется по умолчанию. Любой элемент с позиционированием static находится в общем потоке документа. Правила для его размещения определяются Box-моделью. Для таких элементов, свойства top, right, bottom и left будут игнорироваться. Для того, чтобы использовать эти свойства, позиционирование элемента должно быть абсолютным ( absolute ), относительным ( relative ) или фиксированным ( fixed ).
Значение inherit, как и во всех остальных свойствах CSS, используется для того, чтобы элемент использовал тоже самое значение, что и родительский элемент.
Абсолютное позиционирование
Абсолютное позиционирование удаляет элемент из общего потока документа. Что касается элементов вокруг, то в этом случае они просто игнорируют искомый, как будто ему установлено свойство display: none;. Если вы не хотите чтобы пространство для такого элемента заполнялось другими элементами, то вам надо придумать другой подход.
Вы устанавливаете расположение элемента с абсолютным позиционированием, используя свойства top, left, right и bottom. Вам достаточно указать два из них, top или bottom и left или right. Если ни одного свойства не указано, то устанавливается 0 для пары top - left.
Ключевой момент в абсолютном позиционировании - это понимание того, что является точкой отсчёта. Если свойству top указано значение 20px, то откуда их необходимо отсчитывать.
Ответ прост: такие элементы позиционируются относительно ближайшего родительского элемента, для которого задано позиционирование отличное от static. Если такого элемента нет, то элемент позиционируется относительно основного документа. То есть при установке абсолютного позиционирования, CSS сообщает браузеру, чтобы он посмотрел на родительский элемент и, если его позиционирование не статическое, то надо выровнять текущий элемент относительно него.
Относительное позиционирование
Относительно позиционированные элементы, размещаются на основе своей же позиции, обычный сдвиг относительно своего нормального расположения. Это похоже на то, как если бы вы добавили элементу внешние отступы с помощью свойства margin. Однако есть одно существенное различие: соседние элементы, в случае использования позиционирования, не учитывают этот сдвиг.
Представьте себе это так: некое изображение сдвигается, а на его месте остаётся "призрак", все элементы располагаются относительно этого "призрака". Это позволяет нам накладывать элементы друг на друга.
Таким образом, элементы с относительным позиционированием, взяты из нормального потока элемента, но по-прежнему оказывают влияние на расположение соседних элементов, которые ведут себя так, что исходный элемент всё ещё находится в потоке документа.
В этом случае мы не должны задавать вопрос относительно чего здесь позиционируется элемент. Ответ всегда: нормальный поток документа. Очень похоже на то, что вы добавили внешний отступ к элементу, но в то же время не повлияли на соседние элементы.
Фиксированное позиционирование
Фиксированное позиционирование действует подобно абсолютному, с небольшими различиями.
Во-первых, элемент с фиксированным позиционированием всегда располагается относительно окна браузера, родительские элементы при этом игнорируются.
Второе отличие исходит из его названия. Фиксированные элементы зафиксированы на странице. Они не смещаются при её прокручивании.
Z-index
Страница сайта двумерна. У неё есть ширина и высота. Z-index добавляет третье измерение, глубину.
Чем выше этот индекс тем выше на странице расположен элемент. С помощью него можно добиться, чтобы один элемент располагался поверх другого.