Какой тег делает стихотворение
Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.
What can I do to prevent this in the future?
If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.
If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.
Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.
Cloudflare Ray ID: 71a87370fcbb9290 • Your IP : 82.102.23.104 • Performance & security by Cloudflare
Стилизация стихотворения с помощью CSS3-селекторов
Селекторы стандарта CSS3 имеют поистине безграничные возможности для выделения HTML-элементов без создания дополнительной разметки (которая практически всегда применялась в предыдущих версиях CSS).
В этой статье я собираюсь менее чем за 5 минут выполнить стилизацию популярного детского стихотворения “Мерцай, звездочка, мерцай!”, используя CSS3-селекторы.
Кодируем стихотворение
Не существует единого мнения в вопросе, как следует выполнять HTML-разметку для стихотворения: большинство полагает, что каждый стих из стихотворения должен быть параграфом ( ), а каждая строка стиха должна быть отделена от другой с помощью элемента .
Некоторые возлагают надежды на грядущие элементы стандарта HTML5, предназначенные специально для форматирования стихотворений, такие как , и . Однако маловероятно, что это будущее наступит в скором времени (если вообще наступит).
Разметка
В будущей разметке имеются три основных элемента:
- заголовок;
- подзаголовок с информацией об авторе;
- само стихотворение, собственно.
Стилизация заголовков
Прежде чем приступать к стилизации элементов страницы, необходимо добавить базовый сброс стилей и некоторые значения по умолчанию в таблицу стилей:
Само стихотворение обернем в блок и разместим его по центру окна браузера, для большей красоты:
Заголовки стихотворения также разместим по центру страницы и уберем полужирное начертание, присвоенное им по умолчанию:
Установим размер шрифта для основного заголовка — тега ; добавим небольшой и такой же (потому что размер шрифта был задан слишком большой; если заголовок окажется достаточно длинным, то между его строками будет большое расстояние):
Для заголовка второго уровня с информацией об авторе и дате публикации будет использовать другой, более легкий цвет; меньший размер шрифта; сделаем его курсивным, чтобы он выглядел совсем уж по другому; а также небольшой отступ внизу с помощью :
Стихотворение
Для основного текста стихотворения добавим интерлиньяж достаточно большого размера для того, чтобы расстояние между строками было большое и такой текст было удобно читать. Также для каждого стиха добавим , чтобы визуально отделить их друг от друга:
Волшебные селекторы
А вот теперь начнем развлекаться! Первое — добавим декоративный элемент в начале и в конце информации об авторе. Для этого воспользуемся псевдо-элементами и в сочетании с CSS-свойством :
Теперь увеличим первую букву стихотворения — так называемая буквица ( ). Для этого воспользуемся смежным селектором ( ) и псевдо-элементом ( ).
Смежный селектор позволяет выбрать селекторы, которые следуют сразу выбранным нами селектором внутри одного и того же элемента-родителя (например, внутри одного и того же блока ).
Мы выделим первую букву каждого параграфа, который следует сразу за заголовком второго уровня , который в нашем примере только один:
Буквицу смещаем влево, так чтобы остальной текст обтекал его вокруг; при увеличении размера шрифта междустрочный интервал уменьшаем, чтобы последующие строки не были сдвинуты вниз; и слегка сместим буквицу внутри текста с помощью .
Выделим первую строку каждого параграфа через и сделаем его более удобочитаемым, добавив немного расстояния между каждой строчкой:
Для того, чтобы еще как-то выделить стихотворение, добавим к последнему параграфу дополнительное пространство внизу, чтобы отделить его от всего остального контента, который будет идти следом за ним. Для этого воспользуемся псевдо-элементом , с помощью которого выделим последнего потомка элемента-родителя:
Вот стилизация стихотворения и закончена!
Некоторые заметки о поддержке браузерами
Не стоит ожидать, что весь созданный CSS-код будет одинаково работать во всех основных браузерах. Последние версии Safari, Firefox и Opera поддерживают все представленные здесь селекторы. Но Internet Explorer 8 не поддерживает псевдо-элемент ; Internet Explorer 7 не поддерживает псевдо-элементы , и ; Internet Explorer 6 также не поддерживает псевдо-элемент , помимо всего прочего.
Заключение
Эта статья является очень общим и кратким руководством, как использовать селекторы CSS3-стандарта для стилизации HTML-элементов без дополнительных классов, идентификаторов или чрезмерно раздутого кода. Селекторы CSS3 не работают в более старых версиях браузеров, таких как Internet Explorer 6, в которых генерируются только основные CSS-свойства (за редким исключением).
Но это не означает, что текст в окне браузера делается нечитаемым — просто CSS3-селекторы добавляют дополнительное оформление в современных браузерах, которыми пользуются на сегодняшний день только небольшое количество людей.
Примечание переводчика: статья была написано довольно давно — в 2009 году. Что касается поддержки браузерами CSS3-селекторов, то на сегодняшний день изменений не так уже и много. Исключением является факт, что о браузере IE6 можно забыть.
Что такое БФФ
«Back-end for front-end» — сервис-прослойка между фронтом и бэком, который обращается к микросервисам и собирает из них данные в удобной . … Continue reading
Какой тег делает стихотворение
Если вы нажмете кнопку "Сохранить", ваш код будет сохранен и вы получите URL, с который вы можете поделиться с другими.
Нажав кнопку "Сохранить", вы соглашаетесь с нашим правила и условия.
Все коды в общих файлах предоставляется пользователями и принадлежат объявлениям.
Все общие файлы становятся общедоступными. Лицензия не применяется.
Любой код может быть удален без предупреждения (если он считается оскорбительным, поврежденным или по любая другая причина).
schoolsw3.com не несет ответственности за любые утраты или повреждения любого рода во время использования предоставленного кода.
Не удалось сохранить код
В коде слишком много символов.
Ваш код был сохранен
Файл был сохранен в:
Сохранить на Google диске
Если у вас есть аккаунт Google, вы можете сохранить этот код на Google диске.