Единицы измерения css: Единицы измерения CSS — PX, EM, REM, %, VW, VH, VMIN, VMAX, FR, EX, CH — Вебджем.рф

Содержание

Единицы измерения | CSS | CodeBasics

На протяжении всего курса, в качестве единиц измерения, использовались пиксели — наименьший элемент экрана, который выводит цвет. Множество пикселей (а в экране их много) формируют картинку, на которую вы и смотрите. Они использовались для указания размера шрифта, высоты и ширины элемента, внутренних и внешних отступов, межстрочного интервала и так далее.

Пикcели являются абсолютной единицей измерения в CSS. Что же это значит? Это значит, что вне зависимости от размера экрана значение, указанное в пикселях, сохранится. Если указан отступ в 30 пикселей, то он будет таким на телефоне, на телевизоре с диагональю в 102 дюйма и на домашней микроволновке.

С одной стороны это хорошо, ведь можно быть уверенным в том, что на разных устройствах все размеры сохранятся. В этом же заключается и проблема. Представьте себе текст с размером шрифта 12 пикселей. Он будет нормально читаться на среднестатистическом экране, но его использование на телевизоре или смартфоне приведёт к тому, что текст будет слишком маленьким для комфортного чтения, потому что устройства имеют разные размеры экранов.

Если экран имеет всего 50 пикселей, то такой текст станет невероятно большим, так как займёт большую часть экрана

Помимо пикселей существуют и другие абсолютные единицы измерения:

сантиметры
миллиметры
дюймы
пункты

Хоть они нечасто используются, но могут быть полезны при вёрстке страницы для печати. На сайтах используются только пиксели.

В противовес абсолютным единицам измерения существуют относительные. По их названию понятно, что размер такого элемента не фиксируется, а высчитывается относительно чего-то. В случае с интернет-страницами этим «чего-то» является размер шрифта. Почему именно шрифт? Представьте, что вы, как пользователь, увеличиваете размер шрифта на сайте для собственного удобства. Если отступы, ширина, высота не будет привязана к размеру текста, то такой текст будет выходить за пределы блока. А текст — основа любой страницы в интернете.

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

<section>
  <h3>Новости</h3>
</section>

.news {
  font-size: 20px;
}
.news h3 {
  font-size: 200%;
}

Какого размера будет заголовок второго уровня? Правильный ответ: 40px, так как для секции news установлен размер шрифта в 20px. Относительно этого размера и высчитывалось значение 200%. Здесь неважно, какие теги есть ещё, в каких обёртках лежат эти новости — размер считается от значения font-size элемента news.

Но важно помнить, что font-size

— наследуемое свойство. Если оно явно не указано у элемента news в нашем примере, то, для него, будет установлено значение font-size родителя. Расширим пример:

<main>
  <section>
    <h3>Новости</h3>
  </section>
</main>

main {
  font-size: 16px;
}
h3 {
  font-size: 200%;
}

Какой размер у заголовка второго уровня? Правильный ответ: 32px. Если построить логическую цепочку размеров шрифта, то она выглядит так:

У элемента <main> размер шрифта установлен в значение 16px
У элемента с классом news нет отдельного указания размера шрифта, поэтому оно наследуется от <main>, то есть тоже 16px
У заголовка второго уровня размер шрифта 200%. Значение устанавливается относительно размера шрифта родителя, то есть блока с классом .news. Итого получается 16px * 2 = 32px

Существует ещё несколько основных относительных единиц измерения:

em. определяется относительно размера шрифта у родительского элемента, т.е. 1.5em будет на 50% больше базового вычисленного размера шрифта родителя. Очень похоже на использование процентов, только указывается немного по другому
rem. определяется относительно размера шрифта у корневого элемента, т. е. у тега html (значение по-умолчанию 16px)

Задание

Добавьте <div> с классом header. Установите размер шрифта в 22px. Внутрь <div> вложите параграф с классом offer и установите размер шрифта в 200%. Стили запишите в теге

<style>

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет 🤨

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

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Полезное

←Предыдущий

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

абсолютные и относительные — Основы CSS — HTML Academy

