16 css: 16 CSS Уроков с помощью Post-it® заметок

Leave a Comment / Css / By /

Содержание

важен ли порядок названий классов CSS в атрибуте «class» HTML-элементов / Хабр

У HTML-элементов на HTML-странице может быть необязательный глобальный атрибут class. Например:

<div>
  Какой-то текст.
</div>

Здесь у HTML-элемента div есть интересующий нас атрибут class.

С точки зрения стандарта языка HTML

По действующему стандарту языка HTML атрибут class HTML-элементов должен содержать значение, состоящее из набора (множества) названий (токенов) классов CSS, разделенных пробельными символами (символ пробела, символ горизонтальной табуляции, символы новой строки). В примере выше атрибут class содержит значение-строку имя-класса1 имя-класса2 имя-класса3, представляющее собой набор из трех названий классов CSS, разделенных символом пробела.

Понятие, о котором тут идет речь — набор из слов (токенов), разделенных пробельными символами (по-английски «set of space-separated tokens»). Само это понятие определено в стандарте языка HTML отдельно от определения атрибута 

class.

В определении понятия «set of space-separated tokens» сказано, что это строка, содержащая ноль или более слов (токенов), разделенных пробельными символами. Из этого я сделал вывод, что атрибут class по действующему стандарту HTML может не содержать ничего (содержать пустую строку). Также не будет нарушением действующего стандарта HTML, если этот атрибут будет содержать только пробельные символы (символ пробела, символ горизонтальной табуляции, символы новой строки).

Действующий стандарт HTML вообще практически не накладывает на набор названий классов CSS в атрибуте class HTML-элементов каких-либо ограничений. Не накладывается ограничение на дублирование названий классов CSS внутри атрибута class. Не накладывается каких-либо ограничений, касающихся порядка перечисления названий классов CSS внутри атрибута class.

То есть с точки зрения действующего стандарта HTML (в отличие от стандарта CSS, о чем речь пойдет далее) название класса, перечисленное в наборе названий классов внутри атрибута 

class HTML-элемента раньше (левее, выше), ничем не отличается от названия класса, перечисленного в том же наборе названий классов внутри атрибута class HTML-элемента позже (правее, ниже).

В примере выше с точки зрения действующего стандарта HTML названия классов имя-класса1, имя-класса2 и имя-класса3 в наборе названий имя-класса1 имя-класса2 имя-класса3 полностью равноправны, несмотря на то, что, к примеру, название имя-класса1 перечислено раньше (левее), чем имя-класса2 или имя-класса3. То же самое касается названия имя-класса2 по сравнению с названием имя-класса3.

Во что это выливается на практике?

Рассмотрим такой код на языке HTML (многоточием заменен неинтересный для предмета этой статьи код):

...
<head>
  ...
  <style>
    .имя-класса1 { color: green; }
    .имя-класса2 { color: red; }
    .имя-класса3 { border: 2px solid blue; }
  </style>
</head>
<body>
  <p>
    Какой-то текст1.
  </p>
  <p>
    Какой-то текст2.
  </p>
</body>
...

В теле этой HTML-страницы есть два параграфа (HTML-элемент p). Каждый из этих параграфов содержит атрибут class с набором из одних и тех же трех названий классов CSS, только перечисленных в разном порядке.

Описание стилей в классе имя-класса3 не конфликтует с другими классами. А вот описания стилей в классах имя-класса1 и имя-класса2 конфликтуют друг с другом (приписывают разные значения одному и тому же свойству HTML-элемента).

В итоге при любой перестановке названий классов CSS в атрибуте class HTML-элементов p браузер отобразит параграфы одинаково, в данном случае — с синей границей и текстом красного цвета. Это подтверждает наши выводы, сделанные выше из определений действующего стандарта HTML.

Почему же в данном случае в конфликте описаний стилей в классах имя-класса1 и имя-класса2 «победил» класс имя-класса2 (текст в параграфах отразился красным цветом)? Потому что при определении классов CSS внутри HTML-элемента style класс имя-класса2 описан позже (ниже), чем класс имя-класса1. Внутри HTML-элемента style действуют правила (стандарт) языка CSS. Это действие того самого «каскада», давшего первую букву аббревиатуре CSS (Cascading Style Sheets). Если менять местами определения классов CSS внутри HTML-элемента 

style (или внутри файла с кодом на языке CSS, если определения стилей вынесены в отдельный файл или файлы), то отображение HTML-страницы в браузере будет изменяться.

Влияние правил языка CSS

Всегда ли порядок названий классов в атрибуте «class» HTML-элемента не влияет на отображение HTML-страницы?

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

Дело в том, что в языке CSS можно определить селектор (отборщик) HTML-элементов так, что отбор HTML-элементов селектором будет зависеть от порядка перечисления названий классов CSS в атрибуте class HTML-элементов. Это сделает порядок перечисления названий классов в атрибуте class HTML-элементов значимым для отображения HTML-страницы в браузере.

