- line-height - межстрочный интервал определяет высоту строки, точнее, расстояние между нижними базовыми линиями строк.
- word-spacing - интервал между словами определяет расстояние между словами.
- letter-spacing - межбуквенный интервал определяет расстояние между буквами.
- text-transform - изменение регистра позволяет отображать текст либо маленькими буквами (lowercase), либо большими буквами (uppercase), либо так, чтобы первые буквы каждого слова были большими (capitalize).
Теперь каждое свойство рассмотрим в более подробном изложении.
line-height:normal; - Межстрочный интервал имеет нормальное значение по умолчанию.
line-height:0.5; - Межстрочный интервал, задается значение с помощью коэфициента от нормального. В данном случае имеет значение в два раза меньше нормального.
line-height:10px; - Межстрочный интервал, задается значение в пикселях. В данном случае имеет значение равное 10 пикслелям. Как мы видим данное значение приводит к налезанию строк друг на друга. Иногда такой визуальный эффект требуется для каких-то особых целей (например, для имитации шрифтов старых газет и т.п.).
word-spacing:normal; - Интервал между словами имеет нормальное значение по умолчанию.
word-spacing:10px; - Интервал между словами, задается значение в пикселях. В данном случае имеет значение равное 10 пикслелям.
word-spacing:-10px; - Интервал между словами, задается значение в пикселях. В данном случае имеет значение равное -10 пикслелей для достижения эффекта слипания слов. Для уменьшения интервала между словами следует использовать отрицательные значения.
letter-spacing:normal; - Интервал между буквами имеет нормальное значение по умолчанию.
letter-spacing:10px; - Интервал между буквами, задается значение в пикселях. В данном случае имеет значение равное 10 пикслелям.
letter-spacing:-3px; - Интервал между буквами, задается значение в пикселях. В данном случае имеет значение равное -3 пикслелей для достижения эффекта слипания букв. Для уменьшения интервала между буквами следует использовать отрицательные значения.
text-transform:lowercase; - Отображает весь текст маленькими буквами, т.е. если в тексте есть БОЛЬШИЕ БУКВЫ, то они все переводятся в нижний регистр и отображаются, как маленькие буквы.
text-transform:uppercase; - Отображает весь текст большими буквами, т.е. если в тексте есть маленькие буквы, то они все переводятся в верхний регистр и отображаются, как большие буквы.
text-transform:capitalize; - Отображает весь текст так, чтобы первые буквы каждого слова были большими. Обычно этот эффект используется для каких-то броских заголовков. Например: осталось только 5 секунд действия этой уникальной скидки в 1000%!
На базе данного теоретического материала попробуем создать соответствующие классы:
.line_height_0_5 {
line-height:0.5;
text-align:left;
background-color:#F0F0F0;
}
.line_height_2_0 {
line-height:2;
text-align:left;
background-color:#F0FFFF;
}
.word_spacing_10px {
word-spacing:10px;
text-align:left;
background-color:#F0F0F0;
}
.word_spacing_m10px {
word-spacing:-10px;
text-align:left;
background-color:#F0FFFF;
}
.letter_spacing_10px {
letter-spacing:10px;
text-align:left;
background-color:#F0F0F0;
}
.letter_spacing_m3px {
letter-spacing:-3px;
text-align:left;
background-color:#F0FFFF;
}
.text_transform_lowercase {
text-transform:lowercase;
text-align:left;
background-color:#F0F0F0;
}
.text_transform_uppercase {
text-transform:uppercase;
text-align:left;
background-color:#F0FFFF;
}
.text_transform_capitalize {
text-transform:capitalize;
text-align:left;
background-color:#FFFFF0;
}
Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_012_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_012_001.zip ← скачайте пример, чтобы установить на свой сайт...
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
