font-size

CSS Свойство font-size определяет размер шрифта. Это свойство также используется для вычисления размера em , ex и других относительных единиц. Подробнее: .

Интерактивный пример

Синтаксис

/* значения в */ font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; /* значения в */ font-size: larger; font-size: smaller; /* */ font-size: 12px; font-size: 0.8em; /* */ font-size: 80%; /* Глобальные значения */ font-size: inherit; font-size: initial; font-size: unset; 

Свойство font-size устанавливается одним из следующих способов:

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

Значения

Набор ключевых слов абсолютных значений, по отношению к пользовательскому размеру шрифта по умолчанию (им считается medium — среднее).

Больше (larger) или меньше (smaller). Ключевые слова для относительного размера. Шрифт будет больше или меньше по отношению в размеру шрифта родительского элемента.Примерно на такое же соотношение, которое используется в ключевых словах абсолютного размера выше.

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

Формальный синтаксис

font-size =
| (en-US)
| (en-US)
(en-US) | (en-US)
math

=
| (en-US)

Возможные подходы

Существуют разные способы задания размера шрифта. С помощью ключевых слов или с помощью числовых значений для размера пикселей или размера ems. Выберите подходящий метод в зависимости от потребностей конкретной веб-страницы.

Ключевые слова

Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the body element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.

Pixels

Setting the font size in pixel values ( px ) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.

Font sizing settings can also be used in combination. For example, if a parent element is set to 16px and its child element is set to larger , the child element displays larger than the parent element in the page.

Примечание: Defining font sizes in pixel is not accessible, because the user cannot change the font size from the browser. (For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer.) Therefore, avoid using pixels for font sizes if you wish to create an inclusive design.

Ems

Another way of setting the font size is with em values. The size of an em value is dynamic. When defining the font-size property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven’t set the font size anywhere on the page, then it is the browser default, which is probably 16px. So, by default 1em = 16px, and 2em = 32px. If you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.

In order to calculate the em equivalent for any pixel value required, you can use this formula:

em = desired element pixel value / parent element font-size in pixels

For example, suppose the font-size of the body of the page is set to 1em, with the browser standard of 1em = 16px; if the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).

A popular technique to use throughout the document is to set the the font-size of the body to 62.5% (that is 62.5% of the default of 16px), which equates to 10px, or 0.625em. Now you can set the font-size for any elements using em units, with an easy-to-remember conversion, by dividing the px value by 10. This way 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em. For example:

body  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ > span  font-size: 1.6em; /* 1.6em = 16px */ > 

The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.

One important fact to keep in mind: em values compound. Take the following HTML and apply it with the previous CSS above:

div> span>Outer span>innerspan> outerspan> div> 

Assuming that the browser’s default font-size is 16px, the words «outer» would be rendered at 16px, but the word «inner» would be rendered at 25.6px. This is because the inner span’s font-size is 1.6 em which is relative to its parent’s font-size , which is in turn relative to its parent’s font-size . This is often called compounding.

Rems

rem values were invented in order to sidestep the compounding problem. rem values are relative to the root html element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.

The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to rem .

html  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ > span  font-size: 1.6rem; > 

Then we apply this CSS to the same HTML, which looks like this:

span>Outer span>innerspan> outerspan> 

In this example, the words «outer inner outer» are all displayed at 16px (assuming that the browser’s font-size has been left at the default value of 16px).

Примеры

Пример 1

/* Set paragraph text to be very large. */ p  font-size: xx-large > /* Set h1 (level 1 heading) text to be 2.5 times the size * of the text around it. */ h1  font-size: 250% > /* Sets text enclosed within span tag to be 16px */ span  font-size: 16px; > 

Пример 2

.small  font-size: xx-small; > .larger  font-size: larger; > .point  font-size: 24pt; > .percent  font-size: 200%; > 

h1 class="small">Small H1h1> h1 class="larger">Larger H1h1> h1 class="point">24 point H1h1> h1 class="percent">200% H1h1> 

Live Sample

Примечание

em and ex units on the font-size property are relative to the parent element’s font size (unlike all other properties, where they’re relative to the font size on the element). This means em units and percentages do the same thing for font-size .

Спецификации

Совместимость браузеров

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on 22 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

HTML: Атрибут style

Атрибут style используется для стилизации элементов непосредственно в HTML коде. Цель атрибута style заключается в предоставлении простого способа изменения внешнего вида практически любого HTML элемента.

Примечание: тут мы рассматриваем атрибут style для формирования общего представления об использовании CSS стилей для оформления веб-страниц. Подробнее о возможностях CSS вы можете почитать в CSS самоучителе.

Код примера познакомит вас с новым способом форматирования документа:

  
Посмотрите на цвета и стили
 
Этот текст написан красным цветов с помощью шрифта Verdana.
 
Этот текст написан зеленым цветом с помощью шрифта Times.
 
Этот текст имеет размер 30 пикселей.
   

Внимательно посмотрите на пример, с помощью атрибута style мы задаем CSS стиль внутри HTML-элементов, такой способ задания стилей называется встроенным стилем. Встроенный стиль применяется только к элементу, в котором он был определён, и к его дочерним элементам (если применённые CSS свойства наследуются).

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

Задний фон

Задний фон элемента задается с помощью CSS свойства background-color, которое в качестве значения может принимать любое доступное значение цвета (про различные значения цветов смотрите ниже), после свойства обязательно должно идти двоеточие и значение, после значения обязательно ставится точка с запятой, эти правила распространяются на все свойства атрибута style . Если нужно задать несколько свойств стиля для одного элемента, то каждое последующее свойство записывается после ; » предыдущего свойства.

Цвет текста

Цвет текста элемента задается с помощью CSS свойства color. Благодаря этому свойству можно задать любой цвет для текстового содержимого. В качестве значения свойство color может принимать имена цветов, RGB значения или шестнадцатеричные коды.

Установка цвета по имени

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

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

Установка цвета с помощью RGB

Система RGB использует три числа, которые описывают относительное количество красного, зеленого и синего цветов, которые смешаны вместе для получения любого оттенка. Числа могут варьироваться от 0 до 255 для числовых значений или от 0% до 100%

Можно установить цвет, указав сочетание красного, зеленого и синего в определенной пропорции. Допустим, вам нужно задать оранжевый цвет, который состоит из 80% красного, 40% зеленого и 0% синего. Вот как это можно сделать:

Можно также задавать значение красного, зеленого и синего числами от 0 до 255. Например, вместо 80% красного, 40% зеленого и 0% синего можно написать 204 красного, 102 зеленого и 0 синего:

Шестнадцатеричные коды

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

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

Шрифт

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

font-family: Verdana, Geneva, Arial, sans-serif;

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

Размер

Размер шрифта очень сильно влияет на дизайн веб-страницы и читабельность ее текста. В CSS есть несколько единиц измерения, с помощью которых можно задавать размер для текста, все они подробно описаны в разделе Единицы измерения CSS. Также имеется возможность задавать размер с помощью ключевых слов:

Все доступные ключевые слова, задающие размер, вы можете посмотреть в нашем справочнике по CSS в описании свойства font-size.

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

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

  
Заголовок
 
Очень маленький размер текста.
 
Этот текст будет выровнен по правому краю.
   

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник