Группирование - это способ сокращения кода. Вообще, чем короче код программы - тем лучше. Чем меньше размер нашей веб-страницы, тем быстрее она будет загружаться (при низкой скорости интернет-соединения скорость загрузки будет очень важна). Чтобы дважды не писать одни и те же свойства для разных элементов, их можно сгруппировать. Вот так:
Группирование, наследование. Способы подключения CSS, каскадирование
Группирование
/* Код без группирования */
h1 {
background: red;
color: white;
}
h2 {
background: red;
color: white;
}
.red {
background: red;
}
#red-button {
background: red;
color: white;
}
/* Код с группированием */
h1, h2, .red, #red-button {
background: red;
}
h1, h2, #red-button {
color: white;
}
Наследование
Наследование - это перенос правил CSS от элементов-"родителей" к элементам-"детям" (находящимся внутри "родителей"). Простейший пример наследования - если прописать в правилах для тега body определённый цвет текста (например, green), то этот цвет будет у всего текста на странице (если мы специально не укажем иное).
! Не все правила CSS наследуются ! Наследуется то или иное стилевое свойство или нет - нужно смотреть в справочнике.
Наследование даёт нам возможность сокращать код. Если установить наследуемое свойство для родительского элемента, то для дочерних элементов его можно не указывать.
Задание 1 (на занятии)
Возьмите любую веб-страницу с CSS, созданную вами ранее. Сократите код CSS используя группирование (минимум - три раза) и наследование (минимум два раза). Если ваш код слишком прост, чтобы использовать наследование и группирование требуемое количество раз - усложните его, добавьте новые правила. После каждого применения группирования или наследования - напишите для меня комментарий прямо в коде (см. материал с прошлого занятия). Например: "Это свойство данного элемента наследуется такими-то элементами". Или: "Группирование - первое применение".
Способы подключения CSS
Подключить код CSS к веб-странице можно тремя разными способами. Первый вы уже знаете - разместить код в секции head внутри тега style. Это называется "глобальные стили". Этот способ удобен тем, что можно весь код хранить в одном месте.
Второй способ - использовать HTML-атрибут style. Вот так:
<p style="color: red">Какой-то текст.</p>
Текст абзаца будет красным. Это называется "внутренние стили". Их рекомендуется применять как можно реже, потому что они увеличивают объём файла и усложняют программистам работу с документом.
Третий способ - сохранить весь код в отдельном файле с расширением .css и подключить этот файл к веб-странице, используя в секции head тег link. Вот так:
<link rel="stylesheet" href="1.css">
Это называется "связанные стили". Код в этом примере означает, что таблица стилей, которая называется "1.css" хранится в той же папке, что и документ, в котором она используется. Связанные стили хороши тем, что один и тот же файл CSS мы можем применять к разным веб-страницам. А на сайте их, как правило, много.
Когда браузер обрабатывает код CSS разные стили имеют разный приоритет:
- Внутренние
- Глобальные
- Связанные
Каскадирование
Аббревиатура CSS расшифровывается как "каскадные таблицы стилей". "Каскадом" в данном случае называют одновременное применение браузером разных стилевых правил к одной и той же веб-странице. У разных стилей - разный приоритет (в списке первым идёт стиль с самым высоким приоритетом):
- Стиль пользователя с добавлением !important
- Стиль автора с добавлением !important
- Стиль пользователя
- Стиль автора
- Стиль браузера
Стиль браузера - это оформление, применяемое браузером по умолчанию. У разных-браузеров оно разное. Его можно увидеть, если не писать код CSS для веб-страницы.
Стиль автора - это код CSS, написанный автором страницы.
Стиль пользователя - это пользовательские настройки браузера, влияющие на отображение веб-страниц.
!important - это ключевое слово, которое можно использовать после правила CSS для повышения его приоритета. Вот так:
.greentext {
color: green !important;
}
/* Текст элемента с классом "greentext" будет зелёным. Правило повышенной важности.*/