Селекторы стандарта 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”.
Комментарии