Как через свойства задать текст css

CSS — Урок 7. Свойства — текст

Свойства текста позволяют задавать параметры слов и предложений, а также их взаимное расположение.

  • none — у текста нет оформления.
  • underline — текст подчеркивается.
  • overline — текст надчеркивается линией, расположенной над текстом.
  • line-through — текст отображается зачеркнутым.
  • blink — текст становится мигающим (не работает в IE).
  • left — выравнивание по левому краю.
  • center — выравнивание по центру.
  • right — выравнивание по правому краю.
  • justify — выравнивание по ширине.

Это свойство отвечает за отступы в абзацах. Отступы задаются в единицах измерения и %, могут быть как положительными (красная строка), так и отрицательными (висячая строка). Пусть у нас есть html-страница с тремя абзацами:

Как работать с текстом в CSS?

В этой статье речь пойдет о том, как работать с текстов в CSS (каскадных таблицах стилей) при создании сайта. Давайте рассмотрим свойства, которые отвечают за внешний вид любого текста, а если точнее о выравнивании, подчеркивании, отступах и т.д.).

Сразу стоит отметить, что наиболее использованное свойство текста — его выравнивание. И в CSS есть свойство, отвечающее только за это. Создадим в каскадной таблице стилей совершенно новый стиль с названием text. Теперь применяют свойство text-align, которое отвечает за выравнивание и может принимать четыре значения — слева (по умолчанию), справа, по обоим краям и по центру. Например, вам необходимо выравнять текст по центру, тогда код будет выглядеть так:

Для того, чтоб оформить (подчеркнуть) текст, используется свойство text-decoretion. Оно также может принимать четыре значения — none, overline, underline, line-through. К примеру, вам необходимо подчеркнуть текст:

h1 <
text-align:center;
text-decoration:underline;
>

Для создания абзацев используется свойство text-indent. Лучше задавать значение в пикселях, так как это более универсальный способ. Например:

h1 <
text-align:center;>
p <
text-indent:50px;
>

Расстояние между буквами задается свойством letter-spacing. Его также рекомендуется указывать в пикселях, но при необходимости можно и в процентах. Пример:

А изменить расстояние между словами вы сможете используя свойство word-spacing. Например:

4: Текст и списки

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

При обсуждении свойств блочных элементов разметки речь шла о параметрах, относящихся к блоку как целому. Мы не рассматривали внутренние характеристики текста .

Рассказывая о шрифтах, мы акцентировали внимание на начертаниях символов как таковых, а не на их соотношении.

Тем не менее в стороне остались такие важные характеристики текстового фрагмента, как:

  • межбуквенные расстояния ;
  • высота строк ;
  • выравнивание ;
  • отступ в первой строке параграфа;
  • преобразования начертания .

Все эти атрибуты сгруппированы в свойства текстовых фрагментов (Text Properties).

Межбуквенные расстояния

Расстояние между буквами автоматически регулируется размером шрифта — кеглем. Чем больше размер шрифта, тем больше расстояние между буквами: (открыть)

Присмотревшись внимательно, нетрудно убедиться, что расстояние между буквами в слове "параграф" первого примера и буквами слова "параграфа" второго примера разное. Во втором случае оно больше:

Моноширинный шрифт выбран не случайно. На пропорциональном шрифте межбуквенное расстояние зависит от начертания букв и показать его как расстояние между буквами достаточно сложно. У моноширинного шрифта размер символа фиксирован, поэтому и расстояние между буквами прослеживается четко.

Однако не всегда удобно управлять межбуквенным расстоянием через кегль ( font-size ). Бывают случаи, когда нужно либо уплотнить строку, либо увеличить расстояния между буквами. Это можно сделать с помощью атрибута letter-spacing : (открыть)

Правда, в версиях Netscape Navigator 4.x этот параметр не поддерживается.

Выравнивание

По умолчанию все слова в параграфе прижаты влево. Левый край параграфа таким образом оказывается выравненным. Точно так же может быть выравнен правый край параграфа или блока текста , и даже оба края вместе.

В обычной HTML-разметке такой эффект достигается за счет применения атрибута ALIGN , как это сделано на страницах данного пособия:

Аналогичный результат в CSS достигается за счет атрибута text-align : (открыть)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *