Шпаргалки для начинающего верстальщика HTML/CSS. Елена Эберт

Чтение книги онлайн.

СКАЧАТЬ вид, который зависит от атрибута, который применен к input. К примеру, placeholder.

      type – указывает браузеру, к какому типу относится элемент формы.

      placeholder – это атрибут тега input, он указывает подсказку, которая описывает ожидаемое значение для ввода в элемент:

      – email (поле для адреса электронной почты)

      – password (поле с паролем, в котором скрываются символы)

      – search (текстовое поле для ввода строки поиска)

      – text (однострочное текстовое поле).

      Пример кода:

      <input type=«search» placeholder=«Поиск»>

      Зачем нужны секция, контейнер и див-блоки

      section (секция) – это полочки, разделы, в которых размещается блок какого-то контента, данный блок объединен определенной графикой или картинкой. То есть его предназначение – выделять цветовым решением или графикой определенный контент.

      container (контейнер) – блок, который центрует контент по середине.

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

      При этом если мы зададим данному 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 или другой программе, СКАЧАТЬ