Header css примеры. Новые теги. Элементы для описания Восточно-Азиатских символов

Зачастую вроде бы простые задачи верстки требуют сложной структуры HTML-разметки и использования CSS-трюков. Центрирование элементов или выравнивание контента может быть очень утомительным. Одна из таких задач - это выравнивание элементов верхней части сайта так, чтобы логотип был слева, а пункты меню - справа. Можно использовать float и position:absolute, а для выравнивания по вертикали - добавлять margin и padding разным элементам. Вроде бы ничего сложного. Но если сайт должен корректно отображаться и на мобильных устройствах, возникает много проблем.

Ниже описан лаконичный способ решения этой проблемы.

HTML-разметка максимально проста:

Super Bad First LinkSecond LinkThird Link

Высота шапки фиксированная, добавляем text-align: justify , для дочерних элементов:

Header { text-align: justify; letter-spacing: 1px; height: 8em; padding: 2em 10%; background: #2c3e50; color: #fff; }

Добавляем display: inline-block для всех элементов nav , чтобы можно было расположить их друг за другом:

Header h1, header nav { display: inline-block; }

Чтобы атрибут text-align: justify работал, как мы хотим, нужно использовать небольшой трюк с псведоэлементами, который был найден в статье Perfectly justified CSS grid technique using inline-block , автор Jelmer de Maat:

Header::after { content: ""; display: inline-block; width: 100%; }

В итоге получилось выравнивание по горизонтали, без использования float и position:absolute . Теперь необходимо выравнивание элементов по вертикали. При использовании vertical-align для элементов nav будет зависимость от высоты родительского блока - шапки. А это не очень правильно. Примеры использования vertical-align: top и vertical-align: middle на jsbin. Ниже представлен возможно наиболее удобный способ вертикального выравнивания.

Используем снова псевдоэлементы. используя пример из статьи Centering in the Unknown , упомянутый Michał Czernow:

Header h1 { height: 100%; } header h1::before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
В результате получается то, что нужно:

Осталось решить две задачи: корректное отображение при большом количестве текста в шапке и адаптивность. Если заголовок сайта будет слишком длинный, верстка начнет съезжать:

Используем трюк с псевдоэлементом на header :

CSS-код

header { text-align: justify; height: 15em; padding: 2em 5%; background: #2c3e50; color: #fff; } header::after { content: ""; display: inline-block; width: 100%; } header > div, header nav, header div h1 { display: inline-block; vertical-align: middle; } header > div { width: 50%; height: 100%; text-align: left; } header > div::before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }

Выглядит намного лучше:

Теперь перейдем к адаптивности. Есть несколько способов решения этой задачи, можно просто не задавать высоту шапке, и все внутренние элементы будут адаптивны высоте. При этом не потребуется второй трюк с псевдоэлементами, живой пример на jsbin.

CSS-код

header { text-align: justify; padding: 2em 5%; background: #2c3e50; color: #fff; } header::after { content: ""; display: inline-block; width: 100%; } header h1, header nav { display: inline-block; vertical-align: middle; } header h1 { width: 50%; text-align: left; padding-top: 0.5em; } header nav { padding-top: 1em; }

Если же необходимо задать высоту шапки, то придется использовать и второй трюк с псевдоэлементами, и добавлять media query для экранов разных размеров:

@media screen and (max-width: 820px){ header { height: auto; } header > div, header >

Результат адаптивен и на мобильных устройствах выглядит так:

В примере используется 820px для наглядности, на живом сайте значение конечно должно быть другое, в соответствии с требованиями. Для поддержки Internet Explorer 8 необходимо вместо “::” использовать “:” для псевдоэлементов.

Финальный CSS-код

@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * { padding: 0; margin: 0; } body { background: #1abc9c; font-family: "Lato", sans-serif; text-transform: uppercase; letter-spacing: 1px;} header { text-align: justify; height: 8em; padding: 2em 5%; background: #2c3e50; color: #fff; } header::after { content: ""; display: inline-block; width: 100%; } header > div, header > div::before, header nav, header > div h1 { display: inline-block; vertical-align: middle; text-align: left; } header > div { height: 100%; } header > div::before { content: ""; height: 100%; } header > div h1 { font-size: 3em; font-style: italic; } header nav a { padding: 0 0.6em; white-space: nowrap; } header nav a:last-child { padding-right: 0; } @media screen and (max-width: 720px){ header { height: auto; } header > div, header > div h1, header nav { height: auto; width: auto; display: block; text-align: center; } }

Результат:

В HTML5 для структуры кода введено несколько новых тегов: , , , , , которые заменяют в некоторых случаях привычный . Хотя кажется, что особой разницы между тегами и нет, между ними лежит огромная пропасть. Теги ориентированы не на людей, которым нет смысла заглядывать в исходный код страницы, а на машины, интерпретирующих код. Машины или роботы не понимают , для них это типовой тег разметки - замени его на и смысл не поменяется. Другое дело , робот, обнаружив этот тег, воспринимает его именно как шапку сайта или раздела.

Что это даёт в итоге? Поисковые системы начинают лучше индексировать сайт, потому что чётко отделяют контент страницы от вспомогательных элементов. Речевые браузеры, предназначенные для слепых людей, пропускают заголовок и переходят непосредственно к содержимому. Сайты могут автоматически обмениваться контентом и другой информацией между собой. Все эти возможности называются семантикой и позволяют представить данные в удобном для роботов виде.

Давайте для начала сделаем шапку сайта с помощью тега (пример 6.2).

Пример 6.2. Использование

Попытка добавить в стилях фон к тегу ни к чему не привела, фон в некоторых браузерах отображаться не желает. Все новые теги следует сделать вначале блочными через свойство display , тогда они начнут корректно выводиться (пример 6.3).

Пример 6.3. Шапка сайта

HTML5 CSS 2.1 IE 7+ IE 9+ Cr Op Sa Fx

header { display: block; background: #00B0D8 url(images/header-gradient.png) repeat-x; }

Данный пример будет работать во всех браузерах, кроме IE7 и IE8. Internet Explorer не добавляет стиль к элементам, которые не понимает. Это недоразумение можно исправить, если создать фиктивный элемент с помощью JavaScript. Для этого включим в такой код.

document.createElement("header");

Если на странице встречается один тег, этот скрипт вполне подойдёт для работы. Но не хочется повторять строку десять раз для десяти разных тегов, поэтому автоматизируем этот процесс через цикл. Сами теги указываются списком, разделяясь запятой (пример 6.4).

Пример 6.4. Скрипт для IE

var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(","); for (var i = 0; i < e.length; i++) { document.createElement(e[i]); }

Сам скрипт заключается в условные комментарии, чтобы выполнялся только для IE версии 8.0 и ниже. В IE9 поддержка новых тегов HTML5 уже включена.

Пример выше не обязательно вставлять к себе на сайт, можно воспользоваться общедоступным скриптом написанным Реми Шарпом и распространяемым по лицензии MIT. Для этого достаточно указать на него ссылку, как показано в примере 6.5.

Пример 6.5. Скрипт для IE

Все указанные скрипты должны располагаться в коде перед CSS.

Таким образом, для полноценного использования тегов HTML5 во всех браузерах достаточно выполнить три условия:

установить доктайп ;

включить скрипт из примера 6.4 или 6.5;

в стилях для новых тегов установить display : block .

Теперь рассмотрим некоторые теги HTML5 более подробно, чтобы понять область их применения.

Пример 6.6. Использование тега

HTML5 IE Cr Op Sa Fx

article Следы невиданных зверей История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось.

Определяет блок, который не относится к основному контенту, для размещения рубрик, ссылок на архив, меток и другой информации (пример 6.7). Такой блок, если он располагается сбоку, называется, как правило, «сайдбар» или «боковая панель».

Пример 6.7. Использование

HTML5 IE Cr Op Sa Fx

aside document.createElement("aside"); document.createElement("article"); aside { background: #f0f0f0; /* Цвет фона */ padding: 10px; /* Поля */ width: 200px; /* Ширина сайдбара */ float: right; /* Обтекание слева */ } article { margin-right: 240px; /* Отступ справа */ display: block; /* Блочный элемент */ }

Экономьте электричество

Хороший язык

Чья палка больше

История о том, как приходилось экономить электричество, какие меры для этого принимались, и куда оно на самом деле уходило.

Используется для группирования любых элементов, например, изображений и подписей к ним (пример 6.8).

Пример 6.8. Использование

HTML5 IE Cr Op Sa Fx

figure document.createElement("figure"); document.createElement("figcaption"); figure { background: #5f6a72; /* Цвет фона */ padding: 10px; /* Поля вокруг */ display: block; /* Блочный элемент */ width: 150px; /* Ширина */ float: left; /* Блоки выстраиваются по горизонтали */ margin: 0 10px 10px 0; /* Отступы */ text-align: center; /* Выравнивание по центру */ } figcaption { color: #fff; /* Цвет текста */ }

Софийский собор

Польский костёл

Содержит описание для тега . Тег должен быть первым или последним элементом в группе.

Задаёт «подвал» сайта или раздела, в нем обычно располагается имя автора, дата документа, контактная и правовая информация (пример 6.9).

Пример 6.9. Использование

HTML5 IE Cr Op Sa Fx

footer Персональный сайт Кристины Ветровой Добро пожаловать!

Рада приветствовать вас на своем сайте.

Copyright Кристина Ветрова

Определяет «шапку» сайта или раздела.

Используется для группирования заголовков веб-страницы или раздела (пример 6.10).

Пример 6.10. Использование

HTML5 IE Cr Op Sa Fx

hgroup Кристина Ветрова Персональный сайт

Задаёт навигацию по сайту (пример 6.11). Если на странице несколько блоков ссылок, то в обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов в документе. Запрещается вкладывать внутрь .

Пример 6.11. Использование

HTML5 IE Cr Op Sa Fx

nav Чебурашка и крокодил Гена Чебурашка | Гена | Шапокляк | Лариска Добро пожаловать!

Определяет раздел документа, который может включать в себя заголовки, шапку, подвал и текст (пример 6.12). Допускается вкладывать один тег внутрь другого.

Пример 6.12. Использование

HTML5 IE Cr Op Sa Fx

section Съёмки фильма Полипропилен

История о том, как снимали фильм, где герои отдыхали на пляже, потом пришёл антагонист, избил протагонистов, сбросил их в бассейн, и что из этого получилось.

Хороший язык

История о том, как проходила студия изучения языка эсперанто, в то время, как над ней, на веранде велась студия приколистов, где травились анекдоты, и что из этого получилось.

Помечает текст внутри тега как дата, время или одновременно дата и время. Может указываться непосредственно внутри контейнера , либо задаваться через атрибут datetime (пример 6.13).

Дата и время задается в международном формате ISO 8601. Примеры оформления приведены в табл. 6.1.

Для каждой единицы существует своя заданная форма и ограничения.

• Год — задается четырьмя цифрами (1860).
• Месяц — две цифры (01 — январь, 02 — февраль, 12 — декабрь).
• День — две цифры от 01 до 31.
• Час — две цифры от 00 до 23.
• Минуты — две цифры от 00 до 59.
• Секунды — две цифры от 00 до 59.
• Часовой пояс — часы и минуты с указанием знака плюс или минус.

Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +03:00.

Пример 6.13. Использование

HTML5 IE Cr Op Sa Fx

time

1957-10-04 запущен первый искусственный спутник Земли.

1960-08-19 первый полёт собак в космос.

1961-04-12 первый полёт человека в космос.

1963-06-16 первый полёт женщины-космонавта.

1969-07-21 высадка человека на Луну.

От автора: приветствуем вас на нашем блоге о сайтостроении. У любого сайта есть то, чем он обычно запоминается и выделяется среди остальных. Обычно это именно шапка сайта. CSS позволяет сделать ее такой, как вам нужно.

Шапка сайта – какой она бывает

Поразительно, как много может зависеть сегодня от одного только дизайна веб-ресурса. Но что особенно сильно отделяет веб-ресурс от других? Как правило, это именно шапка сайта с фирменным логотипом и уникальным оформлением. Обычно именно по ней люди запоминают какой-то интернет-проект. Это очень хорошо запоминается в памяти людей.

Например, если вы видите белую букву “В” на синем фоне, то наверняка сразу делаете вывод – это иконка социальной сети Вконтакте. А изображение почтового голубя у всех сразу же ассоциируется с Twitter. Все это стало возможным потому, что в шапках у этих сайтов были именно такие изображения и они очень хорошо запомнились людям.

Так, это было немного размышлений, теперь давайте перейдем непосредственно к технической части.

Как в CSS можно оформить шапку сайта?

Вообще шапки бывают разными. По ширине их можно разделить на две группы: выровненные по центру и те, что на всю ширину веб-страницы.

Раньше шапку делали также, как и любой другой блок – обычному тегу div давали нужный идентификатор, после чего в него попадало все нужное содержимое, а потом все это оформлялось. Сегодня же уже принято верстать по-другому. Специально для создания шапки сайта в HTML5 появился парный тег – header. Его использование приветствуется, это позволяет браузерам понимать, что это за часть шаблона и за что она отвечает. Кстати, если вы хотите изучить основы HTML5, то вам прямая дорога в наш , где вы можете посмотреть уроки по этой технологии.

Поэтому, для создания простейшей шапки достаточно написать в html вот такой код:

< header > < / header >

Конечно, на странице пока ничего не появится – нам еще нужно добавить в нее содержимое и оформить. Но давайте, например, сделаем блок на всю ширину экрана, а также немного оформим.

header{ width: 100%; background: #D8E3AB; height: 70px; }

header { width : 100 % ; background : #D8E3AB; height : 70px ;

Вообще, если все делать по-правильному, то следовало бы задать блоку какой-то класс или даже идентификатор (поскольку это важный элемент веб-страницы), но мы пока просто обратимся к элементу по тегу.

Свойство width: 100% делает так, что наш блок будет растягиваться на всю ширину вне зависимости от размеров экрана. Если же все-таки размеры нужно хоть как-то ограничить, используют дополнительно свойство max-width, где в пикселях записывают абсолютный размер, по достижению которого контейнер больше не будет расширяться.

Сейчас перед нами просто полоска, окрашенная в выбранный цвет. Обычно высоту не задают – она определяется автоматически на основании тех элементов, которые будут в шапке.

< div id = "wrap" > < header > < / header > < / div >

Таким образом, наш верх сайта будет расположен ровно по центру. Остается только наполнить его.

Рис. 1. Пока это только контейнер, в котором будет все содержимое.

Что обычно содержится в шапке?

Обычно там вставлен логотип, название, описание сайта. Также там может находиться какая-то контактная информация, навигация по страницам или даже реклама.

Логотип обычно вставляют как фоновое изображение. Давайте, например, поставим такой:

Для этого достаточно дописать некоторые правила к фону:

background: #D8E3AB url(logo.png) no-repeat 5% 50%;

background : #D8E3AB url(logo.png) no-repeat 5% 50%;

То есть помимо сплошного цвета даем еще и фоновую картинку (в нашем случае logo.png) и предварительно я ее положил в ту же папку, что и файл стилей. Запрещаем повторение логотипа и определяем его позицию в блоке – немного сместим влево и по центру по вертикали.

Добавим в шапку какое-то содержимое. Например, заголовок и меню.

Название сайта

• Контакты
• О нас
• Услуги

< div class = "title" > Названиесайта< / div > < ul class = "menu" > < li > < a href = "#" > Контакты< / a > < / li > < li > < a href = "#" > Онас< / a > < / li > < li > < a href = "#" > Услуги< / a > < / li > < / ul >

Теперь все это оформим.

Title{ font-size: 36px; padding-top: 10px; text-align: center; } .menu{ list-style: none; position: absolute; top: 10px; right: 100px; }

Title { font - size : 36px ; padding - top : 10px ; text - align : center ;

При работе с сайтом первый из тегов, с которым сталкивается программист в HTML, - . При его использовании без атрибутов, различий в сравнении с другими тегами не видно, из-за чего возникает вопрос возможных причин его использования.

Как и где использовать?

является вводным для некоторого раздела документа. Он не является обязательным в использовании и обычно прописывается в верхней части раздела страницы. С английского "тег" переводится как "заголовок", но в российском сленге чаще используется слово "шапка". Обычно этот тег используется в верхней части страницы, где располагается имя и логотип сайта, а также вспомогательное меню. Однако нередко можно встретить его использование и в заголовках разделов.

В HTML , как и ряд других тегов, появился лишь в 5-й версии языка разметки. Поэтому не все браузеры правильно обрабатывают его. В спецификации языка предполагается, чтобы тег содержал в себе заголовок раздела (h1-h6) или страницы, а также необходимые в "шапке" сайта вспомогательные элементы, включая баннеры, блок контактных данных и другие. Как и большинство тегов в HTML, должен иметь свою "закрывающую пару" - , обозначающий окончание действия свойств данного тега. Желая подстроить под свой личный тип оформления, для тега можно использовать ряд атрибутов, определяющих его стиль.

Примеры использования

Практика работы с тегом позволит полностью понять принципы работы . HTML-примеры его использования можно найти практически на каждом крупном сайте. На них он обычно применяется для обозначения верхнего колонтитула.

Одним из способов задания "шапки" сайта с помощью тега является следующий пример:

HTML5

Помимо заголовка, сюда можно также добавить любые желаемые элементы и теги, за исключением . Он отвечает за нижний колонтитул страницы и не может присутствовать в "шапке" сайта. При обнаружении этого элемента внутри тега заголовка сайт будет загружаться неверно.