Как сделать сайт → Уроки CSS → Урок 7. Свойства - текст

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

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

Text-decoration

Это свойство отвечает за оформление текста. Может принимать следующие значения:
  • none - у текста нет оформления.

  • underline - текст подчеркивается.

  • overline - текст надчеркивается линией, расположенной над текстом.

  • line-through - текст отображается зачеркнутым.

  • blink - текст становится мигающим (не работает в IE).

Достаточно распространенный прием убрать подчеркивание у ссылок, а при наведении курсора подчеркивание будет снова появляться. Для этого в таблице стилей нужно написать:
a{ text-decoration:none; } a:hover{ text-decoration:underline; }
Результат:
ссылка


Text-align

Это свойство отвечает за горизонтальное выравнивание текста. Может принимать следующие значения:
  • left - выравнивание по левому краю.

  • center - выравнивание по центру.

  • right - выравнивание по правому краю.

  • justify - выравнивание по ширине.

Пример кода:
a{ text-decoration:none; text-align:center; } a:hover{ text-decoration:underline; }


Text-indent

Это свойство отвечает за отступы в абзацах. Отступы задаются в единицах измерения и %, могут быть как положительными (красная строка), так и отрицательными (висячая строка). Пусть у нас есть html-страница с тремя абзацами:
<html> <head> <title>Заголовок документа</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>Текст в параграфе, где первая строка будет с отступом.</p> <p>Текст в параграфе, где первая строка будет с отступом.</p> <p>Текст в параграфе, где первая строка будет с отступом.</p> </body> </html>
Добавим для параграфов свойство text-indent, чтобы задать красную строку:
p{ text-indent:1.2em; }


Здесь лучше использовать единицу em, чтобы отступ был пропорционален размеру шрифта. Наша страница в браузере выглядит так:


Text-transform

Это свойство отвечает за видоизменение текста, точнее за смену регистра. Используются следующие значения:
  • capitalize - меняет первую букву каждого слова на заглавную.

  • uppercase - меняет все буквы на заглавные.

  • lowercase - меняет все буквы на строчные.

  • none - изменений не происходит.

Давайте в предыдущем примере присвоим каждому абзацу идентификатор:
<html> <head> <title>Заголовок документа</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p id="sc">Текст в параграфе со свойством capitalize.</p> <p id="su">Текст в параграфе со свойством uppercase.</p> <p id="sl">Текст в параграфе со свойством lowercase.</p> </body> </html>
И изменим таблицу стилей, задав для каждого абзаца свойство text-transform:
p#sc{ text-transform:capitalize; } p#su{ text-transform:uppercase; } p#sl{ text-transform:lowercase; }


Наша страница в браузере выглядит так:


Интервалы

В CSS есть несколько свойств, регулирующих расстояния между словами, буквами в словах и строками.
  • word-spacing - задает интервал между словами.

  • letter-spacing - задает интервал между буквами.

  • line-height - задает интервал между строками.

Значения этих свойств задаются в единицах измерения и %. Вернемся к примеру с параграфами и изменим таблицу стилей:
p#su{ word-spacing:10px; } p#sl{ letter-spacing:5px; }


Наша страница в браузере выглядит так:


Обратите внимание на интервал между строками абзаца. Давайте его увеличим, для этого добавим в нашу таблицу стилей свойство line-height:
p{ line-height:200% } p#su{ word-spacing:10px; } p#sl{ letter-spacing:5px; }


Теперь наша страница в браузере выглядит так:


Мы рассмотрели свойства текста, теперь вы можете оформить свой текст так, как вам захочется. Для закрепления того, что мы уже знаем, давайте оформим следующую страницу:
<html> <head> <title>Заголовок документа</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Заголовок первого уровня</h1> <p>Просто какой-то текст в параграфе.</p> <p id="su">Текст в параграфе с идентификатором su.</p> <p>Просто какой-то текст в параграфе.</p> <h2>Заголовок второго уровня</h2> <p>Просто какой-то текст в параграфе.</p> <p id="su">Текст в параграфе с идентификатором su.</p> <p>Просто какой-то текст в параграфе.</p> </body> </html>
Зададим для этой страницы следующее оформление:
body{ background:#0033CC; color:#FFFFFF; font:12px Verdana, sans-serif; } h1{ font-size:1.6em; color:#FFCC00; letter-spacing:5px; text-align:center; } h2{ font-size:1.3em; color:#FFCC00; text-decoration:underline; text-align:center; } p:first-letter{ color:#FFCC00; } p#su{ text-indent:1.5em; word-spacing:10px; font-style:italic; }


Наша страница в браузере выглядит так:



Разберитесь с таблицей стилей самостоятельно. Умение "читать" чужой код пригодится вам не раз. Наша таблица стилей пока достаточно проста, но начинать и нужно с малого. Если что-то непонятно вернитесь к соответствующему уроку.

В следующем уроке мы начнем изучать большую тему под названием "Блоки в CSS".



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