Стилизация стихотворения с помощью CSS3-селекторов
December 13, 2013
Селекторы стандарта CSS3 имеют поистине безграничные возможности для выделения HTML-элементов без создания дополнительной разметки (которая практически всегда применялась в предыдущих версиях CSS).
В этой статье я собираюсь менее чем за 5 минут выполнить стилизацию популярного детского стихотворения “Мерцай, звездочка, мерцай!”, используя CSS3-селекторы.
Кодируем стихотворение
Некоторые возлагают надежды на грядущие элементы стандарта HTML5, предназначенные специально для форматирования стихотворений, такие как
Разметка
В будущей разметке имеются три основных элемента:
Стилизация заголовков
Прежде чем приступать к стилизации элементов страницы, необходимо добавить базовый сброс стилей и некоторые значения по умолчанию в таблицу стилей:
Само стихотворение обернем в блок div и разместим его по центру окна браузера, для большей красоты:
Заголовки стихотворения также разместим по центру страницы и уберем полужирное начертание, присвоенное им по умолчанию:
Для заголовка второго уровня h2 с информацией об авторе и дате публикации будет использовать другой, более легкий цвет; меньший размер шрифта; сделаем его курсивным, чтобы он выглядел совсем уж по другому; а также небольшой отступ внизу с помощью margin-bottom :
Стихотворение
Волшебные селекторы
Смежный селектор позволяет выбрать селекторы, которые следуют сразу выбранным нами селектором внутри одного и того же элемента-родителя (например, внутри одного и того же блока div ).
Выделим первую строку каждого параграфа через small-caps и сделаем его более удобочитаемым, добавив немного расстояния между каждой строчкой:
Вот стилизация стихотворения и закончена!
Некоторые заметки о поддержке браузерами
Заключение
Эта статья является очень общим и кратким руководством, как использовать селекторы CSS3-стандарта для стилизации HTML-элементов без дополнительных классов, идентификаторов или чрезмерно раздутого кода. Селекторы CSS3 не работают в более старых версиях браузеров, таких как Internet Explorer 6, в которых генерируются только основные CSS-свойства (за редким исключением).
Текст в html
Вид текста на экране зависит только от тегов, он не зависит от пробелов и разбивки на строки.
Все элементы оформления HTML-документов разделяются на два типа: строчные и блочные.
Строчные элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на web-странице и всегда начинаются с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и строчные элементы. По вполне понятным причинам строчные элементы не могут включать в себя блочные элементы.
Объединение элементов web-страницы в блоки позволяет применять к ним единое оформление, осуществлять верстку. Достаточно будет изменить расположение блока, изменив один объединяющий тег. Естественно, это удобнее, чем менять расположение каждого элемента web-страницы по отдельности.
Для обрамления элементов блочного типа используется пара
Браузеры обрамляют div-блоки разрывами строки.
Пример
Основные теги форматирования текста
Пример
Создайте текстовый файл, как в примере. Сохраните его с расширением html.
Двойной щелчок по его наименованию в папке запустит браузер, установленный по умолчанию, и в него уже будет загружен ваш html-документ.
Выделение в тексте
| . | Полужирный шрифт. |
| . | Курсив. |
| Подчеркнутый текст. | |
| . | Перечеркнутый текст. |
| . | Надстрочный текст. |
| . | Подстрочный текст. |
Пример
Теги для текста HTML
Заголовки
Как вставить текст в HTML страницу? Для этого существуют специальные HTML теги для текста.
В HTML существует шесть уровней заголовков. Они добавляются с помощью тэгов
. При этом
это заголовок первого уровня, он самый большой.
Пример создания заголовков:
Заголовки никак не зависят друг от друга. Вы можете добавить заголовок любого уровня везде, где это нужно.
На работу страницы количество тэгов
никак не влияет. Можно их добавлять сколько угодно. А вот поисковые системы отрицательно относятся к тому, что на странице есть больше одного заголовка первого уровня. Поэтому, если Вы собираетесь продвигать свой сайт в поисковых системах, то на каждой странице должен быть только один заголовок первого уровня. Вывод: лучше сразу привыкать к тому, чтобы не ставить больше одного тэга
на страницу. Ведь в HTML есть целых шетсь уровней заголовков. При любой вёрстке страницы этого вполне достаточно, чтобы выделить тэг
только для одного заголовка.
Абзац
создаёт абзац текста. У него есть отступы сверху и снизу для отделения одного абзаца от другого. Кроме того, есть возможность установить отступ первой строки. Всё это регулируется с помощью CSS.
Тэг
это не совсем текстовый тэг. Он производит перевод строки. Если он находится внутри текста, то последующий текст переходит на новую строку. А если он находится между блоками, то он добавляет пустую строку.
Пример перевода строки:
Тэг это строчный тэг для вставки текста. Обычно он используется тогда, когда нужно выделить часть текста определённым образом.
Для примера выделим часть текста красным цветом.
Выделение текста
В HTML есть тэги для выделения текста. Тэги и создают жирный шрифт. Хотя эти тэги имеют некоторые различия, на странице они обычно выглядят одинаково. Тэги и выделяют текст курсивом. Существует тэг , который делает текст подчёркнутым, но использование его нежелательно.
Пример выделения текста:
Текст можно выделять с помощью стилей. Каждый сам решает, как выделять текст, с помощью тэгов или стилей.
Другие тэги
Мы рассмотрели специальные HTML теги для текста. Но текст могут содержать и многие другие тэги, которые добавляют контент на страницу. Можно даже вставить текст вне каких-либо тэгов, он всё равно отобразится на экране. Но на практике так никто не делает, потому что вне тэгов текстом нельзя управлять. Поэтому весь текст конечно должен находиться внутри тэгов. А когда Вы изучите CSS, Вы сможете определять внешний вид текста.
Коприрование материалов сайта возможно только с согласия администрации
Как написать стих в html
Профиль
Группа: Участник
Сообщений: 42
Регистрация: 9.9.2008
Где: Таганрог
Репутация: нет
Всего: нет
Как с помощьи HTML/CSS можно правильно верстать стихи? Есть ли для этого специальный тег?
Например мне нужно написать стих, чтобы он центрировался по центру, но начала строк были бы на одной вертикальной линии вот так:
При этом концы строк могут оканчиваться на разных расстояниях.
Эксперт 
Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва
Репутация: 9
Всего: 34
| Я поэт, зовусь незнайка, От меня вам балалайка! Профиль Репутация: нет Itsys, В общем понятно. А оптимизировать никак нельзя, чтобы код не такой длинный был, с помощью span и CSS или ещё чего? Добавлено через 1 секунду прапор воюет Профиль Репутация: 50 ни за что на свете Эксперт Профиль Репутация: 9 прапор воюет Профиль Репутация: 50 прохожий Профиль Репутация: 48 Профиль Репутация: нет ни за что на свете прапор воюет Профиль Репутация: 50 Опытный Профиль Репутация: 3 Профиль Репутация: нет Вот это будет действовать в Opera и IE, причём даже без align, он просто для наглядности) ни за что на свете
[ Время генерации скрипта: 0.1238 ] [ Использовано запросов: 20 ] [ GZIP включён ] до заголовкаНапример, если мы рассматриваем какую-либо обширную тему, мы заключаем ее название в . Заголовок на уровень ниже ви так далее доНапример, возьмем заголовок «рецепты с гречкой». Далее все зависит от того, как вы хотите структурировать страницу. Я бы взял и разделил следующим образом: Может это не самая лучшая структура, но смысл ясен. Так же подзаголовки могут разделяться на какие-то логические действия. Например: В общем и целом понимание должно появиться. Идем дальше. Визуально, заголовки отличаются размером — чем выше уровень тем больше размер, так же заголовки выделяются жирным. Если мы наберем следующий код: То результат будет следующим.
Рассмотрим каждый элемент подробнее. Тег h1— заголовок верхнего уровня. Он должен встречаться в документе один раз в самом начале. Это как заголовок книги, ведь название книги не может встречаться несколько раз.Рекомендуется делать уникальный заголовок для каждой страницы сайта.Стандартный стиль для заголовка display: block; Тег h2— подзаголовок. В отличии отможет встречаться на веб-странице несколько раз.Стандартный стиль для заголовка display: block; Тег h3Стандартный стиль для заголовка display: block; Тег h4Стандартный стиль для заголовка display: block; Тег h5Стандартный стиль для заголовка display: block; Тег h6Стандартный стиль для заголовка display: block; Теги форматирования текстаФорматирование текста — это разметка (процесс разметки) текста. В HTML используется много тегов форматирования, которые со временем заменяет CSS. Рассмотрим эти элементы. Тег bЭлемент выделяет текст полужирным, не несет смысловой нагрузки. Тег strongЭлемент выделяет текст полужирным, придает выделеному тексту смысловую нагрузку. Тег iЭлемент выделяет текст курсивом без смысловой значимости. Тег emЭлемент выделяет текст курсивом со смысловой значимостью, визуально не отличается от . Тег smallЭлемент уменьшает размер текста на единицу. Тег supЭлемент используется для создания надстрочного текста. Тег subЭлемент используется для создания подстрочного текста. Тег insТег delЭлемент предназначен для пометки текста на удаление, перечеркивает текст. Результат. Тег markЭлемент выделяет текст желтым цветом. Устаревшие тегиТеги, которые использовались в ранних версиях HTML и на данный момент считаются устаревшими, вместо них использую CSS. Тег uЭлемент использовался для подчеркивания текста. Стандартный стиль тега: В настоящее время рекомендуется использовать его стиль, то есть: Результат будет одинаков. Это подчеркнутый текст. На смену пришел элемент Читать текст не разбитый на абзацы крайне не удобно. Для удобства нужно разбивать текст. Для этих целей в HTML есть теги абзаца, переноса тега и горизонтальной линии. Тег pиспользуется для создания параграфа, то есть он разделяет текст на отдельные абзацы между которыми стоит пустая строка. Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Тег brЭлемент Тег hrЭлемент используется для создания горизонтальной линии. Не требует закрывающего тега. Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Теперь вы знаете какие однокоренные слова подходят к слову Как написать стих в html, а так же какой у него корень, приставка, суффикс и окончание. Вы можете дополнить список однокоренных слов к слову "Как написать стих в html", предложив свой вариант в комментариях ниже, а также выразить свое несогласие проведенным с морфемным разбором. | ||||||||
