LITMIR.BIZ

Скачать книгу

наполняется определенным содержанием. Его цель – логически объединить любой набор элементов внутри данного тега в единственном блоке.

      При этом если мы зададим данному 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>

Скачать книгу