Главное меню

Свойства 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;

}