Java, UX, HTML, CSS, WEB-design

Понимание синтаксиса значения свойства CSS

Краткое описание по статье Понимание синтаксиса значения свойства CSS

Название: Понимание синтаксиса значения свойства CSS . Краткое описание: [ad_1] ⭐ Расс Уи . Дата публикации: 04.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Расс Уикли

  • 0 Комментарии

Понимание синтаксиса значения свойства CSS

  • 12 минут чтения

  • Кодирование, CSS

Краткое резюме ↬

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

То Консорциум всемирной паутины использует определенный синтаксис для определения возможных значений, которые можно использовать для всех свойств CSS. Вы могли видеть этот синтаксис в действии, если когда-либо смотрели на спецификацию CSS — как в синтаксисе для border-image-slice. Давайте взглянем:

<'border-­image-­slice'> = [<number> | <percentage>]{1,4} && fill?

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

Понимание синтаксиса значения свойства CSS

Форма Бэкуса-Наура

Мы начнем с формы Бэкуса-Наура, потому что это поможет нам понять синтаксис значений свойств W3C.

Еще после прыжка! Продолжить чтение ниже ↓

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

Дальнейшее чтение на SmashingMag:

  • Введение в PostCSS
  • По-настоящему плавная типографика с единицами vh и vw
  • Создание адаптивных фигур с помощью Clip-Path

Сегодня используется широкий спектр расширений и вариантов исходной нотации Бэкуса-Наура, включая расширенную форму Бэкуса-Наура (EBNF) и расширенную форму Бэкуса-Наура (ABNF).

Спецификация BNF представляет собой набор правил, записанных следующим образом:

<symbol>  ::=  __expression__

Слева всегда есть нетерминальный символ, за которым следует ::= символ, означающий «можно заменить на». Справа находится expressionкоторый состоит из одной или нескольких последовательностей символов, используемых для получения значения символа слева.

Спецификации BNF в основном говорят: «Все, что слева, может быть заменено тем, что справа».

Нетерминальные и терминальные символы

Нетерминальные символы — это символы, которые можно заменить или разбить на части. В BNF нетерминальные символы помещаются между угловыми скобками, < и >. В приведенном ниже примере <integer> и <digit> являются нетерминальными символами.

<integer>  ::=  <digit> | <digit><integer>

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

<digit>  ::=  0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Синтаксис значения свойства CSS

Хотя синтаксис значения свойства CSS W3C основан на концепции BNF, он имеет некоторые отличия. Как и BNF, он начинается с нетерминального символа. В отличие от BNF, он описывает символы, используемые в выражении, как «значения компонентов».

В приведенном ниже примере <line-width> является нетерминальным символом, и <length>, thin, medium и thick являются компонентными значениями.

<line-­width>  =  <length> | thin | medium | thick

Значения компонентов

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

1. Значения ключевых слов

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

<line-­width>  =  <length> | thin | medium | thick

2. Основные типы данных

Базовые типы данных определяют основные ценности, такие как <length> и <color>. Они не являются терминальными, поскольку их можно заменить фактическими значениями длины или цвета. В приведенном ниже примере <color> символ — это базовый тип данных.

<'background-color'>  =  <color>

Этот <color> значение может быть заменено в нашем CSS фактическим значением цвета, используя ключевое слово, расширенное ключевое слово, значение RGB, RGBA, HSL или HSLA или transparent ключевое слово.

.example { background-color: red; }
.example { background-color: honeydew; }
.example { background-color: rgb(50%,50%,50%); }
.example { background-color: rgba(100%,100%,100%,.5); }
.example { background-color: hsl(280,100%,50%); }
.example { background-color: hsla(280,100%,50%,0.5); }
.example { background-color: transparent; }

3. Типы данных свойств

Тип данных свойства — это нетерминальный символ, определяющий фактическое имя свойства. Он определяется с помощью имени свойства (заключенного в кавычки), заключенного в угловые скобки (<>). В приведенном ниже примере <‘border-width’> символ — это тип данных свойства.

<'border-­width'>  =  <line-­width>{1,4}

Типы данных свойств могут появляться непосредственно в нашем CSS как свойства. В приведенном ниже примере border-width свойство используется для определения 2-пиксельной границы для .example класс.

.example { border-width: 2px; }

4. Типы данных, не являющиеся свойствами

Тип данных, не являющийся свойством, — это нетерминальный символ, который не имеет того же имени, что и свойство. Однако он определяет аспекты того или иного свойства. Например, <line-­width> не свойство, а тип данных, определяющий различные <border> характеристики.


<line-­width>  =  <length> | thin | medium | thick

<'border-­width'>  =  <line-­width>{1,4}

Комбинаторы значений компонентов

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

1. Смежные значения

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

/* Component arrangement: all in given order */
<'property'> = value1 value2 value3

/* Example */
.example { property: value1 value2 value3; }

2. Двойной амперсанд

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

/* Component arrangement: all, in any order */
<'property'> = value1 && value2

/* Examples */
.example { property: value1 value2; }
.example { property: value2 value1; }

3. Одиночная труба

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

/* Component arrangement: one of them must occur */
<'property'> = value1 | value2 | value3

/* Examples */
.example { property: value1; }
.example { property: value2; }
.example { property: value3; }

4. Двойная труба

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

/* Component arrangement: one or more in any order */
<'property'> = value1 || value2 || value3

/* Examples */
.example { property: value1; }
.example { property: value2; }
.example { property: value3; }
.example { property: value1 value2; }
.example { property: value1 value2 value3; }
...etc

5. Кронштейны

Скобки ([ ]) вокруг двух или более альтернатив означает, что компоненты внутри принадлежат одной группе. В приведенном ниже примере синтаксис перечисляет три значения, но два из них указаны в квадратных скобках, поэтому они относятся к одной группе. В правилах CSS доступны две опции: либо value1 и value3 или value2 и value3.

/* Component arrangement: a single grouping */
<'property'> = [ value1 | value2 ] value3

/* Examples */
.example { property: value1 value3; }
.example { property: value2 value3; }

Множители стоимости компонентов

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

1. ? Символ

Знак вопроса(?) указывает, что предыдущий тип, слово или группа являются необязательными и встречаются ноль или один раз. В приведенном ниже примере второе значение помещается в скобки вместе с запятой. Знак вопроса, поставленный после этой группы, означает, что value1 должно произойти, но мы могли бы также использовать value1 и value2разделенные запятой.

/* Component multiplier: zero or one time */
<'property'> = value1 [, value2 ]?

/* Examples */
.example { property: value1; }
.example { property: value1, value2; }

2. * Символ

Звездочка (*) указывает, что предшествующий тип, слово или группа встречаются ноль или более раз. В приведенном ниже примере второе значение помещается в скобки вместе с запятой. Звездочка после этой группы означает, что value1 должно произойти, но мы могли бы также использовать <value2> столько раз, сколько мы хотим, с каждым экземпляром, разделенным запятой.

/* Component multiplier: zero or more times */
<'property'> = value1 [, <value2> ]*

/* Examples */
.example { property: value1; }
.example { property: value1, <value2>; }
.example { property: value1, <value2>, <value2>; }
.example { property: value1, <value2>, <value2>, <value2>; }
...etc

3. + Символ

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

/* Component multiplier: one or more times */
<'property'> = <value>+

/* Examples */
.example { property: <value>; }
.example { property: <value> <value>; }
.example { property: <value> <value> <value>; }
...etc

4. {A} Символ

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

/* Component multiplier: occurs A times */
<'property'> = <value>{2}

/* Examples */
.example { property: <value> <value>; }

5. {A,B} Символ

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

/* Component multiplier: at least A and at most B */
<'property'> = <value>{1,3}

/* Examples */
.example { property: <value>; }
.example { property: <value> <value>; }
.example { property: <value> <value> <value>; }

6. {A,} Символ

То B может быть опущен в {A,} указать, что должно быть не менее A повторений, без верхнего предела количества повторений. В приведенном ниже примере необходимо использовать как минимум одно значение, но также можно использовать любое количество дополнительных значений. Ни одно из этих значений не будет разделено запятой.

/* Component multiplier: at least A, with no upper limit */
<'property'> = <value>{1,}

/* Examples */
.example { property: <value>; }
.example { property: <value> <value>; }
.example { property: <value> <value> <value>; }
...etc

7. # Символ

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

/* Component multiplier: one or more, separated by commas */
<'property'> = <value>#

/* Examples */
.example { property: <value>; }
.example { property: <value>, <value>; }
.example { property: <value>, <value>, <value>; }
...etc

8. ! Символ

Восклицательный знак ! после группы указывает, что группа требуется и должна производить по крайней мере одно значение. В приведенном ниже примере value1 требуется вместе со значением из группы, включающей value2 и value3. Всего может быть только два значения; так что варианты есть value1 и value2 или value1 и value3.

/* Component multiplier: required group, at least one value */
<'property'> = value1 [ value2 | value3 ]!

/* Examples */
.example { property: value1 value2; }
.example { property: value1 value3; }

То <'text-shadow'> Синтаксис: пример

Давайте посмотрим на <‘text-shadow’> свойство в качестве примера. Вот как это свойство определяется в спецификации:

<'text-shadow'> = none | [ <length>{2,3} && <color>? ]#

Мы можем разбить различные символы:

  • То | указывает, что мы можем использовать ключевое слово none или группа [].
  • То # multiplier означает, что мы можем использовать одну или несколько из этих групп, разделенных запятыми.
  • Внутри группы, {2,3} указывает, что мы можем использовать два или три значения длины.
  • То && указывает, что мы должны включить все значения, но они могут быть включены в любом порядке.
  • Просто чтобы быть хитрым, <color> стоимость включает в себя ? множитель, что означает, что он может встречаться ноль или один раз.

На простом языке это можно было бы записать так:

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

Это означает, что мы могли бы написать text-shadow собственности различными способами. Например, мы могли бы установить text-shadow значение, чтобы быть none:

.example { text-shadow: none; }

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

Поскольку радиус размытия не был определен, начальное значение 0 будет использоваться; поэтому тень будет резкой. Если цвет не определен, цвет текста будет использоваться для цвета тени.

.example { text-shadow: 10px 10px; }

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

.example { text-shadow: 10px 10px 10px; }

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

.example { text-shadow: 10px 10px 10px red; }
.example { text-shadow: red 10px 10px 10px; }

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

.example {
    text-shadow:
        10px 10px red,
        -20px -20px 5px lime;
}

Вывод

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

Для дальнейшего чтения посетите следующие веб-сайты:

  • «Синтаксис определения значения» в «CSS Values ​​and Units Module Level 3», W3C
  • «Справочник по CSS», Mozilla Developer Network
  • «Как читать спецификации W3C», Дж. Дэвид Айзенберг, A List Apart
Сокрушительная редакция
(вф, ал, ил)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Понимание синтаксиса значения свойства CSS

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

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

Ваш адрес email не будет опубликован.

Кнопка «Наверх»