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;}

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

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

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

p {color: red;}

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

p {color: #ff0000;}

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

Информация была взята с сайта – https://html5book.ru

Хочешь научиться программировать?!

Заходи в нашу группу Вконтакте, там много полезной и интересной информации

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

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