выравнивание, отступ, обтекание и другое форматирование
Свойства CSS для форматирования текста позволяют оформить содержимое страницы, не затрагивая HTML-код. Какие же параметры можно задать тексту через таблицы стилей?
Выравнивание по горизонтали
Для него используется свойство text-align. Выровнять с его помощью можно только блочный текст (теги <div>, <p>). Свойству может быть задано одно из четырех значений:
- left — выравнивание по левому краю.
- right — по правому краю.
- center — по центру.
- justify — по ширине.
Вот код HTML-страницы, текст которой выровнен по правому краю:
<!DOCTYPE html>
<html>
<head>
<title>Выравнивание по правому краю</title>
<style type="text/css">
p { text-align: right; }
</style>
</head>
<body>
<p>Текст, который вы сейчас читаете, выровнен по правому краю.</p>
</body>
</html>Выглядеть страница будет так:
Если текст выровнен по ширине (text-align: justify), то можно использовать свойство text-align-last, чтобы задать отличное от основного содержимого выравнивание последней строчки текста элемента.
Выравнивание по вертикали
Может задаваться только для строчных элементов (картинок, форм), определяется свойством vertical-align. С его помощью выравнивается не содержимое, а сами элементы, кроме случая с ячейкой – использование vertical-align выравнивает не её саму, а только расположенный в ней текст. Значения могут быть следующими:
- baseline. задаётся свойству по умолчанию и выравнивает базовую линию элемента по базовой линии родителя. Если у родителя её нет, то выравнивание происходит по нижней границе.
- top и bottom. Если задано первое значение, то верхний край элемента будет совпадать с верхним краем самого высокого элемента строки. Можно сказать, что top — это выравнивание по верхнему краю. Второе свойство выполняет противоположную функцию — совмещает нижний край оформляемого элемента с нижней частью элемента, расположенного в строке ниже всех, то есть происходит выравнивание по нижнему краю.
- text-top и text-bottom. От предыдущих свойств отличаются тем, что выравнивание происходит по самым нижним и верхним текстовым элементам, а не любым.
- sub и super. Аналоги HTML-тегов <sub> и <sup>. Первое свойство делает элемент подстрочным, второе — надстрочным. Шрифт текста при этом не меняется.
- middle. Выравнивание по центру относительно элемента-родителя.
Также с помощью vertical-align можно переместить элемент вверх или вниз, указав значение в пикселях, единицах или процентах. Положительная цифра переместит его вверх, отрицательная — вниз.
Отступ первой строки
Свойство text-indent позволяет задать отступ первой строки текста. Например, так можно отформатировать абзацы, чтобы лучше визуально отделить их друг от друга. В качестве значения используется цифра, задающая длину в процентах, единицах или пикселях. Отрицательное число превратит отступ в выступ.
<p style=”text-indent: 3em;”>Текст</p>
Межстрочный интервал
Задаётся свойством line-height, в качестве значения которого может указываться:
- Процент. Высчитывается от размера шрифта элемента.
- Число. Определяется как множитель от размера шрифта, который принимается за единицу. Например line-height: 1.5; установит полуторный интервал.
- Пиксели или пункты. Определяют не переменное, как предыдущие варианты, а постоянное расстояние.
Декорирование текста
Значение свойства text-decoration позволяет сделать текст зачёркнутым (line-through), подчёркнутым (underline) — линия появляется под текстом, надчёркнутым (overline) — линия появляется над текстом, или отменить эффекты (none).
Вот пример кода:
<!DOCTYPE html>
<html>
<head>
<title>text-decoration</title>
</head>
<body>
<p>Это зачёркнутый текст.</p>
<p>Это подчёркнутый текст.</p>
<p>Это надчёркнутый текст.</p>
</body>
</html>Результатом работы будет такая страница:
Интервал между символами и словами
Расстояние между словами можно изменить с помощью свойства word-spacing. Межсимвольное расстояние задаётся свойством letter-spacing. В качестве значений используются любые принятые в CSS единицы длины.
Смена регистра
Указав свойство text-transform
Код:
<!DOCTYPE html>
<html>
<head>
<title>text-decoration</title>
</head>
<body>
<p>Здесь все буквы будут большими.</p>
<p>Все буквы этой строки будут строчными.</p>
<p>Здесь каждое слово будет начинаться с заглавной буквы.</p>
</body>
</html>Результат:
Обратите внимание, что текст в коде набран как обычно: единственная заглавная буква стоит в начале предложения. Отображение на странице меняет CSS-стиль.
Полезные ссылки:
CSS3 | Форматирование текста
Форматирование текста
Последнее обновление: 21.04.2016
text-transform
Свойство text-transform изменяет регистр текста. Оно может принимать следующие значения:
capitalize: делает первую букву слова заглавнойuppercase: все слово переводится в верхний регистрlowercase: все слово переводится в нижний регистрnone: регистр символов слова никак не изменяется
Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Шрифты в CSS3</title>
<style>
p.lowercase {text-transform: lowercase;}
p.uppercase {text-transform: uppercase;}
p.capitalize { text-transform: capitalize;}
</style>
</head>
<body>
<div>
<p>Текст использует значение capitalize</p>
<p>Текст использует значение lowercase</p>
<p>Текст использует значение uppercase</p>
</div>
</body>
</html>
Свойство text-decoration
Свойство text-decoration позволяет добавить к тексту некоторые дополнительные эффекты. Это свойство может принимать следующие значения:
underline: подчеркивает текстoverline: надчеркивает текст, проводит верхнюю линиюline-through: зачеркивает текстnone: к тексту не применяется декорирование
Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Шрифты в CSS3</title>
<style>
p.under {
text-decoration: underline;
}
p.over {
text-decoration: overline;
}
p.line {
text-decoration: line-through;
}
p.mixed {
text-decoration: underline line-through;
}
a.none {
text-decoration: none;
}
</style>
</head>
<body>
<div>
<p>Это подчеркнутый текст.</p>
<p>Это надчеркнутый текст</p>
<p>Это зачеркнутый текст</p>
<p>Это подчеркнутый и зачеркнутый текст</p>
<p>Не подчеркнутая <a href="index.php">ссылка<a></p>
</div>
</body>
</html>
При необходимости мы можем комбинировать значения. Так, в предпоследнем случае применялся стиль:
p.mixed { text-decoration: underline line-through; }Межсимвольный интервал
Два свойства CSS позволяют управлять интервалом между символами и словами текста. Для межсимвольного интервала применяется атрибут letter-spacing, а для интервала между словами — word-spacing:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Шрифты в CSS3</title>
<style>
p.smallLetterSpace {
letter-spacing: -1px;
}
p.bigLetterSpace {
letter-spacing: 1px;
}
p.smallWordSpace{
word-spacing: -1px;
}
p.bigWordSpace{
word-spacing: 1px;
}
</style>
</head>
<body>
<div>
<h4>Обычный текст</h4>
<p>Над ним не было ничего уже, кроме неба...</p>
<h4>letter-spacing: -1px;</h4>
<p>Над ним не было ничего уже, кроме неба...</p>
<h4>letter-spacing: 1px;</h4>
<p>Над ним не было ничего уже, кроме неба...</p>
<h4>word-spacing: -1px</h4>
<p>Над ним не было ничего уже, кроме неба...</p>
<h4>word-spacing: 1px</h4>
<p>Над ним не было ничего уже, кроме неба...</p>
</div>
</body>
</html>
text-shadow
С помощью свойства text-shadow можно создать тени для текста. Для этого свойства необходимо задать четыре значения: горизонтальное смещение тени относительно текста, вертикальное смещение тени относительно текста, степень размытости тени и цвет отбрасываемой тени. Например:
h2{
text-shadow: 5px 4px 3px #999;
}
В данном случае горизонтальное смещение тени относительно букв составляет 5 пикселей, а вертикальное смещение вниз — 4 пикселя. Степень размытости — 3 пикселя, и для тени используется цвет #999.
Если нам надо было бы создать горизонтальное смещение влево, а не вправо, как по умолчанию, то в этом случае надо было бы использовать отрицательное значение. Аналогично для создания вертикального смещения вверх также надо использовать отрицательное значение. Например:
h2{
text-shadow: -5px -4px 3px #999;
}
Учебник HTML 5. Статья «Форматирование текста»
Любой веб-дизайнер зачастую сталкивается с необходимостью обработать большой объем текстовой информации, что требует от него значительного времени. Как правило, просто добавить информацию на страницу недостаточно, ее еще необходимо правильно отформатировать. В этой статье описаны основные теги, предназначенные для работы с текстом, рассмотрены подробные примеры их использования и объяснены нюансы их применения.
HTML тег <pre>
Первый на очереди тег, который мы рассмотрим это тег <pre> (HTML Preformatted Text), он определяет предварительно отформатированный текст. Текст, который был помещён внутрь тега, по умолчанию будет отображен со шрифтом фиксированной ширины и сохранит как пробелы, так и разрывы строк.
Вспомните пример со стихотворением Александра Сергеевича, который мы рассматривали в статье «Базовый HTML», мы его использовали при изучении тега <br> (устанавливает перевод строки в том месте, где этот тег обозначен). На этот раз, давайте, добавим это стихотворение на страницу внутри элемента <pre>:
<!DOCTYPE html> <html> <head> <title>Пример использования элемента <pre></title> </head> <body> <p>А.С. Пушкин</p> <pre> Я помню чудное мгновенье: <!-- добавим несколько пробелов для наглядности --> Передо мной явилась ты, Как мимолетное виденье, Как гений чистой красоты. </pre> </body> </html>
Как вы можете заметить все пробелы и переносы строк браузер оставил так, как мы их указали в редакторе:
Рис. 12 Использование тега <pre>.Как вы можете заметить использование элемента <pre> в некоторых случаях может сэкономить Вам значительное количество времени. Для информации: HTML код примеров на этой странице заключен как раз в этот тег (вложенные теги затабулированы).
HTML теги <i> и <em>
HTML позволяет выводить текст с курсивным начертанием текста, для этого используются теги <i> и <em>.
Элемент <i> может быть использован для указания технических терминов, фраз из другого языка, частей текста, которые отражены альтернативным голосом и тому подобное.
<!DOCTYPE html> <html> <head> <title>Пример использования элемента <i><title> </head> <body> <i>Курсивное начертание текста</i> </body> </html>
Тег <em> обозначает экспрессивно-эмоциональное выделение. Внешне отображение тега не отличается от тега <i>, но при этом элемент <em> используется только тогда, когда есть смысловая необходимость выделить текст. Кроме того, программы, считывающие текст с экрана, акцентирует на таких выделениях внимание определённой интонацией.
<!DOCTYPE html> <html> <head> <title>Пример использования элемента <em><title> </head> <body> У Светы <em>очень</em> большие апельсины. </body> </html>
HTML теги <b> и <strong>
HTML позволяет выводить текст с жирным начертанием текста, для этого используются теги <b> и <strong>.
Тэг <b> представляет собой фрагмент текста, который стилистически отличается от обычного текста, без передачи какого-либо особого значения или значимости. Обычно он используется для указания ключевых слов в тексте, или других фрагментов текста, которые необходимо выделить жирным шрифтом.
<!DOCTYPE html> <html> <head> <title>Пример использования элемента <b></title> </head> <body> <b>Жирное начертание текста</b> </body> </html>
Тег <strong> определяет текст, которому придают особое значение (важный текст).
Внешне отображение тегов <b> и <strong> не отличается, но элемент <strong> имеет больший вес для поисковых машин, рекомендуется не злоупотреблять им в документе и использовать его для действительно важного текста. Устройства, позволяющие читать с экрана могут выделять его определенной интонацией.
<!DOCTYPE html> <html> <head> <title>Пример использования элемента <strong></title> </head> <body> У Светы очень большие апельсины, но есть <strong>кадык</strong> </body> </html>
Прочие теги форматирования текста
Тег <mark>
Тег <mark> определяет выделенный / подсвеченный текст. Элемент может быть использован, например, чтобы выделить искомое слово в разделе, где отображены результаты поиска и т.п. По умолчанию элемент подсвечивается желтым цветом.
<!DOCTYPE html> <html> <head> <title>Пример использования элемента <mark><title> </head> <body> <mark>Выделенный/подсвеченный текст.</mark> </body> </html>
Тег <small>
Тег <small> устанавливает размер шрифта текста на один размер меньше (например, от малого — 13px к очень маленькому размеру — 10px, от большого — 18px к среднему — 16px и так далее). Другими словами элемент <small> устанавливает размер шрифта меньшего размера, чем у родительского элемента. В HTML 5 элемент может содержать информацию об авторских правах, мелкий, либо юридический шрифт.
<!DOCTYPE html> <html> <head> <title>Пример использования элемента <small><title> </head> <body> <div> <p>Процентная ставка всего 15%*</p> <small>* - в день</small> /* устанавливает размер шрифта меньшего размера, чем у родительского элемента */ </div> </body> </html>
Тег <del> и <s>
Тег <del> предназначен для выделения фрагмента текста, который был удален из документа. Как правило, браузеры отображают этот фрагмент как перечёркнутый текст.
Допустим, что был издан определённый приказ о переносе совещания и данные изменения необходимо отобразить на сайте. Для этого мы и воспользуемся тегом <del>, благодаря которому мы перечеркнем предыдущее время. Кроме того, атрибутом datetime укажем дату и время, когда текст был удален, а атрибутом cite укажем почему это изменение было сделано (ссылка на приказ).
Конечный пользователь, который будет просматривать сайт не увидит влияние этих атрибутов, но информация, которая была указана в элементе <del> может быть использована в статистических целях, либо в информационных системах учета.
<!DOCTYPE html> <html> <head> <title>Пример использования атрибутов cite и datetime HTML тега <del></title> </head> <body> <p>Совещание состоится 31 декабря 2016 года в <del cite = "prikaz.html" datetime = "2016-12-30T12:00:00+03:00">10:00</del> 11:00.</p> </body> </html>
Результат нашего примера:
Рис. 13а Пример использования атрибутов cite и datetime HTML тега <del> (причина и время удаления текста)Ниже приведена таблица, которая дает пояснения как правильно указывать время в значении атрибута datetime. Далее в этой статье мы будем рассматривать тег, предназначенный для временной разметки и более подробно рассмотрим как в HTML задаются временные значения.
| Значение | Описание |
|---|---|
| YYYY-MM-DDThh:mm:ssTZD | YYYY — год (например, 2016) MM — месяц (например, 05 для Мая) DD – день месяца (например, 11) T или пробел — разделитель hh — часы (например, 23) mm — минуты (например, 57) ss — секунды (например, 21) TZD — Time Zone Designator (часовой пояс):
2016-12-31T09:00:00Z — соответствуют тому же временному значению. |
Тег <s> определяет текст, который больше не является правильным или актуальным. Браузеры обычно отображают такой текст как перечеркнутый. Тег <s> не используется для того, чтобы пометить удаленный текст, для того чтобы пометить текст как удаленный, используйте вышерассмотренный тег <del>.
<!DOCTYPE html> <html> <head> <title>Пример использования элемента <s><title> </head> <body> <s>Моя девушка брюнетка.</s> <p>У меня больше нет девушки.</p> </body> </html>
Тег <ins> и <u>
Тег <ins> определяет текст, который был вставлен в документ. Как правило, браузеры по умолчанию отображают этот текст как подчеркнутый.
Предположим (для примера), что вышла новая версия программного продукта (десятая версия сменяется одиннадцатой) о чем свидетельствует информация опубликованная на определённом известном ресурсе. Ваша задача отобразить это на своем сайте. Для этого мы воспользуемся тегом <s> (текст, который больше не является правильным или актуальным), благодаря которому мы перечеркнем информацию о предыдущей версии программного продукта (десятая), а тегом <ins> мы вставим информацию о новой версии(одиннадцатой). Кроме того, атрибутом datetime укажем дату и время, когда текст был вставлен, а атрибутом cite укажем почему текст был вставлен (ссылка на информацию о выходе новой версии).
Конечный пользователь, который будет просматривать сайт не увидит влияние этих атрибутов, но информация, которая была указана в элементе <ins> может быть использована в статистических целях, либо в информационных системах учета.
<!DOCTYPE html> <html> <head> <title>Пример использования атрибутов cite и datetime HTML тега <ins></title> </head> <body> <p>Текущая версия программного продукта <s>десятая</s> <ins cite = "http://somesite.com/info.html" datetime = "2016-05-30T10:00:00+03:00">одиннадцатая</ins>. </p> </body> </html>
Результат нашего примера:
Рис. 13б Пример использования атрибутов cite и datetime HTML тега <ins> (причина и время вставки, либо изменения текста).Обращаю Ваше внимание, что значение атрибута datetime задается по аналогии с вышерассмотренной таблицей.
Тег <u> содержит в себе текст, который должен стилистически отличаться от обычного текста, например, слова с орфографическими ошибками или текст на другом языке. В некоторых случаях подчеркивание имеет смысловое значение, например, подчеркивание имён собственных в китайском языке, или указание неправильно написанного слова при проверке орфографии.
<!DOCTYPE html> <html> <head> <title>Пример использования элемента <u><title> </head> <body> <u>Текст, который будет подчеркнут снизу.</u> </body> </html>
Обратите внимание, что подчеркнутый текст легко спутать со ссылкой, и поэтому в целом следует избегать его использования, за исключением некоторых случаев.
Теги <sub> и <sup>
Тег <sub> определяет текст с нижним индексом. Элемент <sub> выравнивает элемент как подстрочный и по аналогии с ранее рассмотренным элементом <small> определяет текст меньшего размера.
<!DOCTYPE html> <html> <head> <title>Пример использования тега <sub><title> </head> <body> Формула спирта C2H5OH на языке HTML записывается следующим образом: C<sub>2</sub>H<sub>5</sub>ОН </body> </html>
Тег <sup> определяет текст с верхним индексом. Элемент <sup> выравнивает элемент как надстрочный и по аналогии с ранее рассмотренным элементом <small> определяет текст меньшего размера.
<!DOCTYPE html> <html> <head> <title>Пример использования тега <sup><title> </head> <body> Дискриминант квадратного трёхчлена ax2+bx+c равен D=b2-4ac на языке HTML записывается следующим образом: ax<sup>2</sup>+bx+c равен D=b<sup>2</sup>-4ac </body> </html>
Ниже на изображении приведены, рассмотренные HTML элементы, предназначенные для форматирования текста:
Рис. 13в Виды форматирования текста.Справочно: мы с вами уже знаем, что любой браузер, когда встречает в тексте элемент < считает, что дальше следует название тэга пока он не встретит закрывающую скобку >. Но как быть если я хочу отобразить на странице название тега, ведь для этого требуются написать скобки, например, как на изображении выше?.
Для записи тега на странице Вам необходимо воспользоваться спецсимолами < и > для замены угловых скобок < >. Вы всегда сможете найти таблицы различных спецсимволов (мнемоников) на сайте в этом разделе.
HTML тег <dfn>
Тег <dfn> (HTML Definition Element) используется, когда в документе упоминается новый термин или слово (первое и поясняемое употребление). По умолчанию, элемент выделяется курсивом.
<!DOCTYPE html> <html> <head> <title>Пример использования тега <dfn></title> </head> <body> <dfn>Капибара</dfn> — полуводное травоядное млекопитающее из семейства водосвинковых. </body> </html>
HTML тег <time>
Тег <time> представляет собой семантическую разметку. Внутри тега можно установить дату / время / период (или всё вместе) в удобном формате, а в атрибуте datetime указать дату уже в машиночитаемом виде.
Машиночитаемая разметка используется поисковыми системами и пользовательскими браузерами, которые видят не какую-то нейтральную разметку, а данные, которые они могут идентифицировать.
Синтаксис:
<time datetime = "YYYY-MM-DDThh:mm:ssTZD | PTDHMS"> </time>, где:YYYY — год (например, 2016)
MM — месяц (например, 05 для Мая)
DD – день месяца (например, 11)
T или пробел — разделитель
hh — часы (например, 23)
mm — минуты (например, 57)
ss — секунды (например, 21)
TZD — Time Zone Designator (часовой пояс):
- UTC (Coordinated Universal Time) — всемирное координированное время, обозначается буквой Z.
- +hh:mm (использование локального часового пояса) например, -03:00 (отклонение от UTC)
- -hh:mm (использование локального часового пояса) например, +03:00 (отклонение от UTC)
2016-12-31T09:00:00Z — соответствуют тому же временному значению.
P — префикс для периода
T или пробел — разделитель
D — префикс для дней (например, 2D)
H — префикс для часов (например, 20H)
M — префикс для минут (например, 55M)
S – префикс для секунд (например, 5S)
Далее будут приведены примеры использования этого тега.
Семантическая разметка:
<time> 17:00 </time> <!--значит 17:00-->
Машиночитаемая разметка:
Даты:
<time datetime="2016"> <!--значит 2016 год--> <time datetime="2016-12"> <!--значит декабрь 2016 года --> <time datetime="2016-12-31"> <!--значит 31 декабря 2016 года --> <time datetime="12-31"> <!--значит 31 декабря любого года--> <time datetime="2017-W1"> <!--значит 1 неделя 2017 года -->
Даты и время:
<time datetime="2016-12-31T22:00"> <!--значит 31 декабря 2016 года в 10 вечера --> <time datetime="2016-12-31 22:00"> <!--также без T --> <time datetime="2016-12-31 22:45:50.777"> <!--с минутами, секундами и миллисекундами -->
Время:
<time datetime="07:00"> <!--значит 7 часов утра --> <time datetime="07:00-03:00"><!--значит 7 часов утра (UTC - Всемирное координированное время минус 3 часа --> <time datetime=">"08:00+03:00"> <!-- значит 7 часов утра (UTC - Всемирное координированное время плюс 3 часа) -->
Длительность:
<time datetime="P2D"> <!--длительность 2 дня --> <time datetime="PT20h35M"> <!--длительность 20 часов and 25 минут -->
Пример семантической и машиночитаемой разметки
<!DOCTYPE html> <html> <head> <title>Пример использования HTML тега <time></title> </head> <body> <p>Мы запланировали вечеринку в <time datetime = "2016-12-31 22:00"> Новый Год в 22:00 </time></p> </body> </html>
Конечный пользователь, который будет просматривать сайт не увидит влияние атрибута datetime, но информация, которая была указана может быть использована в статистических целях, либо в информационных системах учета. Более того, по умолчанию, элемент <time> не имеет никаких стилей, то есть вы не увидите его применение.
На данном этапе обучения вы можете не понять для чего необходимы такие «пустые» теги, но при изучении CSS 3 (каскадные таблицы стилей) все кирпичики встанут на свои места, если вы, конечно, захотите продолжить обучение после изучения HTML. А теперь переходите к практической части статьи.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив с HTML файлом:
- Используя полученные знания составьте следующую HTML страницу:
Практическое задание № 5.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы поняли как происходит форматирование элементов в HTML.
Форматирование текста HTML CSS
У любого текста есть структура, состоящая из отдельных элементов. К ним относятся заголовки, абзацы, списки и тому подобные вещи. Каждый элемент должен быть на своем месте.
HTML-документ не является исключением. Здесь точно также нужно правильно расположить каждый элемент. Текст, прежде всего, следует разбить на абзацы. Он не должен выглядеть как сплошное полотно.
Чтобы это сделать, надо научиться пользоваться тегами. Тег – элемент документа, который указывают браузеру, как следует показывать страницу. Все, что внутри тега называется содержимым этого тега. Новый абзац в HTML документе следует делать с помощью тега <p>. Также нужен закрывающий тег в конце абзаца </p>.
Чтобы форматирование текста было интереснее, ему можно придать дополнительные свойства с помощью CSS. Причем, свойства можно задать как всему документу в целом, так и отдельным тегам. Так, тегу <p> можно дополнительно указать шрифт, размер, отступ по всем сторонам и ряд других свойств.
Свойство font-family подскажет браузеру, какой будет использоваться шрифт, а text-indent укажет на размер отступа. Причем, значение может указываться как в пикселях, так и в процентах или в прочих единицах измерения.
Есть и другие интересные свойства. Например, text-align задает выравнивание текста, который по умолчанию выстраивается по левому краю, но верстальщик может изменить это состояние.
Допустимо использовать одно из четырех значений:
Left – Текст выравнивается по левому краю. Справа текст получается неровным.
Right – Текст выравнивается по правому краю, а неровным становится левый.
Center – Текст выравнивается по центру. Оба края остаются неровными. Как правило, свойство используется для заголовков.
Justify – Выравнивание текста происходит по ширине. Оба края остаются ровными за счет меняющегося пространства между словами.
Но и это еще не все! Здесь, также можно изменить расстояние между словами с помощью свойства word-spacing и интервал между строк с помощью letter-spacing.
Чтобы форматирование текста осуществлялось должным образом, в HTML предусмотрена целая группа тэгов:
<sup> и </sup>. Тег верхнего индекса.
<sub> и </sub>. Тег нижнего индекса.
<pre> и </pre>. Текст отображается на экране точно также как пишется. ( Пользоваться этим тегом следует для отображения программного кода, в остальных случаях считается «дурным тоном».)
<em> и </em>. Наклонный текст.
<strong> и </strong>. Полужирный текст.
<code> и </code>. Содержимое контейнера будет отображаться кодовым текстом.
<samp> и </samp>. Моноширинный текст.
<abbr titlle=“Расшифровка аббревиатуры“> Аббревиатура.
<br> и </br>. Тег принудительного перевода текста на новую строку. Если тег не указывается, браузер автоматически определяет необходимость новой строки, руководствуясь размером экрана и размером используемого шрифта.
<!-- и -->. Содержимое данного контейнера не отображается на экране пользовательского компьютера и нужно для того, чтобы оставить комментарий самому себе или другому верстальщику, который возьмет проект на себя.
Для форматирования текста в документах HTML присутствуют и другие теги. Например, тег <h2> и закрывающий тег </h2> указывают браузеру на заголовок. Причем, поскольку заголовков в теле документа может быть несколько, также присутствуют и дополнительные теги <h3>, <h4>… <h6>. При этом, тег <h2> в документе может быть, только один. Это самый главный заголовок.
Попробуйте самостоятельно написать текст и выполнить форматирования текста в файле блокнота с расширением *.txt перепишите его на *.html и сохраните. Если все получилось, переходите к более сложным задачам. При возникновении трудностей лучше повторить попытку до тех пор, пока не получится выполнить все правильно.
Для их выполнения также придется познакомиться с новыми тегами.
CSS | Форматирование текста | Портал информатики для гиков
Свойства форматирования текста CSS используются для форматирования текста и стиля текста.
Форматирование текста CSS включает следующие свойства:
1.Text цвета
2.Text выравнивание
3.Text-украшение
4.Text-преобразования
5.Text-отступы
Расстояние между буквами
Высота 7.Line
8.Text-направление
9.Text-тень
10. Расстояние между словами
1. ТЕКСТОВЫЙ ЦВЕТ
Свойство Text-color используется для установки цвета текста.
Цвет текста можно установить, используя имя «red», шестнадцатеричное значение «# ff0000» или его значение RGB «rgb (255, 0, 0)».
Syntax:
body
{
color:color name;
}
Пример:
|
OUTPUT:
2. ВЫРАВНИВАНИЕ ТЕКСТА
Свойство выравнивания текста используется для установки горизонтального выравнивания текста.
Текст может быть установлен влево, вправо, по центру и выровнено.
При правильном выравнивании линия вытянута так, что левые и правые поля являются прямыми.
Syntax:
body
{
text-align:alignment type;
}
Пример:
|
OUTPUT:
3. Текстовое оформление
Оформление текста используется для добавления или удаления украшений из текста.
Текстовое оформление может быть подчеркиванием, наложением, сквозным или отсутствующим.
Syntax:
body
{
text-decoration:decoration type;
}
Пример:
|
OUTPUT:
4. ТЕКСТ ПРЕОБРАЗОВАНИЯ
Свойство преобразования текста используется для изменения регистра текста, прописных или строчных.
Преобразование текста может быть прописным, строчным или прописным.
Заглавная буква используется для изменения первой буквы каждого слова в верхний регистр.
Syntax:
body
{
text-transform:type;
}
Пример:
|
OUTPUT:
5. ТЕКСТ ИНДЕНТАЦИЯ
Свойство отступа текста используется для отступа первой строки абзаца.
Размер может быть в px, cm, pt.
Syntax:
body
{
text-indent:size;
}
Пример:
|
OUTPUT:
6. ПИСЬМО ПРОСТРАНСТВО
Это свойство используется для указания пробела между символами текста.
Размер можно указать в пикселях.
Syntax:
body
{
letter-spacing:size;
}
Пример:
|
OUTPUT:
7. ВЫСОТА ЛИНИИ
Это свойство используется для установки расстояния между строками.
Syntax:
body
{
line-height:size;
}
Пример:
|
OUTPUT:
8. ТЕКСТ НАПРАВЛЕНИЕ
Свойство text direction используется для установки направления текста.
Направление может быть установлено с помощью rtl: справа налево.
Слева направо — это направление текста по умолчанию.
Syntax:
body
{
direction:rtl;
}
Пример:
|
OUTPUT:
9. ТЕКСТОВАЯ ТЕНЬ
Свойство Text shadow используется для добавления тени к тексту.
Вы можете указать горизонтальный размер, вертикальный размер и цвет тени для текста.
Syntax:
body
{
text-shadow:horizontal size vertical size color name;
}
Пример:
|
OUTPUT:
10. Пространство
Интервал между словами используется для указания пробела между словами в строке.
Размер можно указать в пикселях.
Syntax:
body
{
word-spacing:size;
}
Пример:
|
OUTPUT:
Рекомендуемые посты:
CSS | Форматирование текста
0.00 (0%) 0 votes
Глава 8 Форматирование текста средствами CSS. HTML, XHTML и CSS на 100%
8.1. Выделение текста цветом
8.2. Шрифты
8.3. Форматирование текста
В этой главе мы разберем основные приемы работы с текстом средствами CSS. Форматирование и установка стиля, выбор шрифта и задание цвета – все это с легкостью решается средствами CSS.
Изначально язык CSS был разработан для управления видом текста, поэтому он предоставляет веб-разработчику впечатляющие средства по работе с текстом. Как правило, обычного набора элементов HTML недостаточно, чтобы оформить текст на странице. Здесь на помощь и приходит CSS.
Чтобы понять всю мощь CSS по работе с текстом и в то же время освоить основные приемы создания таблиц стилей, создадим простую HTML-страницу, которая и будет служить примером (листинг 8.1, рис. 8.1).
Листинг 8.1. Тестовая HTML-страница
<html>
<head>
<title>Глава 8. Форматирование текста средствами CSS</title>
<link href=»my_style.css» rel=»stylesheet»>
</link>
</head>
<body>
<h2>Форматирование текста средствами CSS</h2>
<p>Намек: добивается успеха только тот, кто старается.</p>
<h3>Предисловие</h3>
<p>В CSS нет ничего сложного, к концу данной главы вы научитесь изменять
цвет текста, шрифт, размер. Научитесь управлять его положением на
странице и выучите еще много других приемов форматирования,
которые сделают вас настоящим профессионалом веб-дизайна.</p>
<p>Вам будет под силу отформатировать любой текст. И вы сделаете это
так же просто, как в обычном текстовом редакторе.
Вы сможете заставить читать посетителя по буквам.</p>
<p>К примеру, задать «жирность» в 600 для данного абзаца
средствами HTML просто невозможно.
Так же, как и <span>выделить</span> данный текст.</p>
<p>Если из примера вам все понятно, то вы можете сразу перепрыгнуть
далее к <a href=»#»>главе 9.</a></p>
</body>
</html>
Рис. 8.1. Тестовая HTML-страница
Страница, которую вы создадите, используя код листинга 8.1, может незначительно отличаться от приведенной в книге. К примеру, у вас может быть другой шрифт. По ходу изучения главы мы отформатируем страницу так, чтобы ваша тестовая страница и страницы из дальнейших примеров выглядели одинаково. Собственно, это и есть одна из самых сложных задач веб-дизайна.
После создания страницы первое, что бросается в глаза, – неудачно отформатированный текст. Точнее, он вообще не отформатирован. Постепенно мы будем совершенствовать наш CSS-код и к концу главы получим отформатированную страницу.
CSS-код можно добавлять в HTML-страницы двумя путями. Первый – вписать код таблицы стилей непосредственно в саму HTML-страницу. Второй, который мы и будем использовать в примере, – вынести содержание CSS во внешний файл таблицы стилей, а в HTML-странице оставить ссылку на него. В нашем примере файл таблицы стилей располагается во внешнем файле с именем my_style.css в той же папке, что и наша страница.
Следует добавить, что каждый раз дописывать новое свойство для одного и того же элемента, указывая его название, нерационально. К примеру, задать цвет текста красным и выровнять его по правому краю для абзацев можно, определив для элемента P такой CSS-код:
p {
color: red;
text-align: right;
}
Данный прием был подробно рассмотрен в подразд. «Группировка» разд. 7.3.
По ходу изучения главы вы будете встречаться с одиночными примерами. Однако в таблицу стилей можете дописывать свойства так же, как показано выше.
Сразу оговорюсь, что при работе со шрифтами надо учитывать, что выбранный вами шрифт должен быть установлен на компьютере клиента, иначе он увидит страницу в шрифте, который задан по умолчанию настройками его браузера. Про это подробно будет рассказано в разд. 8.2, посвященном выбору и заданию шрифтов.
Итак, приступим к изучению форматирования текста и начнем с рассмотрения работы с цветами.
Данный текст является ознакомительным фрагментом.Читать книгу целиком
Поделитесь на страничкеСледующая глава >
Форматирование текста в html – свойства и теги форматирования, которые вы должны знать
От автора: HTML предоставляет достаточно возможностей для форматирования текста. Например, его можно сделать с жирным или курсивным начертанием, подчеркнуть или вывести с учетом пробелов. Форматирование текста в html осуществляется с помощью нескольких тегов, которые в этой статье хотелось бы обсудить подробнее.
Жирный шрифт
Для того чтобы вывести в html буквы жирным шрифтом, нужно его заключить в специальные теги, которые для этой цели предназначены. Как ни странно, но парные теги <b> и <strong> выполняют одно и то же действие – делают содержимое, которое вписано в них, жирным. Так зачем тогда для одного и того же действия придуманы разные теги?
Дело в том, что b и strong немного отличаются. Тег <b> был создан для того, чтобы просто помечать нужный текст жирным шрифтом, но при этом не добавлять ему какой-то важности по сравнению с другими частями. Проще говоря, это просто тег для изменения внешнего вида и ни для чего более.
Strong имеет немного другой смысл, добавляя тексту важности. В этом плане тег можно назвать логическим или семантическим. Заключая определенные слова в strong можно подчеркнуть их важность, выделить среди всей статьи.
Курсив
Для вывода слов в курсивном начертании нужно использовать теги <i> и <em>. Тут ситуация такая же, как и вышеописанная. Тег <i> влияет только на внешний вид текста, не добавляя ему особого смысла. Em же позволяет логически выделить слова.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееНапример, в речевых браузерах такой фрагмент может быть отмечен немного по-другому, чем если бы его просто пометили как курсив с помощью <i>.
Текст в верхнем и нижнем индексах
Иногда появляется необходимость вывести какие-то буквы, цифры или символы в верхнем или нижнем индексе. Для этого стоит применять парные теги <sup> и <sub>. Первый выводит символы в верхнем индексе, а второй, соответственно, в нижнем. Вот и вся наука.
Вывод текста с сохранением форматирования
По умолчанию в html-документе любое количество пробелов преобразовывается в один. В большинстве случаев это вполне оправдано, так как код не является самым удобным местом для форматирования информации. Но все же может возникнуть необходимость записать текст так, чтобы он вывелся ровным счетом так же, как записан в редакторе.
Для этого его заключают в парный контейнер <pre>. Теперь будут учитываться все пробелы и переносы строк. Ах да, еще шрифт может поменяться на моноширинный.
Рис. 1. Этот отрывок был написан без переносов строк с помощью
. Как видите, текст в pre отображается так, как он набран в редакторе.
Вообще в css есть гораздо более функциональное свойство, которое позволяет управлять отображением пробелов в нужном фрагменте более широко. Это свойство white-space. Хотя статья в основном об html-тегах, давайте все-таки рассмотрим его значения:
Nowrap – все будет выводиться одной строкой без переносов. Перенести можно только вручную. Например, добавив к строке тег br.
Pre – будет выводиться абсолютно так же, как он выводиться в pre. Если строка не влезает в окно браузера, то она продолжит тянуться, образуя горизонтальную прокрутку.
Pre-wrap – более умное поведение текста, все пробелы сохраняются, но слова автоматом переносятся на новую строку, если перестают помещаться по ширине в свой блок-родитель.
Вот такие вот есть значения. Так что если вам нужно будет вывести фрагмент с пользовательским форматированием, лучше всего использовать значение pre-wrap.
Подчеркнутый текст
Для подчеркивания в html есть еще один тег — ins. Можно использовать его, а можно реализовать подчеркивания с помощью css-свойства text-decoration. Кстати, это позволяет подчеркнуть нужный текст не только снизу, но и сверху, если это будет необходимо.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееЗачеркнутый текст
Сначала в html для этого применяли тег strike, но сегодня он немного устарел и вместо него лучше использовать укороченный вариант — s. Также язык разметки предлагает нам еще один тег – del. Он тоже выводит зачеркнутый текст, но был создан для того, чтобы показать, какие части документа были исправлены.
Я думаю, что если вам нужно зачеркнуть всего лишь одно-два слова на всю статью, то нет особой разницы, какой из этих тегов вы будете использовать. Визуальный редактор от WordPress, например, предлагает для зачеркивания оборачивать текст с помощью del.
Комбинирование
Все теги форматирования можно комбинировать между собой и в результате получить жирный курсивный текст, слова в верхнем индексе с подчеркиванием или зачеркнутую цифру в нижнем индексе. Давайте для примера наложим побольше команд на какое-нибудь слово.
<b><i><ins>Слово</ins></i></b>
<b><i><ins>Слово</ins></i></b> |
Тут самое главное – правильно закрыть теги. В результате наше слово будет выведено жирным шрифтом, но также оно получит курсивное начертание и подчеркивание снизу.
Рис. 2. Комбинируя команды вы можете добиться разного форматирования.
Теги форматирования текста html дают достаточно много возможностей, но также стоит рассмотреть, как в касадной таблице стилей можно добиться такого же с помощью специальных свойств.
CSS-свойства для текста
Все вышеописанные преобразования с текстом можно осуществить и без помощи html, только с помощью css-свойств. Например, font-weight: bold делает нужный вам текстовый фрагмент жирного начертания, а font-style: italic сделает текст курсивным. Эти свойства тоже можно комбинировать. Конечно же, в этом случае слова не получат никакого логического выделения, просто будет изменен их внешний вид.
В данном случае теги, возможно, немного выигрывают в плане того, что с их помощью оформлять текст удобнее. Вы просто обрамляете нужное содержимое в нужный тег и получаете результат. В css вы сможете выделить отдельный кусок, только если предварительно обернете его тегом span, повесив ему стилевой класс. Сравнение:
HTML позволяет очень быстро выделить фрагмент, особенно легко это делать через редактор в любом популярном движке сайтов.
<span class = «bold»>Текст</span> .bold{ Font-weight: bold; }
<span class = «bold»>Текст</span> .bold{ Font-weight: bold; } |
Как видно, с использованием таблицы стилей пришлось написать гораздо больше кода.
Это все основные способы форматирования, которые предусмотрены в html. В общем-то, их достаточно, чтобы оформить содержимое. Остальные настройки вроде цвета, тени делаются в css и описаны в других уроках нашего блога. На этом я на сегодня заканчиваю, а вам предлагаю подписаться на блог, чтобы получать новую полезную информацию.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотреть