html.okpython.net
Основы создания сайтов
CSS :: Свойство font-size
css-свойство font-size (от англ. font size – размер шрифта) используется для установки размера шрифта, который будет использоваться внутри элемента.
Характеристики
- Значение по умолчанию: medium.
- Применяется: ко всем элементам.
- Наследуется: да.
- Анимируется: да.
- JavaScript: object.style.fontSize="value".
Синтаксис
font-size: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <размер> | <проценты>
Значения
- xx-small – устанавливает шрифт самого малого размера относительно значения по умолчанию.
- x-small – устанавливает шрифт сверхмалого размера относительно значения по умолчанию.
- small – устанавливает шрифт малого размера относительно значения по умолчанию.
- medium – устанавливает шрифт среднего размера, который используется браузерами по умолчанию.
- large – устанавливает шрифт большого размера.
- x-large – устанавливает шрифт сверхбольшого размера.
- xx-large – устанавливает шрифт самого большого размера.
- smaller – устанавливает размер шрифта меньше, чем у родительского элемента.
- larger – устанавливает размер шрифта больше, чем у родительского элемента.
- размер – принимаются любые единицы измерения (смотреть), используемые в CSS.
- проценты – проценты, которые рассчитываются относительно размера шрифта родительского элемента.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-fonts-3/#propdef-font-size
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/font-size
Примеры
HTML
Результат
htmlCodes
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример №1</title>
<style>
.size_1{
font-size: smaller;
}
.size_2{
font-size: medium;
}
.size_3{
font-size: larger;
}
.size_4{
font-size: 150%;
}
.size_5{
font-size: 1.5em;
}
</style>
</head>
<body>
<p class="size_1">
font-size: smaller;
</p>
<p class="size_2">
font-size: medium;
</p>
<p class="size_3">
font-size: larger;
</p>
<p class="size_4">
font-size: 150%;
</p>
<p class="size_5">
font-size: 1.5em;
</p>
</body>
</html>
Пример №1