Сколько способов использования свойств css вы знаете

Основные CSS свойства

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

Давайте разберем указанные способы подробнее.

Способ первый — английское слово

Самый простой и понятный вариант задать цвет — указать его английским словом, например, red задает красный цвет, blueголубой, greenзеленый, blackчерный, whiteбелый (все названия цветов, которые можно использовать, смотрите тут: цвета CSS).

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

Так код будет выглядеть в браузере:

Абзац с текстом.

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

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

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

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

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

Способ второй — через rgb

Суть этого способа заключается в следующем — для свойства color я пишу следующее значение — rgb(красный, зеленый, голубой) — и указываю в каких пропорциях нужно брать эти три базовых цвета. Сами цвета могут изменяться от 0 до 255. Причем ноль — это отсутствие цвета, а 255 — это чистый цвет (к примеру, чисто красный).

Сами буквы rgb расшифровываются как red (красный), green (зеленый), blue (голубой).

Давайте смешаем чисто красный и чисто зеленый цвет. Для этого первое значение ставим в 255, второе тоже в 255, а третье — в ноль, так как примесь голубого нам не нужна. У нас получится чисто желтый цвет (я поставил голубой фон блоку, так как желтый цвет на белом режет глаза):

Так код будет выглядеть в браузере:

Абзац с текстом.

А вот так мы получим чисто красный цвет (первое значение в 255, а все остальные нули):

Так код будет выглядеть в браузере:

Абзац с текстом.

Так получим чисто зеленый цвет:

Так код будет выглядеть в браузере:

Абзац с текстом.

А вот так — частично зеленый (я поставил не 255, а 100 для зеленого):

Так код будет выглядеть в браузере:

Абзац с текстом.

Ну, а теперь я смешаю все три цвета в произвольных пропорциях. Смотрите, что получилось:

Так код будет выглядеть в браузере:

Абзац с текстом.

Если я поставлю все значения в 255, то получу чистый белый цвет, а если все нули — чистый черный.

Чисто белый цвет:

Так код будет выглядеть в браузере:

Абзац с текстом.

Чисто черный цвет:

Так код будет выглядеть в браузере:

Абзац с текстом.

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

Способ третий — через #

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

Чтобы понять суть этого способа, вам нужно разобраться с шестнадцатеричной системой счисления. В ней, в отличии от десятичной, который мы с вами пользуемся не 10 цифр, а 16: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F — как вы видите, за недостатком цифр после девяти используются буквы. Преимущество шестнадцатеричной системы в том, что число 255 (и менее) можно представить всего двумя символами — FF соответствует 255 и так далее.

В этой системе вместо rgb() записывается решетка #, после которой идут 6 знаков. Первые 2 знака — красный цвет, вторые два знака — зеленый, и последние два знака — голубой. Цвета также изменяются от 0 до 255, но в шестнадцатеричной системе это будет от 00 до FF.

К примеру, запись rgb(255, 200, 255) можно представить как #FFC8FF — это будет более компактно.

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

Так код будет выглядеть в браузере:

Абзац с текстом.

Мы уже разбирали, что rgb(0, 0, 0) соответствует черному цвету, а значит #000000 — тоже черный цвет, а rgb(255, 255, 255) — белый и #FFFFFF — тоже белый.

Кроме того, существует сокращенная форма записи — к примеру, #FEDFED можно переписать как #FED — то есть, если первая половина записи совпадает со второй половиной — то ее (вторую половину) можно не писать. В сокращенном варианте черный цвет будет #000, а белый — #FFF.

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

Видео по работе с пипеткой

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

Тут скоро будет видео по работе с пипеткой.

Блок . Свойства width и height — ширина и высота

Свойства width и height позволяют задать высоту и ширину элементу соответственно. Ширина и высота обычно измеряются в пикселях (обозначается px) или процентах (обозначается %) (можно измерять и других единицах, которые мы пока не будем разбирать).

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

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

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

Так код будет выглядеть в браузере:

Видео по работе с измерительными инструментами

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

