Каскадные таблицы стилей CSS. Назначение и общая структура. Типы селекторов.

⇐ ПредыдущаяСтр 5 из 8Следующая ⇒

Стиль - набор параметров, задающий внешнее представление объекта. Например, пусть мы хотим, чтобы все заголовки первого уровня (теги < h1> ) на одной странице имели красный цвет, размер - 24 и были написаны курсивом, а на другой странице были бы синего цвета, размера - 12. Наш заголовок - это объект, а цвет, размер и начертание - это параметры. Просто параметры нашего объекта для разных страниц разные, т.е. они отличаются стилем.

Каждый элемент на странице может иметь свой стиль (параграфы, заголовки, линии, текст...). Набор стилей всех элементов называют таблицей стилей.

Если для одного элемента задано несколько стилей (как в примере с заголовками), то применяется каскадирование, которое определяет приоритет того или иного стиля.

Селектор — это как раз то, к чему применяется какое-либо правило.

Типы селекторов

h1 - элемент h1

.class - значение атрибута class

#id - значение атрибута id

* - все элементы

div * - все элементы внутри div

div span - span внутри div

div, span - div и span

div > span - span, у которого div - непосредственный предок

div + span - span, перед которым было < div>...< /div>

div.class - div, у которого значение атрибута class = class

div#footer - div, у которого значение атрибута id = footer

a[class] - a, у которого есть атрибут class

a[class='x'] - a, у которого атрибут class = " x"

a[class~='x'] - a, у которого атрибут class является списком разделенных

пробелами значений и одно из них - " x".

a[lang|='en'] - a, у которого атрибут lang начинается с " en".

Селектор по элементу

В качестве селектора указывается имя элемента HTML, и он действует на все элементы в документе, имеющие это имя.

Селектор по id

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

