CSS | Единицы
Опубликовано: 6 Января, 2022
В CSS есть несколько различных единиц измерения длины и размера. Единицы CSS необходимы для указания размера в таблице стилей, например padding: «5px» . В основном в CSS есть два типа единиц.
- Абсолютная длина
- Относительная длина
Абсолютная длина: не подходит для использования на экране, потому что размер экрана сильно зависит от устройства, используемого для этой страницы, которое рекомендуется использовать для макета печати и где известен выходной носитель.
Единицы абсолютной длины:
- см: сантиметр
Синтаксис:размер шрифта: 0,5 см; высота линии: 0,1 см;
Пример:
<html><head><title>CSS units</title><style>.gfg {font-size: 1.2cm;font-weight:bold;}.geeks {font-size: 0.5cm;line-height: 0.1cm;}</style></head><body><divclass="gfg">GeeksforGeeks</gfg><divclass="geeks">A computer science portal for geeks</div></body></html>Выход:
- мм: миллиметр
Синтаксис:размер шрифта: 5 мм; высота строки: 1 мм;
Пример:
<html><head><title>CSS units</title><style>.gfg {font-size: 12mm;font-weight:bold;}.geeks {font-size: 5mm;line-height: 1mm;}</style></head><body><divclass="gfg">GeeksforGeeks</gfg><divclass="geeks">A computer science portal for geeks</div></body></html>Выход:
- в дюймах
Примечание: дюймы (1 дюйм = 96 пикселей = 2,54 см)
Синтаксис:размер шрифта: 0,2 дюйма; высота строки: 0,1 дюйма;Пример:
<html><head><title>CSS units</title><style>.gfg {font-size: .5in;font-weight:bold;}.geeks {font-size: .2in;line-height: .1in;}</style></head><body><divclass="gfg">GeeksforGeeks</gfg><divclass="geeks">A computer science portal for geeks</div></body></html>Выход:
- px: пиксели
Примечание: пиксели (1 пиксель = 1/96 часть 1 дюйма)
Синтаксис:размер шрифта: 20 пикселей; высота строки: 10 пикселей;
Пример:
<html><head><title>CSS units</title><style>.gfg {font-size: 40px;font-weight:bold;}.geeks {font-size: 17px;line-height: 5px;}</style></head><body><divclass="gfg">GeeksforGeeks</gfg><divclass="geeks">A computer science portal for geeks</div></body></html>Выход:
- pt: баллы
Примечание: точки (1 точка = 1/72 от 1 дюйма)
Синтаксис:размер шрифта: 16pt; высота строки: 8pt;Пример:
<html><head><title>CSS units</title><style>.gfg {font-size: 35pt;font-weight:bold;}.geeks {font-size: 15pt;line-height: 5pt;}</style></head><body><divclass="gfg">GeeksforGeeks</gfg><divclass="geeks">A computer science portal for geeks</div></body></html>Выход:
- ПК: Пикас
Примечание: картинки (1 шт. = 12 пунктов)
Синтаксис:размер шрифта: 1шт; высота линии: 0,5 шт .;Пример:
<html><head><title>CSS units</title><style>.gfg {font-size: 3pc;font-weight:bold;}.geeks {font-size: 1.3pc;line-height: .2pc;}</style></head><body><divclass="gfg">GeeksforGeeks</gfg><divclass="geeks">A computer science portal for geeks</div></body></html>Выход:
Относительная длина: это удобно для использования на экране, если размер экрана сильно различается в зависимости от устройства, тогда эти единицы относительной длины идеальны, потому что они меняются в зависимости от различных сред рендеринга.
Относительные единицы длины:
- em: относительно размера шрифта этого элемента.
Примечание. Здесь 2em означает 2-кратный размер текущего шрифта.
Синтаксис:размер шрифта: 10 пикселей; высота строки: 2em;Пример:
<html><head><title>relative unit</title><style>p {font-size: 15px;line-height: 2em;}</style></head><body><p>GeeksforGeeks Line height: 2x10px = 20px</p><p>GeeksforGeeks Line height: 2x10px = 20px</p><p>GeeksforGeeks Line height: 2x10px = 20px</p></body></html>Выход:
- Пример: относительно высоты текущего шрифта по оси X (оси).
Синтаксис:размер шрифта: 1ex;
Пример:
<html><head><title>relative unit</title><style>p {font-size: 40px;}span {font-size: 1ex;}</style></head><body><p>GeeksforGeeks:<span>A computer scienceportal for geeks</span></p></body></html>Выход:
- ch: относительно ширины 0 .
Синтаксис:размер шрифта: 2ch;
Пример:
<html><head><title>ch unit in CSS</title><style>body {font-size:50px;}div {font-size: 1ch;}</style></head><body><p>GeeksforGeeks</p><div>A computer science portal for geeks</div></body></html>Выход:
- rem: относительно базового размера шрифта браузера.
Синтаксис:размер шрифта: 3rem;
Пример:
<html><head><title>ch unit in CSS</title><style>body {font-size:4rem;}div {font-size: 1.6rem;}</style></head><body><p>GeeksforGeeks</p><div>A computer science portal for geeks</div></body></html>Выход:
- vw: относительно 1% ширины области просмотра.
Синтаксис:размер шрифта: 10vw;
Пример:
<html><head><title>vw unit</title><style>h1 {font-size: 4vw;}</style></head><body><h1>GeeksforGeeks</h1><p>A computer science portal for geeks</p></body></html>Выход:
- vh: относительно 1% высоты области просмотра.
Синтаксис:размер шрифта: 10vh;
Пример:
<html><head><style>h1 {font-size: 6vh;}</style></head><body><h1>GeeksforGeeks</h1><p>A computer science portal for geeks</p></body></html>Выход:
- vmin: относительно 1% меньшего размера области просмотра.
Синтаксис:размер шрифта: 10vmin;
Пример:
<html><head><title>vmin unit</title><style>h1 {font-size: 8vmin;}</style></head><body><h1>GeeksforGeeks</h1><p>A computer science portal for geeks</p><p>1vmin = 1vw or 1vh whichever is smaller.</p></body></html>Выход:
- vmax: относительно 1% большего размера области просмотра.
Синтаксис:размер шрифта: 20vmax;
Пример:
<html><head><title>vmax unit</title><style>h1 {font-size: 5vmax;}</style></head><body><h1>GeeksforGeeks</h1><p>A computer science portal for geeks</p><p>1vmax = 1vw or 1vh whichever larger.</p></body></html>Выход:
- %: % unit устанавливает размер шрифта относительно текущего размера шрифта.
Синтаксис:размер шрифта: 250%;
Пример:
<html><head><title>CSS unit</title><style>body {font-size:250%;}div {font-size: 17px;}</style></head><body><p>GeeksforGeeks</p><div>A computer science portal for geeks</div></body></html>Выход:
