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

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

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

Например

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

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

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

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

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

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

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

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

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

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