Текст в CSS



Основные свойствами для форматирования текста:

  • text-align - выравнивает текст относительно документа;
  • text-decoration - оформляет текст определенным образом;
  • text-indent - устанавливает величину отступа первой строки;
  • text-transform - преобразует текст в заглавные или прописные буквы;
  • letter-spacing - устанавливает расстояние между буквами;
  • word-spacing - устанавливает интервал между словами.
  • line-height - устанавливает интервал между строками.

Свойство text-align


Данное свойство отвечает за выравнивание текста по горизонтали.

  • left - выравнивание по левому краю.
  • center - выравнивание по центру.
  • right - выравнивание по правому краю.
  • justify - выравнивание по ширине.

Пример записи кода:

<html> <head> <title></title> <style type="text/css"> h1{ text-align:center;} h2 {text-align:left;} h3 {text-align:right;} p {text-align:justify;} </style> </head> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Свойство Text-decoration


Оформляет текст определенным образом.

  • none - по умолчанию. Оформление не производится;
  • underline - текст подчеркивается снизу;
  • overline - текст подчеркивается сверху.
  • line-through - текст перечеркивается;
  • blink - мигающий текст.

Пример записи кода:

<html> <head> <title></title> <style type="text/css"> h1{ text-align:center;text-decoration:overline;} h2 {text-align:left;text-decoration:line-through} h3 {text-align:right;text-decoration:underline;} p {text-align:justify;text-decoration:blink;} </style> </head> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Свойство TEXT-INDENT


Это свойство text-indent применяется для создания абзаца строки. Значение задают в единицах измерения и в процентах.

Пример записи кода:

<html> <head> <title></title> <style type="text/css"> p {text-indent: 45px;} </style> </head> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Свойство TEXT-TRANSFORM


Это свойство text-transform применяется для видоизменения текста или, вернее, смены регистра. Используются значения:

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

Пример записи кода:

<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="../Poleznoe/style.css"> </head> <body> <p id="ca">Текст в параграфе со свойством capitalize.</p> <p id="up">Текст в параграфе со свойством uppercase.</p> <p id="lo">Текст в параграфе со свойством lowercase.</p> <p id="no">Текст в параграфе со свойством none.</p> </body> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Интервалы


Текст при написании имеет расстояние между словами, строками и буквами в словах.

  • letter-spacing - меняет расстояние между буквами;
  • word-spacing - изменяет расстояние между словами;
  • line-height - изменяет расстояние между строк.

Значения этих свойств задаются в единицах измерения и в процентах.

Пример записи кода:

<html> <head> <title></title> <style type="text/css"> p#ca{word-spacing:15px;} p#up{letter-spacing:10px;} p#lo{line-height:200%} </style> </head> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Т еперь мы можем оформить страницу, использовав полученные знания.

<html> <head> <title></title> <style type="text/css"> body{ background:#F6F6F6; color:#000000; font: 12px; Georgia, serif; } h1{ font-size:24px; color:#2D6CC4; letter-spacing:5px; text-align:center; } h2{ font-size:1.3em; color:#2C5074; text-decoration:underline; text-align:center; } p:first-letter{ color:#E11F1F; font-family:Monotype Corsiva; } p#ca{ text-indent:1.5em; word-spacing:10px; font-style:italic; } </style> </head> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР





Далее рассмотрим: Списки в CSS