Загрузка…
Через несколько секунд всё будет готово

index. html
style.css

HTML

<!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»utf-8″> <title>Сайт начинающего верстальщика</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <header> <h2>Сайт начинающего верстальщика</h2> </header> <main> <!— Измените ширину у картинки ниже —> <img src=»img/raccoon.svg» alt=»Аватарка»> <nav> <h3>Записи в блоге</h3> <ul> <li><a href=»day-1.html»>День первый. Как я забыл покормить кота</a></li> <li><a href=»day-2.html»>День второй. Хочу быть верстальщиком</a></li> <li><a href=»day-3.html»>День третий. Мой кот на меня обиделся</a></li> <li><a href=»day-4.html»>День четвёртый.

Как я чуть не заболел</a></li> <li><a href=»day-5.html»>День пятый. Отдыхаю</a></li> <li><a href=»day-6.html»>День шестой. Как я ничего не понял</a></li> <li><a href=»day-7.html»>День седьмой. Кекс выдал мне задание</a></li> <li><a href=»day-8.html»>День восьмой. Очень серьёзный</a></li> <li><a href=»day-9.html»>День девятый. Точнее ночь</a></li> <li><a href=»day-10.html»>День десятый. Подведение итогов</a></li> <li><a href=»day-11.html»>День одиннадцатый. Без фанатизма</a></li> <li><a href=»day-12.html»>День двенадцатый. Все любят печенье</a></li> <li><a href=»day-13.html»>День тринадцатый. Нашёл статью</a></li> <li><a href=»day-14.html»>День четырнадцатый.

Новый формат</a></li> <li><a href=»day-15.html»>День пятнадцатый. Галерея селфи</a></li> </ul> </nav> <section> <p>Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл <a href=»https://htmlacademy.ru/courses»>тренажёры по HTML и CSS</a> и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.</p> <p>Моё первое задание — вести дневник и честно писать обо всех своих свершениях.</p> </section> <section> Раздел про навыки </section> </main> <footer> Подвал сайта </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: «Arial», sans-serif; color: #222222; background: #ffffff url(«img/bg-page. png») no-repeat top center; } h2 { font-size: 36px; line-height: normal; } h3 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } /* Поменяйте значение в правиле ниже */ .avatar { border-radius: 10px; } nav { margin-bottom: 30px; padding: 20px; background-color: #4470c4; border: 5px solid #2d508f; color: #ffffff; } nav a { color: #ffffff; } ul { list-style: none; padding-left: 0; } footer { margin-top: 30px; }

Что в задании вам не понравилось?

Не работает проверка кодаЗадание слишком сложноеНепонятная теорияДругое (сейчас напишу)

Другое (сейчас напишу)

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

ЗадачиВыполнено

В правиле .avatar поменяйте значение border-radius на 40px,
затем в разметке у картинки . avatar измените значение атрибута width на 160.
Для .avatar снова поменяйте значение border-radius на 50%,
а затем верните изначальную ширину 80 картинке в разметке.

Логические свойства и значения CSS — CSS: каскадные таблицы стилей

Логические свойства и значения CSS — это модуль CSS, представляющий логические свойства и значения, которые обеспечивают возможность управления компоновкой посредством логических, а не физических сопоставлений направлений и размеров.

Модуль также определяет логические свойства и значения для свойств, ранее определенных в CSS 2.1. Логические свойства определяют относительные по направлению эквиваленты соответствующих им физических свойств.

Блочное или встроенное

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

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

Свойства размеров

размер блока
линейный размер
максимальный размер блока
макс. встроенный размер
минимальный размер блока
мин. встроенный размер

Свойства полей, границ и отступов

