Что в этом css коде является свойством
Перейти к содержимому

Что в этом css коде является свойством

  • автор:

Базовый синтаксис CSS

Как уже было отмечено ранее, стилевые правила записываются в своём формате, отличном от HTML. Основным понятием выступает селектор — это некоторое имя стиля, для которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. Общий способ записи имеет следующий вид.

Базовый синтаксис CSS

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

use css

Пример 5.1. Использование стилей

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

Правила применения стилей

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

Форма записи

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

writing

Пример 5.2. Расширенная форма записи

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

compact

Пример 5.3. Компактная форма записи

Эта форма записи более наглядная и удобная в использовании.

Имеет приоритет значение, указанное в коде ниже

Если для селектора вначале задаётся свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде установлено ниже (пример 5.4).

any value

Пример 5.4. Разные значения у одного свойства

В данном примере для селектора p цвет текста вначале установлен зелёным, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к тексту.

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

Значения

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

Комментарии

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

Чтобы пометить, что текст является комментарием, применяют следующую конструкцию /* . */ (пример 5.5).

comments

Пример 5.5. Комментарии в CSS-файле

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

Краткая форма записи свойств

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

The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS background property is a shorthand property that’s able to define the values of background-color , background-image , background-repeat , and background-position . Similarly, the most common font-related properties can be defined using the shorthand font , and the different margins around a box can be defined using the margin shorthand.

Tricky edge cases

Even if they are very convenient to use, there are a few edge cases to keep in mind when using them:

    A value which is not specified is set to its initial value. That sounds anecdotal, but it really means that it overrides previously set values. Therefore:

background-color: red; background: url(images/bg.gif) no-repeat left top; 
    Shorthands handling properties related to edges of a box, like border-style (en-US), margin or padding , always use a consistent 1-to-4-value syntax representing those edges:
border1.png The 1-value syntax: border-width: 1em — The unique value represents all edges
border2.png The 2-value syntax: border-width: 1em 2em — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.
border3.png The 3-value syntax: border-width: 1em 2em 3em — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge
border4.png The 4-value syntax: border-width: 1em 2em 3em 4em — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word trouble: TRBL)
corner1.png The 1-value syntax: border-radius: 1em — The unique value represents all corners
corner2.png The 2-value syntax: border-radius: 1em 2em — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.
corner3.png The 3-value syntax: border-radius: 1em 2em 3em — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner
corner4.png The 4-value syntax: border-radius: 1em 2em 3em 4em — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.

Background properties

A background with the following properties .

background-color: #000; background-image: url(images/bg.gif); background-repeat: no-repeat; background-position: left top; 

. can be shortened to just one declaration:

background: #000 url(images/bg.gif) no-repeat left top; 

(The shorthand form is actually the equivalent of the longhand properties above plus background-attachment: scroll and, in CSS3, some additional properties.)

Font properties

The following declarations .

font-style: italic; font-weight: bold; font-size: 0.8em; line-height: 1.2; font-family: Arial, sans-serif; 

. can be shortened to the following:

font: italic bold 0.8em/1.2 Arial, sans-serif; 

This shorthand declaration is actually equivalent to the longhand declarations above plus font-variant: normal and font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3).

Border properties

With borders, the width, color, and style can be simplified into one declaration. For example, the following CSS .

border-width: 1px; border-style: solid; border-color: #000; 

. can be simplified as:

border: 1px solid #000; 

Margin and padding properties

Shorthand versions of margin and padding values work the same way. The following CSS declarations .

margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px; 

. are the same as the following declaration. Note that the values are in clockwise order, beginning at the top: top, right, bottom, then left (TRBL, the consonants in «trouble»).

margin: 10px 5px 10px 5px; 

See also

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

      Found a content problem with this page?

      • Edit the page on GitHub.
      • Report the content issue.
      • View the source on GitHub.

      This page was last modified on 7 авг. 2023 г. by MDN contributors.

      Your blueprint for a better internet.

      Малоизвестные CSS-свойства

      Существует много CSS-свойств, о которых некоторые дизайнеры просто не знают. Или — знают, но забывают использовать эти свойства там, где они способны принести большую пользу. Некоторые из этих свойств могут помочь отказаться от использования JavaScript ради достижения некоего результата, некоторые позволяют экономить время за счёт написания меньших объёмов CSS-кода. Я, занимаясь фронтенд-разработкой, постоянно натыкаюсь на подобные свойства. Однажды я подумал о том, чтобы взять и составить список CSS-свойств, интересных, но используемых редко. Так и родилась эта статья.

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

      Использование свойства place-items с CSS Grid

      Пример использования свойства place-items

      Я узнал о данном приёме из этого твита. Свойство place-items позволяет центрировать элемент по горизонтали и по вертикали, обходясь при этом минимальным объёмом CSS-кода.

      Вот HTML-разметка, которая использовалась при формировании страницы с предыдущего рисунка:

       

      CSS is awesome

      Yes, this is a hero section made for fun.

      See more
      .hero

      Прежде чем углубляться в детали, полагаю, стоит упомянуть о том, что свойство place-items представляет собой сокращение, используемое для настройки свойств justify-items и align-items . Если бы это свойство не использовалось, то вышеприведённый CSS-код выглядел бы так:

      .hero

      Возможно, вас интересуют подробности о работе этого свойства. Позвольте мне о них рассказать. Когда используется свойство place-items , оно применяется к каждой ячейке сетки. Это означает, что оно выравнивает по центру содержимое всех ячеек. То есть, с его помощью можно стилизовать всё, что размещено в ячейках сетки. Для того чтобы это продемонстрировать, давайте рассмотрим стилизацию сетки с несколькими ячейками:

      .hero

      Использование подобного стиля приведёт к результату, показанному на следующем рисунке.

      Содержимое всех ячеек выровнено по центру

      Использование старого доброго свойства margin с CSS Flexbox

      Выравнивание элементов по центру при работе с Flexbox-макетом

      Использование конструкции margin: auto во Flexbox-макетах позволяет очень легко выравнивать элементы по центру, по горизонтали и вертикали.

      .parent < width: 300px; height: 200px; background: #ccc; display: flex; >.child

      Стилизация маркеров списка

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

      Для начала позвольте мне признаться в том, что я не знал о том, что маленькие кружочки, находящиеся рядом с каждым элементом маркированного списка, называются «маркерами». Прежде чем я узнал о существовании псевдоэлемента ::marker , я настраивал эти «кружочки», сбрасывая стиль списка и пользуясь псевдоэлементами ::before или ::after . Но это совершенно непрактично и неправильно. Я имею в виду следующее:

      ul < list-style: none; padding: 0; >li < color: #222; >li::before

      А вот как та же самая задача решается с помощью ::marker :

      li < color: #222; >li::marker

      Как по мне, так этот подход гораздо проще и удобнее чем тот, где применялся псевдоэлемент ::before .

      Псевдоэлемент ::marker поддерживается в Firefox 68+ и в Safari 11.1+. А в Chrome и в Edge 80+ для включения его поддержки нужно активировать соответствующий флаг.

      Свойство text-align

      По мере роста популярности CSS Grid и CSS Flexbox некоторые разработчики, которые только начали использовать CSS, часто, для центровки и выравнивания контента, используют современные механизмы, а не старое свойство text-align . Но это свойство всё ещё совершенно работоспособно.

      Использование text-align: center позволяет быстро и удобно выравнивать материалы страниц. Рассмотрим пример.

      Выравнивание содержимого верхней части страницы

      Содержимое раздела нужно выровнять по центру. Что использовать для создания макета этого раздела? Flexbox или Grid? На самом деле, эту задачу легко можно решить, всего лишь воспользовавшись свойством text-align .

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

      Значение inline-flex свойства display

      Использование значения inline-flex свойства display

      Вам когда-нибудь нужно было вывести несколько значков во Flexbox-контейнере, который является строчным (inline) элементом, сделав так, чтобы каждый из этих значков был бы Flexbox-элементом? Для решения этой задачи и предназначено значение inline-flex свойства display .

      Вот разметка, описывающая набор элементов:

      Вот код стилизации этих элементов:

      .badge < display: inline-flex; /* здесь творятся чудеса */ justify-content: center; align-items: center; >

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

      Свойство column-rule

      Применение свойства column-rule

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

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

      Имя свойства, column-rule , как кажется, не вполне точно отражает его предназначение. Логичнее было бы назвать его, например, «border-right». Это свойство очень хорошо поддерживается всеми актуальными браузерами (IE 10+, Firefox 3.5+, Chrome 4+, Safari 3.1+, Edge 12+).

      Свойство object-fit

      Применение свойства object-fit

      CSS-свойство object-fit — это прямо-таки «волшебная палочка» веб-дизайнера. Когда я о нём узнал, я, используя его, стал работать по-новому, что серьёзно облегчило мне жизнь. Например, недавно я работал над разделом одного сайта, в котором выводился набор логотипов. Подобные разделы иногда довольно сложно создавать из-за того, что логотипы имеют разные размеры. Некоторые из них вытянуты по горизонтали, некоторые — по вертикали.

      Используя свойство object-fit: contain я смог управлять свойствами width и height логотипов, что позволило мне размещать логотипы в областях с заранее заданной шириной и высотой.

      Задавая свойства width и height элемента , мы можем управлять той областью, в которой будет размещён логотип. Это очень удобно. А ещё лучше то, что мы можем поместить вышеприведённый код в директиву @supports , что позволит избежать растягивания изображений в браузерах, не поддерживающих object-fit .

      @supports (object-fit: contain) < img < object-fit: contain; height: 75px; >> 

      Знаете ли вы о каких-нибудь интересных, но малоизвестных CSS-свойствах?

      Введение в пользовательские CSS-свойства

      Стандарт CSS Custom Properties изменил CSS. Появились безумные возможности, о которых раньше мы могли только мечтать. Рассказываем, какие именно и почему новичкам стоит изучить их как можно быстрее.

      Что такое пользовательское свойство

      Пользовательское свойство — это CSS-свойство, которое создал сам разработчик. Браузер ничего не знает о таком свойстве, пока его не объявили.
      Объявление пользовательского свойства начинается с двойного дефиса, после которого указывают название, ставят двоеточие и добавляют значение.

      Для примера объявим пользовательское свойство —netologyBrandColor со значением purple для элемента button :

      button

      Теперь браузер знает о нашем свойстве, но в чем его польза?

      Особенности пользовательских свойств

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

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

      Для примера добавим пользовательское свойство для встроенных свойств border и color :

      button

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

      Зачем изучать пользовательские свойства, если есть переменные в Sass и они полностью устраивают?

      Переменные в препроцессорах, таких как LESS и Sass, помогают организовать код, чтобы нам было проще поддерживать его. Например, в следующем коде я использую переменную $netologyBrandColor , в которой хранится основной цвет бренда:

      $netologyBrandColor: purple; button

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

      button

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

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

      button < --netologyBrandColor: purple; border: 2px solid var(--netologyBrandColor); color: var(--netologyBrandColor); >button:hover

      Теперь, если у кнопки сработает состояние hover , значения у свойств border и color изменятся. Именно из-за этой особенности пользовательские свойства и называют «живыми»: они могут изменяться прямо в браузере, и соответственно менять значения встроенных свойств, к которым они применяются.

      В качестве еще одного примера изменю значение пользовательского свойства при состоянии focus .

      button < --netologyBrandColor: #000000; border: 2px solid var(--netologyBrandColor); color: var(--netologyBrandColor); >button:hover < --netologyBrandColor: #27ae60; >button:focus

      Способность динамического изменения пользовательских свойства можно сочетать с Sass-переменными или LESS-переменными.

      Пользовательские свойства и media-выражения

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

      Для примера создадим два пользовательских свойства: —mq и —textColor . При помощи первого выведем название медиафункции на страницу, а второе нужно для переключения цвета. На экранах с шириной до 768px текст будет пурпурным, а от 769px — красным.

      body::before < content: var(--mq); color: var(--textColor); >@media (max-width: 768px) < body::before < --mq: "max-width: 768px"; --textColor: purple; >> @media (min-width: 769px) < body::before < --mq: "min-width: 769px"; --textColor: red; >>

      Пользовательские свойства и функция calc

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

      .child < width: calc(100% / var(--childCount)); >

      Если добавить значение 5 для пользовательского свойства —childCount в браузере, увидим следующую картину:

      Для разнообразия изменю 5 на 7 и элементы перестроятся.

      Пользовательские свойства и SVG

      Еще одна возможность пользовательских свойств — с их помощью можно задать значение для таких SVG-свойств, как fill , stroke , stroke-width и других. Это можно сделать двумя способами.

      В первом способе будем использовать атрибуты fill , stroke и stroke-width , к которым в качестве значения определим пользовательские свойства.

      И добавим в CSS значения для пользовательских свойств:

      .svg-with-attr

      Слева иконка без стилизации, а справа с нашими настройками. Вот так просто мы можем настраивать графику.

      Второй способ — убрать атрибуты их и заменить на CSS-свойства.

      .svg-with-props

      Я специально добавил для свойств fill , stroke и stroke-width другие значение, чтобы визуально была заметна разница между примерами.

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

      Согласно caniuse.com, пользовательские свойства работают в большинстве современных браузеров, кроме IE11.

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

      Если же вам не нужно поддерживать IE11, смело используйте все возможности пользовательских свойств.

      Заключение

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

      От редакции

      Курсы «Нетологии» по теме:

      • онлайн-профессия «Аналитик данных»
      • онлайн-профессия «Data Scientist»
      • онлайн-курс «Фронтенд-разработчик»
      • нетология
      • пользовательские свойства
      • css

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

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