CSS текст, примеры форматирывания текста

CSS текст и примеры его форматирования

Атрибут со значением	Полученный результат
`font-family:Tahoma, sans-serif`	CSS текст – форматирование
`font-size:15px`	CSS текст – форматирование
`font-style:italic`	CSS текст – форматирование
`font-variant:small-caps`	CSS текст – форматирование
`font-weight:bold`	CSS текст – форматирование
`letter-spacing:2px`	CSS текст – форматирование
`word-spacing:7px`	CSS текст – форматирование
`color:#cc0033`	CSS текст – форматирование
`text-indent:40px`	CSS текст – форматирование
`text-decoration:underline`	CSS текст – форматирование
`text-decoration:overline`	CSS текст – форматирование
`text-decoration:line-through`	CSS текст – форматирование
`text-transform:capitalize`	CSS текст – форматирование
`text-transform:lowercase`	CSS текст – форматирование
`text-transform:uppercase`	CSS текст – форматирование
`vertical-align:super`	CSS текст – форматирование text
`vertical-align:sub`	CSS текст – форматирование text

Атрибуты и значения

font-family:Tahoma, sans-serif – определяет вид и семейство шрифта.
font-size:13px – устанавливает размер шрифта в пикселях или процентах.
font-style:italic – преобразует текст в наклонный (еще его называю курсивным).
font-variant:small-caps – капитель – большие буквы маленького размера.
font-weight:bold – определяет жирный текст.
letter-spacing:2px – дополнительное расстояние между символами в пикселях.
word-spacing:7px – создает дополнительное расстояние между словами в пикселях.
color:#cc0033 – определяет цвет текста.
text-indent:40px – устанавливает отступ строки в пикселях или процентах.
text-decoration:underline – выводит подчеркнутый текст.
text-decoration:overline – выводит надчеркнутый текст.
text-decoration:line-through – выводит перечеркнутый текст.
text-transform:capitalize – отображает каждое слово с заглавной буквы.
text-transform:lowercase – преобразует все буквы в маленькие.
text-transform:uppercase – преобразует все буквы в заглавные.
vertical-align:super – отображает текст в верхнем индексе.
vertical-align:sub – отображает текст в нижнем индексе.

Пример по форматированию текста:

<title>Пример форматирования текста</title>

          <style type="text/css">

          body {

          color:#000066

          }

          .primer {

          text-decoration:underline;

          text-align:right;

          letter-spacing:5px

          }

          #example {

          text-indent:50px;

          word-spacing:20px;

          color:Green

          }

          </style>
 </head>

          <body>

          <div class="primer">Подчеркнутый текст, с расстоянием между символами в пять пикселей, выровнен по правому краю, темно-синий</div>

          <div>Текст темно-синего цвета</div>

          <p id="example">Отступ строки слева, дополнительное расстояние между словами в 20 пикселей, текст зеленый</p>

          </body>

Результат: форматируем текст при помощи CSS

Селектору body задан color:#000066
– это значит, что весь текст страницы будет темно-синий, за исключением параграфа с идентификатором id="example", где цвет определен как зеленый. Атрибут со значением text-decoration:underline выводит подчеркнутый текст. letter-spacing:5px устанавливает пространство между символами в 5 пикселей. text-indent:50px определяет отступ строки слева величиной в 50 пикселей. Атрибут word-spacing:20px определяет дополнительное расстояние между словами.

Автор проекта - Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS шрифт Наклонный, жирный, подчеркнутый CSS текст О CSS тексте