=»имя-класса2 имя-класса1″] { color: red; } .имя-класса3 { border: 2px solid blue; } </style> </head> <body> <p> Какой-то текст1. </p> <p> Какой-то текст2. </p> </body> …

Это тот же код HTML, что и в первом примере, только здесь изменены два первых селектора внутри HTML-элемента style. Даже описания стилей остались нетронутыми. Однако, теперь браузер отображает в первом параграфе текст зеленым цветом, а во втором параграфе — красным цветом.

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

Заключение

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

Порядок названий классов CSS в атрибуте class HTML-элементов на HTML-странице может влиять (может быть важным) на отображение этой HTML-страницы в браузере. Но следует понимать, что это влияние определяется не правилами (стандартом) языка HTML, а тем, как описаны стили для данной HTML-страницы с помощью языка CSS (они могут быть описаны в разных местах — внутри HTML-элемента style, внутри внешнего файла (нескольких файлов) и так далее).

Единицы измерения — CSS — Дока

  1. Единицы измерения длины или расстояния
    1. Относительные величины
    2. Абсолютные величины
  2. Единицы измерения углов
  3. Единицы измерения времени
  4. Единицы, связанные с разрешением экрана
  5. Проценты

Каждое CSS-правило состоит из одной или нескольких пар «свойство-значение». В зависимости от свойства значение может быть, например, числом, или ключевым словом, или несколькими числами с единицами измерения (например, 45deg или 100px). Рассмотрим основные единицы измерения.

Единицы измерения длины или расстояния

Секция статьи «Единицы измерения длины или расстояния»

Относительные величины

Секция статьи «Относительные величины»

Используются для задания размера или расстояния относительно чего-либо. Например, vh считается относительно высоты вьюпорта (области просмотра страницы в окне браузера).

  • em задаёт величину относительно вычисленного размера шрифта элемента. Если для элемента font-size: 20px, то 2em будут эквивалентны 40px. При задании размера шрифта в em он считается относительно размера шрифта родительского блока.
  • rem рассчитывается относительно размера шрифта корневого элемента. Для веб-страницы это <html>. По умолчанию размер шрифта для <html> равен 16px. При таких условиях 2rem эквивалентны 32px.
  • vh задаёт размер в процентах от высоты вьюпорта. 1vh составляет 1% от высоты.
  • vw задаёт размер в процентах от ширины вьюпорта. 1vw составляет 1% от ширины.
  • vmin считается относительно меньшей стороны вьюпорта.
    Если ширина вьюпорта больше высоты, то vmin будет считаться относительно высоты. И наоборот. 1vmin составляет 1% от меньшей стороны вьюпорта.
  • vmax считается относительно большей стороны вьюпорта. 1vmax составляет 1% от большей стороны.
  • ex задаёт величину относительно метрики шрифта x-height. Так называется расстояние между базовой линией шрифта и средней линией строчных букв. Обычно это высота буквы x в шрифте, отсюда и название x-height. Эту экзотическую величину можно использовать, например, при стилизации верхних или нижних индексов. В примере ниже свойство bottom со значением 1ex поднимет верхний индекс на высоту строчных букв:
sup {  position: relative;  bottom: 1ex;}
          
 
sup {
  position: relative;
  bottom: 1ex;
}
Открыть демо в новой вкладке
  • cap считается относительно высоты заглавных букв шрифта.
  • ch задаёт величину относительно ширины символа 0 (ноль) в шрифте. В моноширинных (с фиксированной шириной символа) шрифтах (Courier, Menlo, Monaco и других) указание размера 10ch будет в точности соответствовать ширине 10 символов. В других шрифтах будет наблюдаться расхождение, ведь, например, ширина цифры 1 меньше, а ширина буквы Ш — больше ширины символа 0.
  • ic — это эквивалент ch в восточных языках (китайском, корейском, японском). Задаёт размер относительно размера иероглифа 水 (вода).
  • lh задаёт размер относительно межстрочного интервала. Если прописано свойство line-height: 16px
    , то 2lh эквивалентно 32px.
  • rlh то же, что и lh, но относительно line-height элемента <html>.

Абсолютные величины

Секция статьи «Абсолютные величины»

Абсолютные величины ни от чего не зависят и привязаны к физическим единицам измерения: дюймам или сантиметрам. Этот факт имеет исторические предпосылки. Когда появились первые программы предпечатной подготовки, возникла необходимость понимать, как картинка на экране будет соответствовать напечатанному варианту. Экраны мониторов в то время были примерно одинаковые, и оказалось, что одному дюйму на экране соответствуют 72 экранных точки. Именно это соотношение зафиксировано в единице измерения pt. С развитием технологий улучшались экраны и их разрешение, в один дюйм стало умещаться 96 точек, и это было зафиксировано в px.

  • px соответствуют пикселям на экране. 1px интерпретируется как 1/96 дюйма.
  • cm — сантиметры. 1cm = 96px / 2.54.
  • in — дюймы. 1in = 96px = 2.54cm.
  • mm — миллиметры. 1mm = 1/10cm.
  • Q — четверть миллиметра. 1Q = 1/40cm.
  • pc — пики. 1pc = 1/16in.
  • pt — пункты. 1pt = 1/72in.

