Имя класса CSS3

08 июля 2021, 23:20

Столкнулся с непониманием названий имен классов в CSS3. Сейчас смотрю видео с версткой, человек задает имя класса: class = "get-started-btn menu-link". Вопрос: для чего используется пробел между get-started-btn и menu-link? Что нашел: Погуглил, получилось найти что это что-то вроде двойного класса, и это можно использовать для задания разных свойств. В итоге есть какое-то смутное представление о том как это можно использовать, но нет понимания, хотелось бы узнать для чего это и как можно использовать.

Answer 1

Для наглядности: представьте себе, что у вас есть страница с текстом, состоящим из абзацев, а в нем встречаются цитаты (желтые), врезки слева (серые) и справа (голубые). Одними классами вы задаете общие стили, другими - менее общие (например, только для врезок) или вообще специфические:

/* basic paragraph styles */ 
 
p { 
  font-family: sans-serif; 
  margin-bottom: 5px; 
  background-color: #fef; 
  padding: 3px 5px; 
} 
 
 
/* main paragraph styles */ 
 
.main { 
  font-size: 14px; 
} 
 
 
/* small font */ 
 
.small { 
  font-size: 11px; 
} 
 
 
/* citation styles */ 
 
.quote { 
  background-color: #FFF0BA; 
  padding: 5px 10px; 
  border: 1px solid #ccc; 
  margin: 20px; 
} 
 
 
/* outblock styles */ 
 
.outblock { 
  border: 1px solid gray; 
  padding: 10px; 
  margin-bottom: 10px; 
  width: 50%; 
  clear: none; 
  display: block; 
} 
 
 
/* float outblocks right */ 
 
.right { 
  float: right; 
  margin-left: 10px; 
  background-color: #E1ECF4 
} 
 
 
/* float outblocks left */ 
 
.left { 
  float: left; 
  margin-right: 10px; 
  background-color: #eeeeee 
}

<p class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
<p class="main quote">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
<p class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
<p class="main outblock right">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
<p class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> 
 
<p class="main outblock left small">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
<p class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
<p class="main">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Answer 2

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

Answer 3

Обясьню нормальным языком. Например ты пишешь меню, где есть 5 ли, ты задаешь всем класс ex1. Но тебе надо чтобы твой 3 ли имел и свойства которые ты задал классу ex1 и еще некоторые другие, ты тут ему даешь еще один класс, и уже след свойства даешь второму классу. Получается что 3 ли имеет 2 класса.