Свойства CSS для оформления текста HTML (vertical-align, text-align, text-indent и другие). CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html
Приветствую Вас Друзья! Сегодня мы поговорим о теге абзаце и об атрибуте выравнивания . В общем, весь контент на странице должен быть разбит по абзацам. Содержимое абзаца пишется между тегами
Текст…
. Когда мы выводим 2 последовательных абзаца, то между ними формируется невидимое поле что отталкивает их друг от друга. Тег является блочным тегом поэтому он занимают всю ширину страницы.Для примера возьмем страницу с таким кодом:
Первый абзац: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Второй абзац: It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using "Content here, content here", making it look like readable English.
Давайте посмотрим, как выглядит это дело в браузере:
Наверняка вы заметили, что в коде страницы есть тег strong, этот тег делает текст жирным.
Атрибуты тегов
Для каждого тега можно, в некоторых случаях даже нужно указать атрибуты. Через атрибут мы сообщаем браузеру как именно отображать тот или иной элемент на странице.
Атрибут указывается внутри скобки открывающего тега и имеет следующий синтаксис: имя_атрибута="значение"
Атрибут выравнивания
Например, у нас на странице есть абзац, и мы хотим выравнивать его содержимое. Для этого мы внутри открывающего тега пишем атрибут align, который отвечает за выравнивание контента внутри абзаца, и задаем ему одно значение.
Содержимое параграфа.
У этого атрибута есть 4 значения:
1. Left – Выравнивает контент по левому краю. Это значение стоит по умолчанию. То есть если для абзаца не указываем атрибут align , то контент внутри абзаца по умолчанию, выровняется по левому краю. Это можно заметит в предыдущем примере.
2. Right – Выравнивает контент по правому краю.
Текст…
Вот как это выглядит в браузере:
3.Center - Выравнивает контент по центру страницы.
Текст…
4.Justify – Выравнивает контент по ширине страницы.
Текст…
Итоги урока:
Мы сегодня узнали, что такое абзац
в html. Абзацы используются очень часто в html.
Также узнали, что такое атрибут тега. И выучили атрибут выравнивания align.
Который может принять одно из следующих значений: left (значение по умолчанию),
right,
center,
justify.
Для изображений стандарты не определяют принятого по умолчанию выравнивания по отношению к тексту и другим изображениям в той же строке – не всегда можно предсказать, как эти компоненты будут выглядеть.1 В HTML-документах изображения обычно расположены «в линию» только с одной строкой текста. Как принято в печатных средствах массовой информации текст их «обтекает», так что с изображением могут соседствовать несколько строк, а вовсе не одна.
К счастью, создатели документов способны отчасти управлять выравниванием изображений по отношению к окружающему тексту с помощью атрибута align тега . Стандарты HTML и XHTML определяют пять значений для атрибута align: left, right, top, middle, bottom. Значения left и right заставляют текст обтекать изображение, смещенное к соответствующему краю. Оставшиеся три выравнивают изображение в вертикальном направлении по отношению к окружающему тексту.
Все популярные броузеры, включая Opera, Firefox, Netscape и Internet Explorer, соглашаются с тем, что атрибут align=bottom является умолчанием вертикального выравнивания, и одинаково располагают картинки выше самого верхнего символа в строке текста, см. рис. 15.11.
В то же время броузеры расходятся во мнении, как располагать относительно текста изображения с атрибутом align=middle. На рис. 5.11 показано, что Netscape и Opera помещают изображение, ориентируясь на среднюю линию текста. Что касается броузеров Internet Explorer
Рис. 5.11. Стандартное выравнивание внедренных изображений
Рис. 5.12. Internet Explorer и Firefox совмещают среднюю линию изображения со средней линией самого высокого элемента, а не средней линией текста
и Firefox, они располагают изображение по средней линии самого высокого элемента, который не обязательно является текстовым (рис. 5.12).
Кроме того, броузеры в той или иной степени поддерживают пять дополнительных признаков вертикального выравнивания изображений: texttop, center, absmiddle, baseline и absbottom (кто не догадался об их смысле, поднимите руку):
Выражение align=texttop приказывает броузеру выровнять верхний край изображения с верхним краем самого высокого элемента текста в текущей строке. Иначе действует значение top, которое выравнивает верхний край изображения с верхним краем самого высокого элемента, текстового компонента или изображения в текущей строке. Если строка не содержит других изображений, выступающих над текстом, texttop и top имеют одинаковый эффект. Opera не поддерживает texttop, но другие популярные броузеры интерпретируют его строго в соответствии с этим описанием.
Впервые появившись в броузере Internet Explorer и Netscape, значение center интерпретируется в броузерах Internet Explorer, Netscape и Firefox точно так же, как и значение middle. Только не будем забывать, что значение middle каждый из них понимает по-своему. Opera игнорирует выражение align=center.
Если вы присвоите атрибуту align тега значение absmiddle, броузер выставит абсолютную середину изображения против абсолютной середины текущей строки. Не так действуют значения middle и center, которые выравнивают середину изображения с базовой линией текущей строки текста. В то время как Netscape и Opera не проводят разницы между absmiddle и middle, Firefox и Internet Explorer используют эти значения для избирательного выравнивания изображений по средним линиям. Иными словами, Firefox и Internet Explorer воспринимают признак absmiddle так же, как Netscape воспринимает middle.
Рис. 5.13. При выравнивании изображений с атрибутом alingn=absbottom броузеры принимают во внимание нижние выносные элементы
bottom и baseline (принимаются по умолчанию)
Значения bottom и baseline имеют тот же эффект, как если бы вы не включили атрибут выравнивания совсем. Броузер выравнивает нижний край изображения с базовой линией текста. Не следует путать это с действием значения absbottom, которое учитывает и те части букв, что спускаются ниже базовой линии.1 (Если вы все еще держите руку поднятой, можете ее опустить.)
Выражение align=absbottom предлагает броузеру выровнять нижний край изображения с истинным нижним краем текста в текущей строке. Истинный нижний край – это самая нижняя точка текста с учетом всех нижних выносных элементов (например, нижняя часть символа «y»), даже если таковых в строке нет. Базовая линия проходит по нижнему краю «v» в символе «y». Opera, носитель стандарта, игнорирует значение absbottom, а другие популярные броузеры обращаются с ним согласно описанию (рис. 5.13).
Используйте top и middle для совмещения пиктограмм, маркеров списков и других специальных изображений с близлежащим текстом. В других случаях align=bottom (выбирается по умолчанию) достигает лучшего внешнего вида. Выравнивая одно или несколько изображений в строке, выбирайте то значение атрибута, которое позволит добиться наилучшего внешнего вида вашего документа.
Свойство CSS vertical-align отвечает за вертикальное выравнивание текста, картинок на странице. Важной особенностью является то, что он работает только с элементами таблицы, inline и inline-block элементами. Поддерживается всеми современными браузерами.
Синтаксис CSS vertical-align
... vertical-align : value ; ...
- baseline - выравнивание по базовой линии предка (или просто нижняя граница родителя)
- bottom - выравнивание по нижней части строки (или элемента, который располагается ниже всех)
- middle - выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента
- sub - отображение происходит под строкой (выглядит как подстрочный индекс)
- super - отображение происходит над строкой (как верхний индекс)
- text-bottom - выравнивание нижней границы элемента по нижнему краю строки
- text-top - выравнивание верхняя границы элемента по верхнему краю строки
- top - выравнивание верхняя края элемента по верху самого высокого элемента строки
- inherit - наследует значение родителя
- значение - указывается в пикселях. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз
- проценты - указывается в процетах. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз
Значение vertical-align по умолчанию:
- baseline (для строчных элементов)
- middle (для ячеек таблицы)
Вертикальное выравнивание в таблицах
Чаще всего vertical-align используется в ячейках таблиц. В теге
| или | ||||||||||||
| Выравнивание по верху |
| Выравнивание по середине |
| Выравнивание по низу |
| Выравнивание по верху |
| Выравнивание по середине |
| Выравнивание по низу |
Примеры с вертикальными выравниваниями
Пример 1. Значения vertical-align: baseline, bottom, top, sub
Текст с выравниванием vert_align_baseline
Текст с выравниванием vert_align_bottom
Текст с выравниванием vert_align_top
Текст с выравниванием vert_align_sub
Пример 2. Значения vertical-align: абсолютные значения и проценты
Ниже представлены примеры вертикального выравнивания с абсолютным значением и процентами.
Преобразуется на странице в следующее:
Исходная строка. Текст с выравниванием на 10 пикселей вверх
Исходная строка. Текст с выравниванием на 5 пикселей вниз
Исходная строка. Текст с выравниванием на 50% вверх
Исходная строка. Текст с выравниванием на 30% вниз
Значение vertical-align: middle не выравнивает строчный элемент по центру самого большого элемента в строке (что можно было бы ожидать). Вместо этого значение middle выравнивает элемент относительно гипотетичной строчной буквы "X" (также называемой x-высотой).
Для обращения к vertical-align из JavaScript нужно писать следующую конструкцию:
object.style.verticalAlign ="VALUE "
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Выравнивание содержимого контейнера
Синтаксис
Значения
center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие сайты. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.Значение по умолчанию
HTML 4.01 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Выравнивание элементов с помощью атрибута align
До сих пор мы с Вами выравнивали элементы только по левому краю. Точнее, мы с Вами вообще этим не занимались, а сам браузер по умолчанию выравнивает элементы по левому краю. Разумеется, было бы слишком скучно выравнивать всё по левому краю. Поэтому существуют различные способы выравнивания по центру и по правому краю.
Выравнивание элементов - это , которые просто необходимо знать при . Первое, что необходимо сделать - это набрать простейшей страницы.
Ещё когда-то давно появился тег
Можно добавить картинку, выравненную также по центру, также давайте перейдём на следующую строку с помощью тега
:
Заголовок 1-го уровня, выравненный по центру
Это был тег
Чтобы решить эту проблему разработчики придумали универсальный способ выравнивания элементов HTML
. Способ заключается в использовании так называемых контейнеров, которые создаются с помощью тега Давайте сейчас напишем тот же HTML-код
, но с использованием контейнеров, вдобавок, давайте выравняем не по центру, а по правому краю. Как видите, всё работает. Советую Вам также поменять значения атрибута "align
", чтобы посмотреть на другие виды выравнивания содержимого контейнеров. Другой способ выравнивания элементов HTML
- это таблицы, но эта тема заслуживает отдельного разговора, поэтому поговорим о ней в одной из следующих статей. А пока Ваша страница должна выглядеть так: С уважением, Михаил Русаков. P.S.
Если Вы хотите узнать больше по HTML
, то посмотрите мой бесплатный курс с примером создания сайта на HTML
:
Заголовок 1-го уровня, выравненный по центру
Заголовок 1-го уровня, выравненный по правому краю
