Академия: Курс Сodecademy - Learn HTML & CSS - Организация HTML & CSS

Всем доброго времени суток и хорошего настроения! Продолжаю изучать курс online-образовательного портала Сodecademy - "Learn HTML & CSS".

Организация HTML & CSS

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

написанию четкого, поддерживаемого HTML-кода для себя и для других разработчиков;
применению всей глубины стилей CSS.

Идентификатор id

Мы можем пометить HTML-элементы с помощью уникального идентификатора - id. Идентификаторы предназначены для маркировки уникальных элементов в HTML-файле.

id - задает стилевой идентификатор (уникальное имя элемента), которое используется для изменения его стиля. Идентификатор в коде документа должен встречаться только один раз.

<h1 id="botswana">Botswana</h1>

В приведенном выше примере заголовок обозначается идентификатором botswana.

Теперь, когда нам известно, как обозначать элементы HTML с помощью идентификатора id, мы можем применить к нему стили CSS.

#botswana {
background-color: #56ABFF;
}

В приведенном выше примере HTML-элемент с идентификатором botswana связан со своим CSS-селектором #botswana.

Все селекторы идентификатора id начинаются с символа решетки - #, за которым сразу следует его значение.

Классы

Идентификатор id отлично подходит для маркировки уникальных HTML-элементов, но в документе он применяется только один раз.

CSS предлагает решение этого ограничения. Для маркировки нескольких элементов, которые должны использовать один и тот же стиль, применяются так называемые - классы (class).

Атрибут class - задает стилевой класс, который позволяет связать определенный тег со стилевым оформлением.

<h1 class="science">Scientist Discovers Important Cure</h1>

<h1 class="science">New Study Reveals The Importance of Sleep</h1>

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

Для того, чтобы стилизовать элементы, принадлежащие одному классу, в 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;
}

Селектор .breaking предназначен для всех элементов. Селектор p.breaking применяется только к параграфу p. Этот тип селектора позволяет более точно настраивать стиль конкретного элемента, даже если он совместно использует некоторые стили с другими элементами.

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

.first, .last {
font-size: 20px;
}

Использование селектора нескольких классов - эффективный способ стилизации нескольких элементов HTML.

Мультиклассы

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

<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;
}

В приведенном выше примере код HTML использует основные заголовки для двух разных названий книг. В этом примере все названия книг должны иметь один и тот же шрифт, поэтому заголовки помечены классом book, а затем оформлены шрифтом Georgia.

Чтобы выделить названия книг разыми цветами, к соответствующим заголовкам применяются два дополнительных класса, - domestic и foreign.

Стилизацию HTML-элемента желательно ограничить максимум четырьмя классами.

Контейнер div

Классы и идентификаторы полезны для маркировки элементов, но неорганизованное, чрезмерное их использование может привести к тому, что наш код будет трудно читаемым.

Для этого HTML предлагает элемент, который является основой организации кода - div.

Элемент (контейнер) div является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого.

Элемент div можно рассматривать как коробку или контейнер, который группирует элементы, принадлежащие друг другу.

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

<div>
<h1>Alice In Wonderland</h1>
<p> ... </p>
</div>

В приведенном выше примере заголовок для книги Alice In Wonderland и краткое описание этой книги содержатся в одном div. Если на странице появятся другие книги, то для их организации можно применить дополнительные контейнеры div. Это упростило бы чтение, поддержку и стиль кода.

div + классы

Теперь, когда нам известно, как организовать код в разделы с помощью 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, который имеет класс container и для которого в таблице стилей был задан цвет фона и шрифт.

Этот пример иллюстрирует, как легко стилизовать разделы веб-страницы с помощью контейнера div.

Почему следует применять div

Контейнер div является одним из наиболее часто используемых элементов во всем HTML. Современные веб-страницы широко используют div, и знание того, как именно применить данный элемент для организации и стиля, является необходимым навыком для всех веб-разработчиков.

Подводим итоги

Давайте посмотрим чему мы научились и что нового мы для себя узнали:

Код намного выглядит намного читабельнее, когда он организован с использованием идентификаторов, классов и div.
Идентификатором id обозначаются уникальные HTML-элементы (элементы, которые появляются только один раз) веб-страницы.
Для маркировки нескольких элементов, которые должны использовать один и тот же стиль, применяются - классы (class).
Элемент div группирует элементы. Это упрощает чтение HTML-файла путем организации веб-страницы в логические разделы.
HTML-элементы могут быть помечены несколькими классами.
Контейнер div - один из наиболее часто используемых элементов в HTML.

Свое мнение и личные впечатления

Один из самых важных уроков данного курса. Ведь организация HTML & CSS является необходимым навыком для всех веб-разработчиков.

Оказывается для маркировки групп элементов применяются идентификаторы, классы и контейнеры div. Последние являются одними из наиболее часто используемых элементов во всем HTML.