Свойства CSS для работы с текстом
Продолжаем изучение CSS для начинающих. В этом уроке поговорим о свойствах CSS, которые отвечают за внешний вид текста страницы.
Семьдесят процентов успеха в web-дизайне при создании сайта - это умение управлять текстом и шрифтами. Пользователей интересует текстовое наполнение сайта и то, с какой легкостью читается контент, влияет на длительность пребывания пользователя на сайте. И вернется ли он еще?
Для этого необходимо уметь правильно выбирать шрифты, грамотно их совмещать, а так же правильно управлять самим текстом.
text-indent - абзац с "красной строки", назначить любому абзацу отступ
letter-spacing - регулируем расстояние между буквами в слове (можно увеличить или уменьшить)
word-spacing - регулируем расстояние между словами в предложении
text-decoration - подчеркивание, зачеркивание, надчеркивание текста
text-align - выравнивание текста
line-height - расстояние между строками в тексте (но не меньше величины текста)
text-transform - различные изменения в тексте
Самое используемое свойство css, связанное с текстом, это выравнивание текста. Например, текст страницы, которую вы сейчас читаете, выровнен по левому краю.
В html для выравнивания текста применяли атрибут align.
В CSS тоже есть свойство, которое отвечает за выравнивание текста - text-align. Это свойство может принимать четыре значения:
left - выравнивание текста по левому краю (по умолчанию)
right - выравнивание текста по правому краю
center - выравнивание текста по центру
justify - выравнивание текста по левому и правому краю (растягивание текста)
Давайте в нашем CSS-файле пропишем новый стиль для работы с текстом. Пусть это будет стиль text.
Пример:
.text {
text-align:right;
}
Если в html-коде страницы прописать какому-нибудь абзацу этот стиль, то текст этого абзаца будет выровнен по правому краю.
Пример:
<p class="text">Текст абзаца</p>
Следующее свойство CSS - отступ, так называемая "красная строка".
text-indent - свойство, отвечающее за написание абзаца с "красной строки". В значении этого свойства прописываем величину отступа в пикселях или других единицах измерения.
Пример:
.text {
text-align:left;
text-indent:30px;
}
Далее рассмотрим свойство css
text-decoration:line-through; - зачеркивание текста
Это свойство применяется, например, при написании цен. При изменении цены старое значение зачеркиваем и прописываем новое.
Но как же нам прописать это свойство одному слову из текста, а не всему абзацу. Для этого будем использовать тег <span>. Сам по себе этот тег никаких изменений в тексте не производит, но если ему прописать какой-либо стиль... Вот для этого и необходим этот тег - для придания какого-либо стиля отдельному объекту.
Давайте создадим новый стиль (например - cherta) и пропишем ему это свойство:
Пример:
.cherta {
text-decoration:line-through;
}
Теперь в абзаце зачеркнем любое слово:
<p>Цена: <span class="cherta">150руб</span>120руб</p>
Изучим следующее свойство css - text-transform. Это свойство позволяет проделывать абзацам некоторые трансформации.
В каждом слове абзаца первую букву можно сделать заглавной, можно сделать весь текст абзаца заглавными буквами или прописными. И все это без ручного прописывания в html-коде.
Значения свойства text-transform:
capitalize - первая буква каждого слова абзаца будет заглавной
uppercase - весь текст будет написан заглавными буквами
lowercase - весь текст будет написан прописными буквами
Создадим новый стиль со свойством text-transform
Пример:
.tr {
text-transform: capitalize;
}
Пропишем абзацу этот стиль:
<p class="tr">Первая Буква Каждого Слова Абзаца - Заглавная</p>
Можно изменять расстояние между словами в тексте. Для этого применяем свойство css:
word-spacing - величина расстояния между словами в тексте
Пример:
.tr {
text-transform: capitalize;
word-spacing: 10px;
}
Можно изменять расстояние между буквами в словах применяя свойство:
letter-spacing - величина расстояния между буквами в словах
Пример:
.tr {
text-transform: capitalize;
word-spacing: 10px;
letter-spacing: 4px;
}
И последнее свойство css, которое мы изучим, свойство применяемое для изменения расстояния между строк в тексте. Это свойство:
line-height - величина расстояния между строками в тексте
Расстояние между строками - это не расстояние от нижнего края верхней строки до верхнего края нижней строки. Здесь учитывается и высота букв, так что это расстояние между верхними (или нижними) краями строк. Имейте это ввиду.
Пример:
.tr {
text-transform: capitalize;
word-spacing: 10px;
letter-spacing: 4px;
line-height: 25px;
}
|