Шпаргалки для начинающего верстальщика HTML/CSS. Елена Эберт
наполняется определенным содержанием. Его цель – логически объединить любой набор элементов внутри данного тега в единственном блоке.
При этом если мы зададим данному div-блоку определенный класс, то через данный класс далее мы можем вложенные элементы стилизовать средствами CSS, или динамически манипулировать ими с применением скриптов Javascript.
Зачем нужен class
Классы необходимо использовать, когда нужно определить стиль для индивидуального элемента веб-страницы или задать различные стили для одного тега. Отметим, что использовать русские буквы в именах классов нельзя.
Атрибут class указывает одно или несколько имен классов для элемента HTML. Если мы в HTML пишем элементу несколько классов, их мы должны указать просто через пробел.
<h1 class=«title-home office»>
Как видно из примера выше, если класс состоит из несколько слов, частей, то записывается оно через тире, например, title-home, title-1 и т. д.
В целом название класса можно описывать, используя различные направления и правила, ориентируясь на DOM, БЭМ и прочее. Советую вам, если интересно, почитать данную тему отдельно и для самого себя выстроить определенную систему названий, которые для вас и желательно для других разработчиков будут логичны и понятны.
Имя класса может использоваться CSS, как говорилось выше, чтобы задать различные стили для одного тега. Для того, чтобы записать стили для определенного класса, перед его именем ставят точку:
.title-home {
стили
}
В JavaScript имя класса используется для выполнения определенных задач для элементов.
Оформляем шапку сайта в HTML (тип 2)
Второй тип шапки состоит из логотипа, меню – навигации сайта и аватар пользователя или какой-либо иной информации
Логотип как правило оформляется в виде картинки:
<img src="img/Logo.png» alt=«logo» class=«logo»>
Данную картинку-логотип мы скачиваем в формате png с макета в Photoshop и Figma или другой программе, в которой работал дизайнер.
<nav> – это тег навигации сайта, в него входит меню сайта в виде списка ссылок:
<nav class=«menu-list»>
<a href=«#» class=«menu-link»> </a>
<a href=«#» class=«menu-link»> </a>
<a href=«#» class=«menu-link»> </a>
<a href=«#» class=«menu-link»> </a>
</nav>
Навигацию сайта можно создать различными способами, например, не менее распространен способ создания с помощью списка.
Далее идет аватарка пользователя, во многом схожая с шапкой первого типа:
<div class=«user»>
<img src=«img/User Картинка» alt=«user» class=«user-icon»>
<p class=«user-text»> User </p>
</div>
В целом код шапки второго типа получился такой:
<header>
<div class=«container»>
<div class=«header»>
<img src="img/Logo.png» alt=«logo» class=«logo»>
<nav class=«menu-list»>
<a href=«#» class=«menu-link»> Menu One </a>
<a href=«#» class=«menu-link»> Menu Two </a>
<a href=«#» class=«menu-link»> Menu Three </a>
<a href=«#» class=«menu-link»> Menu Four </a>
</nav>
<div class=«user»>
<img src=«img/User icon.png» alt=«user» class=«user-icon»>
<p class=«user-text»> User </p>
</div>
</div>
</div>
</header>