Вы здесь: Главная > CSS > Группировка и вложение

Группировка и вложение

Опубликовано автором Просмотры: 9

Вы можете упростить свой код двумя способами — как HTML, так и CSS — и упростить управление.

Группировка

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

Например, если у вас есть что-то вроде:

h2 {
    color: red;
}

.thisOtherClass {
    color: red;
}

.yetAnotherClass {
    color: red;
}

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

h2, .thisOtherClass, .yetAnotherClass {
    color: red;
}

Вложение

Если CSS структурирован хорошо, не должно быть необходимости использовать много селекторов классов или идентификаторов. Это потому, что вы можете указать свойства селекторам внутри других селекторов.

Например:

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

#top h1 {
    color: #ff0;
}

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

Это устраняет необходимость в классах или идентификаторах в тегах p и h1, если это применяется к HTML, который выглядит примерно так:

<div id="top">
    <h1>Шоколадное пирожное</h1>
    <p>Мой рецепт пирожного с шоколадом</p>
    <p>Ммм мм ммммммм</p>
</div>

Это потому, что, разделяя селекторы пробелами, мы говорим “h1 внутренний идентификатор top — это цвет #ff0”, а “p внутренний идентификатор top — это red и bold”.

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

Страницы в тему:

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