Селекторы стандарта CSS3 имеют поистине безграничные возможности для выделения HTML-элементов без создания дополнительной разметки (которая практически всегда применялась в предыдущих версиях CSS).
В этой статье я собираюсь менее чем за 5 минут выполнить стилизацию популярного детского стихотворения “Мерцай, звездочка, мерцай!”, используя CSS3-селекторы.
Кодируем стихотворение
Не существует единого мнения в вопросе, как следует выполнять HTML-разметку для стихотворения: большинство полагает, что каждый стих из стихотворения должен быть параграфом (1
p
1
br
Некоторые возлагают надежды на грядущие элементы стандарта HTML5, предназначенные специально для форматирования стихотворений, такие как 1
<poem>
1
<stanza>
1
<line>
Разметка
В будущей разметке имеются три основных элемента:
- заголовок;
- подзаголовок с информацией об авторе;
- само стихотворение, собственно.
<h1>
Twinkle Twinkle Little Star
</h1>
<h2>
by Jane Taylor, 1806
</h2>
<p>
Twinkle, twinkle, little star,<br />
How I wonder what you are!<br />
Up above the world so high,<br />
Like a diamond in the sky!
</p>
<p>
When the blazing sun is gone,<br />
When he nothing shines upon,<br />
Then you show your little light,<br />
Twinkle, twinkle, all the night.
</p>
<p>
Then the traveller in the dark,<br />
Thanks you for your tiny spark,<br />
He could not see which way to go,<br />
If you did not twinkle so.
</p>
<p>
In the dark blue sky you keep,<br />
And often through my curtains peep,<br />
For you never shut your eye,<br />
Till the sun is in the sky.
</p>
<p>
As your bright and tiny spark,<br />
Lights the traveller in the dark,—<br />
Though I know not what you are,<br />
Twinkle, twinkle, little star.
</p>Стилизация заголовков
Прежде чем приступать к стилизации элементов страницы, необходимо добавить базовый сброс стилей и некоторые значения по умолчанию в таблицу стилей:
body {
background: #fff;
color: #111;
font: 14px Baskerville, "Palatino Linotype", "Times New Roman", Times, serif;
text-align: center;
}
div, h1, h2, p {
margin: 0;
padding: 0;
}Само стихотворение обернем в блок 1
div
#poem {
margin: auto;
padding: 20px 0;
text-align: left;
width: 390px;
}Заголовки стихотворения также разместим по центру страницы и уберем полужирное начертание, присвоенное им по умолчанию:
h1, h2 {
font-weight: normal;
text-align: center;
}Установим размер шрифта для основного заголовка - тега 1
h1
1
margin-bottom
1
line-height
h1 {
font-size: 34px;
line-height: 1.2;
margin-bottom: 10px;
}Для заголовка второго уровня 1
h2
1
margin-bottom
h2 {
color: #666;
font-size: 18px;
font-style: italic;
margin-bottom: 30px;
}Стихотворение
Для основного текста стихотворения добавим интерлиньяж 1
line-height
1
margin-bottom
p {
line-height: 1.5;
margin-bottom: 15px;
}Волшебные селекторы
А вот теперь начнем развлекаться! Первое - добавим декоративный элемент в начале и в конце информации об авторе. Для этого воспользуемся псевдо-элементами 1
:before
1
:after
1
content
h2:before {
content: '— ';
}
h2:after {
content: ' —';
}Теперь увеличим первую букву стихотворения - так называемая буквица (1
drop cap
1
+
1
:first-child
Смежный селектор позволяет выбрать селекторы, которые следуют сразу выбранным нами селектором внутри одного и того же элемента-родителя (например, внутри одного и того же блока 1
div
Мы выделим первую букву каждого параграфа, который следует сразу за заголовком второго уровня 1
h2
#poem h2 + p:first-letter {
float: left;
font-size: 38px;
line-height: 1;
margin: 2px 5px 0 0;
}Буквицу смещаем влево, так чтобы остальной текст обтекал его вокруг; при увеличении размера шрифта междустрочный интервал 1
line-height
1
margin
Выделим первую строку каждого параграфа через 1
small-caps
#poem p:first-line {
font-variant: small-caps;
letter-spacing: 1px;
}Для того, чтобы еще как-то выделить стихотворение, добавим к последнему параграфу дополнительное пространство внизу, чтобы отделить его от всего остального контента, который будет идти следом за ним. Для этого воспользуемся псевдо-элементом 1
:last-child
#poem p:last-child {
margin-bottom: 30px;
padding-bottom: 30px;
}Вот стилизация стихотворения и закончена!
Некоторые заметки о поддержке браузерами
Не стоит ожидать, что весь созданный CSS-код будет одинаково работать во всех основных браузерах. Последние версии Safari, Firefox и Opera поддерживают все представленные здесь селекторы. Но Internet Explorer 8 не поддерживает псевдо-элемент 1
:last-child
1
:last-child
1
:before
1
:after
1
:first-child
Заключение
Эта статья является очень общим и кратким руководством, как использовать селекторы CSS3-стандарта для стилизации HTML-элементов без дополнительных классов, идентификаторов или чрезмерно раздутого кода. Селекторы CSS3 не работают в более старых версиях браузеров, таких как Internet Explorer 6, в которых генерируются только основные CSS-свойства (за редким исключением).
Но это не означает, что текст в окне браузера делается нечитаемым - просто CSS3-селекторы добавляют дополнительное оформление в современных браузерах, которыми пользуются на сегодняшний день только небольшое количество людей.
Примечание переводчика: статья была написано довольно давно - в 2009 году. Что касается поддержки браузерами CSS3-селекторов, то на сегодняшний день изменений не так уже и много. Исключением является факт, что о браузере IE6 можно забыть.
Оригинал статьи - “Styling a Poem with Advanced CSS Selectors”.