border-block
бордюр-цвет
бордюр-блок-конец
граница-блок-конечный цвет
бордюрный блок-конец
бордюр-блок-конец ширины
пограничный блок-старт
начальный цвет границы блока
начало блока границы
начальная ширина граничного блока
бордюрный блок
ширина блока границ
цвет рамки
бордюрный
встроенный цвет границы
граница-встроенный-конец
граница встроенного конечного цвета
бордюр-инлайн-энд-стиль
граница-встроенная-конечная-ширина
граница-инлайн-старт
граница-встроенный-начальный цвет
бордюр-встроенный-стартовый стиль
граница-встроенная-начальная-ширина
встроенный бордюр
встроенная ширина границы
граница-начало-начало-радиус
граница-начало-конец-радиус
граница-конец-начало-радиус
граница-конец-конец-радиус
с каймой
ширина границы
поля ( логические Expect behavior to change in the future.»> Экспериментальный ключевое слово )
блок полей
край-блок-конец
маржа-блок-старт
маржа встроенная
поле-встроенный-конец
маржа-инлайн-старт
заполнение ( логический Экспериментальный ключевое слово )
колодка
конец подкладочного блока
стартовый блок
встроенная прокладка
внутренний конец
дополнение-встроенное начало

Свойства для плавания и позиционирования

очистить ( inline-end и inline-start ключевые слова)
float ( inline-end и inline-start ключевые слова)
вкладыш
вставной блок
вставка-конец блока
вставка-блок-старт
врезной-врезной
вставка-врезка-конец
вставка-инлайн-старт

Свойства для ограничения размера

содержат-внутренний-размер-блока
содержат встроенный встроенный размер

Другие свойства

заголовок-сторона ( встроенный-конец и встроенный-начало ключевые слова)
блок перелива
встроенный перелив
overscroll-behavior-block
overscroll-behavior-inline
изменение размера ( блок и встроенные ключевые слова)
text-align ( end и start ключевые слова)

Устаревшие свойства

offset-block-end Check cross-browser support before using.»> Нестандартный Устаревший (теперь вставка-конец блока )
смещение-блок-начало Нестандартный Устаревший (теперь вставка-блок-начало )
смещенный-встроенный-конец Нестандартный Устаревший (теперь вставка-вставка-конец )
смещение-инлайн-старт Нестандартный Устаревший (сейчас inset-inline-start )

Основные понятия логических свойств и значений
Логические свойства для определения размера
Логические свойства полей, границ и отступов
Логические свойства для плавания и позиционирования

Спецификация
Логические свойства и значения CSS Уровень 1

Полную информацию о совместимости см. на отдельных страницах свойств.

Обнаружили проблему с содержанием этой страницы?

Отредактируйте страницу на GitHub.
Сообщить о проблеме с содержимым.
Посмотреть исходный код на GitHub.

Хотите принять участие? Узнайте

, как внести свой вклад.

Последний раз эта страница была изменена 4 октября 2022 г. участниками MDN.

Проверьте свои навыки: Значения и единицы — изучите веб-разработку

Целью этого теста является проверка того, понимаете ли вы различные типы значений и единиц, используемых в свойствах CSS.

Примечание: Вы можете опробовать решения в интерактивных редакторах ниже. Однако может оказаться полезным загрузить код и использовать онлайн-инструмент, такой как CodePen, jsFiddle или Glitch, для работы над задачами.

Если вы застряли, обратитесь к нам за помощью — см. раздел «Оценка или дополнительная помощь» внизу этой страницы.

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

Второй элемент списка должен использовать цвет RGB.
Третий должен использовать цвет HSL.
Четвертый должен использовать цвет RGB, но с альфа-каналом, установленным на 0,6 .

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

Попробуйте обновить текущий код ниже, чтобы воссоздать готовый пример:

Загрузите начальную точку для этой задачи, чтобы работать в своем собственном редакторе или в онлайн-редакторе.

В этом задании мы хотим, чтобы вы установили размер различных элементов текста, как описано ниже:

Элемент должен иметь размер 50 пикселей.
Элемент должен быть 2em.
Все элементы
должны иметь размер 16 пикселей.
Элемент
, который находится непосредственно после
, должен иметь значение 120%.

Ваш окончательный результат должен выглядеть как на картинке ниже:

Попробуйте обновить код ниже, чтобы воссоздать готовый пример:

Загрузите начальную точку для этой задачи, чтобы работать в собственном редакторе или в онлайн-редакторе.

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