HTML+CSS Стили для текста

Уроки HTML+CSS: Стили для текста

Сегодня мы с вави рассмотрим стили, которые применяются для текста. С помощью нех вы сможете изменить цвет, шрифт, размер шрифта и так далее.

text-align – горизонтальное выравнивание

left Выравнивание по левому краю элемента. Значение по умолчанию для языков, в которых чтение происходит слева-направо.
right Выравнивание по правому краю элемента.
center Выравнивание по центру элемента, управляет выравниванием содержимого, а не самих элементов. Центрирует каждую строчку текста элемента.
justify Выравнивание по ширине элемента. В выровненном по ширине тексте оба конца строки прижимаются к левому и правому краям родительского элемента. Пробелы между словами и буквами распределяются таким образом, чтобы длина всех строк была равна. Разные браузеры могут увеличить как отступы между словами, так и интервалы между буквами.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
p {text-align: left;}

Пример этого текста расположен в ЛЕВОЙ части. Это сделано с помощью специального CSS свойства text-align со значение left

p {text-align: right;}

Пример этого текста расположен в ПРАВОЙ части. Это сделано с помощью специального CSS свойства text-align со значение right

p {text-align: center;}

Пример этого текста расположен ПО ЦЕНТРУ. Это сделано с помощью специального CSS свойства text-align со значение center

p {text-align: justify;}

Пример этого текста расположен ПО ШИРИНЕ. Это сделано с помощью специального CSS свойства text-align со значение justify

line-height – высота строки

Значения Описание
длина Значение задаётся в единицах длины, создавая фиксированное значение высоты строки. Если задать значение меньше единицы, слова в смежных строках будут находить друг на друга.
% Вычисляется относительно текущего значения свойства font-size.
число Целое или дробное числовое значение, на которое будет умножен текущий размер шрифта.
normal Значение браузера по умолчанию.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
p {line-height: 50px;}

В данном тексте мы увеличили высоту строки. Это было сделано с помощью специального свойства line-height

p {line-height: 10px;}

А здесь чтобы вам была заметна разница, мы уменьшили высоту строки. Это было сделано с помощью специального свойства line-height

vertical-align – вертикальное выравнивание

baseline Выравнивает базовую линию элемента по базовой линии его родителя, совмещая среднюю линию элемента со средней линией родительского элемента.
sub Делает элемент подстрочным (аналогично с тегом <sub>). Величина понижения элемента может меняться в зависимости от браузера пользователя.
super Делает элемент надстрочным (аналогично с тегом <sup>). При этом значения sup и super не меняют размер шрифта, по умолчанию текст надстрочного и подстрочного элемента имеет такой же размер, как и текст родительского элемента.
top Верхний край элемента совмещается с верхним краем самого высокого элемента в линии.
text-top Верхний край элемента совмещается с верхним краем шрифта родительского элемента.
middle Средняя линия элемента (обычно изображения) совмещается с линией, проходящей через середину родительского элемента.
bottom Нижний край элемента совмещается с нижним краем самого низкого элемента в линии.
text-bottom Нижний край элемента совмещается с нижним краем шрифта родительского элемента.
длина Устанавливает значение в единицах длины, перемещая элемент на заданное расстояние.
% Не позволяет устанавливать middle, вычисляется как часть line-heightэлемента, а не его родителя, т.е. если установить значение vertical-align, равное 50% для элемента с line-height равным 20рх, то базовая линия элемента поднимется на 10px.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

word-spacing – расстояние между словами

normal Значение по умолчанию, равное 0.25em.
длина Значение устанавливается в единицах длины — pxem. Принимает как положительные, так и отрицательные значения, увеличивая или уменьшая расстояние между словами.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
p {word-spacing: 40px;}

Здесь мы увеличили ширину отступов между словами. Это было сделано с помощью специального свойства word-spacing

letter-spacing – расстояние между буквами

normal Значение по умолчанию, не добавляет дополнительное пространство между буквами и символами.
длина Значение задаётся в единицах длины, положительные значения увеличивают промежутки между буквами и символами, отрицательные — уменьшают.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
p {letter-spacing: 10px;}

Здесь мы увеличили ширину отступов между буквами. Это было сделано с помощью специального свойства letter-spacing

text-transform – трансформирование текста

none Значение по умолчанию, означает отсутствие трансформации. Также отменяет трансформацию текста для элемента в группе элементов с установленным свойством.
capitalize Изменяет написание первой буквы каждого слова в элементе, делая её прописной.
uppercase Выводит все слова в элементе прописными буквами.
lowercase Выводит все слова в элементе строчными буквами.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

p {text-transform: uppercase;}

А давайте сделаем все слова в этом предложение в верхнем регистре?!

p {text-transform: lowercase;}

это выглядит не красиво, лучше сделаем все в нижнем регистре

p {text-transform: capitalize;}

А если сделать так ?

text-decoration – декорирование текста

none Выводит текст без оформления, убирает нижнее подчёркивание у ссылок.
underline Подчёркивает текст.
overline Добавляет тексту черту сверху.
line-through Перечёркивает текст.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
p {text-decoration: underline;}

Пример текста

p {text-decoration: overline;}

Пример текста

p {text-decoration: line-through;}

Пример текста

color – цвет текста

Цвет для текста может задаваться двумя способами. В качестве цвета можно указать его название (кув, green? blue) или числовой код (#000, #fff, #028000). Чаще всего используют числовой код цвета. Он прописывается  с символом решетки и состоит от 3 до 6 цифр.

p {color: red;}

Текст красного цвета

p {color: #ff0000;}

Тот же красный, только указан с помощью цветового кода

 

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

avatar
  Подписаться  
Уведомление о