Создание CSS стилей текста 2

CSS стили  текстаПродолжим изучать изменения текста с помощью свойств Каскадных таблиц стилей, начатое в предыдущей статье о создании стилей текста
Свойство Text-Decoration

Свойство Text-Decoration даёт возможность оформления текста  виде его подчеркивания, перечеркивания, добавления линии над текстом, или мигания. Существует несколько основных значений этого свойства, рассмотрим их:

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

Для примера рассмотрим конкретный пример кода:

<html>
<head>

<title>Text-decoration</title>
<style type="text/css">
I A {
text-decoration: none;
}
P  {
text-decoration: overline;
}

H3 {
text-decoration: line-through;
}
Div {
text-decoration: blink;
}
H2 {
text-decoration:underline;
}
</style>
</head>
<body>

<a href="#">Простая ссылка подчёркнута</a><br><br>
<i><a href="#">Внутри тега I ссылка без подчёркивания</a></i>
<p>Текст внутри параграфа — подчёркивание сверху</p>
<div>Мигающий текст внутри тега DIV</div>
<h3>Перечёркнутый текст заголовка H3</h3>
<h2>Подчёркнутый текст заголовка H2</h2>

</body>
<html>

свойство CSS Text-decoration

На скриншоте примера всё наглядно видно. Перейдём к следующим CSS свойствам текста.

Свойство TEXT-TRANSFORM

Свойство Text-transform определяет регистр написания текста
Рассмотрим различные значения данного свойства:

  • capitalize — Первая буква(символ) каждого слова в предложении становится заглавной. Другие буквы(символы) свой вид не меняют.
  • lowercase — Все буквы(символы) текста меняются на строчные, т. е. пишутся в нижнем регистре.
  • uppercase — Все буквы(символы текста меняются на прописные, т. е. пишутся в верхнем регистре.
  • inherit — Наследуется значение свойства текста родительского элемента.
  • none — Не вносит изменений в регистр написание символов.

Вновь прибегним к наглядности примера:

<html>
<head>
<title>Text-transform</title>
<style type="text/css">

P  {
text-transform: capitalize;
}

B {
text-transform: lowercase;
}
Div {
text-transform: uppercase;
}
I {
text-transform: inherit;
}

</style>
</head>

<body>

<p>Первые буквы каждого слова стали заглавными.</p>
<div>Все буквы текста внутри тега DIV пишутся строчными</div>
<br><b>Все буквы текста внутри тега B поменялись на прописные</b>
<p><i>Текст внутри тега I унаследовал свойства параграфа</i></p>
</body>
</html>

свойство CSS Text-transform

Рисунок наглядно показывает действие свойства Text-transform.

Свойство CSS Word-spacing

Как известно из уроков по HTML, несколько пробелов между словами всегда заменяются одним. Однако, веб-мастерам иногда необходимо задать нужное конкретно им расстояние между словами. Тут на помощь приходит свойство CSS Word-spacing.
Для задания значений данного свойства используют любые, принятые на вооружение CSS, единицы длины, кроме процентов. И снова прибегаем к примеру:

<html>
<head>
<title>Word-spacing</title>
<style type="text/css">

P  {
word-spacing: 15px;
}
Div {
word-spacing: -2px;
}

</style>
</head>
<body>
Расстояние между словам по-умолчанию<br>

<p>Заданное расстояние в 15px</p>
<div>Расстояние между словами уменьшенно до -2px</div>
</body>
</html>

свойство CSS Word-spacing

На примере наглядно видно действие свойства CSS стилей Word-spacing. При использовании значений со знаком минус — желательно проверить их действие в разных браузерах. Последний рисунок немного увеличен (для наглядности это будет применяться и впредь),  поэтому размеры отличаются от оригинальных.

Свойство CSS Letter-spacing

Очень часто, для придания какого либо эффекта, возникает необходимость сжать текст, не уменьшая размера шрифта и расстояния между словами. В таких случаях, обычно, уменьшают межбуквенное расстояние. С этой целью применяют свойство CSS Letter-spacing.

Для задания свойства Letter-spacing используются все единицы длины из архива CSS, и отрицательные значения тоже. Наиболее удобными, в применении к данному свойству, являются относительные значения, которые привязаны к размеру шрифта. К ним можно отнести «em» и «ex».
Более наглядно — на примере:

<html>
<head>
<title>Letter-spacing</title>
<style type="text/css">

P  {
Letter-spacing: 0.4em;
}
Div {
Letter-spacing: 0.1em;
}
H3 {
Letter-spacing: -2px;
}

</style>
</head>

<body>
Самый обычный текст
<h3>Заголовок H3</h3>
<p>Текст с расстоянием 0.4em</p>
<div>Текст с расстоянием 0.1em</div>
</body>
</html>

свойство CSS Letter-spacing

Как видно на рисунке — заголовок H3 плохо читаем. Данный факт говорит о том, что применение отрицательных значений необходимо тестировать на читабильность текста. На этом примере закончим рассмотрение основных свойств стилей CSS для текста.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

2 комментария

  1. Кори пишет:

    Спосибки большие за помощь :)

  2. ulot3049 пишет:

    Информация по теме:

    кому интересно про стили для заголовков.

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha