В CSS правила совпадения символов определяют, какое правило стиля применить к элементам дерева документа. Такие блоки символов (патэрн), называемые
Чувствительность к регистру имён элементов в
В этой таблице суммирован синтаксис селекторов CSS2:
| Патэрн | Смысл | Описан в разделе |
|---|---|---|
| * | ||
| E | Типы селекторов | |
| E F | Селекторы-потомки | |
| E > F | ||
| E |
||
E E:visited |
||
E E E |
Динамические |
|
| E:lang(c) | ||
| E + F | Смежные селекторы | |
| E[foo] | ||
| E[foo="warning"] | ||
E [foo~="warning"] |
||
E [lang|="en"] |
||
| DIV.warning | Только в HTML. То же, что DIV[class~="warning"]. | Селекторы классов |
| E#myid | Селекторы ID |
Селектор это цепь из одного или более простых селекторов, разделённых
Элементы дерева документов, совпадающие с селектором, называются
Один
Если несколько селекторов используют общие объявления, то они могут быть сгруппированы в список с разделением запятыми.
Здесь три правила с идентичными объявлениями собраны в одно. Таким образом,
H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }
эквивалентно:
H1, H2, H3 { font-family: sans-serif }
CSS предлагает также другие механизмы "сокращений", включая
*[LANG=fr] и [LANG=fr] эквивалентны.*.warning и .warning эквивалентны.*#myid и #myid эквивалентны.Следующее правило совпадает со всеми элементами H1 в дереве документа:
H1 { font-family: sans-serif }
Авторам может понадобиться, чтобы селекторы совпадали с элементом, который является потомком другого элемента в дереве документа (например, "Совпадать с теми элементами EM, которые содержатся в элементе H1").
Рассмотрим следующие правила:
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.
Обратите внимание на пробелы с каждой стороны от "*".
Селектор в следующем правиле, сочетающий
DIV P *[href]
Это правило устанавливает стиль всех элементов P, являющихся дочерними относительно BODY:
BODY > P { line-height: 1.3 }
Здесь сочетаются селекторы потомков и
DIV OL>LI P
Здесь селектор совпадает с элементом P, являющимся потомком LI; элемент LI обязан быть дочерним относительно элемента OL; элемент OL обязан быть потомком DIV. Обратите внимание, что необязательные пробелы вокруг комбинатора ">" опущены.
Информацию о выборе первого дочернего элемента данного элемента см. ниже в разделе о
Смежные селекторы-родственники имеют следующий синтаксис: E1 + E2, где E2 является субъектом
В определённых контекстах смежные элементы генерируют форматированные объекты, чьё представление обрабатывается автоматически (например, сжатие
Так, следующее правило указывает, что если элемент P следует непосредственно за элементом MATH, то он не должен учитываться:
MATH + P { text-indent: 0 }
Следующий пример уменьшает вертикальное пространство, разделяющее H1 и H2:
H1 + H2 { margin-top: -5mm }
Следующее правило аналогично одному из вышеприведённых примеров, за исключением того, что оно добавляет H1 имеет class="opener":
H1.opener + H2 { margin-top: -5mm }
CSS2 позволяет авторам специфицировать правила, которые определяют
[att]
Если элемент устанавливает атрибут "att" с каким-либо значением атрибута.
Если значение атрибута "att" элемента -
Если значение атрибута "att" элемента - список разделённых пробелами "слов", одно из которых - "val". Если используется данный
Если значения атрибута "att" элемента -
Значением атрибута обязана быть строка или идентификатор. Чувствительность к регистру имён атрибутов и значений в
Следующий
H1[title] { color: blue; }
Здесь селектор совпадает со всеми элементами SPAN, чей атрибут "class" имеет значение "example":
SPAN[class=example] { color: blue; }
Несколько селекторов атрибута могут использовать для обращения к различным атрибутам элемента, или даже несколько раз к одному и тому же атрибуту.
Здесь селектор совпадает со всеми элементами SPAN, чей атрибут "hello" имеет значение "Cleveland" и чей атрибут "goodbye" имеет значение "Columbus":
SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
Следующие селекторы иллюстрируют разницу между "=" и "~=". первый селектор совпадает, к примеру, со значением
"copyright
A[rel~="copyright"] A[href="http://www.w3.org/"]
Следующее правило скрывает все элементы, у которых атрибут "lang" имеет значение "fr" (т.е. язык - французский).
*[LANG=fr] { display : none }
Следующее правило совпадает для значений атрибута "lang", начинающихся с "en", включая "en", "en-US" и "en-cockney":
*[LANG|="en"] { color : red }
Таким же образом, следующие правила звуковой таблицы стилей позволяют громко читать скрипт различными для каждой роли голосами:
DIALOGUE[character=romeo]
{ voice-family: "Lawrence Olivier", charles, male }
DIALOGUE[character=juliet]
{ voice-family: "Vivien Leigh", victoria, female }
Рассмотрим элемент EXAMPLE с атрибутом "notation", имеющим значение по умолчанию "decimal".
Фрагмент ОТД может быть таким:
<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">
Если таблица стилей содержит правила
EXAMPLE[notation=decimal] { /*... установки по умолчанию для свойства ...*/ }
EXAMPLE[notation=octal] { /*... другие установки ...*/ }
тогда, чтобы отобрать случаи, когда атрибут установлен по умолчанию, а не явно, можно добавить следующее правило:
EXAMPLE { /*... значения по умолчанию для свойства ...*/ }
Поскольку этот селектор менее специфичен, чем
Это делается для того, чтобы все другие значения атрибута, не получающие тот же стиль, что и стиль по умолчанию, были охвачены явно.
В таблицах стилей, используемых в HTML, авторы могут употреблять точку (.) как альтернативу "~=" при совпадении с атрибутом "class". Таким образом, в HTML "DIV.value" и "DIV[class~=value]" имеют одно значение. Значение атрибута обязано следовать сразу за ".".
Мы можем назначить стилевую информацию всем элементам class~="pastoral" следующим образом:
*.pastoral { color: green } /* все элементы с class~=pastoral */
или просто
.pastoral { color: green } /* все элементы с class~=pastoral */
Следующее - назначает стиль только элементам H1 с class~="pastoral":
H1.pastoral { color: green } /* элементы H1 с class~=pastoral */
При назначении этих правил первое вхождение H1 ниже не имеет зелёного цвета текста, а второе - имеет:
<H1>Not green</H1> <H1 class="pastoral">Very green</H1>
Чтобы совпасть с поднабором значений "class", каждое значение обязано иметь предшествующую ".".
Следующее правило совпадает с любым элементом P, чей атрибут "class" сопоставлен списку разделённых пробелами значений "pastoral" и "marine":
P.pastoral.marine { color: green }
Правило совпадает, если class="pastoral blue aqua marine", но не совпадает
class="pastoral blue".
Языки документов могут содержать атрибуты, которые объявлены как имеющие тип ID. Особенностью атрибутов типа ID является то, что они могут иметь одно значение; независимо от языка документа, атрибут ID может использоваться для уникальной идентификации элемента. В HTML все атрибуты ID именуются "id"; приложения XML могут именовать атрибуты ID по-разному, но с применением одинаковых ограничений.
Атрибут ID языка документа позволяет авторам назначать идентификатор объекту элемента в дереве документа. В CSS ID-селекторы совпадают с объектом элемента на базе идентификатора. ID-селектор CSS содержит "#" непосредственно перед значением ID.
Следующий ID-селектор совпадает с элементом H1, чей атрибут ID имеет значение "chapter1":
H1#chapter1 { text-align: center }
В следующем пример правило таблицы стилей устанавливает совпадение с элементом, чьё значение ID - "z98y".
Правило, таким образом, совпадает для элемента P:
<HEAD>
<TITLE>Match P</TITLE>
<STYLE type="text/css">
*#z98y { letter-spacing: 0.3em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Wide text</P>
</BODY>
В следующем пример, однако, правило стиля совпадает только с тем элементом H1, который имеет значение ID - "z98y".
Правило в этом примере не совпадает с элементом P:
<HEAD>
<TITLE>Match H1 only</TITLE>
<STYLE type="text/css">
H1#z98y { letter-spacing: 0.5em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Wide text</P>
</BODY>
ID-селекторы имеют более высокий приоритет, чем #p123 более специфичен, чем [ID=p123], в терминах каскада.
В CSS2 стиль обычно присоединяется к элементу на базе его позиции в дереве документа. Этой простой модели во многих случаях достаточно, но некоторые обычные сценарии могут оказаться недоступными из-за структуры дерева документа. Например, в HTML 4.0 (см. [HTML40]) нет элементов, относящихся к первой строке параграфа, и, следовательно,
CSS вводит
Ни
Имена
Некоторые
ПА, соответствующие HTML могут игнорировать все правила с
Здесь селектор совпадает с любым элементом P, являющимся первым дочерним элементом элемента DIV. Правило подавляет отступ для первого параграфа DIV:
DIV > P:first-child { text-indent: 0 }
Следующий селектор может совпасть с элементом P внутри DIV в следующем фрагменте:
<P> Последний P перед note. <DIV class="note"> <P> Первый P внутри note. </DIV>
но не совпадёт со вторым P в следующем фрагменте:
<P> Последний P перед note. <DIV class="note"> <H2>Note</H2> <P> Первый P внутри note. </DIV>
Следующее правило устанавливает вес шрифта 'bold' для любого элемента EM, являющегося каким-либо потомком элемента P, который, в свою очередь, является первым дочерним элементом:
P:first-child EM { font-weight : bold }
Заметьте, что анонимные боксы не являются частью дерева документа, они не учитываются при вычислении первого дочернего элемента.
Например, EM в:
<P>abc <EM>default</EM>
является первым дочерним элементом от P.
Следующие два раздела эквивалентны:
* > A:first-child /* первый дочерний элемент любого элемента */ A:first-child /* То же самое */
ПА обычно отображают непосещённые гиперссылки иначе, чем посещённые. CSS
Эти два состояния взаимоисключающи.
Язык документа определяет, какие элементы являются якорями ссылки на ресурс. Например, в HTML 4.0
A:link { color: red }
:link { color: red }
Если следующая ссылка:
<A class="external" href="http://out.side/">external link</A>
будет посещена, то данное правило:
A.external:visited { color: blue }
сделает её голубой.
Интерактивные ПА иногда изменяют представление в ответ на действия пользователя. CSS имеет три псевдокласса для общих случаев:
Эти
CSS не определяет, какие элементы могут быть в вышеуказанных состояниях и как осуществляется вход и выход из этих состояний. Сценарий может меняться в зависимости от того, реагирует элемент на действия пользователя или нет, и различные устройства и ПА могут иметь разные способы указания на элементы (их активации).
От ПА не требуется перерисовывать отображаемый в данный момент документ из-за переносов
A:link { color: red } /* непосещённые ссылки */
A:visited { color: blue } /* посещённые ссылки */
A:hover { color: yellow } /* пользователь провёл над */
A:active { color: lime } /* активные ссылки */
Заметьте, что A:hover обязан размещаться после правил A:link и A:visited, поскольку иначе правила каскадирования спрячут свойство 'color' правила A:hover. Аналогично, поскольку A:active размещено после A:hover, цвет активной ссылки (lime) будет применён, когда пользователь и активирует и проведёт над элементом A.
Пример комбинации динамических
A:focus { background: yellow }
A:focus:hover { background: white }
Последний селектор совпадает с элементами A, которые входят в
О представлении контуров фокуса см. раздел динамические контуры фокуса.
Если язык документа специфицирует, как определяется
Следующие правила устанавливают знаки кавычек для документа HTML на французском или немецком языке:
HTML:lang(fr) { quotes: '" ' ' "' }
HTML:lang(de) { quotes: '"' '"' '\2039' '\203A' }
:lang(fr) > Q { quotes: '" ' ' "' }
:lang(de) > Q { quotes: '"' '"' '\2039' '\203A' }
Вторая пара правил в действительности устанавливает свойство 'quotes' элементов Q в соответствии с языком его предка.
Так делается, потому что выбор знаков кавычек обычно базируется на языке элемента, окружающего кавычки, а не самих кавычек, и кусок французского текста "a l'improviste" в середине английского текста использует английские знаки кавычек.
P:first-line { text-transform: uppercase }
Это правило говорит: "Перевести буквы первой строки каждого параграфа в верхний регистр". Однако
Заметьте, что длина первой строки зависит от нескольких факторов, включая ширину страницы, размер шрифта и т.д. Таким образом, обычный параграф HTML:
<P>This is a somewhat long HTML
paragraph that will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</P>
строки которого могут быть разбиты так:
THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines. The first
line will be identified by a fictional tag
sequence. The other lines will be treated as
ordinary lines in the paragraph.
может быть "переписан" ПАгентами с включением последовательности фиктивных тэгов для
<P><P:first-line> This is a somewhat long HTML paragraph that will </P:first-line> be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>
Если
<P><SPAN class="test"> This is a somewhat long HTML paragraph that will be broken into several lines.</SPAN> The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>
ПА сможет сгенерировать соответствующие начальный и конечный тэги для SPAN при вставке последовательности фиктивных тэгов для
<P><P:first-line><SPAN class="test"> This is a somewhat long HTML paragraph that will </SPAN></P:first-line><SPAN class="test"> be broken into several lines.</SPAN> The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>
Вот свойства, применимые к
Следующий CSS2 сделает начальную заглавную зависающую букву, захватывающую две строки:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Drop cap initial letter</TITLE>
<STYLE type="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; font-style: italic;
font-weight: bold; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article
in The Economist.</P>
</BODY>
</HTML>
Этот пример может быть сформатирован так:
[D]Последовательность фиктивных тэгов такова:
<P> <SPAN> <P:first-letter> T </P:first-letter>he first </SPAN> few words of an article in the Economist. </P>
Обратите внимание, что тэги псевдоэлемента :first-letter примыкают к содержимому (т.е. к начальному символу), поскольку начальный тэг псевдоэлемента :first-line вставлен справа после начального тэга элемента, к которому он присоединён.
Чтобы выполнить форматирование традиционных
Пунктуация (т.е. символы, определённые в Unicode [UNICODE] в классах пунктуации "open" (Ps), "close" (Pe) и "other" (Po)), которая предшествует первой букве, должна включаться, как в этом примере:
В некоторых языках могут быть специфические правила рассмотрения определённых сочетаний букв. В датском языке, например, если комбинация "ij" появляется в начале слова, обе буквы должны рассматриваться
Следующий пример иллюстрирует, как может действовать перекрывание
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<P>Какой-нибудь текст не менее двух строк.</P>
Если предположить, что разрыв строки появится перед словом "не", последовательность фиктивных тэгов для этого фрагмента может быть такой:
<P> <P:first-line> <P:first-letter> К </P:first-letter>акой-нибудь текст </P:first-line> не менее двух строк. </P>
Заметьте, что элемент :first-letter находится внутри элемента :first-line. Свойства, установленные в :first-line, наследуются в :first-letter, но переопределяются, если то же самое свойство установлено в :first-letter.
H1:before {content: counter(chapno, upper-roman) ". "}
Если
P.special:before {content: "Special! "}
P.special:first-letter {color: #ffd800}
Это выведет "S" в слове "Special!" золотом.
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.