 |
 |
 |
|
|
||
 |
|
|
|
|
|
||
|
Люди, изучающие XHTML, а также CSS по книгам, нередко сталкиваются с тем, что события CSS описаны не полностью. В частности, описываются только такие события, как hover, active, visited. Событий CSS гораздо больше и возможности, которые они дают, очень большие.
Здесь не приводится полный список событий, а только те, которые реально понадобятся современному веб-дизайнеру.
Если Вы назначаете блоку событие after, то после блока будет выведен сгенерированный код, определенный в таблице стилей. Для определения кода используется команда CSS - content, синтаксис которой - content:" XHTML код ".
Т.е. вся команда может выгладеть так:Допустим, применяя это событие к тегу h1, первый и только первый заголовок первого уровня будет отображен с соответствующим стилем. Особенно эффективно использовать это событие для стилей вложенных тегов(многоуровневых), например, вот так:
body ol li:first-child{...}(т.е. Во всех списках ol первый элемент li, но не ul, будет отображен с заданными настройками стилей)
Материалов, описанных выше, хватит многим, но не всем. В сайтах больших компаний, публичных проектов, социальных сетей используются очень сложные CSS селекторы и иногда описанного выше функционала не хватает. Кроме того, CSS должны взаимодействовать с языками серверного программирования, т.е. зачастую CSS к определенным страницам создается автоматически. При этом он должен безошибочно и правильно функционировать.
Мы упоминали наследственность элементов. Теперь мы разберем ее более глубоко.
CSS может определить правила для различных видов наследственности, или принадлежности элементов к родительскому элементу. Все они служат лишь для выбора элементов, к которым будет применено правило.
| Комбинаторы (создание связи между стилями на основе наследственности) | |
|---|---|
| Adjacent Sibling (+) | Этот комбинатор определяет 2 элемента, которые следуют сразу друг за другом (между ними нет других элементов с тем же родителем, что и те 2 элемента, но могут быть наследственные им элементы) и имеют одного родителя. Стиль применяется сразу к обоим элементам. Синтаксис записи(пробелы не учитываются) E+F{...} где E - первый элемент, F - второй элемент. Например, h1+h2{font-family:serif} Эта запись определит стиль только для последующих друг за другом элементов h1 и h2, которые имеют одного родителя. Если после h2 стоит другой тег h2, то к нему стиль не применяется. |
| Child (>) Combinator | Комбинатор определяет все элементы, являющиеся прямыми потомками одного элемента. Поддерживает несколько уровней вложенности, например: body > div > p{...} То есть, стиль ,стиль будет применен только к параграфам, которые являются потомками всех блоков div, которые непосредственно принадлежат тегу body. |
| Descendant | Определяет произвольную связь между элементами. То есть, элементы не должны быть прямыми наследниками, а просто наследниками одного элемента. Синтаксис(пробел обязателен): E F{...} Например: table.table1 td{...} То есть стиль будет определен во всех столбцах-потомках таблицы с классом table1, даже если внутри этой таблицы есть другие таблицы. К столбцам таблиц-наследников также будет применен стиль. |
| General Sibling (~) | Синтаксис E~F. Комбинатор выполняет такую же функцию, как и Adjacent Sibling, за исключением того, что между E и F может быть любое количество элементов того же уровня вложенности и F может быть не один. |
| Атрибуты. Селекторы атрибутов. Создание собственных атрибутов | |
| Equality [=] | У каждого тега может быть атрибут (например, атрибут id, который может быть практически у любого тега, или атрибут width(только для блоков)). Вы можете создать свой атрибут, представляющий собой текстовую строку. Например, attr. Создание собственных атрибутов пригодится для селекторов атрибутов в CSS. Атрибуты могут использоваться вместе с комбинаторами. Equality определяет стиль для всех элементов, определенный атрибут которых в точности равен указанному значению. Синтаксис: [att="val"] {...} Как видим, здесь не определены теги. Стили определяются для всех элементов, у которых атрибут att равен значению val. Att и val могут принимать значения идентификаторов (например, для att могут быть любые изученные атрибуты, для val - none, block и т.д.) и строковые значения, т.е. просто слово (например, [attr="test"] будет определять все элементы с записью <... attr="test" ...> ). |
| Existence [] | Определяет все элементы, имеющие атрибут, независимо от его значения. Синтаксис: [att]{...} att - атрибут(или строковое значение, т.е. собственный атрибут) |
| Prefix [^=] | Определяет элементы, у которых есть атрибут att, принимающий значение, начинающееся с val. Синтаксис: [att^="val"]{...} att - атрибут(или строковое значение, т.е. собственный атрибут), val - значение атрибута Очень хороший пример: Википедия. На этом сайте все ссылки, ведущие на другие сайты, кроме Википедии, имеют позади значок (стрелку). Вот пример записи, позволяющий записать такой стиль: [href^="http://"]:after {content"<img ... />"} |
| Suffix [$=] | Определяет элементы, у которых есть атрибут att, принимающий значение, заканчивающееся на val. Синтаксис [att$="val"]{...} Такой атрибут недавно начали использовать, чтобы перед различными ссылками ставить картинки, которые визуально укажут пользователю, к какому файлу, странице его отошлет ссылка. Например, перед ссылками на PDF файлы можно поставить значок PDF.Пример: [href$=".pdf"]:before {content:"<img src='pdf.jpg' />"} |
| Substring [*=] | Синтаксис записи: [att*="val"] {...} Отбирает все элементы с атрибутом att, в значение которого входит подстрока val. Например, "54" - подстрока "132546", "val" - подстрока "value" и т.д. |
| Whitespace [~=] | Whitespace - то же, что и Substring, однако подстрока должна быть словом, т.е. окружена в сстроке пробелами. |
| Hyphen [|=] | То же, что и Substring, однако подстрока должна быть частью атрибута и разделяться с другой частью (частями) дефисом. Пример: [lang|="en"] {...} отберет все теги с атрибутом lang, в значении которого есть en, например en-ru, ru-de-en и т.д. |
На этом заканчивается изучение XHTML+CSS. Далее уроки пойдут про JavaScript. Содержание.
uroki.webservis.ru