Как ими пользоваться, смотрите в следующем видео:

Тут скоро будет видео по работе с измерителем пикселей.

Блок . Свойство text-align — выравнивание текста

Свойство text-align позволяет задать выравнивание текста. Текст можно выравнять по левому краю (значение left), по правому (значение right), по центру (значение center) и одновременно и по правому, и по левому краю (значение justify).

Давайте посмотрим на примерах, что имеется ввиду.

Значение left

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

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

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

Значение right

Давайте теперь поставим текст по правому краю:

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Значение center

Поставим текст по центру:

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Значение justify

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

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Блок . Свойство font-weight — жирность

Свойство font-weight позволяет сделать текст жирным или наоборот — отменить жирность (к примеру, для заголовков, которые жирные по умолчанию). Чтобы сделать текст жирным, следует добавить значение bold, а чтобы отменить жирность — значение normal.

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

Если бы я делал жирный через тег <b> — мне пришлось бы содержимое каждого абзаца обернуть в этот тег, а это было бы очень затратным по времени (а если я потом захочу убрать жирность абзацам — мне придется убирать все эти теги, представьте, сколько это лишней, бесполезной работы).

В следующем примере мы сделаем все абзацы жирными, а все заголовки h3 — нежирными:

Так код будет выглядеть в браузере:

Это заголовок

Абзац с текстом.

Для сравнения привожу их вид по умолчанию:

Это заголовок

Абзац с текстом.

Блок . Свойство font-style — курсив

Свойство font-style позволяет сделать текст курсивным или наоборот — отменить курсив. Чтобы сделать текст курсивом, следует добавить значение italic, а чтобы отменить курсив — значение normal. Смотрите пример:

Так код будет выглядеть в браузере:

Абзац с текстом.

Блок . Свойство font-size — размер текста

Свойство font-size позволяет задать размер текста. Размер задается в пикселях (обозначаются px), в пунктах (обозначаются pt), в процентах (обозначаются %) и с помощью некоторых других единиц, которые мы пока не будем разбирать.

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

Значение в пунктах

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

Между пунктами и пикселями есть соответствие: 12pt = 16px. При этом все размеры на экране на самом деле меряются в пикселях, даже если вы задаете их в пунктах. При этом, если после перевода пунктов в пиксели, полученные пиксели будут дробными — они округлятся до ближайшего целого.

Давайте зададим тексту абзаца шрифт в 20 пунктов:

Так код будет выглядеть в браузере:

Абзац с текстом.

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

Значение в процентах

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

Блок . Свойство font-family — тип шрифта

Свойство font-family позволяет задать тип шрифта (тип часто называют семейством шрифта).

Поставим для всех абзацев шрифт Arial:

Так код будет выглядеть в браузере:

Абзац с текстом.

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

Также для решения данной проблемы поступают так: перечисляют несколько похожих шрифтов через запятую. Например, font-family: Georgia, "Times New Roman".

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

Заканчивают список обычно ключевым словом, которое описывает тип шрифта (все шрифты относятся к какому-нибудь типу) — serif, sans-serif, cursive, fantasy или monospace. Если браузер не нашел ни одного из указанных шрифтов на компьютере пользователя, то он выберет один из шрифтов указанного типа.

Шрифты бывают с засечками serif и без засечек sans-serif. Засечки — это специальные штрихи на концах букв (выделены красным):

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

Если в имени шрифта содержатся пробелы, например, Times New Roman, оно должно заключаться в одинарные или двойные кавычки.

Веб безопасные шрифты

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

Значение Описание
Arial Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Arial Black Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Comic Sans MS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Courier New Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Georgia Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Impact Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Times New Roman Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Trebuchet MS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Verdana Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.

Свойство line-height — межстрочный интервал

Свойство line-height задает межстрочный интервал.

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

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

Это значит, что реальный видимый промежуток между строками будет вычисляться так: line-heightfont-size = расстояние между строками текста. Или наоборот line-height = font-size + расстояние между строками текста.

В данном примере расстояние между строками текста будет line-height — font-size = 50px — 13px = 37px:

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Значением свойства line-height не обязательно должно служить число в некоторых единицах. Можно также просто написать число или дробь. В этом случае настоящее значение line-height можно будет найти, умножив его на значение font-size.

К примеру, font-size равен 10px, а line-height1.5. В этом случае реальное значение line-height будет 10px * 1.5 = 15px. Ну, а видимый белый промежуток между линиями текста будет 5px: line-height — font-size = 15px — 10px = 5px.

Преимущество такого способа задания line-height в том, что при изменении размера шрифта автоматически будет меняться и межстрочный интервал.

Блок . Свойство font — сокращение для шрифтов

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

Свойство font имеет следующий синтаксис: курсив жирность размер_шрифта/интервал_между_строками семейство_шрифта. Обязательными являются "размер_шрифта" и "семейство_шрифта", порядок имеет значение.

Свойство font является свойством-сокращением.

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Блок . Свойство text-indent — красная строка

Свойство text-indent позволяет задать красную строку, то есть отступ первой строки текста (к примеру, в абзаце).

Давайте сделаем красную строку для абзацев:

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Блок . Свойство vertical-align

Свойство vertical-align позволяет задать выравнивание по вертикали. К сожалению, адекватным образом это выравнивание работает только для таблиц.

Значение top выравнивает по верхнему краю, значение bottom — по нижнему, а middle — по центру по вертикали (есть еще некоторые другие значения, они нас пока не интересуют).

Значение top

Давайте сделаем так, чтобы по вертикали текст в ячейках таблицы был выровнен по верхнему краю:

Синтаксис CSS — правила, селекторы, свойства, их значения (параметры) и комментарии в языке каскадных таблиц стилей

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

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

Синтаксис в CSS - понятия свойства, селекторов, правил и комментариев

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

Синтаксис и варианты записи правил CSS

Поскольку каскадные таблицы стилей представляют из себя, пусть и специализированный, но все же язык, допустимо провести аналогию совокупности правил CSS с простым текстом, где каждое слово состоит из букв, предложение &#8212; из слов, а сам текстовый фрагмент &#8212; из предложений.

Учитывая эту наглядную ассоциацию, можно вывести логическую последовательность, которая касается структуры CSS (она является максимально оптимальной, на мой скромный взгляд):

  • значения (или параметры), которые выражается в числах, коде цвета, названии шрифта и т.п., в соответствии с нашей аналогий можно считать буквами;
  • структурной единицей CSS является свойство, определяющее свою часть внешнего вида элемента на странице (его цвет, шрифт текста, размеры, отступы, позицию и т.д.), которому соответствуют конкретные значения (одно или несколько). Здесь совокупность названия свойства и его параметра можно сравнить со словом (которое также может состоять из одной или более букв) в стандартном текстовом фрагменте;
  • правило CSS &#8212;селектор (наименование стиля) вместе с набором свойств CSS для каждого элемента полностью определяет его оформление и местоположения на странице. Структурно ассоциируется с предложением (совокупностью отдельно взятых слов в обычном тексте);
  • полное собрание всех правил CSS для конкретного документа (веб-страницы) обеспечивает его корректное отображение в браузере. Сравним это с завершенным отрывком текста.

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

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

Базовый синтаксис CSS - селектор и относящаяся к нему совокупность свойств

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

