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


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке