Положение html текста – CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html

Содержание

Свойства CSS для изменения текста

Основные данные по стилям CSS были рассмотрены в предыдущих статьях. Теперь можно перейти к свойствам стилей, которые вы будете применять для достижения своих целей в сайтостроении. Начнем с изучения свойств CSS, которые применяются к тексту для изменения его вида, размеров, цвета, отступов и т.п.

Свойство Font

font - универсальное свойство, в которое можно включать несколько характеристик, указывая их через пробел - такие как стиль, жирность, размер, размер шрифта.

font: italic 12px arial;

Но обычно свойства font расписывают отдельно:

font-family - указывается имя (тип) шрифта. Можно указать через запятую, тогда - если у пользователя нет 1-го шрифта, то применится следующий.

font-family: verdana, times new roman;

font-size - размер шрифта, можно указывать в px, em, процентах или через постоянные значения - xx-small, x-small, small, medium, large, x-large-xx-large.

font-size:1.3em;

font-style - выбор способа вида шрифта - курсив (italic), наклонный (

oblique) и обычный (normal)

font-style: italic;

font-variant - определение строчных букв - нормальное (normal) и small-caps (строчные буквы, как уменьшенные заглавные)

font-variant: small-caps;

font-weight - определние жирности шрифта. Можно указывать от 100 до 900 или с помощью слов: bold, bolder, lighter и normal.

font-weight: bold;

Изменения между символами

letter-spacing - отступ между символами. Можно указывать в отрицательном значении в px, in, pt и т.п. Для обычного интервала - normal.

letter-spacing:5px;

line-height - отступ между строками. Можно указывать в px, % или normal. Нельзя указать отрицательное значение.

line-height:50%;

word-spacing - отступ между словами. Указывается в px, in, pt и т.п. или normal.

word-spacing:5pt;

Положение и декор текста

text-align - положение теста по центру (center), по левому (left) или по правому (right) краям:

text-align:center;

vertical-align - положение текста по вертикали, относительно родителя. Устанавливается с помощью слов:

  • bottom - по нижнему краю родителя
  • middle - по середине
  • top - по верхнему краю родителя
  • sub - текст показывается по нижнему индексу
  • super - текст располагается по верхнему индексу

Также можно указывать в мерах длины и процентах с учетом того, что при положительном значении - смещение вверх,  а при отрицательном - вниз.

vertical-align:sub;

text-decoration - добавление декора к тексту с помощью подчеркивания снизу (underline), сверху (overline), перечеркивания (line-through) и мигание (blink). Значение none - отменяет декорирование, даже подчеркивание ссылок.

text-decoration:overline;

text-indent - определение отступа первой строки абзаца. Указывается в любой мере длины.

text-indent:20px;

text-shadow - тень к тексту. Сначала указывается смещение по x, затем по у и радиус размытия тени. В конце можно указать цвет тени.

text-shadow:2px 2px 5px red;

text-transform - управление заглавными и строчными буквами с помощью слов:

  • capitalize - у каждого слова 1-й символ заглавный
  • lowercase - все символы будут строчными
  • uppercase - все символы станут заглавными
  • none - по-умолчанию

text-transform:lowercase;

white-space - выбор отображения пробелов с помощью слов:

  • normal - значение по-умолчанию
  • nowrap - текст располагается в одну строку, перенос только с <br>
  • pre - учитываются все пробелы и переносы
  • pre-line - разрешаются переносы строк
  • pre-wrap - перенос строки, если не вмещается по ширине

Для знакомства с основными тегами для текста читайте статью из раздела верстки HTML.

Форматирование текста | htmlbook.ru

Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.

Табл. 1. Теги для форматирования текста
Код HTML Описание Пример
<b>Текст</b> Жирное начертание текста Текст
<i>Текст</i> Курсивное начертание текста Текст
<sup>Текст</sup> Верхний индекс e=mc2
<sub>Текст</sub> Нижний индекс H2O
<pre>Текст</pre> Текст пишется как есть, включая все пробелы
Текст
<em>Текст</em> Курсивный текст Текст
<strong>Текст</strong> Жирное начертание текста Текст

Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов <b> и <i> (пример 1). Их порядок в данном случае не важен.

Пример 1. Жирный курсивный текст

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Текст</title>
 </head>
 <body>   
   <p>Он словно вырезан из <b>камня</b>, стоек и неподвижен в отличие от его противников. 
   <i>Дух и жизненная сила</i> в нём достигла <b><i>совершенства</i></b>. 
   Но вот беда — никто не смеет принять его вызов.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид курсивного жирного начертания текста

Использование тегов <sup> и <sub> сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).

Пример 2. Создание нижнего индекса

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Текст</title>
 </head>
 <body> 
  <p><b>Формула изумруда:</b>
  <i>Be<sub>3</sub>Al<sub>2</sub>(SiO<sub>3</sub>)<sub>6</sub></i></p>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Нижний индекс в тексте

Теги <strong> и <em> выполняют те же функции, что теги <b> и <i>, но написание последних короче, привычней и удобней.

Следует отметить, что теги <b> и <strong>, также как <i> и <em> являются не совсем эквивалентными и заменяемыми. Первый тег <b> — является тегом физической разметки и устанавливает жирный текст, а тег <strong> — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <b> и <strong>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.

HTML: Теги для текста | HTML самоучитель

В HTML есть теги для изменения внешнего вида текста, такие как <b> и <i>. Они используются для выделения текста полужирным шрифтом или курсивом, такие теги в HTML называются тегами для форматирования.

Форматирование текста

Этот пример демонстрирует, как вы можете отредактировать текст в HTML документе, используя специальные теги:


<html>
  <body>

    <p><b>Текст</b></p>
    <p><strong>Текст</strong></p>
    <p><em>Текст</em></p>
    <p><i>Текст</i></p>
    <p><small>Текст</small></p>
    <p>Это<sub> нижний индекс</sub> и <sup>верхний индекс</sup></p>

  </body>
</html>
Попробовать »

Тег <pre>

Тег <pre> позволяет выделить часть исходного текста, которая должна отобразиться браузером в первоначальном виде, то есть теми же символами и с тем же количеством пробелов и разрывов строк. Весь текст, заключенный между открывающим тегом <pre> и закрывающим </pre>, будет отображаться моноширинным шрифтом:


<html>
  <body>

    <pre>
      Он сохраняет авторское форматирование текста
      (оставляет без изменений)
      и делает шрифт моноширинным
    </pre>

  </body>
</html>
Попробовать »

Теги для отображения кода

Пример, показанный ниже, демонстрирует разницу вывода содержимого тегов на экран:


<html>
  <body>

    <p><code>Программный код</code>
      <br>
      <kbd>Ввод с клавиатуры</kbd>
      <br>
      <samp>Образец кода</samp>
      <br>
      <var>Выделение переменной</var>
    </p>
    <p>
      Эти теги обычно используются для того, чтобы показать на странице программный код
    </p>

</body>
</html>
Попробовать »

Тег <address>

Адрес является распространенным элементом многих HTML-документов, для выделения адреса на странице существует специальный тег <address>, отделяющий текст, заключенный в него, от всего остального содержимого.

Чаще всего он используется для выделения контактной информации, например адреса электронной почты или способа связи с автором/владельцем документа, статьи или сайта:


<html>
  <body>

    <p>Вы можете найти меня на моем сайте</p>
    <address>
      <a href="www.puzzleweb.ru">Мой сайт для связи</a>
    </address>

  </body>
</html>
Попробовать »

Аббревиатуры

Пример демонстрирует, как можно написать аббревиатуру или сокращение:


<html>
 <body>

    <p><abbr title="Неопознанный Летающий Объект">НЛО</abbr><br><br><br>
      Атрибут title нужен для всплывающей подсказки, она появляется
      при наведении курсора на аббревиатуру.
    </p>

  </body>
</html>
Попробовать »

Направление текста

Пример демонстрирует, как можно изменить направление текста:


<html>
  <body>

    <p>
      Тег bdo определяет направление текста - слева направо и наоборот.<br><br>
      <bdo dir="rtl">
        Это наш текст
      </bdo>
    </p>

  </body>
</html>
Попробовать »

Цитаты

В HTML есть два тега для выделения цитат в тексте - <q> и <blockquote>. Тег <q> является строчным элементом и предназначен для выделения коротких цитат непосредственно в тексте абзаца. Текст, размещенный внутри элемента <q>, по умолчанию большинством браузеров отображается в двойных кавычках.

В отличие от тега <q>, тег <blockquote> является блочным элементом, он предназначен для выделения длинных цитат, которые по объему больше похожи на целые абзацы. В большинстве браузеров текст элемента <blockquote> будет отображаться с небольшим отступом вправо и иметь разрывы строки до и после себя:


<html>
  <body>

    <p>Длинная цитата:</p>
    <blockquote>
      Это очень длинная цитата.Это очень длинная цитата.Это очень длинная цитата.
      Это очень длинная цитата.Это очень длинная цитата.Это очень длинная цитата.
    </blockquote>
    <p><b>Для длинных цитат браузер вставляет отступы со всех сторон. </b>
      <br><br>
      Короткая цитата: 
      <q>Это короткая цитата.</q><br>
      <b>Короткие цитаты заключаются в двойные кавычки.</b>
    </p>

</body>
</html>
Попробовать »

Удаленный и вставленный текст

Пример демонстрирует, как можно в документе пометить текст, который был удален (помечается как перечеркнутый) или вставлен (помечается как подчеркнутый):


<html>
  <body>

    <p>
      Содержимое тега del, большинство браузеров отображает <del>перечеркнутым</del>, а 
      содержимое тега ins - <ins>подчеркнутым</ins>
    </p>

  </body>
</html>
Попробовать »

Примечание: также подчёркивание и перечёркивание можно задать с помощью CSS свойства text-decoration.

writing-mode | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+

Краткая информация

Значение по умолчанию Нет
Наследуется Да
Применяется Ко всем элементам и генерируемому контенту
Процентная запись Неприменима
Ссылка на спецификацию http://dev.w3.org/csswg/css3-text-layout/#writing-mode

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Устанавливает направление текста на странице. Свойство writing-mode является универсальным и позволяет одновременно задавать значения свойств direction и block-progression.

Синтаксис

writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr

Значения

lr-tb
Устанавливает направление текста слева направо.
rl-tb
Задает направление текста справа налево.
tb-rl
Текст располагается вертикально и выравнивается по верхнему и правому краю.
bt-rl
Текст располагается вертикально и выравнивается по нижнему и правому краю.
tb-lr
Текст располагается вертикально и выравнивается по верхнему и левому краю.
bt-lr
Текст располагается вертикально и выравнивается по нижнему и левому краю.

Влияние разных значений на положение текста в таблице показано на рис. 1.

Рис. 1. Положение текста при разных значениях writing-mode

В табл. 1 показаны значения свойств direction и block-progress, соответствующие значениям writing-mode, а также языки, где они

Табл. 1. Значения writing-mode
writing-mode direction block-progress Для каких языков
lr-tb ltr tb Романских, греческого, кириллических
rl-tb rtl tb Арабского, еврейских языков
tb-rl ltr rl Азиатских в вертикальном написании
bt-rl ltr rl Арабского, вставленного в азиатский документ
tb-lr ltr rl Монгольского
bt-lr rtl rl Арабского, вставленного в монгольский документ

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>writing-mode</title>
  <style>
   table { 
    border-collapse: collapse; 
    height: 350px; 
    width: 300px;
   }
   table td { 
    border: 1px solid #333;
    padding: 5px; 
   }
  </style>
 </head>
 <body> 
  <table cellspacing="0">
   <tr>
    <td>Текст</td>
    <td>Текст</td>
    <td>Текст</td>
    <td>Текст</td>
    <td>Текст</td>
    <td>Текст</td>
   </tr>
   <tr>
    <td>lr-tb</td>
    <td>rl-tb</td>
    <td>tb-rl</td>
    <td>bt-rl</td>
    <td>tb-lr</td>
    <td>bt-lr</td>
   </tr> 
  </table>
 </body>
