Стилизация стихотворения с помощью 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 можно забыть.
Красивая функция trackBy
Пример красивой функции trackBy для Angular. Функция понравилась своей лаконичностью:<% highlight typescript %>public trackByNumber = (_. … Continue reading
Какой тег делает стихотворение
Скопировать ссылку «Как понять» Скопировано
В HTML-коде браузер схлопывает все пробелы в один и игнорирует переносы строк.
Если поместить нашего котика в обычный <div> , мы увидим его таким:
Чтобы сохранить изначальное форматирование как в HTML, можно воспользоваться тегом <pre> .
Тег <pre> хорошо подходит для отображения стихотворений или демонстрации примеров кода.
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
К тегу <pre> можно применить все глобальные атрибуты.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� По умолчанию для отображения текста в теге <pre> браузеры используют моноширинные системные шрифты под общим названием monospace.
�� Для вывода кода нужно дополнительно обернуть содержимое тега <pre> в тег <code> , чтобы подчеркнуть, что внутри именно код, а не схематичный котик или стихотворение.
�� При демонстрации внутри тега <pre> HTML-кода могут возникнуть проблемы с отображением тегов в угловых скобках — браузер посчитает их настоящими тегами. Чтобы решить проблему, воспользуйтесь мнемоническими подстановками:
- < (less than — знак «меньше») для левой угловой скобки;
- > (greater than — знак «больше») для правой угловой скобки.
�� Схлопывание пробелов и переносов строк вне тега <pre> также можно избежать с помощью CSS, а именно свойства white — space : pre .
�� Слишком длинные строчки могут выходить за пределы тега <pre> , решить проблему поможет CSS, а именно добавление прокрутки – overflow : auto , или переноса строк – white — space : pre — wrap .
Какой тег делает стихотворение
Профиль
Группа: Участник
Сообщений: 42
Регистрация: 9.9.2008
Где: Таганрог
Репутация: нет
Всего: нет
Как с помощьи HTML/CSS можно правильно верстать стихи? Есть ли для этого специальный тег?
Например мне нужно написать стих, чтобы он центрировался по центру, но начала строк были бы на одной вертикальной линии вот так:
При этом концы строк могут оканчиваться на разных расстояниях.
Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва
Репутация: 9
Всего: 34
| Код |
| <div align="center"> <table border="0"> <tr> <td nowrap> Я поэт, зовусь незнайка,<br> От меня вам балалайка!<br> ———————————————<br> —————————————<br> ———————————-<br> </td> </tr> </table> </div> |
Профиль
Группа: Участник
Сообщений: 42
Регистрация: 9.9.2008
Где: Таганрог
Репутация: нет
Всего: нет
Itsys, В общем понятно. А оптимизировать никак нельзя, чтобы код не такой длинный был, с помощью span и CSS или ещё чего?
Добавлено через 1 секунду
Itsys, В общем понятно. А оптимизировать никак нельзя, чтобы код не такой длинный был, с помощью span и CSS или ещё чего?
Профиль
Группа: Завсегдатай
Сообщений: 12015
Регистрация: 5.12.2007
Где: Königsberg
Репутация: 50
Всего: 315
| Код |
| <style> #cont < text-align: center; > #stih < margin: 0 auto; text-align: left; > </style> |
Это сообщение отредактировал(а) bars80080 — 8.11.2008, 23:57
Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва
Репутация: 9
Всего: 34
Профиль
Группа: Завсегдатай
Сообщений: 12015
Регистрация: 5.12.2007
Где: Königsberg
Репутация: 50
Всего: 315
| Код |
| #cont < overflow: scroll; > |
Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб
Репутация: 48
Всего: 386
| Код |
| <nobr>маленькие дети</nobr> <nobr>ни за что на свете</nobr> <nobr>не ходите</nobr> <nobr>в африку гулять</nobr> |
Хотя overflow тут тоже на месте
Это сообщение отредактировал(а) ksnk — 9.11.2008, 11:17
Профиль
Группа: Участник
Сообщений: 42
Регистрация: 9.9.2008
Где: Таганрог
Репутация: нет
Всего: нет
А ещё можно так:
Профиль
Группа: Завсегдатай
Сообщений: 12015
Регистрация: 5.12.2007
Где: Königsberg
Репутация: 50
Всего: 315
Профиль
Группа: Участник
Сообщений: 484
Регистрация: 2.10.2006
Где: Россия, г. Бироби джан ЕАО
Репутация: 3
Всего: 5
| Код |
| <pre> . </pre> |
Профиль
Группа: Участник
Сообщений: 42
Регистрация: 9.9.2008
Где: Таганрог
Репутация: нет
Всего: нет
Вот это будет действовать в Opera и IE, причём даже без align, он просто для наглядности)
[ Время генерации скрипта: 0.1218 ] [ Использовано запросов: 20 ] [ GZIP включён ]
HTML теги для текста
Сегодня я покажу вам как использовать в HTML теги для текста.
Я их условно разделила на две группы:
Структурные HTML теги для текста
- 1. Теги заголовков. Из названия понятно что они предназначены для оформления заголовков и подзаголовков на сайте. В зависимости от того какой тег заголовка используется браузер делает его более крупным шрифтом и по умолчанию выделяет жирным.
Самый большой и самый крупный в HTML – это заголовок H1. В него обычно оборачивают название страницы и ему поисковые системы уделяют отдельное внимание.