Тег header. Классы, селекторы и свойства в CSS
Начало урока. Разбор файла index.html
В index.html по сравнению с предыдущим уроком изменилось немного. Я только добавил после <body> следующий код:
<header> </header>
Верхнюю часть сайта, называемую «шапка», помещают в специальный тег <header></header>.
На вашем сайте в <header></header> будет вся красная верхушка, как на imdiz.ru/store/:
Цвет фона для header я задал свойством background в style.css. Если Вы еще не открыли файл style.css в SublimeText, то откройте.
Сейчас у Вас в SublimeText открыто 2 файла: index.html и style.css. Для удобства сделайте следующее: вверху SublimeText нажмите View, в выпавшем окне наведите на Layout, и выберите там Columns: 2. Ваш редактор разделится на 2 колонки и файлы можно разместить в разных колонках. Так вы будете видеть сразу оба файла. Смотрите видео:
Разбор файла style.css
Разберем файл style.css и заодно познакомимся с CSS.
Сперва пропустим верхнюю часть кода и перейдем к участку:
.header{
background: #cb2d41;
height: 100px;
}Говоря по-русски, благодаря этому коду браузер будет искать в index.html тег с классом header и задаст этому тегу цвет фона #cb2d41 и высоту 100px.
А теперь по-подробнее.
Этот код задает стили для <header>, который находится в index.html. Здесь задан цвет фона (background) и высота (height).
Посмотрите на картинку ниже, на ней изображена структура стилей в CSS:
То есть структура следующая. Сперва пишется селектор, в нашем случае это класс .header. Именно по селектору браузер определяет, для какого тега в index.html нужно применить CSS-свойства. В фигурных скобках прописываются нужные CSS-стили для этого селектора: свойство и значение этого свойства.
#cb2d41 — такой формат задания цвета называется HEX. Это наиболее частый формат в верстке сайтов. Цвет можно задать просто английским словом, например, background: red. Но чаще (а точнее, практически всегда) применяется именно формат HEX.
В index.html я задал тегу header класс «header». И в style.css задал стили для этого класса — .header. В CSS точка перед названием селектора означает, что это селектора класса.
В профессиональной верстке использовать селектор класса это почти стандарт, и нужно всегда стараться использовать именно селектор класса.
Кстати, название класса может быть абсолютно любым, хоть abcdef, но все-таки удобнее называть классы по смыслу элемента. У нас таким элементом является тег <header>, и здесь можно не выдумывать велосипед и назвать класс тоже header.
В нашем коде для .header помимо background задана еще и высота height: 100px;.
Переопределение стилей браузера. Инструменты разработчика в браузере
Теперь в Вашем style.css вернитесь к участку кода:
html, body{
margin: 0;
}Селекторы можно прописывать через запятую. В данном случае CSS-стили в фигурных скобках будут применены и для тега html, и для тега body.
Этот код равнозначен следующему:
html{
margin: 0;
}
body{
margin: 0;
}И еще обратите внимание, что здесь используется селектор тега, а не класса. Точка перед именем селектора не стоит.
А теперь о том, для чего нужен этот участок кода. Если Вы удалите этот участок кода и сохраните style.css, то увидите в браузере, что шапка не на всю ширину браузера (слева, справа, а также сверху, будут белые полоски).
Это потому, что в каждом браузере уже прописаны некоторые стили для всех HTML-тегов. Это стили браузера по умолчанию. В нашем случае белые полосы будут из-за того, что для тега <body></body> в браузере указаны отступы (в CSS для этого используется свойство margin). Чтобы это увидеть вызовите в браузере средства разработчика. Для этого, если у вас Google Chrome или Yandex Browser, просто нажмите на клавиатуре F12.
С инструментами разработчика удобнее работать, когда окно открыто внизу. Для того, чтобы его перенести вниз, нажмите справа на 3 точки, и в открывшемся окошке выберите нужное расположение. Смотрите видео:
В средствах разработчика видна структура HTML, а справа CSS-стили выделенного HTML-тега. Если Вы нажмете на <body>, то справа в CSS увидите, что помимо наших стилей у body есть еще другие стили, и в них margin: 8px;.
Комментарии в HTML
Помните в начале урока написано, что новые участки кода находятся между <!— New —><!— End —>. Сами <!— New —> и <!— End —> никак не отобразятся в браузере. С помощью <!— —> осуществляется комментирование в HTML. Всё, что Вы поместите внутрь данной конструкции не отобразится в браузере, оно будет закомментировано. С помощью комментариев можно помещать какие-то подсказки для себя. Также, комментировать можно некоторые участки кода, чтобы временно их скрыть, при этом не придется их удалять.
Подытожу этот урок тем, что в CSS не так уж много свойств и их значений. На практике все CSS-свойства быстро запоминаются. Все CSS-свойства являются английскими словами, например, height переводится «высота». И это тоже очень хорошо для запоминания CSS-свойств.
Конец урока. В данном уроке вы узнали:
background — CSS-свойство для задания фона HTML-элемента
height — свойство для задания высоты
margin — внешние отступы
<header></header> — тег для «шапки» сайта.
Блок не отображается на сайте, если он пустой или ему не задана высота.
Стандартные стили браузера нужно переопределять.
В Google Chrome и Yandex Browser есть инструменты разработчика, которые вызываются клавишей F12.
Стили в CSS задаются через селекторы. В качестве селектора нужно стараться выбирать класс HTML-элемента.
Элемент — CSS-LIVE
Ричард Кларк, вторник, 16 июня 2009
В последнее время наблюдается повышенный интерес к HTML 5 и его внедрению в работу web-профессионалов. В HTML 5 спецификации мы видим, что была добавлена масса новых тегов, среди которых и элемент <header>, о котором мы поговорим в этой статье. Мы расскажем про то, когда его использовать и когда не использовать, что он должен содержать и что не должен. Готовы? Тогда начнем.
Итак, вы привыкли видеть
<div>
на большинстве посещаемых вами сайтов. Теперь, с появлением HTML 5 это больше не требуется и мы можем обогатить семантическое содержимое новым элементом <header>.
Что представляет собой этот элемент?
Спецификация дает следующее определение элемента <header>
группа элементов вводного или навигационного значения. Как правило, элемент header содержит заголовок секции (элемент h2–h6 или группу элементов hgroup), но может также иметь и другое наполнение, например, содержание, форму поиска или соответствующие логотипы.
Где можно использовать элемент <header>
<header> <h2>Самый важный заголовок на этой странице</h2> <p>С какой-либо дополнительной информацией</p> </header>
Здесь важным моментом является то, что вы не ограничиваетесь использованием только одного элемента <header> на сайте. Их может быть несколько, и каждый из них будет хедером соответствующей секции документа.
<header>
<h2>The most important heading on this page</h2>
<p>With some supplementary information</p>
</header>
<article>
<header>
<h2>Title of this article</h2>
<p>By Richard Clark</p>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
</article>
Также заметьте, что использование двух <h2> в рамках этого кусочка кода вполне применимо в HTML 5 (и HTML 4), но может вызвать проблемы с доступностью. Поэтому, мы советуем быть предельно внимательными, если у вас имеется большое количество статей на странице. Более детально этот вопрос будет рассмотрен в другой статье.
Что необходимо включать в элемент <header>
Теперь мы знаем, что существует возможность иметь несколько хедеров на странице. А что насчет обязательных компонентов, которые должен содержать этот элемент для его корректной работы?
Вкратце, типичный <header> содержит как минимум (количество не ограничивается) один заглавный тег (<h2> – <h6>).
Вы также можете использовать элемент <hgroup>, но об этом мы поговорим в другой статье (прочитать больше про hgroup в спецификации). Элемент может иметь и другое наполнение, как, например, содержание, логотипы или форму поиска. Согласно последним изменениям в спецификации, отныне можно включать в хедер элемент <nav>.
Оформление хедера
Еще один момент, о котором я бы хотел поговорить: в большинстве браузеров для того, чтобы <header> выполнял роль блочного элемента вам будет необходимо четко обозначить его как блок в ваших CSS, например, так:
header { display:block;}
Фактически, вам нужно будет делать это для большинства блочных элементов в HTML 5. Как только это свойство станет заданным в браузерах по умолчанию, мы вам сообщим и вы сможете сберечь драгоценные байты ваших CSS. Тем временем, постарайтесь быть в курсе того, что было и что не было внедрено в браузерные движки на этом ресурсе.
Заключение
Таким образом, элемент <header> предоставляет нам дополнительные возможности семантического содержания для описания верхней части секции.
Оригинал статьи и автор
P.S. Это тоже может быть интересно:
- HTML5, Семантика
Тег HTML 5
Тег HTML
представляет собой группу вводных или навигационных средств.Заголовки могут содержать заголовки, подзаголовки, информацию о версии, средства навигации и т. д.
Тег
не может быть помещен в элемент