Введение в CSS: Grouping and Nesting (шаг 3)

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

Группирование

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


h2 {
     color: red;}

 .thisOtherClass {
     color: red;}

 .yetAnotherClass {

      color: red;}

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

h2, .thisOtherClass, .yetAnotherClass {

    color: red;}

Nesting
В структуре CSS обычно используется большое количество ID и селекторов.  Это делается для реализации специфических свойств селекторов внутри других селекторов.
Наприме:

#top {
     background-color: #ccc;
     padding: 1em
 }

#top h1 {
     color: #ff0;}

#top p {
     color: red;
     font-weight: bold;}

Это снимает необходимость использования дополнительных классов или же ID для определения тегов «p» и «h1«. Если рассмотреть HTML код, то выглядеть у вас это должно примерно так.


<div id="top">
     <h1>Chocolate curry</h1>
     <p>This is my recipe for making curry purely with chocolate</p>
     <p>Mmm mm mmmmm</p></div>

Таким образом, разделение селекторов с помощью запятой и пробела, позволяет задавать нам свойства «h1 внутри ID top, будет цвета #ff0″ а текст с тегом «p внутри ID top, будет выделен жирным  и окрашен красным«.
На деле это оказывается довольно сложной задачей, (потому что использование этих приемов может привести к более обьемному уровню (больше чем 2 тега как в примере) , этот тэг находится внутри того который находится на 1 уровень выше, который в свою очередь находится внутри 3-го) требующей достаточной практики.

GoodGudvin

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

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