Css заголовок: Идеи для оформления заголовков на сайте

Разное 

Содержание

Зачем нужны заголовки и какие теги использовать — Блог HTML Academy

Зачем нужны заголовки и какие теги для них использовать? — спрашивают наши зрители Андрей, Илья, Александр, Игорь, Михаил и другие. Этот вопрос нам задают чаще всего. Пришло время разобраться!

Когда много лет назад придумали HTML, мир был совсем другим. Авторы спецификации вдохновлялись текстовыми документами, где в одном потоке подряд шли абзацы, списки, таблицы, картинки и конечно заголовки. Прямо как в ваших рефератах и курсовых: самый большой заголовок — название, заголовки поменьше — части или главы.

В HTML с тех пор шесть уровней заголовков: от h2 до h6. Они озаглавливают всё, что за ними следует и образуют, так называемые, неявные секции. Такие логические части страницы. Неявные они потому, что закрываются только когда появляется следующий заголовок.

<h2>Еда</h2>

  <h3>Фрукты</h3>
  <p>Классные</p>

    <h4>Яблоки</h4>
    <p>Вообще</p>

Но секции лучше задавать явно с помощью элемента section, помните третий выпуск? Эти два фрагмента идентичны с точки зрения семантики, но этот гораздо понятнее, хоть и многословнее.

<h2>Еда</h2>
<section>
  <h3>Фрукты</h3>
  <p>Классные</p>
  <section>
    <h4>Яблоки</h4>
    <p>Вообще</p>
  </section>
</section>

Из-за такой системы неявных секций, спецификация настойчиво рекомендует не использовать элементы h* для подписей под заголовками. Это обычный параграф, а заголовок должен обозначать отдельную часть содержимого. В спецификации есть глава с примерами разметки сложных элементов: подписи, крошки, диалоги — почитайте.

Ладно! Раз у нас есть явные секции, то по вложенности легко определить отношение частей. Так может браузеры сами догадаются какого уровня заголовки нужны? А то считать: h2, h3, аш… сбился. Так было бы удобнее менять части кода местами.

Такая же идея пришла в голову авторам HTML5 и они описали в спецификации алгоритм аутлайна. Он разрешает использовать на странице только h2, а важность обозначать вложенностью структурных элементов вроде article и section.

<h2>Еда</h2>
<section>
  <h2>Фрукты</h2>
  <section>
    <h2>Яблоки</h2>
  </section>
</section>

Разработчикам идея очень понравилась, многие даже бросились её внедрять. Но вот беда: алгоритм аутлайна до сих не внедрил ни один браузер, читалка или поисковик. На таких страницах все заголовки кричат, что они №1 и самые важные. Но если важно всё, то уже ничего не важно.

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

Нет, погоди. Я ставлю класс на div и все сразу видят — это самый большой заголовок, ставлю другой класс — заголовок становится меньше, видно же. Зачем тогда эта ерунда с расчётом уровней, если есть CSS?

<div>
  Фрукты бесплатно
</div>
<div>
  Только за деньги
</div>

Вы конечно правы, стили создают визуальную модель важности: крупный чёрный текст важнее, меленький серенький вообще не важен. Но только если вы смотрите на такую страницу.

Есть две важные группы пользователей, которые читают вашу страницу по тегам разметки. Они не смотрят насколько крупный и чёрный ваш div — чтобы найти на странице самое важное, они ищут h2. Это читалки и роботы. С роботами всё понятно: это поисковики, которым нужно помогать понимать ваши страницы.

Читалками или скринридерами пользуются люди, которые плохо или совсем не видят ваши интерфейсы, или не могут управлять браузером привычным образом. VoiceOver, NVDA, JAWS читают содержимое вслух и ориентируются только по значимым тегам. Элементы div и span не значат ни-че-го, какие бы классы и стили вы не накрутили. Такой сайт — как газета без заголовков, просто месиво текста.

Да какая газета! Очнись, 2017 на дворе, я изоморфное одностраничное приложение делаю, а не стенгазету. У меня тут стейты компонентов — нафига семантика там, где нет текста? Очень хороший вопрос.

Все читалки идут по странице тег за тегом, от первого к последнему. И читают подряд всё, что внутри. Крайне неэффективно: каждая страница начинается с шапки и пока её пройдёшь, забудешь за чем шёл. Поэтому у читалок есть специальные режимы, показывающие только важные части страницы. Структурные элементы header, nav, main и другие, все ссылки, все заголовки.

