Переключать пункты меню

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

Как уже упоминалось в прошлой статье, любой элемент на странице может быть задан произвольными размерами вычисляемый в миллиметрах, пикселах и процентах. Сегодня поговорим более детально о размерах шрифта (далее РШ) в стилях css.

РШ при разметке страницы задают либо в миллиметрах em, либо в пикселах px для атрибута font-size. Использование РШ в процентах, в виду большого разброса в масштабировании, не получило большого применения.

Насчет применения миллиметров или пикселей для единиц измерения для РШ здесь уже выбирать лично вам. Как вам будет удобней.
 

Но поскольку, по умолчанию, во многих программах Word, Exel, Photoshop единица измерения уже установлена в пикселах, будем рассматривать все примеры РШ также в пикселах.

Кроме того, существует специальный атрибут font-weight:..;, который отвечает, каким будет шрифт: жирным или обычным.

Задается несколькими способами либо в цифрах или в строковом формате. Если задать жирность в цифрах, то для атрибута font-weight пропишем цифру 100 для простого шрифта, или 500 для жирного. Для того, чтобы прописать в строковом формате существует лишь два параметра bold и normal; Есть и другие параметры light, medium, demi bold, но многие шрифты их не поддерживают, поэтому в строковом формате есть только два понятия жирный и простой (нежирный шрифт).
 

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

Чтобы задать межстрочный интервал нужно прописать параметры для атрибута line-height. Допустим, если мы указали РШ 14 пикселей, то и для атрибута line-height, желательно нужно указать также 14 рх.
Итак, зададим РШ в файле стилей для нашего сайта.
 

В этом примере мы прописали РШ для всех шрифтов, которые есть на странице. Но, для которых еще не прописаны стили для каждого элемента.

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

А для основного контента зададим РШ 14 пикселей. Для простоты пропишем его для тега обычного текста <p>.
Вот таким образом:
 

По умолчанию, выравнивание текста производится по левому краю. Если вам нужны другие параметры, измените атрибут text-align, который может принимать четыре параметра – left, right, justify, center. На простом человеческом языке это обозначает:

1. Left текст выравнивается по левому краю
2. Right текст выравнивается по правому краю
3. justify, текст автоматически занимает всю ширину страницы и выравнивается по левому и правому краю.
4. Center – текст подгоняется только по центру страницы.

Во всех примерах точкой отсчета является родительский элемент. Если мы прописали эти атрибуты для тега <p>…</p>, то все элементы находящиеся внутри этого парного тега будут обладать свойствами, заданные для родительского элемента.

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

Добавить комментарий


Коллекция скриптов и модулей   © 2017