Bazaprogram.ru

Новости из мира ПК
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Параметры текста css

Свойства текста

С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег , задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.

Свойства шрифта

Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в табл. 1.

Табл. 1. Атрибуты CSS для управления шрифтами

СвойствоЗначениеОписаниеПример
font-familyимя шрифтаЗадает список шрифтовP
font-stylenormal
italic
oblique
Нормальный шрифт
Курсив
Наклонный шрифт
P
font-variantnormal
small-caps
Капитель (особые прописные буквы)P
font-weightnormal
lighter
bold
bolder
100–900
Нормальная жирность
Светлое начертание
Полужирный
Жирный
100 — светлый шрифт,
900 — самый жирный
P
font-sizenormal
pt
px
%
нормальный размер
пункты
пикселы
проценты
font-size: normal
font-size: 12pt
font-size: 12px
font-size: 120%

В примере 1 показано использование параметров при работе со шрифтами.

Пример 1. Задание свойств шрифта с помощью CSS

Ниже приведен результат данного примера (рис. 1).

Рис. 1. Вид текста после применения стилей

В табл. 2 приведены некоторые стилевые параметры для работы с текстом и результат их применения.

Табл. 2. Результат использования различных параметров шрифтов

ПримерПримерПримерПримерПример
font-family: Verdana, sans-serif; font-size: 120%; font-weight: lightfont-size: large; font-weight: boldfont-family: Arial, sans-serif; font-size: x-small; font-weight: boldfont-variant: small-capsfont-style: italic; font-weight: bold

Свойства текста

Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Значения свойств приведены в табл. 3.

Табл. 3. Свойства CSS для управления видом текста

СвойствоЗначениеОписаниеПример
line-heightnormal
множитель
значение
%
Интерлиньяж (межстрочный интервал)line-height: normal
line-height: 1.5
line-height: 12px
line-height: 120%
text-decorationnone
underline
overline
line-through
blink
Убрать все оформление
Подчеркивание
Линия над текстом
Перечеркивание
Мигание текста
text-decoration: none
text-transformnone
capitalize
uppercase
lowercase
Убрать все эффекты
Начинать С Прописных
ВСЕ ПРОПИСНЫЕ
все строчные
text-transform: capitalize
text-alignleft
right
center
justify
Выравнивание текстаtext-align: justify
text-indentзначение
%
Отступ первой строкиtext-indent: 15px;
text-indent: 10%

Ниже, в табл. 4 приведены некоторые параметры текста и результат их применения.

Оформление текста в CSS

Положительное восприятие веб-сайта пользователем зависит не только от смыслового содержания текста, но и от его оформления.

Существует вероятность, что человек не станет читать даже очень грамотно и хорошо написанный, но не оформленный или плохо оформленный текст, поэтому следует уделить особое внимание вопросу удобочитаемости.

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

Визуальное оформление текста в CSS

В CSS оформление текста осуществляется с помощью параметра text-decoration , который может принимать следующие значения:

  • blink — мерцающий текст;
  • none — значение по умолчанию, оформление отсутствует;
  • overline — линия расположена над текстом;
  • underline — подчеркнутый линией текст;
  • line-through — текст, зачеркнутый линией;
  • inherit — в данном случае text-decoration наследует значение родительского элемента.

В окне браузера данный пример будет выглядеть следующим образом:

Цвет текста в CSS

Изменить цвет текста, расположенного внутри HTML элементов можно с помощью CSS свойства color .

