Академия: Курс Сodecademy - Learn HTML & CSS - Организация HTML & CSS
- написанию четкого, поддерживаемого HTML-кода для себя и для других разработчиков;
- применению всей глубины стилей CSS.
Идентификатор id
id - задает стилевой идентификатор (уникальное имя элемента), которое используется для изменения его стиля. Идентификатор в коде документа должен встречаться только один раз.
<h1 id="botswana">Botswana</h1>
В приведенном выше примере заголовок обозначается идентификатором botswana.
Теперь, когда нам известно, как обозначать элементы HTML с помощью идентификатора id, мы можем применить к нему стили CSS.
#botswana {
background-color: #56ABFF;
}
В приведенном выше примере HTML-элемент с идентификатором botswana связан со своим CSS-селектором #botswana.
Классы
CSS предлагает решение этого ограничения. Для маркировки нескольких элементов, которые должны использовать один и тот же стиль, применяются так называемые - классы (class).
Атрибут class - задает стилевой класс, который позволяет связать определенный тег со стилевым оформлением.
<h1 class="science">Scientist Discovers Important Cure</h1>
<h1 class="science">New Study Reveals The Importance of Sleep</h1>
Для того, чтобы стилизовать элементы, принадлежащие одному классу, в CSS применяется селектор классов - .class.
.science {
font-family: Georgia, Times, serif;
color: #A3B4C5;
text-transform: uppercase;
}
В приведенном выше примере все элементы с классом science будут иметь модифицированный шрифт, цвет и буквы.
В отличие от идентификатора id, классы наиболее часто применяются для стилизации групп элементов.
В следующем примере ко всем элементам с классом breaking применяется один и тот же шрифт, но в параграфе p, при помощи селектора p.breaking, используется помимо этого и другая, более подходящая стилизация.
.breaking {
font-family: Georgia, Times, serif;
}
p.breaking {
line-height: 1.3em;
}
Такой же синтаксис можно использовать для одновременного создания нескольких классов.
.first, .last {
font-size: 20px;
}
Мультиклассы
<h1 class="book domestic">The Way of the Deep</h1>
<h1 class="book foreign">A Night in the Sky</h1>
.book {
font-family: Georgia, serif;
}
.domestic {
font-color: #0902CC;
}
.foreign {
font-color: #B097DD;
}
Чтобы выделить названия книг разыми цветами, к соответствующим заголовкам применяются два дополнительных класса, - domestic и foreign.
Стилизацию HTML-элемента желательно ограничить максимум четырьмя классами.
Контейнер div
Для этого HTML предлагает элемент, который является основой организации кода - div.
Элемент (контейнер) div является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого.
Элемент div можно рассматривать как коробку или контейнер, который группирует элементы, принадлежащие друг другу.
Например, div можно использовать для группировки всех элементов, составляющих навигацию для веб-страницы или любого другого раздела.
<div>
<h1>Alice In Wonderland</h1>
<p> ... </p>
</div>
div + классы
<div class="container">
<h1 class="title">Alice In Wonderland</h1>
<p> ... </p>
</div>
div.container {
background-color: rgb(252, 255, 205);
font-family: Roboto, Helvetica, sans-serif;
}
h1.title {
color: #0D1A2F;
}
Этот пример иллюстрирует, как легко стилизовать разделы веб-страницы с помощью контейнера div.
Почему следует применять div
Подводим итоги
Давайте посмотрим чему мы научились и что нового мы для себя узнали:
- Код намного выглядит намного читабельнее, когда он организован с использованием идентификаторов, классов и div.
- Идентификатором id обозначаются уникальные HTML-элементы (элементы, которые появляются только один раз) веб-страницы.
- Для маркировки нескольких элементов, которые должны использовать один и тот же стиль, применяются - классы (class).
- Элемент div группирует элементы. Это упрощает чтение HTML-файла путем организации веб-страницы в логические разделы.
- HTML-элементы могут быть помечены несколькими классами.
- Контейнер div - один из наиболее часто используемых элементов в HTML.
Свое мнение и личные впечатления
Оказывается для маркировки групп элементов применяются идентификаторы, классы и контейнеры div. Последние являются одними из наиболее часто используемых элементов во всем HTML.
Предыдущие части курса Сodecademy - "Learn HTML & CSS"
4.1 Стилизация с помощью CSS (Цвета)
4.2 Стилизация с помощью CSS (Шрифты)
Конспект подготовлен для Академии Голоса @academy.