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
<!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