Абсолютные величины, отличные от пикселей, удобно использовать для вывода на печать.

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

Единицы измерения углов

Секция статьи «Единицы измерения углов»

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

  • deg — градусы угла. Полная окружность содержит 360 градусов. В тригонометрии 0° соответствует пересечению окружности с осью x, и градусы отсчитываются против часовой стрелки. В CSS 0deg соответствует пересечению окружности с осью y, а градусы отсчитываются по часовой стрелке:
  • grad — градианы. 1/100 от прямого угла (0.9°). Полная окружность содержит 400 градиан. Эта единица измерения чуть удобнее градусов в плане практических расчётов.
  • rad — радианы. Полная окружность содержит 2π (~6.2832) радиан.
  • turn — оборот. Полная окружность соответствует одному обороту (1turn). Поворот элемента на 90 градусов соответствует 0.25turn.

Единицы измерения времени

Секция статьи «Единицы измерения времени»

Используются для задания длительности анимации или перехода в свойствах animation и transition.

  • ms — миллисекунда.
  • s — секунда. 1s = 1000ms.

Единицы, связанные с разрешением экрана

Секция статьи «Единицы, связанные с разрешением экрана»

Используются для указания плотности пикселей (разрешения экрана) в медиавыражениях.

  • dpi — указывает плотность пикселей в точках на дюйм (dots per inch). Обычные экраны имеют плотность пикселей 72 или 96dpi, но при печати это разрешение гораздо выше (300 и более точек на дюйм). 1dpi = 0.39dpcm. В примере ниже изменим размер шрифта при печати на устройствах с плотностью пикселей больше 300:
@media print and (min-resolution: 300dpi) {  .element {    font-size: 8pt;  }}
          
 
@media print and (min-resolution: 300dpi) {
  .element {
    font-size: 8pt;
  }
}
  • dpcm — плотность пикселей в точках на сантиметр. 1dpcm = 2.54dpi.
  • dppx, x — описывает плотность в точках на px. Поскольку соотношение in и px равно 1/96, 1dppx = 96dpi.

Проценты

Секция статьи «Проценты»

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

Например, при указании width: 50% ширина элемента будет высчитана как 50% (половина) от ширины родителя. Но если мы укажем в процентах положение фона background-position-x: 30%, это значение будет высчитано относительно ширины самого элемента.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

currentColor

alt + ←

→

vw, vh, vmin, vmax

alt + →

Почему CSS Grid лучше Bootstrap для создания макетов

Это перевод статьи «Why CSS Grid is better than Bootstrap for creating layouts» от Per Harald Borgen.

  • Почему CSS Grid лучше Bootstrap для создания макетов
    • Разметка станет проще
    • Bootstrap
    • CSS Grid
    • Намного больше гибкости
      • CSS Grid
      • Bootstrap
    • Больше никаких ограничений 12 колонками
    • Поддержка браузера
    • Заключение

CSS Grid — это новый способ создания макетов в интернете. Впервые полноценная система вёрстки доступна прямо в браузере, что даёт массу преимуществ.

Эти преимущества становятся особенно выразительными, если вы сравните CSS Grid с самым популярным фреймворком Bootstrap. Вы можете не только создавать макеты, которые раньше были невозможны без JavaScript, но ваш код станет легче поддерживать и понимать.

Давайте посмотрим на три главных причины, почему я думаю, что CSS Grid превосходит Bootstrap.

Разметка станет проще

Замена Bootstrap на CSS Grid сделает HTML более чистым. Хотя это не самое важное преимущество, оно, вероятно, первое, которое вы заметите.

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

(Я добавил в пример немного дизайна. Однако это не имеет никакого отношения к сравнению CSS Grid и Bootstrap, поэтому я сохраню эту часть CSS снаружи своих примеров).

Bootstrap

Давайте для начала рассмотрим разметку, необходимую для создания этого сайта в Bootstrap.

Тут мне хочется, чтобы вы обратили внимание вот на что:

  1. Каждая строчка должна быть с отдельным тэгом <div> .
  2. Для обозначения макета должны использоваться имена классов (col-xs-2).
  3. Когда этот шаблон усложняется, HTML тоже.

Если это адаптивный сайт, тэги выглядят как правило ещё хуже:

CSS Grid

Теперь давайте посмотрим на способ реализации того же в CSS Grid. Вот HTML:

Я мог использовать семантические элементы, но решил придерживаться div, чтобы сравнение с Bootstrap выглядело понятнее.

Можно заметить сразу, что эта разметка проще. Уродливые имена классов и дополнительные тэги div для каждой строчки — в прошлом. Это просто контейнер для сетки и позиции внутри неё.

И в отличие от Bootstrap, эта разметка не станет слишком сложной с ростом сложности макета страницы.

В примере с Bootstrap от вас не требовалось добавлять CSS, в CSS Grid в этом конечно есть необходимость. Если конкретно, вам необходимо добавить это:

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

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

Намного больше гибкости

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

Другими словами — изменить макет с такого:

на такой:

CSS Grid

Делать это с CSS Grid очень просто. Мы добавляем media-запрос и перемешиваем разные блоки как хотим:

Возможность создания макета подобным образом — не заботясь о том, как написан HTML — называется независимостью от порядка в коде (source order independence), и это гигантская победа для разработчиков и дизайнеров.

CSS Grid позволяет превратить HTML в то, чем он должен был быть. В разметку контента, а не визуальность, которая предназначена для CSS.

Bootstrap

Если бы мы захотели сделать то же самое в Bootstrap, нам бы потребовалось менять HTML. Нам нужно было бы поднять тег menu в верхний ряд, в добавок к header, потому что menu во втором ряду в заложниках.

Сделать такое с наличием медиа-запроса — не тривиальная задача. Такое можно провернуть только вместе с HTML и CSS, и вам бы пришлось возиться с JavaScript.

Этот пример показывает огромное преимущество CSS Grid, которое я испытал на себе.

Больше никаких ограничений 12 колонками

Это не самая крупная проблема, но она множество раз выводила из себя. Поскольку Bootstrap grid разделён на 12 колонок, у вас появятся проблемы, если вы захотите макет из пяти. Или семи. Или девяти. Или из числа, которое не двенадцать.

С CSS Grid всё не так. Вы можете сделать свой собственный макет из стольких колонок из скольких хотите. Вот макет из семи колонок.

Это делается установкой значения repeat(7, 1fr) для grid-template-columns, вот так:

Возможно, есть хак-способов сделать подобное в Bootstrap… И я в курсе, что Bootstrap 4 использует Flexbox, который даёт возможность такой гибкости, но он всё ещё никак не выйдет из бета-версии.

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

Перед тем, как завершить эту статью, естественно, нужно поговорить о поддержке браузеров. На момент написания этой статьи, 75% глобального веб-трафика поддерживает CSS Grid.

Но, перед тем, как вы целиком откажетесь от мысли пользоваться CSS Grid, я советую прислушаться к тому, что говорит Мортен Ранд-Хендриксен об этом. Он утверждает, что CSS Grid — это возможность переосмыслить то, как мы представляем обратную совместимость:

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

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

Заключение

Я хочу поделиться цитатой Джен Симмонс, разработчика Mozilla. Она описывает то же чувство, которое испытал я к CSS Grid, после того как разобрался в нём:

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

16 модулей CSS, которые должен знать каждый разработчик

Создание и управление контентом, технологии

Гэри Стивенс | 1 сентября 2022 г.

0

Комментарии

7 минут чтения

Знание каскадных таблиц стилей (CSS) — неотъемлемая часть арсенала любого веб-разработчика. CSS позволяет создавать и изменять HTML-код, включая код в темах WordPress.

Когда дело доходит до использования CSS, существует широкий спектр «свойств», таких как поля, размер шрифта и так далее. Чтобы изменить эти свойства, вы должны использовать блоки CSS для создания хорошо закодированных, совместимых с разными браузерами веб-сайтов. Эти единицы можно использовать для всего: от размера шрифта до позиционирования.

В этом посте мы рассмотрим 16 различных абсолютных, относительных единиц измерения и единиц измерения области просмотра в CSS и то, как они работают.

Давайте углубимся.

Что такое единицы CSS и как они работают?

CSS-единицы позволяют изменять дизайн веб-сайта, поэтому важно понимать, как они работают. Существует три разных типа единиц CSS:

  • Абсолютные единицы: px, pt, PC, in, cm, mm
  • Относительные единицы: em, rem, %, ex, ch, fr
  • Единицы области просмотра: VW, vh , vmin, vmax

Давайте более подробно рассмотрим каждый из них.

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

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

Наиболее распространенными абсолютными единицами являются:

  • PX
  • PT
  • PC
  • в
  • см
  • MM

1. Pixels (PX)

878888888 гг. цифровой дизайн. Пиксели для цифрового дизайна — то же, что дюймы для традиционного печатного дизайна. Пиксель можно определить как 1/96 дюйма.

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

Хотя пиксель CSS не совпадает с физическим пикселем, он достаточно близок, чтобы мы могли использовать его для измерений.

2. Очки (pt) и пики (pc)

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

Точка равна 1/72 дюйма, а пика — 1/6 дюйма.

3. Дюймы (дюймы), сантиметры (см) и миллиметры (мм)

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

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

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

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

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

1. Проценты (%)

Начнем с самой известной относительной единицы, процентов . Все, что представлено в CSS с помощью этой единицы измерения, относится к:

  • Родительский элемент (содержащий элемент, который включает в себя «дочерние» элементы), который связан с
  • Если для дочернего элемента установлено абсолютное положение, последний родительский элемент с относительным позиционированием будет определять его положение.
  • Корневой элемент (элемент верхнего уровня, от которого происходят все остальные элементы), если для положения задано значение «фиксированное».

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

2. Ex/Ch

Затем у нас есть ex и ch , специальные единицы, которые полезны только при работе с моноширинными шрифтами.

Ex относится к высоте буквы x в текущем шрифте. Ch относится к ширине буквы 0 в текущем шрифте. Таким образом, оба являются измерениями размера персонажа либо по оси x, либо по оси y. И да, на эти измерения влияет размер шрифта элемента.

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

В то время как ex и другие относительные единицы поддерживаются на большинстве устройств, ch не так хорош, хотя он по-прежнему работает почти в 98% случаев.

3. Fr

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

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

4. Em/Rem

Наконец, вот две единицы измерения, которые предпочитают большинство разработчиков — em и rem. Если вы когда-либо создавали современный, хорошо разработанный веб-сайт, вы, несомненно, знакомы с ними.

Em — единица измерения, равная размеру шрифта элемента. Итак, если у вас размер шрифта 17px, то 1em будет 17px. Таким образом, когда вы создаете вещи, они будут выглядеть одинаково на разных устройствах и в разных браузерах.

Однако работа с ems может быть сложной. Это связано с тем, что размер шрифта передается дочерним элементам всякий раз, когда он установлен, поэтому вы можете быстро потерять из виду, чему равен размер шрифта (особенно, когда вы устанавливаете размер шрифта с помощью ems, что делает его относительным к размеру шрифта элемента). родитель). Вот тут-то и появляются рем.

Только корневой элемент может влиять на rem в CSS. Он похож на rem в том, что он ограничен размером шрифта, но зависит от размера шрифта корневого элемента. Это также означает, что с помощью одного свойства вы можете управлять размером своего веб-сайта. Rem имеет менее полезную поддержку, чем em, но это самая популярная относительная единица в CSS среди разработчиков и предпочтительная альтернатива em.

Единицы области просмотра

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

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

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

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

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

Если у вас все еще есть проблемы и вам нужна дополнительная помощь, попробуйте Namecheap Site Maker, где мы поможем вам создать сайт вашей мечты практически без опыта!

3,7 3 голосов

Рейтинг статьи

Эта статья была полезной?

4

16 единиц CSS, которые должен знать каждый хороший веб-разработчик | by Nehal Khan

Учебное пособие по абсолютным, относительным единицам измерения и единицам измерения окна просмотра в CSS

Различные единицы измерения CSS (Изображение создано автором | Логотип предоставлен: icons8. com)

В CSS существует множество единиц измерения, которые вы можете использовать используйте как px , pt , em , rem , % , vh , vw и многие другие. Поначалу может быть немного запутанно, когда и где использовать эти разные единицы измерения.

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

Начнем.

Абсолютный

пикселей: Пиксель — наиболее часто используемое измерение в CSS. Когда-то пиксель представлял собой фактический пиксель дисплея, но теперь дисплеи стали намного плотнее. Итак, теперь px можно определить как 1/96 дюйма.

pt: Пункт — еще один часто используемый размер шрифта. Пункт равен 1/72 дюйма.

шт.: Пика — абсолютная единица измерения в CSS. Пика составляет 1/6 дюйма.

in: in обозначает фактический дюйм в метрической системе и равен 2,54см.

см: Обозначает сантиметр, равный 1/100 метра.

мм: Миллиметр — еще одна абсолютная единица измерения, равная 1/1000 метра или 1/10 сантиметра.

Размер шрифта наследуется от значения браузера по умолчанию, т. е. 16 пикселей, если оно не определено в правилах CSS.

Фрагмент кода, показывающий использование различных абсолютных единиц в CSSOutput для разных абсолютных единиц (скриншот автора)

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

Relative

em: em — это относительная единица, вычисляемая на основе размера, заданного свойству из его прямого родительского элемента. Рассмотрим div, в котором вы указали размер шрифта 16px. Все элементы в этом div и его дочерних элементах будут основаны на этих 16px. Итак, если вы используете 1.5em внутри div, он будет вычисляться как 24px.

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

Если размер шрифта не указан явно, этот элемент унаследует его от родительского элемента. Наследование продолжается вплоть до корневого элемента.

rem: rem — это относительная единица, вычисляемая на основе размера, присвоенного свойству из корневого элемента. Таким образом, где бы вы ни использовали rem , он будет вычислять значение на основе соответствующего значения на корневом уровне.

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

%: Процентное значение вычисляется путем получения ссылки на значение свойства из его прямого родительского элемента. Элементы на корневом уровне считают корневые значения эталонными. И если он находится внутри div, значения, указанные для этого div, будут ссылкой.

Фрагмент кода, показывающий использование единиц em, rem и % Вывод для единиц em, rem и % (скриншот автора) значение по умолчанию 16px за пределами div. Итак, em и % единиц будут иметь две разные ссылки, так как у них есть два разных родительских элемента. Принимая во внимание, что rem берет ссылку на размер шрифта по умолчанию корневого элемента, поэтому он будет одинаковым на всей странице.

ex: ex относится к высоте символа «x» в используемом вами шрифте. Поэтому, когда вы используете 1ex , значением будет высота символа «x» вашим шрифтом.

Фрагмент кода для использования ex unitOutput для примера ex unit (скриншот автора)

ch: ch относится к ширине нулевого символа «0» в используемом вами шрифте. Поэтому, когда вы используете 1ch , значением будет ширина «0» в вашем шрифте. Ширина всех символов в моноширинных шрифтах будет одинаковой, а в случае пропорциональных шрифтов она будет разной.

Фрагмент кода для использования ch unitOutput для примера единицы ch (скриншот автора)

fr: Единица fr относится к дробной единице и является относительно новой единицей в CSS. Предположим, у нас есть случай, когда нам нужно разделить заданное пространство на равные части, используя интервал, чтобы различать их, чтобы мы могли использовать % единиц. Но это разделит пространство на равные части, но не будет учитывать зазор, который мы предоставили при расчете равных частей, поэтому в макете возникает переполнение.

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

Фрагмент кода для использования единицы fr в gridOutput для примера единицы fr (скриншот автора) части. Когда мы используем 1vh , то это означает, что он будет занимать 1% высоты области просмотра в текущем экземпляре. Поскольку единица vh относится к высоте области просмотра, она будет вести себя одинаково везде, где мы ее используем.

vw: vw относится к ширине области просмотра, а полная ширина области просмотра делится на 100 частей. Когда мы используем 1vw , это означает, что он будет занимать 1% ширины области просмотра в текущем экземпляре. С vw единица относится к ширине области просмотра, она будет вести себя одинаково везде, где мы ее используем.

vmin: vmin относится к наименьшему значению между текущими vh и vw . Когда вы используете 1vmin , это будет 1% в зависимости от того, какое значение меньше во время между vh и vw .

vmax: vmax относится к наибольшему значению между текущими vh и vw . Когда вы используете 1vmax , это будет 1% в зависимости от того, какое значение в настоящее время больше между vh и vw .

Фрагмент кода, показывающий различные единицы области просмотра и их использованиеВывод для разных единиц области просмотра (скриншот автора)

Это были разные абсолютные, относительные единицы и единицы области просмотра в CSS. Надеюсь, теперь вы лучше понимаете, что они делают и когда их использовать. И надеюсь, вы нашли их полезными.

Спасибо за внимание!

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

Присоединяйтесь к Medium по моей реферальной ссылке — Nehal Khan

Как член Medium часть вашего членского взноса идет авторам, которых вы читаете, и вы получаете полный доступ к каждой истории…

nehalk.medium.com

Спасибо, что являетесь частью нашего сообщества! Больше контента в публикации Level Up Coding.
Подписывайтесь: Twitter, LinkedIn, Информационный бюллетень
Level Up меняет рекрутинг технических специалистов ➡️ Присоединяйтесь к нашему коллективу талантов

Margin — Tailwind CSS

