Селекторы стандарта 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,&mdash;<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
в сочетании с CSS-свойством
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
; Internet Explorer 7 не поддерживает псевдо-элементы
1
:last-child
,
1
:before
и
1
:after
; Internet Explorer 6 также не поддерживает псевдо-элемент
1
:first-child
, помимо всего прочего.

Заключение

Эта статья является очень общим и кратким руководством, как использовать селекторы CSS3-стандарта для стилизации HTML-элементов без дополнительных классов, идентификаторов или чрезмерно раздутого кода. Селекторы CSS3 не работают в более старых версиях браузеров, таких как Internet Explorer 6, в которых генерируются только основные CSS-свойства (за редким исключением).

Но это не означает, что текст в окне браузера делается нечитаемым - просто CSS3-селекторы добавляют дополнительное оформление в современных браузерах, которыми пользуются на сегодняшний день только небольшое количество людей.

Примечание переводчика: статья была написано довольно давно - в 2009 году. Что касается поддержки браузерами CSS3-селекторов, то на сегодняшний день изменений не так уже и много. Исключением является факт, что о браузере IE6 можно забыть.

Оригинал статьи - “Styling a Poem with Advanced CSS Selectors”.


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017