Шпаргалки для начинающего верстальщика HTML/CSS. Елена Эберт
Чтение книги онлайн.
Читать онлайн книгу Шпаргалки для начинающего верстальщика HTML/CSS - Елена Эберт страница 3
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 или другой программе,