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
background-position – положение фонового изображения
Свойство задаёт позицию фонового изображения (или градиента). Значение по умолчанию: (помещает изображение в верхний левый угол).
Первое значение определяет смещение по горизонтали, а второе — по вертикали.
Указывать значения можно посредством:
- пикселей (например, );
- процентов ();
- с помощью ключевых слов: , , , и ().
В современных браузерах в можно указывать до 4 значений.
Когда вы объявляете одно значение, оно будет определять горизонтальное смещение. Вертикальное в этом случае будет иметь значение .
Задавать можно с помощью трёх или четырёх значений. В трех- или четырехзначном синтаксисе чередуются ключевые слова (кроме ) и величина смещения ( или ). При этом ключевое слово должно предшествовать величине смещения, указанной с помощью или .
При указании трёх значений, браузер выставляет «отсутствующее» четвертое значение как 0.
Это свойство расположит фоновое изображение слева на 45px и снизу на 0px.
Пример использования в 4 значений:
Это свойство поместит изображение слева на 45px и снизу на 10px.
Реактивность и управление через JavaScript
Кастомные свойства — часть CSS и консистентная часть веб-платформы. Поэтому JavaScript имеет доступ к управлению кастомными свойствами напрямую. Это позволяет просто решать задачи темизации. Изменив значение кастомного свойства, весь созависимый с ним CSS реактивно изменит свои значения.
Получить значение кастомного свойства через JavaScript можно в три шага:
Задать значения кастомных свойств элементу можно в два шага:
Когда исполнится второй код, моментально поменяется цвет всех элементов, для которых указана связь с кастомным свойством . Тем не менее для практических задач темизации подобная мутация палитры не обоснована. Палитра представляется нам как единая и неизменная конфигурация, содержащая весь набор цветов, которые используются в приложении. Поэтому на практике для темизации удобнее создать отдельный «слой» кастомных свойств. Он будет отвечать за свойства элементов на странице, а не за цвета, используемые на сайте. Но каждое кастомное свойство в этом «слое» будет связано с определённым цветом палитры.
Простой пример:
Такое разделение кастомных свойств на палитру и слой темизации решает две задачи:
- Сохраняет палитру единым конфиг-файлом для стилей сайта.
- Обеспечивает понятность написания кода в дальнейшем.
Второй пункт лучше проиллюстрировать. Рассмотрим два примера.
На CSS:
На JavaScript:
Вместо изменения палитры, мы преобразовываем кастомные свойства уровня темизации, меняем связь между свойствами элементов страницы и цветами палитры. Читая JavaScript-код, сразу понятно, что мы делаем фон светлым, а текст — чёрным. Если не вводить отдельный слой кастомных свойств для темизации, мы можем получить что-то подобное:
Это выглядит нелепо. Такой код точно смутит вашего коллегу, который придёт развивать ваш код после вас. Разделение на слои ограждает от подобных неурядиц. Это не единственный путь, но самый очевидный для первого знакомства с практикой использования кастомных свойств.
Доработаем наш пример про отсутствие вечеринок — добавим переключатель темы с тёмной на светлую. Задачу будем решать «в лоб», чтобы было понятно.
В примере мы разложили кастомные свойства на отдельные файлы — palette.css и theme-config.css , чтобы ещё сильнее разделить наши слои по смыслу. Скрипт theme-changer.js работает прямолинейно: создаёт две отдельные функции на каждую из тем страницы. Это не самое универсальное решение, но оно отлично демонстрирует основу работы с кастомными свойствами.
background-position
А вот одно из самых важных свойств. Определяет, где конкретно будет расположен фон. По умолчанию, он располагается в верхнем левом углу окна браузера. Можно устанавливать положение по горизонтали, вертикали или по обеим сторонам. В случае горизонтали это центр, слева и справа (center, left,right), вертикаль это центр, сверху и снизу (center, top, bottom). Также прекрасно распознаются значения в процентах или пикселах, например так:
|
1 2 3 |
Эта запись означает, что фон будет располагаться справа и на 20px смещен вниз. Когда используется два значения — первое обозначает горизонтальное расположение, а второе — вертикальное. Когда только одно значение — второе по умолчанию будет в центре.
При процентной записи — отсчет идет из верхнего левого угла. Например, такая запись:
|
1 2 3 |
переместит фон на 10px от нижнего края и на 20% от правого.
background-size – масштабирование фона
Свойство масштабирует фоновое изображение согласно заданным размерам. По умолчанию оно имеет значение .
Пример синтаксиса для явного указания размеров фона:
Кроме этого варианта, имеется также множество других различных синтаксисов, которые вы можете использовать для этого свойства.
1. Ключевые слова: (по умолчанию), и .
- – автоматически рассчитывает размер на основе реального размера изображения и соотношения сторон;
- – масштабирует изображение с сохранением пропорций так, чтобы оно целиком поместилось внутрь фона (т.е. или по меньшей стороне);
- – масштабирует изображение с сохранением пропорций так, что оно всегда покрывала всю область фона (т.е. или по большей стороне);
2. Одно значение. При указании только одного значения (например, ), оно указывает ширину, а высота в этом имеет значение .
В задавать размеры можно используя любые единицы измерения: , , , , и т.д.
3. Два значения. При указании двух значений, первое определяет ширину фонового изображения, а второе – его высоту. Как и в синтаксисе с одним значением, вы можете использовать любые единицы измерения, которые вам нравятся.
Свойство CSS background-color
Это свойство используется для заливки фона элемента цветом. В качестве значений можно использовать:
HEX или HEX с альфа-каналом
НЕХ (hexadecimal) — обозначение цвета в шестнадцатеричной системе счисления. Цвет задается в виде числа, состоящего из 6 символов, где первые два определяют красную часть цвета, следующие два — зеленую, а два последних — синюю. Перед числом ставится символ #, который означает, что следующий за ним набор цифр и букв — это шестнадцатеричное число.
Можно также задать прозрачность цвета, добавив в конце числа еще 2 символа (например, 00 — полностью прозрачный, ff — полностью непрозрачный). Эта фича поддерживается практически всеми браузерами, за исключением IE (не удивительно), Opera Mini и Opera Mobile.
RGB или RGBa
Цвет можно задать при помощи функций CSS и . Синтаксис предельно простой — значения красного, зеленого и синего (от 0 до 255) указываются через запятую. В функции указывается четвертый параметр — прозрачность (либо в процентах, либо в виде десятичной дроби от 0 до 1).
HSL или HSLa
HSL — расшифровывается как Hue — тон, Saturation — насыщенность и Lightness — светлота (да, есть такое слово). В CSS есть специальные функции для указания цвета в таком формате — и . В качестве аргументов обеих по порядку указываются:
- hue — расположение тона на цветовом колесе (от 0 до 360)
- saturation — насыщенность или интенсивность тона, т.е. степень его отличия от серого цвета, где 0% — серый, а 100% — полный цвет.
- lightness — светлота или яркость, где 0% — максимально темный (черный), 50% — нормальный, 100% — максимально светлый (белый)
- alpha (только для ) — прозрачность, которая указывается либо в процентах либо в виде десятичной дроби (0% или 0 — полностью прозрачный, 100% или 1 — полностью непрозрачный).
HTML-цвета
Цвет фона элемента можно задать при помощи его названия на английском языке. Всего 147 вариаций от банальных и до экзотических, типа или . Названия указываются в одно слово без пробелов. Регистр не учитывается.
Ключевые слова
Кроме описанных выше вариантов, для указания цвета фона элемента в CSS можно использовать специальные ключевые слова:
- — устанавливает в качестве цвета фона дефолтное значение, т.е. transparent
- — задает цвет фона как у родительского элемента
- — делает фон элемента прозрачным
- — переменная, значение которой соответствует значению свойства текущего элемента, а если оно не задано, используется родительского элемента.
Свойство CSS background
Это свойство позволяет определять в CSS фон любого элемента на странице. Оно универсальное, т.е. позволяет задавать сразу несколько характеристик (более специфичных свойств) фона, которые можно указывать в любом порядке.
Обратите внимание, что нужно указывать через слэш (/) сразу после. Такое написание, конечно, экономит много времени, но я так не делаю
Почему?
Такое написание, конечно, экономит много времени, но я так не делаю. Почему?
1. Код хуже читается. Особенно если свойства указаны в случайном порядке
2. Если какое-то свойство не задано — используется дефолтное, соответственно иногда возникают непредвиденные последствия. Поэтому для новичков или не очень внимательных людей не подходит.
В приведенном выше примере изначально заданное свойство переопределяется на , т.к. цвет фона не задан в свойстве и используется дефолтное значение. Я в такое раньше часто и подолгу тупил, не понимая, в чем ошибка, и в какой-то момент решил для себя, что гораздо эффективнее / удобнее / эстетичнее указывать отдельные свойства отдельно, простите за тавтологию.
Итак, помимо универсального свойства , в CSS есть 8 свойств для работы с фоном элемента:
Влияние каскадности на свойства
В первой части нашей книги, в уроке, посвященном каскадности CSS, мы говорили, что если в таблице стилей указано два одинаковых свойства для одного селектора, то предпочтение отдается тому свойству, которое находится ниже по списку. Сейчас пора вспомнить об этой особенности и подумать о том, как ведут себя свойства группы background, если к одному элементу их применяется несколько.
Допустим, мы написали следующий код:
background-color: blue; background: url(img/cat-transparent-bg.png) no-repeat;
Мы ожидаем увидеть изображение кота на синем фоне, но не тут-то было. Оказывается, второе свойство перезаписало первое значение на значение по умолчанию (т. е. на ). Решить проблему можно, поменяв местами строки:
background: url(img/cat-transparent-bg.png) no-repeat; background-color: blue;
А теперь мини-задача: если в последней строке этого кода заменить свойство на упрощенное свойство , как вы думаете, что произойдет с фоновым рисунком и значением ?
CSS3 background-image property
CSS3 can add a background image via background-image property.
Different background image and the image separated by commas, all images are displayed at the top of the first.
# Example1 { background-image: url (img_flwr.gif), url (paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; }
try it»
You can set the number of different properties to different image
# Example1 { background: url (img_flwr.gif) right bottom no-repeat, url (paper.gif) left top repeat; }
try it»
CSS3 background-size property
background-size specifies the size of the background image. CSS3 ago, the background image size is determined by the actual size of the image.
CSS3 can specify a background image, let us re-specify the size of the background image in different environments. You can specify a percentage or pixel size.
You specify the size is relative to the width and height of the parent element percentage size.
Example 1
Reset background image:
div { background: url (img_flwr.gif); background-size: 80px 60px; background-repeat: no-repeat; }
try it»
Example 2
Stretch the background image to completely fill the content area:
div { background: url (img_flwr.gif); background-size: 100% 100%; background-repeat: no-repeat; }
try it»
CSS3’s background-Origin attribute
background-Origin attribute specifies the location of the background image area.
content-box, can be placed inside the padding-box, and border-box area of the background image.
Positioning a background image in the content-box:
div { background: url (img_flwr.gif); background-repeat: no-repeat; background-size: 100% 100%; background-origin: content-box; }
try it»
|
CSS3 allows you to elements The add multiple background images. |
Set two background images in the body element:
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}
try it»
New background properties
| order | description | CSS |
|---|---|---|
| background-clip | Provisions of the drawing area background. | 3 |
| background-origin | Predetermined background image positioning region. | 3 |
| background-size | Background image of a predetermined size. | 3 |
CSS3 Multiple Backgrounds
CSS3 allows you to add multiple background images for an element, through the
property.
The different background images are separated by commas, and the images are
stacked on top of each other, where the first image is closest to the viewer.
The following example has two background images, the first image is a flower
(aligned to the bottom and right) and the second image is a paper background (aligned to the top-left corner):
#example1 { background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;}
Multiple background images can be specified using either the individual
background properties (as above) or the shorthand property.
The following example uses the shorthand property (same result as
example above):
Clipped Images
Images can be displayed in the form of diamonds, hearts, ellipses, and other shapes.
To “clip” the image and make it diamond- or heart-shaped, you need to use the clip-path CSS property. It creates a region called a clipping that tells what part of an element is shown on screen. It can accept the following values:
- Shape values: inset, circle, polygon, ellipse, path
- Source value: for example, clip-path: url(#myPath); referencing an SVG <clipPath> element
- Geometry-box values: margin-box, border-box, padding-box, content-box, fill-box, stroke-box, view-box (they define the reference box for the basic shape)
- Combined values: for example, clip-path: padding-box circle(25px at 0 50px);
- Global values: inherit, initial, unset
The clip-path element applies to an<img> HTML element, for example:
Here are several examples of clipped images.
Diamond images
Here the coordinates are given in a clockwise manner. First, move 50% along the x-axis — this will align at the center. While the top x-axis is at 100%, move 50% on the right y-axis — this will take us to the middle of the right y-axis. Then move to 50% of the bottom x-axis — this will be the center of the bottom x-axis. Finally, move back to the center of the left y-axis at 50%.
Here we use SVG:
You can use an online instrument — Clippy CSS clip-path maker —to design CSS images of various shapes.
Images with clipped corners
In this example, the calc() function is used to calculate the parts that will be clipped along the top x-axis and the bottom x-axis. Since the axis is equal to 100% and we start clipping on the x-axis at 20 px, the clip-path property is used to deduct 20 px on each side of the top x-axis and bottom x-axis.
Images with rounded corners
The border-radius property will allow you to create images with rounded corners. You can read more about this property in our article CSS Shapes.
Here’s an example:
The article has been inspired by CSS Secrets by Lea Verou and by many other sources, including CSS Tricks, CodePen, Tympanus, Dev.to, and more.
Пример предотвращения сдвига макета
Еще одна замечательная особенность css-свойства — оно предоставляет возможность реализовать блоки-заглушки (placeholder) для предотвращения сдвига макета (CLS — Cumulative Layout Shift) и предоставления качественных веб-показателей. В первом примере демонстрируется загрузка ресурса из API и получается сдвиг макета, когда загрузка мультимедиа завершится. Проще говоря, текст и блоки страницы скачут и перемещаются, до тех пор, пока все ресурсы загружаются.
Видео о совокупном сдвиге макета, который происходит, когда для контейнера загружаемого ресурса не установлено соотношение сторон. Это видео записано с помощью эмуляции медленного соединения — сети 3G.
Применение css-свойства устанавливает контейнеру ожидаемое соотношение сторон и предотвращает сдвиг макета после загрузки мультимедиа:
Видео c предустановленным для контейнера загружаемого ресурса . Это видео записано с помощью эмуляции медленного соединения — сети 3G.
See this code Aspect-Ratio Demo on x.xhtml.ru.
Как и где задавать стили CSS
Стиль задается в мета тегах head с помощью тега <style>:
Но это плохо, т.к. загромождается код описаниями стилей. К тому же, если этот код одинаковый для всех страниц сайта, то чтобы поменять его везде, придется повозиться. Поэтому используют специальные файлы с расширениями .css, куда заносятся все стили. Далее этот файл подключается к странице сайта с помощью тега <link> в разделе head:
Преимуществом такого подхода является так же и то, что этот файл кэшируется браузерами, что снижает «вес» сайта, тем самым он быстрее грузится
А это сейчас очень важно для SEO. См
как увеличить скорость загрузки сайта
Using Multiple Background Images
For the longest time, elements were allowed to have only one background image at a time, which created quite a few constraints when designing a page. Fortunately, with CSS3, we can now use more than one background image on an element by comma-separating multiple background values within a or property.
The background image value that comes first will be the foremost background image, and the background image that’s listed last will be the rearmost background image. Any value between the first and the last will reside within the middle ground accordingly. Here’s an example of the CSS for a element that uses three background images:
The preceding code uses a shorthand value for the background property, chaining multiple background image values together. These shorthand values may also be broken up into comma-separated values across the , , and properties.
Multiple Background Images Example
Let’s go back to the success alert message once more to combine both the tick background image and the linear gradient background image.
In order to do so, we’ll include two values within the second background property. The first value, the foremost image, will be the tick image. The second value, the rearmost image, will be the linear gradient. The two values are comma separated.
HTML
CSS
Как переопределить важное в CSS
Есть два способа переопределить тег! Important в CSS. Вы можете добавить еще одно правило CSS с тегом! Important и использовать селектор с более высокой специфичностью. Или вы можете добавить другое правило CSS с тегом! Important, используя тот же селектор, и просто добавить его позже в таблице стилей.
Почему работают эти два метода? Из-за правил специфики. Когда два объявления, использующие правило! Important, применяются к одному и тому же элементу, будет применяться объявление с большей специфичностью или объявление, определенное последним
Возможно, вы помните эти правила из введения, но важно понимать, что они применяются к объявлениям, использующим правило! Important, а также к объявлениям, не использующим правило
Вместо того, чтобы заменять свойство! Important в CSS другим свойством! Important, лучше всего переписать правило и полностью отказаться от использования этого свойства. Но иногда это невозможно.
Возьмем, к примеру, пользовательские таблицы стилей. Используя настраиваемую таблицу стилей пользователя, читатель может переопределить стили веб-сайта в соответствии со своими пожеланиями. Читатель может, например, увеличить размер шрифта или изменить цвет типографики на странице, чтобы они могли лучше видеть контент.
Поскольку определяемая пользователем таблица стилей переопределяет таблицу стилей автора независимо от специфики, читатель может добавлять правила CSS без тега! Important. Однако, если таблица стилей автора использует правило! Important для определения размера или цвета шрифта, тогда в таблице стилей пользователя будет необходимо правило! Important.
Давайте продолжим использовать тот же пример кнопки сверху. Скажем, на моем веб-сайте уже были применены важные правила к классу кнопок. Но теперь я хочу, чтобы все элементы с именем «content» имели синюю пунктирную рамку.
Мне нужно просто переписать код, удалив все важные теги из моего CSS. Но, допустим, у меня не хватает времени и я ищу быстрое решение. Затем я мог бы просто добавить тег! Important в селектор CSS ID. Тогда оба объявления будут использовать свойство! Important, и, поскольку селекторы ID имеют более высокую специфичность, чем селекторы классов, элемент в разделе содержимого будет иметь синюю пунктирную границу.
HTML остается прежним:
CSS становится:
Результат:
Теперь предположим, что я хочу, чтобы все кнопки на моем веб-сайте были обведены синей пунктирной рамкой. Опять же, мне нужно просто переписать код, но я могу использовать тег! Important для быстрого исправления. Используя тот же селектор классов .btn с новым правилом для синей пунктирной границы и тегом! Important, я могу просто добавить его после существующего правила в таблице стилей. Поскольку он появится позже, он имеет более высокую специфичность и будет применяться к элементам с классом .btn.
HTML остается прежним:
CSS становится:
Вот результат:
Относительное позиционирование
Относительное позиционирование — странная штука. Если судить по картинке выше, то оно похоже на абсолютное, но к нему зачем-то добавляется странный эффект: бокс продолжает занимать место в потоке. Действительно, именно для позиционирования боксов этот метод используется редко. Хотя изредка и бывают ситуации, когда надо ради визуальных эффектов пододвинуть один бокс под другой.
Чаще же всего используют вообще без задания смещений. В этом случае он ведет себя как обычный статический бокс, но поскольку он все таки не статический, то он создает внутри себя содержащий блок, тот самый, относительно которого будут позиционироваться боксы внутри него.
Вот пример, который показывает полезность этого свойства. Пусть у нас есть три блока: «заголовок», «содержимое» и «низ», а внутри «содержимого» лежит блок «об авторе»:
И пусть высота заголовка нам точно не известна. Боксы эти статические, идут один за другим, и какая бы высота у заголовка ни была, содержимое будет начинаться прямо под ним.
А теперь нам хочется внутри содержимого блочок об авторе расположить так, чтобы он был точно в правом верхнем углу содержимого.
Напишем ему:
Но этого недостаточно, так как содержащим блоком для него сейчас является все окно, и блок об авторе уедет поверх заголовка. Точно поставить ему расстояние от верха тоже нельзя, потому что размер заголовка у нас может быть разный. Следующая мысль — сделать блок содержимого тоже абсолютным, тогда он станет содержащим блоком. Но тогда он сам выдернется из потока и низ прижмется прямо к заголовку.
Вот это и есть случай, в котором работает . Если мы поставим его блоку содержимого, то он никуда не денется из потока, но в то же время станет содержащим блоком, и «об авторе» расположится в его правом верхнем углу.
background-image
Это свойство тоже используется очень часто, позволяет присваивать фону изображение. В CSS3 добавлена возможность присваивать фону несколько изображений, причем каждое создает своеобразный слой, поэтому каждое последующее накладывается на предыдущее. Зачем это может пригодиться? Все достаточно просто — допустим, нужно прикрутить рюшечки в каждом из углов сайта. При условии более-менее резиновой верстки использовать одно изображение — не вариант. Поэтому делаем 4 «слоя», каждое изображение двигаем в свой угол и на этом все, задача решена
| 1 |
Если нужно назначить одно изображение на фон — в коде оставляем только первое, думаю, это понятно.
Используя любые изображения в качестве фона следует помнить два правила:
задайте контрастный цвет фона на тот случай, если у пользователя по каким-то причинам не отобразится картинка
Он может банально отключить отображение картинок, экономит трафик.
не используйте фоновое изображение для передачи какой-либо важной информации. По причине указанной выше, пользователь может и не увидеть.
Поддержка нескольких изображений для фона достаточно широка. Все браузеры, даже IE8, поддерживают это свойство.
Заключение
В этой статье вы познакомились с основами использования кастомных свойств. Этой базы достаточно, чтобы начать экспериментировать. Уже после прочтения статьи вы могли заметить сильные стороны кастомных свойств: реактивность, доступ из JS и нативную реализацию необходимой функциональности. Но это далеко не все преимущества.
В первой статье мы умышленно опустили особенности работы с кастомными свойствами. Сейчас вы знаете синтаксис и имплементацию стандарта, а в следующих статьях мы подробнее остановимся на сравнении кастомных свойств и переменных из препроцессоров, расскажем про ограничения работы с кастомными свойствами. Этих знаний хватит, чтобы начать применять кастомные CSS-свойства в своей работе.
Заключение
Позиционирование обладает своими плюсами и минусами.
Самый большой минус — это невозможность завязать размеры и положение произвольных боксов друг на друга, что вынуждает использовать только жестко заданные размеры боксов.
Самым большим плюсом является полная независимость визуального расположения от порядка элементов в HTML. Это позволяет кардинально менять основную сетку раскладки страницы с минимальными усилиями.
Эта статья — часть находящегося в процессе написания цикла под рабочим названием «Учебник». Я рекомендую ознакомиться и с другими статьями, которые можно найти в категории «Учебник», где они сейчас собраны в обратном хронологическом порядке.