Способы задания могут быть следующими:

  • При помощи названия цвета (например, red, green, blue, white);
  • При помощи значения RGB (например, rgb(221,102,212));
  • При помощи шестнадцатеричного цветового значения (например, #ff00aa).

Визуальное оформление, реализованное с помощью приведенного выше кода, выглядит следующим образом:

Размер текста в CSS

CSS свойство font-size позволяет задать размер текста.

Единицами измерения могут быть:

  • Пиксели (например, 14px);
  • Пункты (например, 20pt);
  • Проценты (например, 50%);
  • Ключевые слова small, large и т.п.

Визуальное представление приведенного выше кода выглядит следующим образом:

Отступ текста в CSS

Изначальная концепция HTML не предполагала отступы, выделяя абзацы лишь вертикальным расстоянием, а множество пробелов перед строкой браузер преобразует в один.

Однако в CSS данная проблема решается с помощью свойства text-indent .

Визуальное отображение кода:

Жирный и наклонный текст в CSS

С помощью атрибута CSS font-weight определяется жирность шрифта.

Данный атрибут может принимать следующие значения:

  • normal — обычный;
  • lighter — более светлый;
  • bold — жирный;
  • от 100 до 900, где 100 — самый тонкий шрифт, а 900 — самый толстый.

В браузере данный код выглядит следующим образом:

Тень текста в CSS

CSS свойство text-shadow позволяет задать тексту тень. Данное свойство содержит в себе целый перечень эффектов: цвет, смещение вправо, смещение вниз, радиус пятна тени.

В том случае, если цвет тени не задан, используется цвет текста.

Представленный выше код в браузере выглядит следующим образом:

Выравнивание текста в CSS

Выравнивание текста по горизонтали задаётся свойством text-align , которое может принимать следующие значения:

  • left — выравнивание по левому краю;
  • right — выравнивание по правому краю;
  • center — выравнивание по центру;
  • justify — выравнивание по всей ширине.

С помощью свойства vertical-align выполняется выравнивание текста по вертикали.

Данное свойство может принимать следующие значения:

  • baseline — выравнивание линии элемента по базовой линии родительского элемента;
  • middle — выравнивание средней элементной точки по базовой линии родительского элемента;
  • text-top — выравнивание верхней части элемента по верху шрифта родительского элемента;
  • top — выравнивание верха элемента по верхней части самого высокого элемента строки;
  • sub, super — отображение элемента в виде нижнего и верхнего индексов соответственно.


Таким образом, возможности CSS позволяют произвести практически любые манипуляции с оформлением текста на веб-сайте для улучшения его восприятия пользователями.

CSS HTML шрифты, цвет и размер текста

Свойства шрифта CSS определяют семейство шрифтов, смелость, размер и стиль текста.

Разница между засечками и шрифтами без засечек

Семейства шрифтов CSS

В CSS существует два типа имен семейств шрифтов:

  • родовое семейство — группа семейств шрифтов с похожим видом (например, «засечка» или «однодисковая»)
  • семейство шрифтов — конкретная семья шрифтов (например, «Times New Roman» или «Arial»)
Generic familyFont familyОписание
SerifTimes New Roman
Georgia
Шрифты с засечками имеют небольшие линии на концах на некоторых символах
Sans-serifArial
Verdana
«Sans» означает без-эти шрифты не имеют линий на концах символов
MonospaceCourier New
Lucida Console
Все одноместные символы имеют одинаковую ширину

Примечание: На компьютерных экранах шрифты без засечек считаются более удобными для чтения, чем шрифты с засечками.

Семейство шрифтов

Семейство шрифтов текста задается с помощью свойства font-family .

Свойство font-family должно содержать несколько имен шрифтов в качестве «резервной» системы. Если обозреватель не поддерживает первый шрифт, он пытается следующий шрифт и т. д.

Начните с нужного шрифта и заканчивайте родовым семейством, чтобы позволить обозревателю выбрать аналогичный шрифт в родовом семействе, если другие шрифты недоступны.

Примечание: Если имя семейства шрифтов больше одного слова, оно должно быть в кавычках, например: «Times New Roman».

В списке, разделенном запятыми, указано несколько семейств шрифтов:

Пример

Для часто используемых комбинаций шрифтов, посмотрите наши безопасные сочетания шрифтов.

Стиль шрифта

Свойство font-style в основном используется для указания текста курсивом.

Это свойство имеет три значения:

  • normal — Текст отображается нормально
  • italic — Текст показан курсивом
  • oblique — Текст «опираясь» (косой очень похож на курсив, но менее поддерживается)

Пример

p.italic <
font-style: italic;
>

p.oblique <
font-style: oblique;
>

Размер шрифта

Свойство font-size задает размер текста.

Возможность управлять размером текста важна в веб-дизайне. Однако не следует использовать коррекции размера шрифта, чтобы сделать абзацы похожими на заголовки, или заголовки выглядят как абзацы.

Всегда используйте правильные HTML-теги, например — для заголовков и для абзацев.

Значение размера шрифта может быть абсолютным или относительным размером.

  • Устанавливает заданный размер текста
  • Не позволяет пользователю изменять размер шрифта во всех браузерах (плохо для специальных возможностей)
  • Абсолютный размер полезен, когда известен физический размер выходных данных
  • Устанавливает размер относительно окружающих элементов
  • Позволяет пользователю изменять размер текста в обозревателях

Примечание: Если размер шрифта не указан, по умолчанию для обычного текста, как и для абзацев, используется 16px (16px = 1em).

Задать размер шрифта с пикселями

Установка размера текста с пикселями дает полный контроль над размером текста:

Пример

Совет: При использовании пикселов можно по-прежнему использовать инструмент «Масштаб» для изменения размера всей страницы.

Установить размер шрифта с em

Чтобы разрешить пользователям изменять размер текста (в меню обозревателя), многие разработчики используют EM вместо пикселов.

Единица измерения размера em рекомендуется консорциумом W3C.

1em равен текущему размеру шрифта. Размер шрифта по умолчанию в обозревателях — 16px. Таким образом, по умолчанию размер 1em является 16px.

Размер можно вычислить от пикселов к EM использующ эту формулу: пикселы/16 =EM

Пример

h2 <
font-size: 1.875em; /* 30px/16=1.875em */
>

p <
font-size: 0.875em; /* 14px/16=0.875em */
>

В приведенном выше примере размер текста в EM совпадает с предыдущим примером в пикселях. Однако, с размером EM, можно настроить размер текста во всех браузерах.

К сожалению, есть еще проблема с более старыми версиями IE. Текст становится больше, чем он должен, когда сделал больше, и меньше, чем он должен, когда сделал меньше.

Используйте комбинацию процентов и EM

Решение, которое работает во всех браузерах, заключается в том, чтобы задать размер шрифта по умолчанию в процентах для элемента :

Пример

Наш код теперь отлично работает! Он показывает тот же размер текста во всех браузерах, и позволяет всем браузерам, чтобы увеличить или изменить размер текста!

Вес шрифта

Свойство font-weight задает вес шрифта:

Пример

p.thick <
font-weight: bold;
>

Отзывчивый размер шрифта

Размер текста может быть установлен с помощью vw единицы, что означает «ширина видового экрана».

Таким образом размер текста будет следовать размеру окна браузера:

Hello World

Измените размер окна обозревателя, чтобы увидеть, как масштабируется размер шрифта.

Пример

Hello World

Видовой экран — это размер окна обозревателя. 1ВВ = 1% ширины видового экрана. Если видовой экран шириной 50 см, 1ВВ составляет 0.5 cm.

Шрифт вариант

Свойство font-variant указывает, должен ли текст отображаться в шрифте с малыми прописными буквами.

В шрифте с малыми прописными буквами все строчные буквы преобразуются в прописные буквы. Однако преобразованные прописные буквы отображаются в меньшем размере шрифта, чем исходные прописные буквы в тексте.

Пример

p.small <
font-variant: small-caps;
>

Другие примеры

Все свойства шрифта в одном Декларации
В этом примере демонстрируется использование сокращенного свойства для установки всех свойства шрифта в одном объявлении.

Форматирование текста в CSS

В этой статье речь пойдет о том как происходит форматирование текста в CSS, будут рассмотрены приемы выравнивания текста, как силамии CSS сделать красную строку, установить междустрочный интервал и интервал между словами, как произвести декорирование текста, преобразовать текст в верхний, или нижний регистр и как создать капитель шрифта.

В ходе верстки сайта Вам придется постоянно изменять внешний вид веб-страниц. Одной из первых задач при работе с текстом на странице является необходимость его выровнять.

Выравнивание текста

Благодаря свойству CSS text-align, вы можете разместить заголовки вашего документа по центру, расположить текстовое содержимое относительно левого, либо правого края, или, может, вы готовите страницы к печати и необходимо выровнять их по ширине, подобно тому, как текст размещается в печатных изданиях.

Чтобы установить выравнивание для текста, используйте следующие ключевые слова со свойством text-align:

ЗначениеОписание
leftВыравнивает текст влево. Это значение по умолчанию (если направление текста слева направо).
rightВыравнивает текст вправо. Это значение по умолчанию (если направление текста справа налево).
centerВыравнивает текст по центру.
justifyРастягивает линии так, что каждая линия имеет одинаковую ширину (растягивает текст по ширине).

Давайте рассмотрим пример работы с выравниванием текста:

В данном примере мы создали 4 (четыре) класса, которые определяют различные варианты выравнивания текста. Для всех элементов

Результат нашего примера:

Рис.60 Пример использования свойства text-align (выравнивание текста).

Отступ первой строки

Если Вы откроете практически любую книгу, содержащую текстовую информацию, то можете заметить, что первая строка каждого абзаца, как правило, имеет отступ (красная строка).

Если у вас есть необходимость придать вашему документу вид подобный печатному изданию, то воспользуйтесь таким CSS свойством, как text-indent.

Вы можете применить те относительные единицы измерения, которые вы используете в своем документе, будь то пиксели, либо значения, которые зависят от базового размера шрифта (например, такие как em).

Обращаю Ваше внимание, что в некоторых ситуациях у вас может появится необходимость использовать отрицательный отступ первой строки, свойство text-indent допускает использование отрицательных значений, в этом случае строка сдвигается в обратном направлении.

Давайте рассмотрим пример использования этого свойства:

В данном примере мы создали 4 (четыре) стиля и поочередно применили их к четырем абзацам. Для первого абзаца установили значение отступа по умолчанию (), для второго задали отступ 40 пикселей, для третьего указали отрицательный отступ (-20px), в результате чего, абзац сдвинулся за окно браузера и для четвертого абзаца установили отступ равный 50%.

Обращаю ваше внимание, что если вы используете процентные значения, то отступ зависит от ширины родительского элемента, в котором находится абзац.

Результат нашего примера:

Рис. 61 Пример использование свойства text-indent (красная строка).

Установка междустрочного интервала

При работе с текстом зачастую возникает необходимость расположить строки абзаца ближе друг к другу, либо наоборот — растянуть их. Расстояние между базовыми линиями соседних строк называется интерлиньяж или междустрочный интервал.

В CSS за междустрочный интервал (интерлиньяж) отвечает свойство line-height (высота строки). Чем выше значение этого свойства, тем больше промежуток между строками.

Обращаю Ваше внимание на то, что при установке значения высоты строки с использованием единиц измерения пиксели, размер междустрочного интервала, напрямую будет зависеть от размера шрифта, то есть он будет автоматически корректироваться пропорционально изменению свойства font-size (размер шрифта), рассмотренного в предыдущей статье.

Как правило, во всех современных браузерах высота строки по умолчанию составляет 120 %.

Расчёт междустрочного интервала происходит следующим образом:

Например, размер шрифта составляет 20 пикселей, а высота строки 150% (30 пикселей). Таким образом, получается:

Допускается задавать размер высоты строки с использованием числового значения. Объявление выглядит следующим образом:

Как вы можете заметить, единицы измерения при этом не указываются, а число выступает в роли множителя. При использовании числовых значений расчёт междустрочного интервала происходит следующим образом:

Например, шрифт для абзаца установлен 2em, а высота строки задана как 1.5:

Расчетное значение междустрочного интервала в нашем случае составит 3em:

В большинстве случаев множитель использовать очень удобно, так как элементы наследуют значения междустрочного интервала родительского элемента. Давайте рассмотрим пример использования свойства line-height:

В данном примере мы рассмотрели способы указания высоты строки в пикселях, процентах и с использованием множителя.

Результат нашего примера:

Рис. 62 Пример использование свойства line-height (установка междустрочного интервала).

Интервал между словами и символами

Оформляя страницы на сайте, приходится регулировать интервал не только между строк, но и между отдельными словами, или символами. Например, уменьшив интервал между символами, позволит сделать длинный заголовок более компактным, или наоборот, увеличив интервал, придаст ему более растянутый вид.

Чтобы установить определенный интервал между символами необходимо использовать CSS свойство letter-spacing. При работе со свойством используйте относительные единицы измерения CSS (em, rem, px и так далее). Допускается использование как положительных, так и отрицательных значений. Положительные значения соответственно увеличивают интервал между символами, а отрицательные уменьшают, вплоть до наслоения букв и символов друг на друга.

Давайте рассмотрим пример использования свойства letter-spacing:

В данном примере мы рассмотрели способы указания интервала между символами в тексте в пикселях (как положительное, так и отрицательное значение) и единицах измерения em.

Результат нашего примера:

Рис.63 Пример использования свойства letter-spacing (интервал между символами в тексте).

Задать интервал между отдельными словами позволяет похожее по наименованию свойство CSS — word-spacing. По аналогии со свойством letter-spacing используйте относительные единицы измерения CSS (em, rem, px и так далее). Допускается использование как положительных, так и отрицательных значений. Положительные значения соответственно увеличивают интервал между словами, а отрицательные уменьшают, вплоть до наслоения слов друг на друга.

Давайте рассмотрим пример использования свойства word-spacing:

В данном примере мы рассмотрели способы указания интервала между словами в тексте в пикселях (отрицательное значение) и единицах измерения em.

Результат нашего примера:

Рис. 64 Пример использования свойства word-spacing (интервал между словами в тексте).

Декорирование текста

CSS свойство text-decoration дает нам возможность добавить к тексту такие виды декорирования как:

  • подчеркивание
  • перечеркивание
  • линия над текстом

Однако, одно из самых распространенных применений этого свойства это отмена декорирования, при этом необходимо использовать со свойством text-decoration ключевое слово none :

В данном примере мы убрали декорирование (подчеркивание) у всех гиперссылок. Полный перечень ключевых слов свойства text-decoration указан в данной таблице:

ЗначениеОписание
noneОпределяет нормальный текст (без декорирования). Это значение по умолчанию
underlineОпределяет линию под текстом.
overlineОпределяет линию над текстом.
line-throughОпределяет линию, проходящую через текст (перечеркивание).

Обращаю Ваше внимание, что у большинства пользователей подчеркнутый текст ассоциируется с гиперссылкой, а перечеркнутый с удалённым текстом, поэтому используйте декорирование, когда это действительно необходимо.

Допускается использовать несколько значений в одном объявлении:

Давайте рассмотрим пример использования свойства text-decoration в тексте:

В данном примере мы создали четыре различных стиля и применили их поочередно к каждому абзацу. В первом абзаце добавили декорирование текста — линия снизу (значение underline ), во втором декорирование текста — линия сверху (значение overline ), в третьем декорирование текста — перечеркивание ( line-through ), а в четвертом двойное декорирование текста — линия сверху и снизу (значения underline overline ).

Результат нашего примера:

Рис. 65 Пример использования свойства text-decoration (декорирование текста в CSS).

Верхний и нижний регистр

CSS предоставляет возможность осуществить преобразование любого текста в верхний или нижний регистр, а также преобразовать первые буквы каждого слова в верхний регистр. Управляет регистром текста свойство text-transform, ниже в таблице приведены все его значения:

ЗначениеОписание
noneТекст отображается как есть (регистр букв не изменяется). Это значение по умолчанию.
capitalizeПреобразует первые символы каждого слова в верхний регистр.
uppercaseПреобразует все символы в верхний регистр.
lowercaseПреобразует все символы в нижний регистр.

Давайте рассмотрим пример использования свойства text-transform в тексте:

В данном примере мы создали три различных стиля и применили их поочередно к каждому абзацу. В первом абзаце первые символы каждого слова были преобразованы в верхний регистр (значение capitalize ), во втором все символы в верхний регистр (значение uppercase ), а в третьем в нижний регистр (значение lowercase ).

Рис. 66 Пример использования свойства text-transform (изменения регистра текста).

Капитель в CSS

Малые заглавные, или капитель (англ. small caps) — начертание шрифта, в котором строчные знаки выглядят как уменьшенные заглавные буквы. Для создания такого начертания используется CSS свойство font-variant со следующим синтаксисом:

Рассмотрим пример использования:

В данном примере первый параграф оставлен без изменений, а ко второму применено свойство font-variant со значением small-caps , благодаря которому текст будет выведен в капители (строчные буквы устанавливаются как прописные уменьшенного размера).

Рис. 67 Пример использования свойства font-variant (капитель шрифта).

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
  • Используя полученные знания составьте следующую HTML страницу:

    Практическое задание № 16.

Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.

Читать еще:  Knockout css binding
Ссылка на основную публикацию
Adblock
detector