Текст в CSS
Свойства текста в CSS предназначены для оформления и форматирования, не букв как у свойств шрифта, а слов, предложений и абзацев. Чтобы было яснее перейдем к делу.
Содержание:
- Свойство TEXT-DECORATION
- Свойство TEXT-ALIGN
- Свойство TEXT-INDENT
- Свойство TEXT-TRANSFORM
- Свойство VERTICAL-ALIGN
Свойство TEXT-DECORATION
Это свойство предназначено для оформления текста (теги выделения текста в HTML). Соответственно возможно применение нескольких значений:
- none – оформление текста отсутствует;
- underline – каждая строка текста подчеркивается (аналогично элементу < U > в HTML);
- overline – выполняется надчеркивание линией над текстом;
- line-through – каждая строка перечеркивается (< strike > в HTML);
- blink – мигающий текст (< blink > в HTML).
Свойство TEXT-DECORATION в основном применяется для того, чтобы убрать подчеркивание у ссылок, но твоей фантазии нет предела… Смотрим пример:
a:link, a:visited, a:active {text-decoration:none; color:blue}
В этом случае все ссылки документа не будут иметь подчеркивания и будут окрашены в синий цвет, но можно сделать так, чтобы подчеркивание появлялось при наведении курсора (как на этой странице, да и вообще на сайте). Замечу, что без CSS, средствами HTML убрать подчеркивание не получиться. Смотрим правило:
a:hover {text-decoration:underline; color:blue}
Свойство TEXT-ALIGN
Это свойство задает выравнивание текста, оно практически не отличается от атрибута align элементов HTML, но сейчас его не нужно задавать каждый раз, например для абзаца, достаточно прописать правило один раз. Допустимые значения:
- left – выравнивание по левому краю;
- center – выравнивание по центру;
- right – выравнивание по правому краю;
- justify – выравнивание по ширине.
Пример написания правила для абзацев, с выравниванием текста по ширине, при необходимости можно сделать исключительные стили абзацев применив селектор по классу:
p {text-align:justify}
Свойство TEXT-INDENT
Это свойство задает отступ первой строки, применяется в основном, для абзацев и заголовков. Значением свойства являются единицы длины или проценты от ширины родительского блока. Пишем правило с отступом первой строки абзаца на 25 px:
p {text-indent:25px}
Свойство TEXT-TRANSFORM
Это свойство задает изменение регистра текста, применяются следущие значения:
- capitalize – возможности этого значения заключаются в том, чтобы изменять регистр первых букв каждого слова на заглавные, применяется для написания заголовков написанных в английском стиле;
- uppercase – меняет регистр всех букв на прописные;
- lowercase – меняет регистр всех букв на строчные;
- none – не меняет регистр, используется по умолчанию.
Запишем правило для заголовка в английском стиле:
h1 {text-transform:capitalize}
В языке HTML нет элементов подобных свойству TEXT-TRANSFORM.
Свойство VERTICAL-ALIGN
Это свойство задает вертикальное выравнивание текста относительно блока или страницы вцелом, значения задаются ключевыми словами:
- baseline – выравнивание базовой линии блока относительно базовой линии его родительского блока;
- middle – выравнивание средней по вертикали точки на уровень родительского блока;
- sub – аналог элемента < sub > в языке HTML;
- super – аналог элемента < sup > в языке HTML;
- text-top – выравнивание верхней границы блока относительно верхней кромки шрифта родительского элемента;
- text-bottom – выравнивание нижней границы блока относительно нижней кромки шрифта родительского элемента.