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