</html>

Браузеры

Internet Explorer 6.0 поддерживает только значения lr-tb и tb-rl, Internet Explorer 7.0 поддерживает значения lr-tb, rl-tb, tb-rl, bt-rl.

Свойства текста | htmlbook.ru

С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег <font>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.

Свойства шрифта

Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в табл. 1.

Табл. 1. Атрибуты CSS для управления шрифтами
Свойство Значение Описание Пример
font-family имя шрифта Задает список шрифтов P {font-family: Arial, serif}
font-style normal
italic
oblique
Нормальный шрифт
Курсив
Наклонный шрифт
P {font-style: italic}
font-variant normal
small-caps
Капитель (особые прописные буквы) P {font-variant: small-caps}
font-weight normal
lighter
bold
bolder
100–900
Нормальная жирность
Светлое начертание
Полужирный
Жирный
100 — светлый шрифт,
900 — самый жирный
P {font-weight: bold}
font-size normal
pt
px
%
нормальный размер
пункты
пикселы
проценты
font-size: normal
font-size: 12pt
font-size: 12px
font-size: 120%

В примере 1 показано использование параметров при работе со шрифтами.

Пример 1. Задание свойств шрифта с помощью CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Шрифт</title>
  <style type="text/css"> 
   h2 { 
    font-family: Arial, Helvetica, Verdana, sans-serif; /* Гарнитура шрифта */ 
    font-size: 150%; /* Размер текста */ 
    font-weight: lighter; /* Светлое начертание */ 
   }
  </style>
 </head>
 <body>
   <h2>Заголовок</h2>
  <p>Обычный текст</p>
 </body> 
</html>

Ниже приведен результат данного примера (рис. 1).

Рис. 1. Вид текста после применения стилей

В табл. 2 приведены некоторые стилевые параметры для работы с текстом и результат их применения.

Табл. 2. Результат использования различных параметров шрифтов
Пример Пример Пример Пример Пример
font-family: Verdana, sans-serif; font-size: 120%; font-weight: light font-size: large; font-weight: bold font-family: Arial, sans-serif; font-size: x-small; font-weight: bold font-variant: small-caps font-style: italic; font-weight: bold

Свойства текста

Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Значения свойств приведены в табл. 3.

Табл. 3. Свойства CSS для управления видом текста
Свойство Значение Описание Пример
line-height normal
множитель
значение
%
Интерлиньяж (межстрочный интервал) line-height: normal
line-height: 1.5
line-height: 12px
line-height: 120%
text-decoration none
underline
overline
line-through
blink
Убрать все оформление
Подчеркивание
Линия над текстом
Перечеркивание
Мигание текста
text-decoration: none
text-transform none
capitalize
uppercase
lowercase
Убрать все эффекты
Начинать С Прописных
ВСЕ ПРОПИСНЫЕ
все строчные
text-transform: capitalize
text-align left
right
center
justify
Выравнивание текста text-align: justify
text-indent значение
%
Отступ первой строки text-indent: 15px;
text-indent: 10%

Ниже, в табл. 4 приведены некоторые параметры текста и результат их применения.

Табл. 4. Результат использования различных параметров текста
Пример: и это все о нем Пример: текст по центру Пример: Это не ссылка, а просто текст Пример: отступ первой строки Пример: полуторный межстрочный интервал
text-transform: capitalize text-align:center text-decoration: underline text-indent: 20px line-height: 1.5

Отправить ответ

avatar
  Подписаться  
Уведомление о