1

Есть вот такая запись которая применяется ко всей странице,что тут означает запятая?

html,
body {
  height: 100%;

}

Как простыми div заменить ту верхнею запись и применить её только к элементам ниже то есть обернуть их в классы которые будут давать те свойства сверху только определённым элементам,а не всей странице

<div class="space">
  <div class="space__star space__star--shooting"></div>
</div>

1 ответ 1

3

Есть HTML-теги... <html></html>, <body></body>, <div></div> и т.п.

Чтобы в CSS обращаться к ним и менять их стили, пишут просто название тега:

body { background-color: #ffe2aa; } 
div { width: 100px; height: 100px; background-color: orange; }
<!DOCTYPE html>
<html>

<head></head>
<body>
  <div></div>
</body>

</html>

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

body, div, p, a { color: red; }

А название класса можно выделить через точку:

.ваш_класс, .другой_класс { у-обоих: те-же-стили; }

Перед точкой можно указывать и название тега. Чтобы только эти теги с этим классом получили стиль, div.класс {...}

div { 
  width: 100px; 
  height: 100px; 
  border: 2px solid orange;
  margin: 5px; 
}

/* Вообще, принято все стили разбивать на такие блоки - всё на отдельной строчке
Но главный критерий - чтобы удобно было читать код. Если совсем мелкий кусок, 
зачастую удобнее не занимать лишние строки */

.space { background-color: #045acf; }

.space__star { border: none; }
<div class="space">
  <div class="space__star space__star--shooting"></div>
</div>

<div></div>

Список CSS - селекторов и их комбинации >>

4
  • Можете подсказать вот код я где хотел убрать из css html,body как тут их заменить на div с определённым id codepen.io/Alexander3232/pen/gNPwjW Commented 14 июн. 2019 в 18:20
  • Пытался сделать обёртку но не срабатывало Commented 14 июн. 2019 в 18:20
  • Этот кусок вообще можно убрать из кода ( именно CSS, а не HTML ). А блоку space дописать стили .space { width: 200px; height: 100px } - и всё... Commented 14 июн. 2019 в 18:24
  • Спасибо за развёрнутый и подробный ответ дал лучшего Commented 14 июн. 2019 в 18:28

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.