Обратите внимание на то, что свойство background имеет сразу несколько значений: цвет фона (#00ff00), путь до фонового изображения ("west.png") и разрешение на его повторение по горизонтали (repeat-x). Наверное, вы заметили, что подобный вариант записи несколько отличается от схемы, представленной чуть выше.

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

Скажем, расширенная запись правила, образец которой только что был представлен, наиболее удобна для восприятия, а потому применяется обычно для изучения стилей, ну или в "сыром" файле style.css, который создан для нового сайта, а потому еще не доведен до ума. Есть и другая разновидность этого же самого варианта записи CSS правила:

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

Расширенный вариант записи можно представить и без переносов:

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

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

Селекторы, свойства и применение стилей

Я уже отмечал, что с течением времени происходит все более тесное сближение HTML и CSS. Если на заре зарождения интернета в его сегодняшнем виде внешний вид элементов на веб-странице описывался с помощью атрибутов тегов гипертекстовой разметки, то в наши дни слишком частое использование такого метода считается моветоном, поскольку перегруженный ХТМЛ-код часто не способствует должной оптимизации страниц сайта, что в том числе вредит его SEO продвижению.

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

Кстати, в том числе и по этой причине из всех способов привязки стилей к HTML коду документа наиболее востребованным является вынесение всех стилевых свойств в отдельный файл style.css.

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

1. Базовые (селекторы тегов) &#8212; самый простой для понимания, название которого совпадает с именем соответствующего тега в ХТМЛ коде документа.

Возьмем в качестве примера горизонтальную линию как элемент дизайна страницы сайта. Мы уже знаем, что эта линия создается с помощью тега hr, который прописывается в HTML-коде. Если вы перейдете по только что данной ссылке, то сможете отследить, как меняется внешний вид этого элемента при применении атрибутов тега hr, которые задаются в ХТМЛ-документе вместе с ним.

Однако, как я уже говорил, современные тенденции направлены на разгрузку HTML кода за счет использования оформления с помощью стилей CSS, представленных в отдельном файле. Поэтому приведенные в той статье атрибуты тега hr (width, size, color, noshade) заменяем на свойства стилей, прописанные в style.css:

Которые позволяют получить точно такой же результат:

2. Классы (class) и идентификаторы (id) &#8212; имеют некоторую общность, поскольку являются атрибутами тегов, к которым они добавляются в HTML-коде, и одновременно селекторами, кои и указываются в файле CSS, каждый со своим набором свойств.

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

Тег с классом &#171;text-x&#187; в HTML-коде:

Стили для этого класса в CSS (впереди обязательно нужно поставить точку):

То же самое для идентификаторов (пример с контейнером див). HTML:

CSS (перед идентификатором ставится значок решетки):

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

3. Дочерние селекторы &#8212; как известно, в HTML различают родительские элементы (теги) и дочерние (их потомки), которые в них вложены. Весьма логично, что в CSS точно такое же разделение существует между соответствующими этим элементам селекторами.

Правило дочернего селектора указывает, что свойства стилей будут применены к конкретному элементу (в ниже следующем примере это тег гиперссылки a) только в том случае, если он является непосредственным потомком (1-й уровень вложенности) определенного родителя (li):

4. Контекстные селекторы &#8212; очень напоминают дочерние селекторы с той лишь разницей, что здесь свойства CSS будут применены ко всем потомкам относительно указанного родителя, вне зависимости от степени вложенности (родительский селектор в правиле стилей идет первым и отделен от дочернего пробелом):

5. Соседние селекторы &#8212; данное CSS правило справедливо для элементов, описанных тегами, которые идут друг за другом в HTML-документе, причем, не имеют родственных отношений, иными словами, не вложены друг в друга. Соответствующие им селекторы отделяются друг от друга знаком &#171;+&#187;, причем, свойства будут применены ко второму элементу лишь в том случае, если он располагается непосредственно рядом с первым:

6. Универсальный селектор &#8212; применяется в тех случаях, когда нужно задать единый стиль оформления для тех или иных элементов на веб-странице, расположенных в различных ее областях. Например, определить вид и размер шрифта. Этот селектор обозначается звездочкой:

7. Селекторы атрибутов &#8212; позволяет присваивать одни и те же стили всем элементам на веб-странице, имеющим одинаковые атрибуты:

Либо определенным элементам:

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

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

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

Виды значений (параметров) свойств

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

Числа

Роль значения того или иного свойства может играть целое число, в котором содержаться цифры от 0 до 9, либо десятичная дробь, где целая и дробная часть разделяются точкой:

Здесь для абзаца, определяемого тегом p, заданы свойства со значениями, которые задают жирный шрифт и интервал между строками. Если целая часть десятичной дроби равно 0, то ее можно не писать, а просто впереди ставить точку. То есть записи: 0.6 и .6 абсолютно идентичны.

Размеры в абсолютных и относительных единицах

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

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

1. Абсолютные единицы измерения
Единица Краткое описание
px Пиксель
in Дюйм (1 in = 2,54 cm)
cm Сантиметр
mm Миллиметр
pt Пункт (1 pt = 1/72 дюйма)
pc Пика (1 pc = 12 pt)

К слову, cm, mm, pt, pc практически не используются в практической деятельности вебмастеров и разработчиков, а потому нет смысла их подробно разбирать. А вот на остальные мы обратим внимание в той или иной степени.

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

Важно отметить, что реальные единицы часто сопоставляются с теми же пикселями при указании разрешения, которое измеряется в dpi (dots per inch), являющемся специальным показателем, который отражает количество пикселей на дюйм.

Можно сказать, что чем выше этот показатель, тем более качественное и детальное изображение мы получим. Кроме этого, дисплей любого современного электронного устройства имеет подобную характеристику (пример: монитор компьютера с разрешением 1280 &#215; 1024 px).

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

2. Основные относительные единицы
Единица Краткое описание
em Размер шрифта текущего элемента (изначально получен из ширины заглавной литеры &#171;M&#187; определенного шрифта)
ex Размер, основанный на высоте буквы &#171;x&#187; в нижнем регистре
ch Для текущего элемента (основан на ширине символа &#171;0&#187;)
rem Размер шрифта для корневого элемента

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

Размер шрифта в em, который может быть задан изначально при верстке сайта, устанавливается через свойство стилей font-size. То есть, 1 em равен дефолтному размеру шрифта либо размеру шрифта родителя. Запись в процентах тождественна em в том плане, что 1 em = 100%.

Для ex действуют точно такие же правила, что и в отношении em. Иными словами, существует привязка ex к размеру, установленному в веб-браузере по умолчанию, либо к величине размера шрифта родителя. Аналогично работает и &#171;ch&#187;.

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

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

3. Относительные единицы, привязанные к области просмотра браузера
Единица Краткое описание
vw 1% от ширины области просмотра
vh 1% от высоты области просмотра
vmin 1% от меньшего значения области просмотра по ширине и высоте
vmax 1% от большего значения области просмотра по ширине и высоте

Для чего нужны такие варианты задания размеров? Дело в том, что далеко не всегда наилучшим решением является использование стандартных относительных величин, включая проценты. Порой выгоднее связать величину шрифта с высотой и шириной окна браузера. Скажем, ежели область просмотра по высоте равна 800px, то 1vh = 8px, а при ширине 1500px &#8212; 1vw = 15px.

Единицы vmin и vmax определяются соответственно минимальными и максимальными размерами области по высоте и ширине. Образец: высота окна браузера 700px, а ширина &#8212; 1300px. В этом случае vmin = 7px, а vmax = 13px.

При установке размеров нужно обязательно указывать единицы (например, height: 55px), иначе браузер некорректно будет отображать соответствующие элементы. Значения, равные нулю, к данному правилу не относятся, их можно обозначать двумя способами (padding: 0 или padding: 0px), по понятным причинам с подавляющим преимуществом лидирует первый вариант.

Проценты

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

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

Ключевые слова

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

1. Значения свойства text-align, которые способствуют выравниванию текста по горизонтали: center | justify | left | right | start | end. Вот пример c параметром justify:

И для обоих прописаны стили:

Если в отношении элемента не указан цвет текста (свойство &#171;color&#187;), то по умолчанию текстовый фрагмент будет окрашен в черный (в большинстве популярных браузеров). В нашем примере для внешнего контейнера (&#171;bl-1&#187;) color как раз отсутствует. Вследствие этого при указании значения &#171;currentColor&#187; фон этого контейнера примет черный окрас:

3. Inherit &#8212; это ключевое слово в роли параметра устанавливает наследование соответствующих значений родительских элементов. Образец:

И CSS правила для него:

4. Initial &#8212; применяется в тех случаях, когда требуется установить исходные параметры свойств. Скажем, помогает восстановить значения, установленные браузером по умолчанию, либо определить начальные параметры, которые были изменены в результате наследования. Пример:

И стили для него:

С помощью класса &#171;init&#187; внешний вид фрагмента абзаца p, заключенного в тег span, и нижнего заголовка H2, изменен в соответствии с настройками их стилей по умолчанию.

5. Unset &#8212; это параметр, являющийся по сути "гибридом" inherit и initial. Определяет параметр свойства как inherit, ежели свойство наследуется от родителя, в противном случае &#8212; как initial.

Пример 1 (действует как inherit):

В соответствии с правилами CSS свойство color наследуется, поэтому &#171;unset&#187; в нашем примере возвращает зеленый цвет текста для контейнера &#171;xxx&#187;, который является потомком &#171;zzz&#187;:

Пример 2 (работает как initial):

Так как по правилам таблиц стилей свойство border не наследуется, то &#171;border-color: unset&#187; возвращает цвет рамки к значению по умолчанию, то есть она приобретает черный оттенок.

URL, или адрес

Этот параметр содержит в себе унифицированный указатель ресурса и применяется, когда нужно, например, указать относительный или абсолютный путь к файлу с изображением (читайте вот эту статью о вставке картинок на страницу с помощью HTML тега img). При этом используется ключевое слово url (), где между скобками и указывается путь до графического файла:

Время

Используется, например, при реализации анимационных эффектов (да-да, на чистом CSS можно создавать теперь и такие вещи), где параметры указываются в секундах (s) или миллисекундах (ms). Значения могут быть как в виде целых, так и дробных чисел. При этом надо помнить, что нельзя допускать пробела между числом и единицей измерения (2s, 50ms)./p>

И, соответственно, стили для него:

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

Строки

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

Скажем, ежели всю строку вы берете в одинарные кавычки, то внутренний текстовый фрагмент &#8212; в двойные, и наоборот. Разрешается также применять один и тот же вид, только в этом случае необходимо экранировать внутренние кавычки, добавляя перед ними обратный слеш &#171;\&#187;:

  • свойство: "строка ‘контента’"
  • свойство: ‘строка "контента"’
  • свойство: "строка \"контента\""
  • свойство: ‘строка \’контента\»

Далее рассмотрим конкретный пример, чтобы было понятнее.

Для начала ХТМЛ-код:

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

1. Название. Правда, задавать таким способом можно не все, а только часть оттенков (&#171;red&#187; &#8212; красный, &#171;green&#187; &#8212; зеленый, &#171;black&#187; &#8212; черный, &#171;orange&#187; &#8212; оранжевый, &#171;yellow&#187; &#8212; желтый, &#171;olive&#187; &#8212; оливковый и некоторые другие). Их также можно отнести к ключевым словам.

2. Hex (шестнадцатеричный код). Основой шестнадцатеричной системы, в отличии от известной всем десятеричной, являются 16 символов: 10 цифр (от 0 до 9) и 6 первых букв латинского алфавита (A, B, C, D, E, F). Буквы от A до F соответствуют числам от 10 до 15.

Значения цвета для стилевых свойств CSS

3.1. RGB &#8212; можно задавать значение цвета, исходя из десятеричной системы. Название данного метода является аббревиатурой трех основных задействованных в ней цветов: Red (красный), Green (зеленый), Blue (синий). Оттенки каждого из них находятся в диапазоне от 0 до 255. Для применения этой системы необходимо впереди прописать rgb, а в скобках указать каждый из компонентов цвета: rgb (240, 0, 180). Также не возбраняется использовать проценты:

3.2. RGBA &#8212; расширенный вариант предыдущего метода RGB, содержащий альфа-канал, который устанавливает прозрачность элемента в диапазоне от 0 до 1. Параметр &#171;0&#187; соответствует полной прозрачности, а &#171;1&#187; &#8212; совершенной непрозрачности.

4.1. HSL &#8212; наименование этого метода также представляет из себя не что иное как аббревиатуру, которая включает первые буквы трех слов: Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Именно эти характеристики в совокупности определяют конечный цвет. При этом оттенок расположен на конкретном месте цветового круга:

Поскольку весь круг составляет 360°, то каждому оттенку (hue) соответствует вполне конкретное значение в градусах в диапазоне от 0° до 359°. При этом параметры основных оттенков таковы: 0° &#8212; красный, 120° &#8212; зеленый, 240° &#8212; синий.

Насыщенность и светлота измеряются в процентах (от 0 ло 100%). Для saturate параметр 0 значит отсутствие цветовой гаммы, а 100% &#8212; максимально насыщенный цвет. Чем больше значение lightness, тем светлее тон, 0 соответствует черному, а 100% &#8212; белому.

4.2. HSLA &#8212; по аналогии с RGBA является расширенным вариантом HSL, к которому добавлен показатель прозрачности.

Угол поворота или наклона

В CSS в качестве параметров тех или иных свойств может применяться угловые характеристики (основа &#8212; круг). Вот какие единицы при этом используются:

  • градусы &#8212; deg (1 полный круг составляет 360deg);
  • грады &#8212; grad (полный круг 400grad);
  • радианы &#8212; rad. Целый круг равен 2&#960 (приблизительно 6.2832rad);
  • повороты &#8212; turn (1 turn приравнивается к полному повороту).

Немаловажно отметить, что могут использоваться отрицательные значения. Ниже даны наглядные примеры с параметрами некоторых углов (поворотов):

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

А теперь составим и правило CSS для такого фона:

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

Комментарии в CSS

Ну и, наконец, комментарии в правилах со свойствами CSS. На этой странице я уже неоднократно пользовался ими, разъясняя действие того или иного свойства. Комментарии вставляются прямо в коде стилей, напротив соответствующего свойства. Их текст располагается между символами «*», которые в свою очередь находятся между двумя знаками слэша &#171;/&#187;.

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

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

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

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

Трюки CSS, которые сделают из вас ниндзя верстки

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

Многие свойства, о которых пойдет речь, являются экспериментальными. Большинство из них поддерживаются всеми современными браузерами, однако, если вы решите использовать какое-либо из названных свойств в продакшне, не поленитесь зайти на Can I use и уточнить поддержку (недавно сильно расстроился, обнаружив, что Safari не поддерживает атрибут loading="lazy" ).

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

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

Итак, вы готовы к нашему небольшому путешествию в удивительный и почти безграничный мир CSS? Тогда вперед.

grid + place-items

Здесь вы найдете полное визуальное руководство по Grid и Flexbox .

Данная техника позволяет выравнивать элементы по горизонтали и вертикали при помощи всего лишь двух строк кода.

place-items является сокращением для justify-items и align-items .

Это свойство может использоваться как в отношении одной, так и в отношении сразу нескольких (дочерних) ячеек.

flex + margin

Другой современный способ выравнивания элементов по горизонтали и вертикали заключается в сочетании display: flex и margin: auto .

Справедливости ради следует отметить, что тоже самое можно реализовать с помощью такого сниппета:

flex + gap

Раз уж мы заговорили о Flexbox , нельзя не упомянуть, что не так давно у нас появилась возможность добавлять отступ между flex-элементами с помощью свойства gap (этой возможности чертовски не хватало):

inline-flex

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

columns

Данная техника позволяет разделять текст на колонки. Свойство column-count определяет количество колонок, column-gap — отступ между колонками, column-rule — стили для вертикальной линии, разделяющей колонки.

Свойство columns является сокращением для column-count и column-width .

background-repeat

Свойство background-repeat определяет порядок заполнения фона указанным изображением. Значение round позволяет равномерно распределять изображения по всей ширине контейнера, а значение space добавляет между изображениями небольшой отступ:

background-blend-mode

Свойство background-blend-mode определяет порядок наложения фонового изображения и цвета (или нескольких фоновых изображений/цветов) друг на друга.

  • color
  • color-burn
  • color-dodge
  • darken
  • difference
  • exclusion
  • hard-light
  • hue
  • lighten
  • luminosity
  • multiply
  • overlay
  • saturation
  • screen
  • soft-light

Когда-нибудь работали с Photoshop ? Тогда, думаю, вы понимаете, о чем идет речь.

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

background-clip

Свойство background-clip определяет, как цвет фона или фоновое изображение выводятся под границами блока. На мой взгляд, самым интересным значением данного свойства является text :

filter

Свойство filter позволяет применять к элементам некоторые художественные эффекты.

  • url() — svg-фильтр
  • blur() — размытие
  • brightness() — яркость
  • contrast() — контрастность
  • drop-shadow() — об этой функции поговорим отдельно
  • grayscale() — обесцвечивание
  • hue-rotate() — оттенок
  • invert() — инверсия
  • opacity() — прозрачность
  • saturate() — насыщенность
  • sepia() — сепия

Изменение цветовой темы (или схемы) сайта для ленивых:

Здесь вы найдете пример использования filter для реализации фильтров Instagram .

drop-shadow

Свойство filter со значением drop-shadow() , в отличие от похожего с точки зрения применяемого эффекта свойства box-shadow , позволяет добавлять тень к самому изображению (в формате PNG ), а не к блоку, в котором оно размещается.

object-fit

Свойство object-fit управляет соотношением сторон заменяемых элементов, таких как img и video , когда у них задана ширина или высота, а также способом масштабирования.

Значение scale-down , например, позволяет сохранять пропорции изображения независимо от размеров блока:

Свойство object-position определяет выравнивание контента выбранного замещаемого элемента внутри блока.

cursor

Знаете ли вы о том, что кроме иконок для курсора, предоставляемых браузером (например, cursor: pointer ), мы имеем возможность определять собственные изображения и svg?

scroll-behavior

Свойство scroll-behavior со значением smooth позволяет легко реализовать плавную прокрутку между секциями (разделами) страницы:

text-overflow

Свойство text-overflow со значением ellipsis позволяет добавлять . в конец текста при его выходе за пределы контейнера.

caret-color

Свойство caret-color позволяет определять цвет каретки — видимого маркера ( | ), указывающего на место вставки следующего символа.

scroll-snap

Группа свойств scroll-snap ( scroll-span-type , scroll-snap-align и scroll-snap-stop ) позволяет управлять поведением прокрутки. Данная группа свойств заслуживает отдельной статьи, но если кратко, то суть заключается в том, что в стилях определяются контрольные точки, при приближении к которым выполняется автопрокрутка:

Среди других возможностей scroll-snap можно назвать легкое создание слайдеров с помощью одного CSS .

supports

Правило @supports позволяет проверять поддержку браузером определенного свойства или свойств (или сочетания свойство/значение) перед их использованием.

Функция var() позволяет использовать значения пользовательских переменных в качестве значений свойств. Вторым опциональным параметром данной функции является резервное значение.

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

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

Если нам известны размеры такого элемента, мы можем сделать следующее:

С помощью функции attr() можно извлекать значение атрибута выбранного элемента и использовать его в стилях.

Реализация всплывающей подсказки средствами CSS :

:target

Псевдокласс :target позволяет создавать модальные окна, работающие без JavaScript :

::marker

Раньше мы удаляли маркер списка с помощью list-style: none и добавляли свой с помощью псевдоэлементов ::before или ::after . Сейчас существует более простой способ — псевдоэлемент ::marker .

::selection

Псевдоэлемент ::selection позволяет стилизовать выделение текста.

Напоследок, вот вам парочка полезных ссылок на ресурсы, которые сделают вас настоящим CSS-ниндзя:

Благодарю за внимание и хорошего дня!

Облачные серверы от Маклауд на NVMe-дисках запускаются за 1 минуту.

Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!

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

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