m-0 margin: 0px;
mx-0 поле слева: 0px; поле справа: 0px;
my-0 margin-top: 0px; нижняя граница: 0px;
mt-0 margin-top: 0px;
mr-0 поле справа: 0px;
mb-0 поле внизу: 0px;
ml-0 поле слева: 0px;
m-px поле: 1px;
mx-px поле слева: 1px; поле справа: 1px;
my-px margin-top: 1px; нижняя граница: 1px;
mt-px поле-верх: 1px;
mr-px поле справа: 1px;
mb-px поле внизу: 1px;
ml-px поле слева: 1px;
m-0,5 поле: 0,125 бэр; /* 2 пикселя */
mx-0,5 поле слева: 0,125 бэр; /* 2 пикселя */ поле справа: 0,125 бэр; /* 2 пикселя */
my-0,5 поле-верх: 0,125 бэр; /* 2 пикселя */ поле-нижнее: 0,125 бэр; /* 2 пикселя */
mt-0,5 поле-верх: 0,125 бэр; /* 2 пикселя */
mr-0,5 поле справа: 0,125rem; /* 2 пикселя */
мб-0,5 поле-нижнее: 0,125 бэр; /* 2 пикселя */
мл-0,5 поле слева: 0,125 бэр; /* 2 пикселя */
м-1 поле: 0,25 бэр; /* 4 пикселя */
mx-1 поле слева: 0,25 бэр; /* 4 пикселя */ поле справа: 0,25 бэр; /* 4 пикселя */
my-1 поле-верх: 0,25 бэр; /* 4 пикселя */ поле-нижнее: 0,25 бэр; /* 4 пикселя */
т-1 поле-верх: 0,25 бэр; /* 4 пикселя */
mr-1 поле справа: 0,25rem; /* 4 пикселя */
mb-1 поле внизу: 0,25 бэр; /* 4 пикселя */
мл-1 поле слева: 0,25 бэр; /* 4 пикселя */
м-1,5 поле: 0,375 бэр; /* 6 пикселей */
mx-1,5 поле слева: 0,375 бэр; /* 6 пикселей */ поле справа: 0,375 бэр; /* 6 пикселей */
my-1,5 поле-верх: 0,375rem; /* 6 пикселей */ поле-нижнее: 0,375 бэр; /* 6 пикселей */
мт-1,5 верхнее поле: 0,375 бэр; /* 6 пикселей */
мр-1,5 поле справа: 0,375 бэр; /* 6 пикселей */
мб-1,5 поле-нижнее: 0,375 бэр; /* 6 пикселей */
мл-1,5 поле слева: 0,375 бэр; /* 6 пикселей */
м-2 поле: 0,5 бэр; /* 8 пикселей */
mx-2 поле слева: 0,5rem; /* 8 пикселей */ край справа: 0,5 бэр; /* 8 пикселей */
my-2 margin-top: 0,5rem; /* 8 пикселей */ поле-нижнее: 0. 5rem; /* 8 пикселей */
метр-2 поле-верх: 0,5 бэр; /* 8 пикселей */
mr-2 поле справа: 0,5rem; /* 8 пикселей */
mb-2 поле-нижнее: 0,5rem; /* 8 пикселей */
мл-2 поле слева: 0,5 бэр; /* 8 пикселей */
м-2,5 поле: 0,625 бэр; /* 10 пикселей */
mx-2,5 поле слева: 0,625 бэр; /* 10 пикселей */ поле справа: 0,625 бэр; /* 10 пикселей */
my-2,5 поле-верх: 0,625 бэр; /* 10 пикселей */ поле-нижнее: 0,625 бэр; /* 10 пикселей */
мт-2,5 верхнее поле: 0,625 бэр; /* 10 пикселей */
mr-2,5 поле справа: 0,625rem; /* 10 пикселей */
мб-2,5 поле-нижнее: 0,625 бэр; /* 10 пикселей */
мл-2,5 поле слева: 0,625 бэр; /* 10 пикселей */
м-3 запас: 0,75 бэр; /* 12 пикселей */
mx-3 поле слева: 0,75 бэр; /* 12 пикселей */ поле-справа: 0,75 бэр; /* 12 пикселей */
my-3 margin-top: 0,75rem; /* 12 пикселей */ поле-нижнее: 0,75 бэр; /* 12 пикселей */
т-3 поле-верхнее: 0,75 бэр; /* 12 пикселей */
mr-3 поле справа: 0,75rem; /* 12 пикселей */
mb-3 поле внизу: 0,75 бэр; /* 12 пикселей */
мл-3 поле слева: 0,75 бэр; /* 12 пикселей */
м-3,5 поле: 0,875 бэр; /* 14 пикселей */
mx-3,5 поле слева: 0,875 бэр; /* 14 пикселей */ поле справа: 0,875 бэр; /* 14 пикселей */
my-3,5 поле-верх: 0,875rem; /* 14 пикселей */ поле-внизу: 0,875 бэр; /* 14 пикселей */
мт-3,5 верхнее поле: 0,875 бэр; /* 14 пикселей */
mr-3,5 поле справа: 0,875rem; /* 14 пикселей */
мб-3,5 поле-нижнее: 0,875 бэр; /* 14 пикселей */
мл-3,5 поле слева: 0,875 бэр; /* 14 пикселей */
м-4 поля: 1 бэр; /* 16 пикселей */
mx-4 поле слева: 1rem; /* 16 пикселей */ поле справа: 1re; /* 16 пикселей */
my-4 margin-top: 1rem; /* 16 пикселей */ нижняя граница: 1re; /* 16 пикселей */
mt-4 поле-вверху: 1rem; /* 16 пикселей */
mr-4 поле справа: 1rem; /* 16 пикселей */
mb-4 поле-нижнее: 1rem; /* 16 пикселей */
мл-4 поле слева: 1 бэр; /* 16 пикселей */
m-5 поля: 1,25 бэр; /* 20 пикселей */
mx-5 поле слева: 1,25 бэр; /* 20 пикселей */ поле справа: 1,25 бэр; /* 20 пикселей */
my-5 поле-верх: 1,25 бэр; /* 20 пикселей */ поле-нижнее: 1,25 бэр; /* 20 пикселей */
mt-5 поле-вверху: 1,25 бэр; /* 20 пикселей */
mr-5 поле справа: 1,25 бэр; /* 20 пикселей */
mb-5 поле внизу: 1,25 бэр; /* 20 пикселей */
ml-5 поле слева: 1,25 бэр; /* 20 пикселей */
m-6 поле: 1,5 бэр; /* 24 пикселя */
mx-6 поле слева: 1,5 бэр; /* 24 пикселя */ поле справа: 1,5 бэр; /* 24 пикселя */
my-6 поле-верх: 1,5 бэр; /* 24 пикселя */ поле-нижнее: 1. 5rem; /* 24 пикселя */
mt-6 поле-вверху: 1,5 бэр; /* 24 пикселя */
mr-6 поле справа: 1,5 бэр; /* 24 пикселя */
mb-6 поле внизу: 1,5 бэр; /* 24 пикселя */
ml-6 поле слева: 1,5 бэр; /* 24 пикселя */
m-7 поле: 1,75 бэр; /* 28 пикселей */
mx-7 поле слева: 1,75 бэр; /* 28 пикселей */ поле справа: 1,75 бэр; /* 28 пикселей */
my-7 поле-верх: 1,75 бэр; /* 28 пикселей */ поле-внизу: 1,75 бэр; /* 28 пикселей */
mt-7 поле вверху: 1,75 бэр; /* 28 пикселей */
mr-7 поле справа: 1,75 бэр; /* 28 пикселей */
mb-7 поле внизу: 1,75 бэр; /* 28 пикселей */
мл-7 поле слева: 1,75 бэр; /* 28 пикселей */
m-8 поля: 2rem; /* 32 пикселя */
mx-8 поле слева: 2rem; /* 32 пикселя */ поле справа: 2re; /* 32 пикселя */
my-8 margin-top: 2rem; /* 32 пикселя */ поле внизу: 2re; /* 32 пикселя */
mt-8 поле-верх: 2rem; /* 32 пикселя */
mr-8 поле справа: 2rem; /* 32 пикселя */
mb-8 поле внизу: 2rem; /* 32 пикселя */
ml-8 поле слева: 2rem; /* 32 пикселя */
m-9 поле: 2,25 бэр; /* 36 пикселей */
mx-9 поле слева: 2,25 бэр; /* 36 пикселей */ поле справа: 2,25 бэр; /* 36 пикселей */
my-9 поле-верх: 2,25 бэр; /* 36 пикселей */ поле-нижнее: 2,25 бэр; /* 36 пикселей */
mt-9 поле вверху: 2,25 бэр; /* 36 пикселей */
mr-9 поле справа: 2,25 бэр; /* 36 пикселей */
mb-9 поле внизу: 2,25 бэр; /* 36 пикселей */
ml-9 поле слева: 2,25 бэр; /* 36 пикселей */
m-10 поле: 2,5 бэр; /* 40 пикселей */
mx-10 поле слева: 2,5 бэр; /* 40 пикселей */ поле справа: 2,5 бэр; /* 40 пикселей */
my-10 margin-top: 2,5rem; /* 40 пикселей */ поле-нижнее: 2. 5rem; /* 40 пикселей */
mt-10 поле-вверху: 2,5 бэр; /* 40 пикселей */
mr-10 поле справа: 2,5 бэр; /* 40 пикселей */
mb-10 поле внизу: 2,5 бэр; /* 40 пикселей */
мл-10 поле слева: 2,5 бэр; /* 40 пикселей */
m-11 поле: 2,75 бэр; /* 44 пикселя */
mx-11 поле слева: 2,75 бэр; /* 44 пикселя */ поле справа: 2,75 бэр; /* 44 пикселя */
my-11 поле-верх: 2,75 бэр; /* 44 пикселя */ поле-нижнее: 2,75 бэр; /* 44 пикселя */
mt-11 поле вверху: 2,75 бэр; /* 44 пикселя */
mr-11 поле справа: 2,75 бэр; /* 44 пикселя */
мб-11 поле-нижнее: 2,75 бэр; /* 44 пикселя */
мл-11 поле слева: 2,75 бэр; /* 44 пикселя */
m-12 поля: 3rem; /* 48 пикселей */
mx-12 поле слева: 3rem; /* 48 пикселей */ поле-справа: 3re; /* 48 пикселей */
my-12 поле-верх: 3rem; /* 48 пикселей */ поле-нижнее: 3re; /* 48 пикселей */
mt-12 поле-верх: 3rem; /* 48 пикселей */
мр-12 поле-справа: 3rem; /* 48 пикселей */
mb-12 поле-нижнее: 3rem; /* 48 пикселей */
ml-12 поле слева: 3rem; /* 48 пикселей */
m-14 поле: 3,5 бэр; /* 56 пикселей */
mx-14 поле слева: 3,5 бэр; /* 56 пикселей */ край справа: 3,5 бэр; /* 56 пикселей */
my-14 margin-top: 3.

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

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