Селекторы соседей

CSS поддерживает использование селекторов соседей, т. е. селекторов тех элементов, которые являются братьями в дереве документа и расположены в документе непосредственно друг за другом. Селекторы соседей образуются путем соединения нескольких селекторов символом "+". Следующее правило уменьшает расстояние между элементамиh1иh2, еслиh2непосредственно следует в документе заh1:

h1 + h2 { margin-top: -5mm }

Свойства css

background- позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметра отдельно.

background: background-attachment || background-color || background-image || background-position || background-repeat

background: #fc0 url(images/hand.png) repeat-y;

color- определяет цвет текста элемента.

color: RGB(49, 151, 116);

opacity - определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.

В качестве аргумента выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.

border- позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту. Для установки рамки только на определенных сторонах элемента, воспользуйтесь параметрамиborder-top, border-bottom, border-left, border-right.

border: 4px double black;

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

outline: outline-color || outline-style || outline-width

outline: 1px solid #666;

Font - универсальный параметр, который позволяет установить одновременно несколько атрибутов стиля шрифта.

font: [font-style || font-variant || font-weight] font-size [/line-height] font-family

В качестве обязательных аргументов параметра fontуказывается размер шрифта и его семейство. Остальные аргументы являются опциональными и задаются при желании. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметра отдельно.

direction- предназначен для сайтов, в которых имеет значение направление текста. Например, при использовании арабского алфавита чтение происходит справа налево.

direction: ltr | rtl

letter-spacing - определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данный атрибут. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.

letter-spacing: значение | normal

line-height- устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение межстрочного расстояния не допускается.

line-height: normal | множитель | значение | проценты

text-align- определяет горизонтальное выравнивание текста в пределах элемента. Этот атрибут наследуется, поэтому может быть установлен для целого блока для воздействия на все вложенные в него элементы.

text-align: center | justify | left | right

text-decoration- добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

text-decoration: blink | line-through | overline | underline | none

text-indent - устанавливает величину отступа первой строки блока текста. Воздействия на все остальные строки не оказывается. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.

text-transform- управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично отnone, регистр исходного текста будет изменен.

text-transform: capitalize | lowercase | uppercase | none

vertical-align- выравнивает элемент по вертикали относительно своего родителя или окружающего текста.

vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | значение | проценты

white-space- устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег<pre>,помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом,white-spaceимитирует работу тега<pre>,но в отличие от него не меняет шрифт на моноширинный.

white-space: normal | nowrap | pre

word-spacing- устанавливает интервал между словами. Если установлен параметр выравниванияjustify, то атрибутword-spacingне действует, поскольку интервал между словами будет установлен принудительно, чтобы строка текста была выровнена по правому и левому краю.

word-spacing: значение | normal

list-style- атрибут, позволяющий одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметраlist-style-type, list-style-position и list-style-imageотдельно.

list-style: list-style-type || list-style-position || list-style-image

clear- параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметраfloat, свойствоclearотменяет его действие для указанных сторон.

clear: both | left | none | right

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

clip: rect(Y1, X1, Y2, X2) | auto

display- многоцелевой атрибут, который определяет, как элемент должен быть показан в документе.

display: block | inline | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-footer-group | table-header-group | table-row | table-row-group

float- определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение параметраfloatравноnone, элемент выводится на странице как обычно, самое большое — одна строка обтекающего текста может быть на той же линии, что и сам элемент.

float: left | right | none