2008-02-26 / Рубрика: CSS
Недавно я вспомнил, как в конце девяностых изучал CSS. Справочников у меня не было, инета тоже, а единственным источником знаний была куча сохранённых веб-страниц. Копаясь в кодах, я постепенно начинал разбирался в этой нелёгкой, но до жути интересной теме. Предлагаю вашему вниманию список распространённых (и не очень) CSS-правил, которые вы можете встретить в «чужих» CSS-файлах. Статья ориентирована на новичков.
Простые селекторы
- h2 {…}
- Оформление HTML-элемента
h2.
- .simple-class {…}
- Оформление элементов, у которых указан класс
simple-class (например <div class="simple-class">…</div> или <span class="simple-class">…</span). В данном случае сам тег не имеет значения, важен именно класс.
- #trambleBox {…}
- Оформление элемента, идентификатор которого —
trambleBox (например <div id="trambleBox">…</div>). Это правило будет применяться к любому тегу, у которого будет задан id="trambleBox" (в HTML-документе идентификаторы не могут дублироваться).
Комбинированные селекторы
- a.external {…}
- Оформление ссылки с классом
external (что-то вроде <a class="external" href="http://x28.ru">…</a>).
- div#footer {…}
- Оформление элемента
div с идентификатором footer (<div id="footer"></div>).
- .smile-box.other-color {…}
- Этот селектор оформит любой HTML-элемент, у которого будут заданы несколько классов (
<b class="smile-box other-color">…</b>).
- .russian.english.china.japanese.france {…}
- Этот более усложнённый вариант предыдущего селектора оформит любой HTML-элемент у которого будут заданы 5 перечисленных классов:
<div class="russian english china japanese france">…</div>
- h1[class]
{…}
- Такой селектор оформит любой элемент
h1, у которого задан атрибут class (не работает для Internet Explorer до 6 версии включительно. IE7 автор не проверял.). Например <h1 class="newsheader">…</h1> или <h1 class="sidebar">…</h1>. Какой именно класс задан — не имеет значения.
- a[href~="yandex"]
{…}
- Оформление любой ссылки, в атрибуте
href которой содержится слово yandex (<a href="http://www.yandex.ru/search">…</a>). В IE не работает.
Группировка селекторов
- h1, h2
{…}
- Таким образом стили будут применены ко всем элементам
h1 и h2.
- code, xmp, pre
{…}
-
- Оформить теги
code, xmp, pre.
Иерархические селекторы
- h1 a {…}
- Такое правило означает, что надо оформить все ссылки, которые находятся внутри тега
h1 (например, <h1><a href="http://x28.ru">…</a></h1> или <h1><span class="chto-to-s-chem-to"><a href="http://x28.ru">…</a></span></h1>).
- table div li a {…}
- А это правило оформит только те ссылки, которые находятся внутри тега
li, который в свою очередь находится в теге div, и всё это расположено в таблице: <table><tr><td>…<div><ul><li>…</li><li>…</li></ul></div></td></tr></table>.
- .forumwrap strong {…}
- Такое правило оформит все элементы
strong, которые содержатся в элементах с классом forumwrap (Например, <div class="forumwrap">…<strong>…</strong></div>).
- div>img
{…}
- В данном примере селектор
> означает, что правило должно применяться к картинкам, которые расположены сразу в начале тега div. Например, <div><img src="…" /></div>. А вот в этом случае не будет работать: <div><p><img src="…" /></p></div>, потому что теперь img не является дочерним для тега div.
- h1 + p
{…}
- Такое правило что нужно оформить параграф, который идёт сразу за заголовком первого уровня (
<h1>Гиперзаголовок</h1><p>Небольшой четырёхсловный сестринский элемент</p>). Такая конструкция тоже не распознаётся Internet Explorer вплоть до версии 6.
Селекторы псевдоклассов
- a:hover {…}
- Оформление ссылки при наведении на неё курсора мышки. Будет работать для всех ссылок документа, для которых не задано другое правило.
- a:visited:hover {…}
- Офомление посещённых ссылок при наведении на них курсора мышки.
Различные комбинации
- body.news h1 a, body.news h2 a {…}
- Правило оформляет все ссылки, которые вложены в теги
h1 или h2, которые в свою очередь вложены в тег body с классом news.
- ul.friendslista li a:hover {…}
- Правило, которое задаёт оформление ссылки, которая находится внутри элемента
li списка ul с классом friendslista.
- div.clear-block > ul li.natural:first-child {…}
- А это вам домашнее задание.
Полагаю, что тема остаётся открытой, поэтому если у вас есть интересные или непонятные образцы CSS-правил — оставляйте в комментах, будем разбираться и пополнять статью.
Тема селекторов популярно разжёвана в глобальной мега-книжке Эрика Мейера «CSS — каскадные таблицы стилей». Начинающим верстальщикам обязательна к прочтению.
