Единицы измерения html: Единицы измерения | htmlbook.ru

Leave a Comment / Html / By /

Единицы измерения | Основы верстки контента

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

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

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

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

Абсолютные единицы

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

Самой распространенной единицей является пиксель. С ней вы уже знакомы по другим урокам. Но что же такое пиксель? Если не вдаваться в электронику, то пиксель — это всего лишь минимальный элемент, из которого состоит изображение на экране. Значит, мы указываем, сколько таких элементов должно быть занято на экране устройства.

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

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

div {
  height: 100px;
  /*
    Блочный элемент занимает строго 100 пикселей.
    Реальный размер (в сантиметрах) может отличаться на разных устройствах
  */
}

Другие абсолютные единицы почти не используются в разработке для веб-устройств. Стоит их перечислить, но есть вероятность, что вы никогда не будете их использовать.

  • cm — сантиметры
  • mm — миллиметры
  • Q — четверть миллиметра
  • in — дюйм
  • pc — пайка/пика. Термин из типографики
  • pt — пункт

Заметьте, что среди этих единиц есть знакомые в реальной жизни. При верстке для печати это может быть полезно.

Относительные единицы

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

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

  1. Относительные единицы, рассчитывающиеся от размера шрифта.
  2. Относительные единицы, рассчитывающиеся от размера экрана. Это немного грубое сравнение — на самом деле расчет ведется от размера viewport. О том, что это такое, вы узнаете из курса по адаптивности.

Проценты

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

<html>
  <body>
    <!-- body — дочерний элемент html. html — родительский элемент для body -->
    <main>
      <!-- main — дочерний элемент body. body — родительский элемент для main -->
      <section>
        <!-- section — дочерний элемент main. main — родительский элемент для section -->
        <p>
          <!-- p — дочерний элемент section.
 
  section — родительский элемент для p -->
        </p>
        <div>
          <!-- div — дочерний элемент section. section — родительский элемент для div -->
        </div>
      </section>
    </main>
  </body>
</html>

Рассмотрим на примере ширины и размера шрифта.

<section>
  <div>
    <p>Параграф текста</p>
  </div>
</section>

.w-400px {
  width: 400px;
}
.w-50p {
  width: 50%;
}
.size-50px {
  font-size: 50px;
}
.size-70p {
  font-size: 70%;
}

Что же здесь происходит? Разберемся по шагам:

  • Для основного родительского <section> установлены размеры в абсолютных единицах измерения. Ширина 400 пикселей и размер шрифта 50 пикселей
  • Вложенный <div> имеет ширину 50%. Этот размер относительный и высчитывается относительно ближайшего родителя, ширина которого 400 пикселей. Следовательно, ширина блока 400px / 2 = 200px
  • Параграф текста имеет размер шрифта 70%. Ближайший родитель с установленным размером шрифта — <section>. Параграфу установится размер шрифта в 70% от 50 пикселей. То есть 35px

Интересным примером является установка процентов для тега или класса, который предполагает вложение друг в друга. Взгляните на следующий пример:

<ul>
  <li>
    Элемент 1
    <ul>
      <li>Элемент 1.1</li>
      <li>
        Элемент 1.2
        <ul>
          <li>Элемент 1.2.1</li>
          <li>Элемент 1.2.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
  <li>Элемент 4</li>
</ul>

.size-30px {
  font-size: 30px;
}
li {
  font-size: 70%;
}

Перед тем, как идти дальше, попробуйте проанализировать эту разметку и посчитать, какие размеры шрифта будут у каждого элемента списка. Не пугайтесь, если вы запутаетесь. Это может быть сложно.

Поразмыслили? Молодцы! Теперь посмотрим, как это выглядит:

Проанализируем результат:

  • Размер шрифта самого первого элемента <ul> — 30 пикселей.
  • Все элементы <li> имеют размер шрифта 70%. Это значит, что чем глубже список, тем меньше размер шрифта:
    • Элементы 1, 2, 3, 4 будут иметь размер 21 пиксель.
    • Элементы 1.1 и 1.2 лежат внутри элемент 1
      . Размер шрифта этого элемента 21 пиксель. Это следует из прошлого пункта. Теперь размер шрифта считается именно от 21 пикселя.
    • Элементы 1.1 и 1.2 будут иметь размер 14.7 пикселя.
    • Элементы 1.2.1 и 1.2.2 лежат внутри элемент 1.2. Размер шрифта этого элемента 14.7 пикселей. Это следует из прошлого пункта.
    • Элементы 1.2.1 и 1.2.2 будут иметь размер шрифта 10.29 пикселя.

Относительные единицы, рассчитывающиеся от размера шрифта

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

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

font-size. Если в прошлом примере со списками заменить 70% на 0.7em, то результат будет тот же самый.

Тогда в чем смысл em? Эту единицу измерения можно использовать не только для шрифта, но и для любых других свойств, которые принимают числовое значение. Например, в следующем коде размер нижнего внешнего отступа будет 60px:

section {
  font-size: 30px;
}
section p {
  margin-bottom: 2em;
}

Но если у параграфа выставить свое значение font-size, то единица em будет высчитываться именно от него. В этом и кроется смысл формулировки «чем у ближайшего вычисленного значения font-size».

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

корневого элемента. Корневым элементом является <html>. Именно размер шрифта у этого элемента и учитывается при расчете единицы rem.

Вернемся к примеру со списком. Заменив em на rem получим совершенно другой результат. 0.7rem высчитываются из одного и того же места, без учета вложенности. Итого, каждый элемент будет иметь размер шрифта 11.2px. Это связано со стандартным значением размера шрифта в 16 пикселей у большинства браузеров.

Вы можете заметить, что размер шрифта в 30 пикселей у элемента <ul> не играет в данном случае никакой роли.

Относительные единицы, рассчитывающиеся от размера экрана

CSS позволяет задавать размеры относительно текущего размера viewport — размера окна браузера, доступного без прокрутки. Основными двумя единицами являются vw (viewport width) — ширина

viewport и vh (viewport height) — высота viewport. Вы можете рассматривать это как процент от размера viewport.

Частый «кейс» с использованием таких единиц — создание секции на всю доступную область браузера.

<section></section>

body {
  margin: 0;
  padding: 0;
}
.one-screen-section {
  width: 100vw;
  height: 100vh;
  background: #80deea;
}

абсолютные и относительные — Основы 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; }

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

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

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

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

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

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

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

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

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

Единицы CSS

❮ Предыдущая Далее ❯

Единицы CSS

CSS имеет несколько различных единиц измерения длины.

Многие свойства CSS принимают значения длины, например ширина , поля , отступ , размер шрифта и т. д.

Длина — это число, за которым следует единица длины, например 10px , 2em и т. д.

Пример

Установка различных значений длины, используя px (пиксели):

h2 {
  размер шрифта: 60 ​​пикселей;
}

p {
  размер шрифта: 25 пикселей;
высота строки: 50px;
}

Попробуйте сами »

Примечание: Между числом и единицей измерения не должно быть пробела. Однако, если значение 0 единицу измерения можно не указывать.

Для некоторых свойств CSS допускается отрицательная длина.

Существует два типа единиц длины: абсолютные и относительные .

Абсолютные длины

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

Абсолютные единицы длины не рекомендуются для использования на экране, поскольку размеры экрана сильно различаются. Однако их можно использовать, если известна среда вывода, например что касается макета печати.

Блок Описание
см сантиметра Попытайся
мм миллиметра Попытайся
в дюйма (1 дюйм = 96 пикселей = 2,54 см) Попытайся
пикселей * пикселя (1 пиксель = 1/96 дюйма) Попытайся
пт балла (1 балл = 1/72 от 1 дюйма) Попытайся
шт. пика (1 шт = 12 пт) Попытайся

* Пиксели (px) относятся к устройству просмотра. Для устройств с низким разрешением 1 пиксель — это один пиксель (точка) устройства на дисплее. Для принтеров и высокого разрешения экраны 1px подразумевает несколько пикселей устройства.

Относительная длина

Единицы относительной длины задают длину относительно другого свойства длины. Единицы относительной длины лучше масштабируются между разными средами рендеринга.

№
Блок Описание
эм Относительно размера шрифта элемента (2em означает удвоенный размер текущего шрифта) Попробуйте
бывший Относительно x-высоты текущего шрифта (используется редко) Попробуйте
ч Относительно ширины «0» (ноль) Попробуйте
рем Относительно размера шрифта корневого элемента Попробуйте
ВВ Относительно 1% ширины окна просмотра* Попробуйте
вх Относительно 1% высоты окна просмотра* Попробуй
об/мин Относительно 1% меньшего размера области просмотра* Попробуйте
вмакс Относительно 1% большего размера окна просмотра* Попробуйте
% Относительно родительского элемента Попробуйте

Совет: Единицы em и rem удобны для создания идеальных масштабируемая планировка!
* Viewport = размер окна браузера. Если окно просмотра 50см широкий, 1vw = 0,5см.

Поддержка браузера

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает единица длины.

Единица длины
em, ex, %, px, cm, mm, in, pt, pc 1,0 3,0 1,0 1,0 3,5
ч 27,0 9,0 1,0 7,0 20,0
рем 4,0 9,0 3,6 4.1 11,6
вх, вв 20,0 9,0 19,0 6,0 20,0
об/мин 20,0 12,0 19,0 6,0 20,0
вмакс 26,0 16,0 19,0 7,0 20,0

❮ Предыдущий Следующий ❯


Единицы CSS

Единицы CSS


[Единицы длины | Процентные единицы | Единицы измерения цвета | URL ]

Значение длины формируется из необязательных + или — , за которыми следует число, за которым следует двухбуквенное сокращение, обозначающее единицу измерения. В значении длины нет пробелов; напр. , 1,3 em не является допустимым значением длины, но 1,3 em является допустимым. Длина 0 не требует двухбуквенного идентификатора устройства.

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

  • em (ems, высота шрифта элемента)
  • ex (x-высота, высота буквы «х»)
  • px (в пикселях относительно разрешения холста)

Абсолютные единицы длины сильно зависят от среды вывода и поэтому менее полезны, чем относительные единицы. Доступны следующие абсолютные единицы измерения:

  • дюймов (дюймы; 1 дюйм = 2,54 см)
  • см (сантиметры; 1 см=10 мм)
  • мм (миллиметры)
  • часть (пункты; 1 pt = 1/72 дюйма)
  • шт. (пики; 1 шт.=12 шт.)

Процентное значение формируется необязательными + или — , за которыми следует число, за которым следует % . В процентном значении нет пробелов.

Процентные значения относятся к другим значениям, определенным для каждого свойства. Чаще всего процентное значение зависит от размера шрифта элемента.

Значение цвета — это ключевое слово или числовая спецификация RGB.

The 16 keywords are taken from the Windows VGA palette: aqua , black , blue , fuchsia , gray , green , lime , maroon , navy , olive , фиолетовый , красный , серебристый , бирюзовый , белый и желтый .

цвета RGB задаются одним из четырех способов:

  • #rrggbb ( напр. , #00cc00 )
  • #rgb ( например , #0c0 )
  • rgb(x,x,x) где x — целое число от 0 до 255 включительно ( например, , rgb(0,204,0) )
  • rgb(y%,y%,y%) , где y — число от 0,0 до 100,0 включительно (, например, , rgb(0%,80%,0%) )

Во всех приведенных выше примерах указан один и тот же цвет.

Дуглас Р. Джейкобсон также разработал удобную краткую справочную таблицу цветов RGB (61 кБ).

Значение URL-адреса определяется как url(foo) , где foo — это URL-адрес. URL-адрес может быть заключен в одинарные ( ‘ ) или двойные ( » ) кавычки и может содержать пробелы до или после URL-адреса (необязательно в кавычках).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *