Единицы размеров в css

Use em or px for font sizes

CSS inherited the units (point) and (pica) from typography. Printers have traditionally
used those and similar units in preference to or
. In CSS there is no reason to use , use whichever unit you prefer. But there is a good
reason to use neither nor any other absolute
unit and only use and .

Here are a few lines of different thickness. Some or all of
them may look sharp, but at least the 1px and 2px lines should be
sharp and visible:

0.5pt,
1px,
1pt,
1.5px, 2px

If the first four lines all look the same (or if the 0.5pt line
is missing), you are probably looking at a computer monitor that
cannot display dots smaller than 1px. If the lines appear to
increase in thickness, you are probably looking at this page on a
high-quality computer screen or on paper. And if 1pt looks thicker
than 1.5px, you probably have a handheld screen.

The magic unit of CSS, the , is a often a good
unit to use, especially if the style requires alignment of text to
images, or simply because anything that is 1px wide or a multiple
of 1px is guaranteed to look sharp.

But for font sizes it is even better to use .
The idea is (1) to not set the font size of the BODY element (in
HTML), but use the default size of the device, because that is a
size that the reader can comfortably read; and (2) express font
sizes of other elements in : to make the H1 2½ times as big as the normal, body
font.

The only place where you could use (or or ) for setting a font size is in
style sheets for print, if you need to be sure the printed font is
exactly a certain size. But even there using the default font size
is usually better.

Using rem Units for Scaling Documents

A third use we can find for rem units is to build scalable components. By expressing widths, margins, and padding in rem units, it becomes possible to create an interface that grows or shrinks in tune with the root font size. Let’s see how this thing works using a couple of examples.

In this first example, we change the root font size using media queries. Just like in the previous section, the purpose is to customize the reading experience for the device used. As element padding values and margins are expressed using rem, the entire component scales with the device size.

Let’s see another:

See the Pen Dynamic Sizing of Modules with Rem Units by SitePoint (@SitePoint) on CodePen.

In the second example we do the same alteration using JavaScript. This time the user has control over the size of the interface, adjusting it to fit his needs. Add a way to store these custom values (using either a database, cookies or local storage) and you have the base of a personalization system based on user preferences.

Способы определения цветов CSS или как в CSS задать цвет элементам

Все способы задания цветов CSS базируются на одном принципе: в файле стилей для селектора указывается свойство color и его значение. А вот сами значения могут задаваться в различном формате.

Задание цветов CSS через шестнадцатиричный формат

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

Как в CSS задать цвет через RGB

Следующий формат, при помощи которого задаются цвета CSS — rgb (red, green, blue). Значения чисел в этом формате представляют собой процентное соотношение от 0 до 100%, но наиболее широкое распространение получило представление значения чисел в диапазоне от 0 до 255.

Определение цветов CSS через классические названия

Наиболее простым способом задания цветов CSS является определение его через классическое название. Существует 17 определений цветов. Большинство браузеров поддерживают также 117 так называемых svg-цветов, или x11. Их перечень вы можете посмотреть здесь. Задаются такие цвета CSS очень легко.

Способ в CSS задать цвет с помощью HSL

Еще один формат задания цветов CSS — HSL (hue — оттенок, saturate — насыщенность, lightness — светлота). Оттенок определяется на цветовом круге, задается в градусах от 0 до 359, а насыщенность и светлота задаются в процентах от 0 до 100%.

Как в CSS задать цвет с прозрачностью

В RGB и HSL можно добавить также альфа-канал, который будет определять прозрачность цвета, задается он числом в диапазоне от 0 до 1.

Относительные единицы измерений

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

Единица	Относительно чего измеряется
%	% от высоты шрифта родительского элемента
em	Высота шрифта текущего элемента (по умолчанию в браузерах обычно =16px)
rem	Размер шрифта корневого элемента
ex	Высота символа «x» шрифта элемента в нижнем регистре
ch	Ширина символа «0» (ZERO, U + 0030) в шрифте элемента
vw	1% ширины окна просмотра
vh	1% высоты окна просмотра
vmin	1% меньшего размера окна просмотра, т.е. меньшее значение из 1vw или 1vh.
vmax	1% большего размера окна просмотра, т.е. большее значение из 1vw или 1vh.

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

Начнем с настроек браузера и единицы rem (root em)

Это единица, соответствующая размеру «корневого» элемента, а именно — тега html. Для него не так часто задаются стили, поэтому размер берется из настроек браузера.

В каждом браузере есть настройки шрифтов по умолчанию. Посмотреть их в Хроме можно, нажав в меню «Настройки» на ссылку «расширенные настройки». В открывшемся окне задается тип шрифта по умолчанию для различных семейств шрифта (с засечками, без засечек и моноширинный), а также его размер. Чаще всего, это 16px. Именно он берется за «корневой» — «root» em — rem. От этого размера и рассчитывается единицы, указанные в rem.  

В инспекторе свойств для выделенного абзаца со стилевым правилом

p {font-size: 1rem;}

1	p{font-size1rem;}

видно, что размер шрифта как раз составляет 16px.

Примечание: чтобы посмотреть размер шрифта, сделайте правый клик на элементе и из контекстного меню внизу выберите пункт «Просмотреть код». Либо нажмите клавишу F12 и стрелочкой в квадратике выберите нужный элемент на странице.

Если вы хотите переопределить этот размер, задайте размер шрифта для html:

html {font-size: 20px}

1	html{font-size20px}

И еще добавим правило для body, чтобы проверить, как изменится размер шрифта для абзацев:

body { font-size: 18px; }

1	body{font-size18px;}

Тем не менее, размер шрифта для абзаца с правилом , остался связанным с корневым элементом, и изменился до 20px:

Теперь он размером 20px. Т.е. соответствует размеру шрифта, заданному для html.

Примечание: Единица не поддерживается в браузере IE ниже 9-й версии.

Какие бывают единицы измерения CSS

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

Пиксели — самые распространенные единицы измерения CSS

Самым распространенным и известным определением размеров является задание их в пикселях. Базовым размером шрифта, который по умолчанию применяется большинством браузеров, является 16px.

Ключевые слова как вариант единиц измерения шрифтов в CSS

Для определения размера шрифта CSS также предлагает 7 ключевых слов, которые задают этот размер относительно базового: xx-small, x-small, small, medium, large, x-large и xx-large. Базовым является medium (16px), остальные уменьшают или увеличивают базовый размер. Эти единицы измерения CSS используют крайне редко.

Единицы измерения CSS — проценты

Задание единиц измерения CSS в процентах означает определение размеров относительно величин, заданных браузером либо размеров, прописанных в родительском блоке. Базовый размер шрифта (16px) равнозначен 100%. Относительные размеры могут изменяться, если наследуются значения тега-предка. Все вложенные теги наследуют его и используют для вычисления своих размеров.

Исключения!

• При установке свойства margin-left в % процент берется от ширины родительского блока, а не от его margin-left.
• При установке свойства line-height в % процент берется от текущего размера шрифта, а вовсе не от line-height родителя.
• Для width/height процент берется обычно от ширины/высоты родителя, но при position: fixed процент задается от ширины/высоты окна (а не родителя или документа).

Единицы измерения CSS — em

Следующие единицы измерения размеров в CSS — em. 1 em равен, как и при задании размеров в процентах, базовому размеру. Принцип работы механизма наследования с em точно такой же как и с процентами.

Современные единицы измерения CSS — rem

С появлением CSS3 появилась новая единица измерения размеров CSS — rem, что означает root element. Его значение основано на значении шрифта корневого root-элемента. В подавляющем большинстве случаев это относится к базовому размеру шрифта, а корневым элементом считается HTML. Для использования единиц измерения CSS rem можно установить базовый размер шрифта для элемента HTML, а затем применять rem для определения значений шрифтов относительно этого базового размера.

.main-menu {
font-size: .5rem; /*.5rem = 10px*/
}

.heading {
font-size: 1.5rem; /*1.5rem = 30px*/
}

Единицы измерения CSS относительно viewport — vw и vh

В CSS3 также появились такие новые единицы измерения, как vw и vh, они определяются относительно размеров области просмотра, т.е. размера viewport.

• 1vw = 1% ширины окна;
• 1vh = 1% высоты окна.

К этому типу единиц измерения относятся и следующие:

• vmin — наименьшее значение из vw и vh;
• vmax — наибольшее значение из vw и vh.

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

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

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.

CSS Свойства

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Процент

С процентом все более понятно, он устанавливается относительно родительского блока. Если ширина родительского блока 800px, тогда 50% будет 400px. За последние годы адаптивный дизайн становится стандартом в веб-дизайне, так что единица измерения процент используется все чаще.

Давайте рассмотрим следующий пример, в отрывке кода ниже задается значение ширины, равное 60%, блокам классов .container и .main, но у блоков этих классов разные родительские блоки, так что они будут разной длины. Блок класса .container займет 60% ширины видимой области браузера, а блок класса .main займет 60% ширины своего родительского блока класса .container.

.container {
    width: 60%;
    margin: 100px auto;
    background-color: #eaeaea;
    padding: 1%;
    height: 250px;
    font-family: Arial;
    text-align: center;
}
.main, .aside {
    line-height: 253px;
}
.main {
    width: 60%;
    height: 100%;
    float: left;
    background-color: #ccc;
}
.aside {
    width: 40%;
    height: 100%;
    background-color: #aaa;
    float: left;
}

Таким образом, мы получим следующий результат:

Так как процент тоже относительная единица измерения, с ним есть такая же проблема, как и с единицами измерения EM. Может быть сложно быстро сосчитать в уме, сколько процентов от 500px составит 15px. Это обычно происходит, когда мы переводим единицы измерения пиксели из фазы дизайна в веб-страницу. Есть два пути, которыми можно решить эту проблему: Вы можете традиционно считать с помощью калькулятора, или, если Вам удобно использовать предобработчик CSS, Вы можете использовать функцию percentage()из Sass.

Простейшая утилита для создания домашнего медиасервера

Собственно, вот мы и подошли к основному вопросу настройки и включения UPnP-сервера. Для начала, как уже понятно, нужно определиться с программой (UPnP-клиентом). В качестве самой простой, не требующей ручной настройки утилиты можно посоветовать Samsung PC Share Manager.

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

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

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

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

Пиксели, Em, Ex и проценты — относительные размеры в CSS

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

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

Относительные размеры в CSS могут задаваться с помощью следующих единиц:

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

Далее следуют более хитрые относительные единицы размеров шрифтов, которые используются в CSS — Em и Ex. Первое — это высота шрифта используемого на компьютере пользователя по умолчанию, а Ex — высота прописной буквы «x» в используемом по умолчанию шрифте. Наверное, немного не понятно. Давайте рассмотрим это чуть поподробнее.

Многие браузеры принимают значение Ex равным половине значения Em (например, IE). У любого шрифта есть базовая линия, есть заглавные буквы и некоторые особенные строчные буквы, которые выступают за базовую линию (например, «y»). Есть еще буквы с диакритическими знаками, например, «ё» и «й» в русском языке или какие-нибудь умляуты и т.п. Поэтому размер шрифта (Em) определяется выносными элементами.

Ну, а Ex — это, как я уже говорил — высота прописной (маленькой) буквы «x» (икс) в латинской раскладке. Понятно, что в зависимости от соотношения строчных и прописных букв в шрифте, эти значения Em и Ex могут относиться к друг другу по разному, а не просто как Ex=Em/2.

Единицу относительных размеров Ex используют в CSS довольно редко, в основном применяют Em (не беря в расчет пикселы, которые используют для указания размера еще чаще). Но есть еще один способ задания относительных размеров — проценты, т.е. он должен будет высчитываться относительно чего-либо.

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

P.S.

Постепенно изучаю вопрос создания тем под WordPress. Скачал версию 3.7.1, установил под локальный сервер XAMPP и открыл файл стандартной темы “Twenty Twelve”. И в заголовке этого файла сразу же наткнулся на следующие интересные строки:

То есть, что нам сообщают разработчики WordPress в этих строках? Что данный файл стилевых правил использует для построения дизайна сайта два значения в качестве переменных:

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

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

CSS3: размер шрифта в rem

(Root EM) — это масштабируемые единицы измерения для текста, введённые в css3 и на данный момент поддерживаются только современными браузерами.

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

Это становится возможным с помощью процентов и относительных единиц, меняем у body размер с 10px до 8px и все дочерние элементы body также меняют размер. Однако, есть загвоздка с удобством — относительные единицы назначают размер шрифта относительно родительского элемента. Если body равен 10px, а вложенный в него div равен 2em (20px), то следующая вложенность span с указанным размером текста в 1em — будет равна не 10px body, а 20px, т.е. тем самым 2em родительского элемента, который в свою очередь равен 10px за 1em. Уже непонятно? При большей вложенности и менее круглых числах em, вам придётся напрягать математические возможности своего мозга (или дёргать калькулятор) для расчёта реального размера шрифта вложеностей, что может негативно отразиться на вашем самочувствии или качестве сложной вёрстки среднего или большого проекта.

Что касается — это относительные единицы, относительно корневого элемента (в html — это тег html), а не элемента в который они вложены. Т.е. если html тегу мы приравняем размер шрифта 10px, то все дочерние элементы с будут соотносится с корневым элементом. В примере с , мы получаем px_span=(rem_span*(rem_div*px_body)), в примере с rem, мы получаем px_span=(rem_span*px_html) и так со всеми вложенными элементами любого уровня вложенности.

Это облегчает задачу подсчёта размера для любого элемента в дизайне, мы просто берём нужный размер в пикселях и делим на 10px (при условии, что у html размер шрифта 10px), на выходе получаем значение для rem. Затем, при адаптивном дизайне — нам достаточно поменять размер шрифта у html и все элементы с назначенным размером rem соответственно изменят свой размер. real_px_элемента=rem_элемента*px_html.

С rem — работать проще, удобнее. Но увы, он появился только в css3 и не работает в старых браузерах, в том числе IE

Body Font Size

In the table below, select a body font size in pixels (px) to display a
complete «px to em and percent» conversion table.

Tip: The default font size is usually 16px.

What is the difference between PX, EM and Percent?

Pixel
is a static measurement, while percent and EM are relative
measurements. Percent depends on its parent font size. EM is relative to the
current font size of the element (2em means 2 times the size of the current
font). So, If the font
size of body is 16 pixels, then 150% will be 24 pixels (1.5 * 16), and 2em will
be 32 pixels (16 * 2).
Look at CSS Units for more
measurement units.

❮ Previous
Next ❯

Вертикальный и горизонтальный спейсинг

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

Модалка

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

.modal-body {    top: 20vh;}

Посмотрите это видео, чтобы посмотреть на результат.

Шапка

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

Для примера, вот как выглядит CSS:

.page-header {    padding-top: 1rem;    padding-bottom: 1rem;}@media (min-width: 800px) {.page-header {        padding-top: 4rem;        padding-bottom: 4rem;    }}

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

.page-header {    padding-top: 10vh;    padding-bottom: 10vh;}.page-header h2 {    margin-bottom: 1.5vh;}

Я использовал для паддинга в шапке и маргина под заголовком

Обратите внимание как меняется спейсинг!. Сетка из нескольких элементов

Сетка из нескольких элементов

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

Используя их в , мы можем получить желаемый результат

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

.wrapper {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));    grid-gap: calc(14px + 1vh) calc(14px + 0.5vw);}

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

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

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

Единица	Описание
cm	сантиметры Попробуй
mm	миллиметры Попробуй
in	дюймы (1 дюйм = 96px = 2.54см) Попробуй
px *	пиксели (1px = 1/96th в 1) Попробуй
pt	точки (1pt = 1/72 в 1) Попробуй
pc	picas (1pc = 12 pt) Попробуй

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

Vmin и Vmax — примеры использования

Изучая примеры использования для этих двух единиц, я не нашёл ничего, только этот пример из CSS-tricks.

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

.page-header {    padding: 10vmin 1rem;}

Вертикальные медиа запросы и единицы вьюпорта

Несколько лет назад я написал статью о вертикальных медиа запросах.

Сейчас я хочу пролить свет на эту тему, так как она имеет прямое отношение к статье, которую вы сейчас читаете.

Наследование в CSS согласно спецификации

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

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

1. в колонке «Name» приводится название правила,
2. в колонке «Values» — возможные значения для него,
3. в колонке «Initial value» — начальное значение (используемое по дефолту),
4. в колонке «Applies to» — к чему применяется правило,
5. в колонке «Inherited?» — наследуется ли это правило или нет.

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

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

Таким образом, если в приведенной таблице напротив интересующего вас правила в колонке «Inherited?» написано «Yes», то, соответственно, наследование для него разрешено (например, для color), а если «No», то наследование будет запрещено (например, для background).

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

Итак, мы помним, что для правила color наследование разрешено, а для правила background — нет. В соответствии с этим мы имеем следующую картину:

В первом элементе (внешнем контейнере) мы задаем с помощью атрибута Style правило «color:red», которое предписывает окрасить текст заключенный в этом контейнере в красный цвет. Т.к. правило «color» поддерживает наследование, то это означает, что и во всех вложенных во внешний контейнер элементах текст тоже должен будет окраситься в красный цвет.

Собственно, так и происходит, за исключением самого внутреннего контейнера Div, для которого прописано свое собственное «color:blue». Естественно, что правило, написанное непосредственно для этого Html тега, будет иметь приоритет над тем, которое было прописано во внешнем элементе. Поэтому текст во внутреннем контейнере получится синего цвета.

Хотя правило «background» по спецификации CSS и не поддерживает наследование, но т.к. третий контейнер Div расположен внутри второго, то получается иллюзия наследования фоновой заливки. Но это не так. Если попробовать гипотетически вынести внутренний контейнер за пределы второго, то фона у него уже не будет.

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка