Стилевые свойства текста

Познакомимся в этой статье со свойствами, определяющими внешний вид текста на веб-странице. Начнем со свойства text-align, которое управляет горизонтальным выравниванием текста (а также и картинками) в элементе HTML-документа. Это свойство может принимать следующие значения

• left – выравнивает текст по левому краю элемента;
• center- выравнивает текст по центру элемента;
• right – выравнивает текст по правому краю элемента;
• justify – выравнивает содержимое абзаца по обоим краям элемента.

Например

<style type="text/css">
p { text-align:justify; }
</style>
...
<p> Текст абзаца </p>
<div style=" text-align:center; ">Текст блока</div>

Открою большую тайну :) свойством text-align браузер Internet Explorer управляет выравниванием не только текста и рисунков, но и выравниванием блоков DIV и таблиц <table>, находящимися в данном элементе. Что не соответствует правилам установленным консорциумом W3C. В отличие от браузера Internet Explorer, браузеры Opera и Mozilla Firefox не болеют подобным недугом, что нужно учитывать при создании сайтов, которые должны одинаково отображаться во всех браузерах.
Теперь перейдем к рассмотрению очень интересного и нужного свойства text-decoration, которое управляет специальным оформлением текста и может принимать следующие значения

• none - к тексту не применяется ни каких специальных видов оформления;
• underline - все строки текста подчеркиваются;
• overline - над каждой строкой текста располагается черта;
• line-through - зачеркивает все строки текста;
• blink - текст мерцает (становится то видимым, то невидимым) , данное значение поддерживается не всеми браузерами.

Данное свойство text-decoration очень интересно использовать для ссылок - делать текст ссылки подчеркнутым или убирать подчеркивание в зависимости от текущего состояния ссылки. Например

...
a:link , a:visited { text-decoration:underline; }
a:hover { text-decoration:none; }
...
<a href="https://web2-site.ru">web2-site.ru</a>

Стилевое свойство text-indent определяет абзацный отступ. Он может быть задан в любых единицах, в том числе в процентах от ширины элемента. Например

p { text-indent: 2 em;  }

Но нужно иметь в виду, что действия свойства text-indent распространяются на первую строку элементов p и div. После тега <br> текст не будет отображен с абзацным отступом.
Свойство letter-spacing определяет расстояние между символами в тексте. Может принимать значения: normal (задает стандартное расстояние для текущего шрифта) или значение в виде абсолютной величины, которое будет добавлено к стандартному расстоянию. Например

p { letter-spacing: 2 em; }

Свойство word-spacing определяет расстояние между словами. Может принимать либо значение normal (отобразит текст со стандартным расстоянием между словами), либо может быть задано абсолютной величиной, которое добавиться к стандартному расстоянию. Например

div { word-spacing:10 px; }

Свойство white-space определяет, будет ли текст автоматически переноситься на новые строки, если он не помещается по ширине элемента. Свойство white-space может принимать следующие значения

• normal - является значением по умолчанию, задает автоматический перенос длинных строк, также перевод на новую строку можно осуществить тегом <br>;
• nowrap - запрещает автоматический перенос строк, и перевод на новую строку можно осуществить тегом <br>;
• pre - отобразит текст, так, как он набран в редакторе(все пробелы и переводы строк учитываются), но также учитывается и тег <br> (поддерживается не всеми браузерами).

Свойство text-transform управляет заглавными буквами в тексте элемента HTML -документа. Может принимать следующие значения

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