Затем в таблице стилей нужно записать селектор, состоящий из символа решетки (#), непосредственно за которым следует значение атрибута id. Можно указать перед решеткой имя элемента HTML.

Если у нас только один документ HTML, нет никакой разницы, указывать ли в этом селекторе имя элемента. Всякое значение id может быть только у одного элемента в документе: например, если уже есть < h2 id=" gotonew" >, то в этом же файле HTML нельзя записать < p id=" gotonew" > или даже еще один заголовок < h2 id=" gotonew" >.

Но если одна и та же таблица стилей применяется для оформления нескольких страниц, разница между селекторами #new и h2#new может проявиться: в одном документе атрибут id=" gotonew" может быть у одного элемента, а в другом этот же атрибут — совершенно у другого.

Селектор по класс

Если требуется одинаково оформить несколько элементов, можно присвоить каждому из этих элементов атрибут class с одним и тем же значением, например: abstract.

Этот селектор действует на все элементы, имеющие атрибут class со значением abstract. В отличие от атрибута id, атрибут class может иметь одно и то же значение у нескольких элементов.

Селектор по классу также можно использовать вместе с именем элемента, например: h3.abstract.

В этом случае селектор будет действовать только на заголовки третьего уровня (h3), имеющие атрибут class со значением abstract, и не будет действовать, например, на абзацы текста (р) или элементы перечня (li), даже если в их открывающем тэге написано class=" abstract".

Контекстный селектор

Этот селектор применяется, когда оформление элемента должно зависеть не только от самого этого элемента, но и от того, в какой элемент он вложен. (Например, мы хотим раскрасить в определенный цвет каждый отдельный пункт маркированного перечня, но при этом оставить нераскрашенными нумерованные перечни.)

Такой селектор будет действовать на все элементы li при условии, что эти элементы вложены в элемент ul. На элементы li, вложенные в ol, он не действует

Контекстный селектор состоит из двух или нескольких селекторов одного из предыдущих типов, описанных ранее. Эти селекторы отделяются друг от друга пробелами.

Если записать несколько селекторов через запятую и пробел, получится объединенный селектор, который будет действовать на все перечисленные элементы.

Патэрн	Смысл	Описан в разделе
*	Совпадает любой элемент.	Универсальный селектор
E	Совпадает любой элемент E (т.е. элемент типа E).	Типы селекторов
E F	Совпадает любой элемент F, являющийся потомком элемента E.	Селекторы-потомки
E > F	Совпадает любой элемент F, являющийся дочерним относительно элемента E.	Дочерние селекторы
E: first-child	Совпадает элемент E, если E является первым дочерним элементом своего родителя.	Псевдокласс: first-child
E: link E: visited	Совпадает элемент E, если E является якорем ещё не посещённого ресурса гиперссылки (: link) или уже посещённого (: visited).	Псевдоклассы гиперссылки
E: active E: hover E: focus	Совпадает элемент E во время определённых действий пользователя.	Динамические псевдоклассы
E: lang(c)	Совпадает элемент типа E, если он на (человеческом) языке с (язык документа специфицирует то, как определяется язык).	Псевдокласс: lang()
E + F	Совпадает любой элемент F, непосредственно перед которым идёт элемент E.	Смежные селекторы
E[foo]	Совпадает любой элемент E с установленным атрибутом " foo" (с каким-либо значением).	Селекторы атрибутов
E[foo=" warning" ]	Совпадает любой элемент E, чьё значение атрибута " foo" точно равно " warning".	Селекторы атрибутов
E[foo~=" warning" ]	Совпадает любой элемент E, чьё значение атрибута " foo" является списком разделённых пробелами значений, одно из которых точно равно " warning".	Селекторы атрибутов
E[lang\|=" en" ]	Совпадает любой элемент E, чей атрибут " lang" содержит список разделённых дефисами значений, начинающийся (слева) с " en".	Селекторы атрибутов
DIV.warning	Только в HTML. То же, что DIV[class~=" warning" ].	Селекторы классов
E#myid	Совпадает любой ID элемента E, эквивалентный " myid".	Селекторы ID

Универсальный селектор

Универсальный селектор, записываемый " *", совпадает с именем любого типа элемента. Он совпадает с любым простым элементом в дереве документа.

Универсальный селектор не является единственным компонентом простого селектора, символ " *" может быть опущен. Например:

*[LANG=fr] и [LANG=fr] эквивалентны.
*.warning и.warning эквивалентны.
*#myid и #myid эквивалентны.

Селекторы типа

Селектор типа совпадает с именем типа элемента языка документа. Селектор типа совпадает с каждым вхождением типа элемента в дереве документа.

Пример(ы):

Следующее правило совпадает со всеми элементами H1 в дереве документа:

H1 { font-family: sans-serif }

Селекторы потомков

Авторам может понадобиться, чтобы селекторы совпадали с элементом, который является потомком другого элемента в дереве документа (например, " Совпадать с теми элементами EM, которые содержаться в элементе H1" ). Селектор потомков состоит из двух или более селекторов, разделённых пробелами. Селектор потомков " A B" совпадает, если элемент B является произвольным потомком некоторого элемента-предка A.

Пример(ы):

Рассмотрим следующие правила:

H1 { color: red }EM { color: red }

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

< H1> This headline is < EM> very< /EM> important< /H1>

В этом случае мы дополняем предыдущие правила правилом, которое устанавливает голубой цвет текста, если EM появляется где-либо внутри H1:

H1 { color: red }EM { color: red }H1 EM { color: blue }

Третье правило совпадёт с элементом EM в следующем фрагменте:

< H1> This < SPAN class=" myclass" > headline is < EM> very< /EM> important< /SPAN> < /H1>

Пример(ы):

Следующий селектор:

DIV * P

совпадает с элементом P, который является внуком, или позднейшим потомком, элемента DIV. Обратите внимание на пробелы с каждой стороны от " *".

Пример(ы):

Селектор в следующем правиле, сочетающий селекторы потомка и атрибута, совпадает с любым элементом, имеющим (1) установленный атрибут " href" и (2) находящимся внутри P, который сам находится внутри DIV:

⇐ Предыдущая 1 2 3 456 7 8 Следующая ⇒