Прежде чем мы начнем фактическое упражнение, мы хотели бы дать краткое представление о единицах измерения CSS.
CSS поддерживает ряд измерений, включая абсолютные единицы, такие как дюймы, сантиметры, точки и т. Д., А также относительные меры, такие как проценты и единицы измерения. Эти значения необходимы для определения различных измерений в правилах стиля, например border = "1px solid red".
Мы перечислили все единицы измерения CSS вместе с соответствующими примерами -
| Ед. изм | Описание | Пример |
|---|---|---|
| % | Определяет измерение в процентах относительно другого значения, обычно являющегося охватывающим элементом. | p {font-size: 16pt; line-height: 125%;} |
| cm | Определяет измерение в сантиметрах. | div {margin-bottom: 2cm;} |
| em | Относительное измерение высоты шрифта в em пространствах. Поскольку единица em эквивалентна размеру данного шрифта, если вы назначаете шрифт 12pt, каждый элемент «em» будет 12pt; таким образом, 2em будет 24pt. | p {{letter-spacing: 7em;} |
| Ex | Это значение определяет измерение относительно высоты x шрифта. Высота x определяется высотой строчной буквы x шрифта. | p {font-size: 24pt; line-height: 3ex;} |
| in | Определяет измерение в дюймах. | p {word-spacing: .15in;} |
| mm | Определяет измерение в миллиметрах. | p {слово-интервал: 15 мм;} |
| pc | Определяет измерение в пиках. Пика эквивалентна 12 пунктам; таким образом, есть 6 picas на дюйм. | p {font-size: 20pc;} |
| Pt | Определяет измерение в точках. Точка определяется как 1/72 дюйма дюйма. | body {font-size: 18pt;} |
| Px | Определяет измерение в пикселях экрана. | p {padding: 25px;} |
| Vh | 1% высоты просмотра. | h2 {font-size: 3.0vh; } |
| Vw | 1% ширины окна просмотра | h1 {font-size: 5.9vw; } |
| vmin | 1vw или 1vh, в зависимости от того, что меньше | p {font-size: 2vmin;} |
Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!
Новые статьи
- Правила в CSS - 25/02/2019 19:57
- Псевдо-элементы в CSS - 25/02/2019 19:57
- Псевдо-классы в CSS - 25/02/2019 19:57
- Слои в CSS - 25/02/2019 19:57
- Полосы прокрутки в CSS - 25/02/2019 19:57
- Видимость в CSS - 25/02/2019 19:57
- Поля в CSS - 25/02/2019 19:57
- Списки в CSS - 25/02/2019 19:57
- Отступы в CSS - 25/02/2019 19:57
- Позиционирование в CSS - 25/02/2019 19:57
- Стили курсоров в CSS - 25/02/2019 19:57
- Контуры в CSS - 25/02/2019 19:57
- Размеры в CSS - 25/02/2019 19:57
- Ссылки и CSS - 25/02/2019 19:53
- Использование изображений в CSS - 25/02/2019 18:02
- Свойства текста в CSS - 25/02/2019 17:57
- Свойства шрифтов в CSS - 25/02/2019 17:56
- Справочная информация CSS - 25/02/2019 13:33
- Использование цвета в CSS - 25/02/2019 12:06