ГРУППА КУРСА
|
Главная >
Учебник CSS >
Стиль и размер текста в CSSВ прошлой теме мы рассмотрели установку шрифтов для текста. В этой теме мы рассмотрим, как изменить размер текста в CSS, сделать текст жирным и установить другие свойства текстовых элементов. Стиль, вариант, ширина и размер текстаДля установки размера текста используется свойство font-size. Размер указывается в любых доступных в CSS единицах. Также этому свойству можно установить значения с помощью специальных слов. Таких значений достаточно много, вы можете найти их в справочниках. Использовать их неудобно, обычных единиц измерения CSS вполне достаточно. Для примера создадим абзац и установим для него размер текста: Стиль: +
HTML код:
Стиль шрифта позваляет выделить текст курсивом. Для установки стиля шрифта используется свойство font-style. Оно может принимать следующие значения: font-style: normal - обычный шрифт (по умолчанию) font-style: italic - курсивный шрифт font-style: oblique - наклонный шрифт font-style: inherit - значение принимается от родительского элемента У одних шрифтов стиль italic и oblique выглядит одинаково, у других шрифтов по-разному. Установим созданному абзацу стиль шрифта. Для этого добавим селектору #fo свойство font-style:
Есть вариант отображения текста, при котором прописные буквы выглядят как заглавные, только уменьшенного размера. Для этого используется свойство font-variant. Оно принимает следующие значения: font-variant: normal - нормальный шрифт (по умолчанию) font-variant: small-caps - прописные буквы выглядят как заглавные font-variant: inherit - значение принимается от родительского элемента Добавим селектору #fo свойство font-variant:
Если увеличить ширину шрифта, то можно сделать жирный текст. В CSS Это делается с помощью свойства font-weight. Оно принимает такие значения: font-weight: normal - обычный текст font-weight: bold - жирный текст font-weight: inherit - принимает значение от родительского элемента Кроме того, ширину шрифта можно указать с помощью чисел от 100 до 900. Число 400 соответствует значению normal, а число 700 значению bold. Но числа работают не со всеми шрифтами и не во всех браузерах. Поэтому они редко используются. Добавим селектору #fo свойство font-weight:
Существует совойство font, в котором можно указать все перечисленные свойства, а также шрифт. Значения свойств перечисляются через пробел в таком порядке:
Добавим на страницу тэг <span> и установим для него свойство font: Стиль:
HTML код:
Если какое-то из свойств не указано, то используется значение по умолчанию. Но размер и шрифт нужно указывать обязательно. При указании шрифта, так же, как и для свойства font-family, можно перечислить несколько шрифтов через запятую. Добавим на страницу ещё один тег <span> и установим ему свойство font, но по-другому: Стиль:
HTML код:
Цвет текстаЦвет текста устанавливается с помощью свойства color. Значением этого свойства является цвет, указанный одним из способов, предусмотренных в CSS. Установим цвет тэгу <span>, который мы создавали ранее. Добавим селектору #s2 свойство color:
Высота строкиМежстрочный интервал - это расстояние между строками текста. Для его установки используется свойство line-height. Оно устанавлявает высоту строки. Высота строки состоит из размера шрифта и межстрочного интервала. Если высота строки равна 50 пикселей, а размер шрифта 30 пикселей, то межстрочный интервал получится 20 пикселей. Если высоту строки установить меньше размера шрифта, то строки будут пересекаться. Свойство line-height может принимать такие значения: line-height: normal - обычный интервал (по умолчанию) line-height: число, на которое будет умножен размер шрифта line-height: высота в единицах измерения, доступных в CSS line-height: проценты от размера шрифта line-height: inherit значение принимается от родительского элемента Для примера создадим большой абзац текста, состоящий из нескольких строк. Установим ему размер шрифта и высоту строки: Стиль:
HTML код:
Попробуйте разные варианты высоты строки. Посмотрите как будет выглядеть текст. Отступ первой строкиВ абзацах часто делается отступ первой строки. В русском языке он называется Красная строка. Для установки этого отступа есть свойство text-indent. Значение указывают в единицах измерения CSS. Установим отступ большому абзацу. Селектору #text добавим свойство text-indent:
Выравнивание текстаВыравнивание текста устанавливается с помощью свойства text-align. Оно принимает следующие значения: text-align: left - по левому краю (по умолчанию) text-align: right - по правому краю text-align: center - по центру text-align: justify - по ширине. Используется для текстов длинной более одной строки. Учитывайте, что выравнивается не сам элемент. Он остаётся на прежнем месте. Выравнивается текст внутри элемента. Добавим на страницу абзац и выравнем текст в нём по центру.
Декорирование текстаДекорирование - это оформление текста определённым образом. Оно устанавливается с помощью свойства text-decoration. Оно принимает такие значения: text-decoration: none - без декорирования text-decoration: underline - подчёркнутый текст text-decoration: overline - надчёркнутый текст text-decoration: line-through - зачёркнутый текст text-decoration: inherit - значение принимается от родительского элемента Для примера создадим абзац с подчёркнутым текстом:
|