Веб-компас сайтостроителей
/ Все статьи / CSS / Основы CSS / Стилевые свойства текста

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

Познакомимся в этой статье со свойствами, определяющими внешний вид текста на веб-странице. Начнем со свойства 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="http://www.linedmk.com">www.linedmk.com</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 - отобразит все символы текста в нижнем регистре.
Комментарии к публикации
Комментариев к публикации нет...
Добавить комментарий
Новости сайта
Последние публикации в каталоге статей