Следует ли указывать свойства с пробелом в CSS - PullRequest
Новая
       0

Следует ли указывать свойства с пробелом в CSS

2 голосов
/ 05 февраля 2020

Я учусь HTML и CSS в W3schools. Я наткнулся на запутанную инструкцию. HTML5 Руководство по стилю W3schools гласит «Используйте только кавычки вокруг значений, если значение содержит пробелы» в разделе таблиц стилей. И он привел пример, который выглядит так: 

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

Если свойство font-family имеет указанное в кавычках значение Arial Black. Но когда я выполнял фоновое упражнение W3schools CSS , следующий код не помещает фоновое изображение в верхнюю правую позицию 

<head>
  <style>
    body {
      background-image: url("img_tree.png");
      background-position: "right top";
      background-repeat: no-repeat;
    }
  </style>
</head>

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

Теперь я запутался. Из руководства по стилю W3schools представляется рекомендуемым стандартом указывать CSS свойства с пробелами. Но тогда это не работает! Когда я должен цитировать и когда я должен цитировать (с точки зрения рекомендуемого стандарта)?

Ответы [ 2 ]

0 голосов
/ 05 февраля 2020

Не путайте свойство font-family с другими свойствами

Мы можем добавлять и использовать любые новые настраиваемые семейства шрифтов с собственным именем!

Некоторые свойства css должны быть в кавычки некоторые предопределенные значения не нужно указывать в CSS

0 голосов
/ 05 февраля 2020

Когда я должен цитировать и когда я должен цитировать (с точки зрения рекомендуемого стандарта)?

Нет стандарта и нет рекомендации. У каждого свойства есть свой синтаксис, которому нужно следовать. Так просто.

Для background-position и как определено в спецификации 1 : 

<bg-position> =  [ left | center | right | top | bottom | <length-percentage> ]
|
  [ left | center | right | <length-percentage> ]
  [ top | center | bottom | <length-percentage> ]
|
  [ center | [ left | right ] <length-percentage>? ] &&
  [ center | [ top | bottom ] <length-percentage>? ]

Вы можете следовать синтаксису для поймите значение |, &&, et c, и вы увидите, что <string> (указанное в кавычках) не допускается как значение background-position

Связанные: Почему CSS именованные области сетки не в кавычках?

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

Тривиальные примеры: 

border:2px solid red;
padding: 20px 10px;
margin:0 auto;
background:url(...) top/cover no-repeat fixed;

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...