Если вывести все заголовки и прочитать их, можно составить ментальную, а не визуальную модель страницы. А потом взять и сразу перейти к нужной секции, выбрав её заголовок. Меню, поиск, каталог, настройки, логин — все эти части вашего приложения можно озаглавить, чтобы упростить доступ к ним.

— Инстаграм
  — Лента
    — Закат
    — Латте
  — Настройки
  — Профиль

Но бывает, что в дизайне нет заголовков для важных частей. Дизайнер рисует, ему всё ясно: меню с котлетой, поиск с полем и так далее. Но это не должно мешает вам делать доступные интерфейсы. Расставьте нужные заголовки, а потом доступно их спрячьте. Как? Только не display: none, его читалки игнорируют. Есть такой паттерн visually hidden, подробнее в описании к видео.

Думайте не только о том, как выглядит ваша вёрстка, но и о том, насколько логично организована разметка. Не забывайте о заголовках: пусть стили показывают, а заголовки рассказывают о ваших страницах или приложениях.

CSS липкий заголовок — CodeRoad



Я добавил липкий заголовок на свою домашнюю страницу, однако липкий заголовок, похоже, находится за rest содержимого на странице, поэтому, когда я прокручиваю страницу вниз, изображения и текст находятся поверх заголовка, есть ли способ остановить это?

Вот мой код:

<style>
/* Reset body padding and margins */
body
{
    margin: 0;
    padding: 0;
}

/* Make Header Sticky */
#header_container
{
    background: #827878;
    border: 1px solid #666;
    height: 60px;
    left: 0;
    position: fixed;
    width: 100%;
    top: 0;
}

#header
{
    line-height: 60px;
    margin: 10 auto;
    width: 940px;
    text-align: left;
    font-size: 26px;
    color: #f5f5f5;
    line-height: 28px;
    margin-bottom: 14px;
    font-family: 'Source Sans Pro',sans-serif;
}

/* CSS for the content of page.
 
  I am giving top and bottom 
   padding of 80px to make sure the header and footer 
   do not overlap the content. */
#container
{
    margin: 0 auto;
    overflow: auto;
    padding: 80px 0;
    width: 940px;
}

#content
{
}

/* Make Footer Sticky */
#footer_container
{
    background: #eee;
    border: 1px solid #666;
    bottom: 0;
    height: 60px;
    left: 0;
    position: fixed;
    width: 100%;
}

#footer
{
    line-height: 60px;
    margin: 0 auto;
    width: 940px;
    text-align: center;
}
</style>


<!-- BEGIN: Sticky Header -->
<div>
    <div>
        Header Content
    </div>
</div>
<!-- END: Sticky Header -->
html css header sticky
Поделиться Источник Shane     16 сентября 2013 в 11:16

4 ответа

  • липкий заголовок на свитке с CSS вопросами

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

  • jQuery Липкий Заголовок

    Я пытаюсь реализовать липкий заголовок для раздела моего сайта, такого как эта демонстрация function UpdateTableHeaders() { $(.persist-area).each(function() { var el = $(this), offset = el.offset(), scrollTop = $(window).scrollTop(), floatingHeader = $(.floatingHeader, this) if ((scrollTop >…


2

Добавьте этот код.. добавьте z-index:1000 в оба стиля #header_container & z-index:1001 в #header

 #header_container 
      { 
        position:fixed;
        top:0px;
        left:0px;
        z-index:1000;
       }

 #header{
      z-index:1001;
      }

Поделиться Kailash Ahirwar     16 сентября 2013 в 11:22


1

Просто используйте параметр z-index. Например, z-индекс: 2 (Представьте порядок слоя) Он доступен только для элементов, использующих положение: абсолютное, относительное или фиксированное

Пример W3schools: http:/ / www. w3schools.com/cssref/pr_pos_z-index.asp

Отправлено от iphone

Поделиться Dvir     16 сентября 2013 в 11:21

Поделиться Ananta Prasad     06 апреля 2015 в 14:34

  • Как переключить липкий заголовок?

    Приведенный ниже код создает липкий заголовок, который появляется после прокрутки вниз на 100 пикселей. Как сделать так, чтобы липкий заголовок отключился, как только я доберусь до нижней части страницы? Допустим 800 пикселей? Спасибо! $(window).scroll(function() { if ($(this).scrollTop() >…

  • Основа липкий заголовок первый свиток

    Я использую Foundation 5 и липкий заголовок . Вот мой код: <header> <div class=sticky> <nav class=top-bar data-topbar role=navigation> <!— Blablabla —> </nav> </div> </header> Проблема с этой версией заключается в том , что когда я прокручиваю вниз в. ..


-2

В заголовок добавить:

position:absolute;
z-index:9999;

Это поднимет его над всем остальным

Поделиться SaturnsEye     16 сентября 2013 в 11:19

Похожие вопросы:


Липкий заголовок CSS / JS

Я нашел этот сайт Сегодня http: / / www. forward-thinker.co.uk/ . Кто-нибудь знает, как сделать такой липкий заголовок?


Липкий заголовок в мобильном браузере

Мне нужен липкий заголовок в мобильном браузере. В настоящее время я использую этот скрипт jquery: <script> $(function(){ var stickyHeader = $(‘#persist-wrap’).offset().top;…


Липкий Заголовок-Прокрутка-CSS / jQuery

Я хочу создать липкий заголовок. Каждый раз, когда пользователь прокручивает вниз AND, исходный заголовок исчезает, а затем должен включиться заголовок sticky. В настоящее время я использую это:…


липкий заголовок на свитке с CSS вопросами

Я построил липкий заголовок, который появляется, когда вы прокручиваете область навигации, и все работает отлично, за исключением того, что когда я настраиваю размер окна, липкий заголовок не…


jQuery Липкий Заголовок

Я пытаюсь реализовать липкий заголовок для раздела моего сайта, такого как эта демонстрация function UpdateTableHeaders() { $(.persist-area).each(function() { var el = $(this), offset = el.offset(),…


Как переключить липкий заголовок?

Приведенный ниже код создает липкий заголовок, который появляется после прокрутки вниз на 100 пикселей. Как сделать так, чтобы липкий заголовок отключился, как только я доберусь до нижней части…


Основа липкий заголовок первый свиток

Я использую Foundation 5 и липкий заголовок . Вот мой код: <header> <div class=sticky> <nav class=top-bar data-topbar role=navigation> <!— Blablabla —> </nav>. ..


Липкий заголовок витрины магазина

Я пытаюсь создать липкий заголовок для своего сайта WordPress ( www.carryoneverything.com ). у меня установлена последняя тема витрины магазина, но я не могу получить свой логотип, навигацию,…


Липкий заголовок в планировщике Fullcalendar

Я начинаю злиться, пытаясь получить липкий заголовок с полным календарным планировщиком. Я пытался height: parent Я видел много постов, но ни один из них не работал. но тогда есть 2 полосы прокрутки…


CSS гибкий липкий заголовок, который может расти и толкает нижние элементы вниз

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

CSS. заголовок с горизонтальной линией слева и справа от текста · GitHub

CSS. заголовок с горизонтальной линией слева и справа от текста · GitHub

Instantly share code, notes, and snippets.

CSS. заголовок с горизонтальной линией слева и справа от текста

<div>Заголовок с выравниванием слева</div>
<div>Заголовок с выравниванием по центру</div>
<div>Заголовок с выравниванием справа</div>
<style>
.title {
overflow: hidden;
font-size: 20px;
}
. title—center {
text-align: center;
}
.title—right {
text-align: right;
}
.title:before,
.title:after {
content: »;
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
width: 100%;
height: 3px;
background: #6CBD83;
border: solid #FFF;
border-width: 0 10px;
}
. title:before {
margin-left: -100%;
}
.title:after {
margin-right: -100%;
}
</style>
You can’t perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Основы CSS — подключение style.css. Теги header, h2, идентификатор id и класс class

Стили в верстке сайта подключаются отдельным файлом.

В этой же папке рядом с index.html создайте файл style.css. Создается файл так же, как index. html — щелкните правой кнопкой мыши, создайте текстовый файл и полностью переименуйте его в style.css.

Теперь откройте index.html в Sublime Text, удалите из него весь код и вставьте следующий код:

<!DOCTYPE html>
<html>
<head>
    <title>Заголовок страницы</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
	<header>
		<h2>Мой первый сайт</h2>
	</header>
</body>
</html>

Файл style.css тоже откройте в Sublime Text, и вставьте следующий код:

body{
    background-color: gray;
}
#header{
    background-color: #fff;
}
.h2{	
    font-size: 30px;
    color: #000;
    text-align: center;
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
}

Сохраните оба файла (Ctrl+S) и откройте index.html в браузере. Вы должны увидеть следующее:

Если что-то не получилось, сперва убедитесь, что Вы точно сохранили оба файла. А затем обновите страницу браузера сочетанием клавиш Ctrl+F5.

В будущем всегда обновляйте сайт в браузере сочетанием клавиш Ctrl+F5. Зачем это нужно, объясню позже.

Изменения в файле index.html

Разберемся, что изменилось в index.html. В <head> появилась строка <link rel=»stylesheet» href=»style.css»>. Таким образом подключаются файлы стилей, здесь мы подключили файл style.css.

В теге <body> изменилось все. Появился новый тег <header>, он говорит о том, что здесь будет содержаться вся верхняя часть сайта, так называемая «шапка» сайта. А в теге <header> есть тег <h2>, в который пишется главный заголовок отображаемый на странице. h2 — это очень важный тег для поисковых систем (таких как Яндекс и Google).

h2 должен быть только один на всей странице сайта. Также, есть h3, h4, h5, h5, h6, их может быть сколько угодно на странице, но они должны отображать логику страницы: h3 — это второй заголовок, h4 — третий заголовок и т.д.

У тега header есть id — это идентификатор тега. У тега h2 есть class. Для чего нужны id и class Вы увидите сейчас в style.css. Здесь только сразу скажу, что конкретный id должен быть только один на странице. То есть указывать уже нигде нельзя, можно будет указать, например,.

Значения атрибутов class могут быть одинаковыми у сколь угодно элементов (тегов).

Обратите внимание на полностью бесплатный курс HTML, на котором Вы быстро сможете стать экспертом верстки.

Разбор файла style.css

body обращается к <body> в index.html, и задает ему серый задний фон (background-color: gray;). Здесь background-color называется CSS-свойством, а gray — это значение CSS-свойства.

Аналогично #header обращается к, а .h2 обращается к class=»h2″. То есть через # обращаемся к id, а через точку обращаемся к class.

Здесь body, #header и .h2 называются CSS-селекторами.

Вообще, в id и class можно задавать любые произвольные значения, хоть. Но желательно, чтобы их значения отображали целевое назначение html-элемента (тега).

Свойства CSS пишутся на английском: font-size — размер шрифта, color — цвет, text-align — выровнять текст и т.д.

Описание CSS-свойств в style.css

background-color — цвет заднего фона. Весь элемент будет окрашен в указанный цвет. Некоторые значения цвета можно писать прямо словами (gray, white, black, red и т.д.), но обычно для этого используют HEX-формат. Если не знаете, что это то пока не задумывайтесь об этом.

font-size — размер шрифта. Здесь задан в пикселях (px) — основной единице измерения для числовых значений в CSS

color — цвет шрифта

text-align — расположение текста по горизонтале

margin — внешние отступы элемента. Каждые элемент имеет свои границы, как деталь страницы сайта. И элементу можно задать отступы от соседних элементов. Пока просто запомните это.

padding-top — внутренний отступ от верха элемента. Если внутри элемента находится другой элемент, то можно указать, что внутренний находится на некотором расстоянии от границы внешнего. Тоже пока просто запомните.

Это был достаточно объемный урок, в котором Вы узнали много новой полезной информации. Вы все ближе к тому, чтобы профессионально верстать качественные сайты!

HTML и CSS — тема легкая и интересная, а также достаточно широкая, поэтому поехали дальше!

Как создать заголовков сайтов с помощью CSS Flexbox?

От автора: когда в 2014 году я впервые изучал основы HTML и CSS, создание заголовка веб-сайта было для меня одной из этих страшных и сложных задач. Flexbox был еще новым, и мы были вынуждены использовать старые методы, например, float. Сегодня картина совершенно другая. Flexbox широко поддерживается, и это открывает для нас много возможностей.

Некоторые могут возразить, что в наше время сделать заголовок сайта легко, так как у нас есть современные методы макета CSS. Это не так, потому что есть несколько интересных задач, которые нужно решить. Я постараюсь выделить некоторые из них.

В этой статье я объясню, как мы можем использовать CSS Flexbox для успешного создания заголовка веб-сайта, и предоставлю некоторые важные советы и рекомендации. В конце концов, я покажу проект, сделанный специально для этой статьи. Читайте до конца, вас ждет сюрприз!

Введение

Во-первых, мне нужно убедиться, что мы говорим об одном и том же. Заголовок веб-сайта — это одна из первых вещей, которые видит пользователь при посещении веб-сайта. Обычно он содержит логотип или название веб-сайта со ссылками навигации. Рассмотрим следующий рисунок:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Независимо от визуального оформления заголовка, ключевыми элементами являются логотип и навигация.

Flexbox в действии

Когда flexbox применяется к элементу заголовка, он помещает все дочерние элементы в одну строку. Затем все, что вам нужно, это применить justify-content, чтобы распределить расстояние между ними.

<header> <a href=»#»>Brand</a> <nav></nav> </header>

<header>

  <a href=»#»>Brand</a>

  <nav></nav>

</header>

.site-header { display: flex; justify-content: space-between; align-items: center; }

.site-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

Просто, правда? Для такого варианта использования да. Но все может быть более сложным.

Оболочка заголовка

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

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

<header> <div> <a href=»#»><img src=»logo.svg» alt=»brand» /></a> <nav></nav> </div> </header>

<header>

  <div>

    <a href=»#»><img src=»logo.svg» alt=»brand» /></a>

    <nav></nav>

  </div>

</header>

И flexbox нужно переместить в элемент .site-header__wrapper.

.site-header__wrapper { display: flex; justify-content: space-between; align-items: center; }

.site-header__wrapper {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

Использование flex-wrap

Оно будет действовать как защитный метод CSS. На маленьком экране есть возможность горизонтальной прокрутки. См. рисунок ниже:

Без flex-wrap: wrap появится горизонтальная прокрутка. Обязательно включите его!

Изучение некоторых вариантов заголовка

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

Давайте посмотрим, как реализовать их с помощью flexbox.

Вариант заголовка 1

Я добавил кнопку рядом с навигационными ссылками. Как это сделать? Должны ли мы добавить его в навигацию в виде ссылки? Или его нужно отделить от навигации? Я бы сделал так.

<header> <div> <a href=»#»><img src=»logo.svg» alt=»brand» /></a> <nav></nav> <a href=»/track-shipment»>Track</a> </div> </header>

<header>

  <div>

    <a href=»#»><img src=»logo. svg» alt=»brand» /></a>

    <nav></nav>

    <a href=»/track-shipment»>Track</a>

  </div>

</header>

В таком случае интервалы нельзя задать через justify-content: space-between. Вместо этого я буду использовать для меню навигации margin-left: auto. Оно сместит его и кнопку вправо.

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

Вариант заголовка 2

Как и в первом варианте, здесь есть поле поиска, которое занимает оставшееся доступное пространство. С помощью flexbox это можно сделать с помощью свойства flex.

<header> <div> <a href=»#»><img src=»logo.svg» alt=»brand» /></a> <div></div> <nav></nav> <a href=»/track-shipment»>Track</a> </div> </header>

<header>

  <div>

    <a href=»#»><img src=»logo. svg» alt=»brand» /></a>

    <div></div>

    <nav></nav>

    <a href=»/track-shipment»>Track</a>

  </div>

</header>

Готово! Теперь поле поиска заполнит доступное пространство между логотипом бренда и меню. Однако здесь есть некоторые ограничения. В меньших окнах просмотра заголовок будет выглядеть так, как показано ниже.

Ширина поля поиска не должна быть меньше этой, так как набрать и увидеть полный текст будет сложно. Ниже приведены некоторые решения:

Мне больше нравится второе решение, так как оно не очень рано скрывает навигацию. Вообще, я стараюсь не скрывать элемент, если это не влияет на макет.

Вариант заголовка 3

В этом случае разметка HTML такая же, но визуальный порядок элементов заголовка другой. Как мы можем этого добиться? Вы могли подумать, что использование order решит эту проблему, не так ли?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<header> <div> <a href=»#»><img src=»logo. svg» alt=»brand» /></a> <nav></nav> <a href=»/track-shipment»>Track</a> </div> </header>

<header>

  <div>

    <a href=»#»><img src=»logo.svg» alt=»brand» /></a>

    <nav></nav>

    <a href=»/track-shipment»>Track</a>

  </div>

</header>

.site-header { display: flex; justify-content: space-between; } .nav { order: -1; }

.site-header {

  display: flex;

  justify-content: space-between;

}

 

.nav {

  order: -1;

}

Решением для этого является присвоение каждому дочернему элементу flex: 1. Это позволит распределить между ними доступное пространство.

.brand, . nav, .button { flex: 1; }

.brand,

.nav,

.button {

  flex: 1;

}

Что-то странное произошло с элементом кнопки. Он стал слишком большим из-за flex: 1. Единственный способ исправить это — поместить его в другой элемент.

<header> <div> <a href=»#»><img src=»logo.svg» alt=»brand» /></a> <nav></nav> <div> <a href=»/track-shipment»>Track</a> </div> </div> </header>

<header>

  <div>

    <a href=»#»><img src=»logo.svg» alt=»brand» /></a>

    <nav></nav>

    <div>

      <a href=»/track-shipment»>Track</a>

    </div>

  </div>

</header>

При этом мы можем центрировать как логотип, так и кнопку ниже.

.logo { text-align: center; } /* Пожалуйста, не обращайте внимание на именование. Я знаю, что эти имена не описательны, но это только для демонстрационных целей. */ .button-wrapper { text-align: end; /* end эквивалентно right в LTR-языках */ }

.logo {

  text-align: center;

}

 

/* Пожалуйста, не обращайте внимание на именование. Я знаю, что эти имена не описательны, но это только для демонстрационных целей. */

.button-wrapper {

  text-align: end; /* end эквивалентно right в LTR-языках */

}

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

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

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

Полезные советы по созданию заголовка с помощью Flexbox

Flex-basis

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

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

Вот способ исправить это:

Добавить flex: 1 0 100% для элемента меню.

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

Добавить отрицательное поле со значением, равным отступу заголовка. Это заставит меню занять всю ширину.

Добавить padding к меню, это добавит небольшой интервал.

И, наконец, я использую justify-content: center, чтобы разместить элементы навигации по центру.

.nav { flex: 1 0 100%; /* [1] */ order: 2; /* [2] */ margin: 1rem -1rem -1rem -1rem; /* [3] */ padding: 1rem; /* [4] */ display: flex; /* [5] */ justify-content: center; /* [5] */ }

.nav {

  flex: 1 0 100%; /* [1] */

  order: 2; /* [2] */

  margin: 1rem -1rem -1rem -1rem; /* [3] */

  padding: 1rem; /* [4] */

  display: flex; /* [5] */

  justify-content: center; /* [5] */

}

А вот наглядное описание процесса.

Интервал

Благодаря поддержке flex свойства gap в Chrome и Firefox теперь проще, чем когда-либо, добавлять интервалы между flex-элементами. Рассмотрим следующий заголовок:

Чтобы добавить выделенный интервал, все, что вам нужно, это добавить gap: 1rem к родительскому элементу flex. Без gap нам пришлось бы задавать интервал старым способом.

/* Old way */ .brand { margin-right: 1rem; } .sign-in { margin-right: 1rem; } /* New way */ .site-header { /* Other flexbox styles */ gap: 1rem; }

/* Old way */

.brand {

  margin-right: 1rem;

}

 

.sign-in {

  margin-right: 1rem;

}

 

/* New way */

.site-header {

  /* Other flexbox styles */

  gap: 1rem;

}

Помните, что вам нужно сделать запасной вариант при использовании свойства gap. Это все для этой статьи. Позвольте показать вам, что я сделал!

Представляем Headers.css

У меня появилась идея разработать и реализовать компоненты заголовка веб-сайта. Причина в том, что я могу выбрать один и довольно быстро использовать его в новом проекте. На данный момент я создал 17 заголовков и в ближайшие недели планирую их добавить. Работая над ними, я старался сосредоточиться на следующем:

Простота

Полностью адаптивный дизайн

Использование Sass, чтобы их можно было легко редактировать (все еще нужно провести некоторый рефакторинг)

Доступность (пожалуйста, напишите, если вы заметили что-то неправильное)

Посмотрите их на headers-css.vercel.app или Github.

Автор: Ahmad Shadeed

Источник: //ishadeed.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Элемент — 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. Это тоже может быть интересно:

Сложный заголовок с линиями по бокам текста на css

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

Мы будем использовать обычный тег div с классом .title и его псевдоэлементы :before и :after. В div напишем нужный текст заголовка, а псевдоэлементы будут линиями: :before линия слева, :after соответственно будет линией справа.

Код html:


<div>
    <span>
        Наш<br />
        заголовок
    </span>
</div>

Код css:


.title {
    /* Чтобы спрятать часть линий, которые 
    ** будут вылазить за пределы блока */
    overflow: hidden;
    /* Выравнивание заголовка по центру, 
    ** можно использовать left, right */
    text-align: center;
    /* Тут можно добавить другие стили для заголовка */
    font-size: 30px;
}
.title span {
    /* Стили тега обертки для заголовков 
    ** в несколько строк */
    display: inline-block;
    vertical-align: middle;
}
.title:before,
.title:after {
    /* Обязательно указываем пустое свойство content, 
    ** иначе псевдоэлементы не появятся на сайте */
    content: "";
    /* Указываем что наши линии будут строчно-блочные и 
    ** выравнивание по высоте - по центру */
    display: inline-block;
    vertical-align: middle;
    /* Задаем ширину 100% и выбираем высоту линии, 
    ** в нашем примере она равна 4 пикселям */
    width: 100%;
    height: 4px;
    /* Добавляем цвет для линии */
    background-color: #00cf00;
    /* Добавляем пседоэлемантам возможность изменить 
    ** позицию линии, для создания отступов от текста */
    position: relative;
}
. title:before {
    /* Смещаем левую линию на 100% влево, чтобы линия 
    ** встала рядом с текстом слева */
    margin-left: -100%;
    /* Указываем в пикселях отступ линии от текста заголовка */
    left: -14px;
}
.title:after {
    /* Смещаем правую линию на 100% вправо, чтобы 
    ** линия встала рядом с текстом справа */
    margin-right: -100%;
    /* Указываем в пикселях отступ линии от текста заголовка */
    right: -14px;
}

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

HTML-тег

Тег

определяет заголовок страницы или раздела. Обычно он содержит логотип, поиск, навигационные ссылки и т. Д.

Этот тег не представляет новый раздел в структуре. Элемент

обычно содержит заголовок (элемент

—

) окружающего раздела. Однако этого не требуется.

Тег

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

Не разрешается размещать тег
внутри элементов
и
, а также в другом теге
.

Синтаксис¶

Тег

состоит из пар. Контент записывается между открывающим (
) и закрывающим (
) тегами.

  

  
     Название документа 
    <стиль>
      ul {
        отступ: 0;
      }
      ul li {
        дисплей: встроенный блок;
        маржа справа: 10 пикселей;
        цвет: # 778899;
      }
    
  
  
    <заголовок>
      
       
 Добро пожаловать на нашу страницу
<статья> <заголовок>

Заголовок раздела

Текстовый абзац.

Попробуйте сами »

Результат¶ 

  

  
     Название документа 
    <стиль>
      тело {
        семейство шрифтов: Arial, sans-serif;
        высота строки: 2;
      }
      h3 {
        выравнивание текста: центр;
      }
      ul {
        отступ: 0;
      }
      ul li {
        тип-стиль-список: нет;
        дисплей: встроенный блок;
        маржа справа: 10 пикселей;
      }
      a {
        дисплей: блок;
        цвет: # 778899;
      }
    
  
  
    <заголовок>
      
       
 Добро пожаловать на нашу страницу 
 
      

    
    <основной>
       
 Получите ответы на свои вопросы по программированию 
 
      

        Lorem ipsum, или «lipsum», как его иногда называют, - это фиктивный текст, используемый при разметке печатных, графических или веб-дизайнов.Этот отрывок приписывается неизвестному наборщику 15 века, который, как полагают, скремблировал отрывки из книги Цицерона «De Finibus Bonorum et Malorum» для использования в сборнике образцов шрифта.
      

      

        Lorem ipsum, или «lipsum», как его иногда называют, - это фиктивный текст, используемый при разметке печатных, графических или веб-дизайнов. Этот отрывок приписывается неизвестному наборщику 15 века, который, как полагают, скремблировал отрывки из «De Finibus Bonorum et Malorum» Цицерона для использования в сборнике образцов шрифта.Lorem ipsum, или «lipsum», как его иногда называют, - это фиктивный текст, используемый при разметке печатных, графических или веб-дизайнов. Этот отрывок приписывается неизвестному наборщику 15 века, который, как полагают, скремблировал отрывки из «De Finibus Bonorum et Malorum» Цицерона для использования в сборнике образцов шрифта.
Попробуйте сами »

Атрибуты¶

Тег

поддерживает глобальные атрибуты и атрибуты событий.

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

?

Общие свойства для изменения визуального веса / выделения / размера текста в теге

:
  • Свойство CSS font-style устанавливает стиль шрифта. нормальный | курсив | косой | начальная | наследовать.
  • CSS свойство font-family определяет приоритетный список из одного или нескольких имен семейств шрифтов и / или общих имен семейств для выбранного элемента.
  • CSS свойство font-size устанавливает размер шрифта.
  • CSS свойство font-weight определяет, должен ли шрифт быть жирным или толстым.
  • Свойство CSS text-transform управляет регистром текста и заглавными буквами.
  • CSS свойство text-decoration определяет украшение, добавленное к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Раскрашивание текста в теге

:
  • Свойство цвета CSS описывает цвет текстового содержимого и оформления текста.
  • CSS свойство background-color устанавливает цвет фона элемента.

Стили макета текста для тега

:
  • Свойство CSS text-indent определяет отступ первой строки в текстовом блоке.
  • Свойство CSS text-overflow указывает, как пользователю следует сигнализировать о переполненном содержимом, которое не отображается.
  • CSS свойство white-space определяет, как обрабатывается белое пространство внутри элемента.
  • Свойство CSS word-break указывает, где строки должны быть разорваны.

Другие свойства, на которые стоит обратить внимание для тега

:

One Line — Sticky Header using CSS

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

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

Или даже для того, чтобы панель навигации оставалась внизу мобильного веб-сайта.

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

Самое приятное, что мы сделаем это в одну строку 😎

CSS 

  nav {
    положение: липкое; верх: 0;
}

Я знаю, о чем вы думаете, это две строчки! Ладно, признаю, я увлекся однострочным заголовком, но уверяю вас, что это все еще круто 😍

Давайте посмотрим демо и разберемся, как это работает

Demo 1: Навигационная панель, которая просто залипает

Попробуем разобраться, что здесь происходит.

Я использовал довольно простую разметку

HTML 

  <тело>
  
  
 Первый раздел 

  
 Второй раздел 

  
 Третий раздел

CSS 

  html {
  маржа: 0;
  отступ: 0;
  поведение прокрутки: плавное;
}

тело {
  мин-высота: 100vh;
  семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  маржа: 0;
  отступ: 0;
  размер коробки: рамка-рамка;
}
body nav {
  положение: липкое;
  верх: 0;
}
ul {
  ширина: 100%;
  дисплей: гибкий;
  justify-content: гибкий конец;
  размер коробки: рамка-рамка;
  отступ: 20 пикселей;
  фон: #fff;
}
li {
  стиль списка: нет;
  поле справа: 20 пикселей;
  размер шрифта: 25 пикселей;
  font-weight: жирный;
}
li a {
  текстовое оформление: нет;
  цвет: # 1ac;
}
раздел {
  высота: 100vh;
  дисплей: сетка;
  места-предметы: центр;
  размер шрифта: 50 пикселей;
  font-weight: жирный;
  фон: #eee;
}

Из всей этой разметки две самые важные строки, в которых происходит вся магия, — это 

 ...
body nav {
    положение: липкое;
    верх: 0;
}
...

Он сообщает браузеру, что нужно прикрепить этот элемент к области просмотра, когда значение его верхней позиции равно 0;

Элемент с положением : липкий; позиционируется на основе положения прокрутки пользователя.

Липкий элемент переключается между относительно и фиксированным , в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока не будет достигнута заданная позиция смещения в области просмотра — затем он «застревает» на месте (например, позиция : фиксированная ).

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

Демо 2: Навигационная панель под знаменем героя.

Здесь панель навигации находится под знаменем героя. Таким образом, он действует как относительно , пока его смещение сверху не станет равным 0. В тот момент, когда значение смещения достигает 0, оно прилипает к верху области просмотра.

Demo 3: Приложение с липким верхним и нижним колонтитулами

Обратите внимание, как мы стилизовали элемент нижнего колонтитула .

  footer {
    ...
    положение: липкое;
    внизу: 0;
    ...
}

Вот и все! Теперь мы официально липкие! 🐱‍👤✌

Вы знаете, что еще липкое? Кофе пролился на стол! Мои дни наполнены кофе и только кофе. Итак, я знаю, вы знаете, что мы все должны делать 🤞

Продолжайте взламывать ☕

Рекомендации

Создание поля с цветным заголовком в HTML и CSS

Создание поля с цветным заголовком в HTML и CSS — qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 318 раз

На этот вопрос уже есть ответы :

Закрыт в прошлом году.

Я пытаюсь создать в HTML и CSS окно, подобное следующему:

У меня такой код:

orders.html:

  

    
        
         Страница заказов 
        
    
    
        

            

                
 ЗАКАЗ № 10980

заказа.css:

  .order-container {
    стиль границы: сплошной;
    высота: 400 пикселей;
    ширина: 400 пикселей;
}

.order-header {
    выравнивание текста: центр;
    цвет фона: # a9dbde;
    высота: 60 ​​пикселей;
}

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

Создан 15 мар.

ceno980ceno980

1,9559 серебряных знаков1616 бронзовых знаков

1

HTML имеет какое-то значение по умолчанию, как сказал @khan.Также вы можете попробовать свойство flex в css, это очень поможет вам при выполнении некоторых операций выравнивания элементов.

  


     Создание блока с цветным заголовком в HTML и CSS 
    


    

        

            
 ЗАКАЗ № 10980
Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *