Оформление заголовка css: Bootstrap — Оформление заголовков | ИТ Шеф

Bootstrap — Оформление заголовков | ИТ Шеф

• Статьи
• Видеоуроки
• Таймлайн
• Вопросы
• Поиск

• • Войти
  • Регистрация

• HTML & CSS
• JavaScript
• Bootstrap

Как сделать и оформить в css шапку сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div id = «wrap»> <header></header> </div>

<div id = «wrap»> <header></header> </div>

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

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

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

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

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

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

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

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

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

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>

<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; } .menu{ list-style: none; position: absolute; top: 10px; right: 100px; }

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

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

Сместим меню в правый край с помощью абсолютного позиционирования. Чтобы это заработало, нужно также дописать для header такое правило: position: relative;

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

Как зафиксировать блок, чтобы он не исчезал при прокрутке?

Если вы хотите фиксировать шапку в css (такое ее поведение можно увидеть на многих веб-ресурсах), то вам может помочь фиксированное позиционирование. Нужно добавить такие стили:

А также координаты (top, left, right, bottom) какие вам нужны. Обычно фиксацию делают с помощью jQuery, прописывая соответствующий сценарий и привязывая его к событию – вертикальному скроллу страницы.

Если вы хотите научиться верстать сайты, в том числе и шапки, но рассмотренный материал вам непонятен, то нужно начинать с самых азов – изучения основ HTML и CSS. В этом вам может помочь наш премимум-раздел, там есть два соответствующих видеокурса по этим технологиям, в которых все разъясняется по полочкам.

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

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

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

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

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

CSS Оформление заголовков

Вторая наша статья посвящена заголовкам, работе с ними, способам изменения их внешнего вида с помощью CSS.

Заголовок — один из важнейших аспектов преставления текста. Он даёт читателю понятие об основной теме текста, его направлении и т.д.
В языке html, заголовки задаются тегами:

<h2>, <h3>, <h4>, <h5>, <h5>, <h6>

Цифра после буквы h называется уровнем заголовка и определяет высоту и ширину символов. (h2 — самый большой). Оформлять заголовок можно непосредственно в коде, но это оказывается крайне неудобным и громоздким. Посмотрим, как это можно сделать оптимальным образом — с помощью CSS.
Существует довольно много стилей, которые могут быть применены к заголовку. Мы можем изменить размер шрифта, его положение на странице, цвет, начертание и т.д. Попробуем сделать это в несколько этапов.

1) Начнём с цвета. Создадим html файл и запишем туда такой код:

<html>
<head>
<style type="text/css" media="screen">
h2 {
 color:#003366;
}

h3 {
 color:#e2b500;
}

h4 {
 color:#9d0000;
}
</style> 
</head>
<body>
<h2>Основной заголовок</h2>
<h3>Заголовок 2-го уровня</h3>
<h4>Заголовок 3-го уровня</h4>
</body>
</html>

Посмотрим, что у нас получилось: демо. Все стили будут прописываться в фигурных скобках через ;

2. Теперь стоило бы выравнить заголовок 1-го уровня по центру страницы. Для этого в списке стилей h2, после color:#……; добавим такой стиль: text-align:center;

3. Теперь изменим начертание шрифта для заголовка 2-го уровня. Для примера возьмём шрифт Verdana. Добавим только для h3 такой стиль: font-family: Verdana;

4. Для примера, выделим заголовок 3-го уровня фоновым цветом. и границей (сделаем вид блока). Добавим для него такие стили: background: #d4e6ff; border: solid 1px #006cff; width: 200px;

В итоге у нас получился такой код:

<html>
<head>
<style type="text/css" media="screen">
h2 {
 color:#003366;
 text-align:center;
}

h3 {
 color:#e2b500;
 font-family: Verdana;
}

h4 {
 color:#9d0000;
 background: #d4e6ff;
 border: solid 1px #006cff;
 width: 200px;
}
</style> 
</head>
<body>
<h2>Основной заголовок</h2>
<h3>Заголовок 2-го уровня</h3>
<h4>Заголовок 3-го уровня</h4>
</body>
</html>

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

Для оформления заголовков и окружающего их пространства допустимо использование всех стандартных текстовых и блоковых стилей CSS 2.0. Подробнее об этом можно узнать из соответствующих глав нашего справочника.

Надеюсь, статья оказалась полезной, а процесс оформления блоков стал казаться проще.

Оформление текста css – как оформить его красиво

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

Цвет

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

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

Цвет в css задается с помощью свойства color. Значения можно записывать в виде ключевых слов (white, brown, orange), шестнадцатеричных hex-кодов (#000, #fff, #ccc) и в режиме rgb (red, green, blue) где определяется насыщенность каждого из этих цветов в числовом значении от 0 до 255.

Сам шрифт

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

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

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

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

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

Задать шрифт можно с помощью свойства font-family, а значением выступает имя или семейство. Для надежности можно записать пару вариантов через запятую. Например, так: Font-family: «Lato», Georgia, Arial, sans-serif;

Тут мы записали аж четыре варианта. Если браузер найдет шрифт Lato, то будет использовать именно его. Если же он не будет обнаружен, то следующим веб-обозреватель попытается использовать Georgia, а если и его не будет, то Arial. Этот шрифт есть на любых компьютерах с операционной системой Windows.

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

Размер шрифта

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

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

h2{ font-weight: normal; font-size: 50px; }

h2{ font-weight: normal; font-size: 50px; }

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

Тень текста

Любому текстовому фрагменту можно задать тень с помощью правила text-shadow. Давайте разберем его синтаксис на примере:

span{ text-shadow: 2px 2px 5px red; }

span{ text-shadow: 2px 2px 5px red; }

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

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

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

Все текстовые фрагменты, заключенные в теги span, получат такую тень. Выглядит она так:

Первое числовое значение задает смещение по горизонтали, второе – смещение по вертикали, третье – размытие тени, это позволяет снизить ее резкость и насыщенность. Последний параметр – цвет.

Если какое-то из значений вам не нужно, просто поставьте 0. Цвет записывать обязательно. Параметры тени зависят в первую очередь от размера шрифта – чем он больше, тем больше можно делать смещение.

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

Множественная тень

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

span{ font-size: 40px; text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua; } div{ font-size: 40px; text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua, 0 0 30px blue, 0 0 35px purple; } p{ font-size: 40px; text-shadow: 1px 1px 0 red, -1px -1px 0 orange, 2px 2px yellow, -2px -2px green; }

span{ font-size: 40px; text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua; } div{ font-size: 40px; text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua, 0 0 30px blue, 0 0 35px purple; } p{ font-size: 40px; text-shadow: 1px 1px 0 red, -1px -1px 0 orange, 2px 2px yellow, -2px -2px green; }

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

Тени являются мощным css3-инструментом для оформления текста и уже сегодня активно используются, в основном в заголовках, которые нужно по-особенному выделить среди остального текста.

Другие свойства

На этом, конечно, арсенал css приемов для стилизации текста не заканчивается. В этой статье вы можете прочитать еще о некоторых параметрах, таких, как жирность, начертание, варианты написания букв и их трансформация (ссылка на статью “Как задать шрифт”). Там же описывается и letter-spacing – межбуквенный интервал, который можно добавлять к нужным текстовым фрагментам, если это будет необходимо.

Оформление при наведении

Также можно и подчас нужно оформить текст красиво в css при наведении на него курсора мышки. В чем может заключаться такая стилизация? Например, в появлении подчеркивания, изменения цвета текста, или фонового цвета, изменения размера шрифта и т.д.

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

#header{ transition: (задержка в секундах или миллисекундах) например 1s; }

#header{ transition: (задержка в секундах или миллисекундах) например 1s; }

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

Итог

В css огромный арсенал средств для изменения внешнего вида текста. Самый мощный из них – это возможность использовать любые шрифты, задавая их через font-family, а также добавившаяся в css3 возможность добавлять тень. На этом я заканчиваю эту статью, посвященную приемам изменения текста, а вам желаю успешно использовать эти знания при разработке веб-сайтов. Дополнительную информацию по теме вы можете найти в премиум курсе по css3

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

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

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

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Настройка подзаголовков с помощью CSS

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

Для начала сведем вместе несколько основных способов, которые можно скомбинировать и расширить:

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

изменения стилей

подвесные подзаголовки

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

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

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

вставленные подзаголовки

неалфавитные символы

поперечные полоски

По мере рассмотрения каждого приема можно переходить на эту демо-страницу и смотреть эти—и дополнительные—варианты в действии.

Задание размеров по типографской шкале

При создании иерархии сети безопасным подходом является задание размеров подзаголовков при помощи типографской шкалы—пользовательской или общепринятой, такой как традиционная шкала (16, 18, 21, 24, 36, 48, 60, 72), разработанная типографами Ренессанса еще в 16-ом веке.

Начните с установки размера шрифта для body, а затем упорядочьте размеры подзаголовков от наименее значительных до самых важных. По моему опыту, заголовки h5 и h6 редко нужны в Сети, поэтому мы начнем с h5 и будем двигаться к h2, применяя типографскую шкалу по умолчанию (16, 18, 21, 24, 36, 48, 60, 72).[1]

p { font-size: 100%; } /* 16px */ h5 { font-size: 1.125em; } /* 18px */ h4 { font-size: 1.3125em; } /* 21px */ h3 { font-size: 1.5em; } /* 24px */

p { font-size: 100%; } /* 16px */ h5 { font-size: 1.125em; } /* 18px */ h4 { font-size: 1.3125em; } /* 21px */ h3 { font-size: 1.5em; } /* 24px */

Вы видите, что значения подзаголовков слишком близки друг другу, чтобы их можно было четко различить, особенно если страница просматривается быстро. Вот где может оказаться предпочтительной другая шакала, как та, которая основана на соотношении 2:3 (чистая квинта), которую можно использовать для увеличения размеров подзаголовков на 50% приращение.[2]

p { font-size: 100%; } /* 16px */ h5 { font-size: 1.5em; } /* 24px */ h4 { font-size: 2.25em; } /* 36px */ h3 { font-size: 3.375em; } /* 54px */

p { font-size: 100%; } /* 16px */ h5 { font-size: 1.5em; } /* 24px */ h4 { font-size: 2.25em; } /* 36px */ h3 { font-size: 3.375em; } /* 54px */

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

Разные стили при одном размере букв

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

Для этих тестов нам понадобится семейство шрифтов с множеством стилей, и я выбрал Proxima Nova из-за доступного сопутствующего стиля из маленьких прописных букв, а также хорошего выбора ширины. Пользуетесь ли вы Proxima Nova или другим любимым шрифтом по выбору, всегда помните об их универсальности—особенно потому, что не у всех шрифтов есть маленькие заглавные буквы.

Как во всем, связанном в веб-дизайне с CSS, есть несколько методов, которые можно применять для стилей с маленькими заглавными буквами. Одна из возможностей – применение правила свойства CSS3 OpenType.

h4 { font-family: proxima-nova, sans-serif; -moz-font-feature-settings: «smcp»; -ms-font-feature-settings: «smcp»; -webkit-font-feature-settings: «smcp»; -o-font-feature-settings: «smcp»; font-feature-settings: «smcp»; text-transform: lowercase; }

h4 {   font-family: proxima-nova, sans-serif;   -moz-font-feature-settings: «smcp»;   -ms-font-feature-settings: «smcp»;   -webkit-font-feature-settings: «smcp»;   -o-font-feature-settings: «smcp»;   font-feature-settings: «smcp»;   text-transform: lowercase; }

Еще одна опция– загрузка отдельного шрифта с маленькими заглавными буквами. У нее есть дополнительное преимущество – гарантия того, что маленькие заглавные буквы будут присутствовать даже в тех браузерах, которые не поддерживают свойства CSS OpenType посредством свойства font-feature-settings.

h4 { font-family: proxima-nova-sc-osf, sans-serif; text-transform: lowercase; }

h4 {   font-family: proxima-nova-sc-osf, sans-serif;   text-transform: lowercase; }

Подвесные подзаголовки

Чтобы расширить применение предыдущего метода, особенно когда требуется подчеркнуть структуру документа, можно использовать подвесные подзаголовки. Это не было биномом Ньютона, когда мы создавали дизайны с фиксированной разметкой, но с нашествием адаптивного веб-дизайна относительные единицы, такие как проценты, могут оказаться сложными в применении.[3]

Для подсчета ширины подвесного заголовка можно применить следующую формулу:

x = левый отступ статьи в %

ширина подзаголовка в % = (x / (100 – x)) * 100

article { padding-left: 33.33333333%; } h3 { float: left; margin-left: -50%; width: 50%; }

article {   padding-left: 33.33333333%; }   h3 {   float: left;   margin-left: -50%;   width: 50%; }

Для пущей важности можно сделать элегантную простую горизонтальную линию. Для прогрессивного улучшения общего дизайна идеальны псевдоэлементы :before и :after. Назначить им стили можно, применив рамки или фоны (или и то, и другое). Помните о том, что унаследованная ширина псевдоэлемента равна ширине подзаголовка. Чтобы растянуть псевдоэлемент на всю ширину статьи, нужно увеличить его размер. Просчитайте процентное отношение этого расширения, начав со значения отступа элемента статьи на основе процентов. (В виде формулы это выглядит так: (100 / отступ статьи в %) * 100 = ширина псевдоэлемента в %)

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

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

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

h3:before { content: » «; float: none; display: block; width: 300%; height: .7em; border-top: .0625em solid #ccc; }

h3:before {   content: » «;   float: none;   display: block;   width: 300%;   height: .7em;   border-top: .0625em solid #ccc; }

Или можно просто применить к абзацу рамку, которая следует за подзаголовком с помощью смежных селекторов CSS:

article { padding-left: 33.33333333%; } h3 { float: left; margin-left: -50%; margin-top: 1.5em; width: 50%; text-align: right; } h3 + p { border-top: .0625em solid #ccc; padding-top: 1.4375em; }

article {   padding-left: 33.33333333%; }   h3 {   float: left;   margin-left: -50%;   margin-top: 1.5em;   width: 50%;   text-align: right; }   h3 + p {   border-top: .0625em solid #ccc;   padding-top: 1.4375em; }

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

h3 { margin: 0; font-weight: bold; } h3:first-letter { float: left; width: 1em; margin-left: -1.1em; font-size: 3.4em; line-height: .9em; text-align: right; }

h3 {   margin: 0;   font-weight: bold; }   h3:first-letter {   float: left;   width: 1em;   margin-left: -1.1em;   font-size: 3.4em;   line-height: .9em;   text-align: right; }

Вставленные подзаголовки

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

h3 { float: left; font-size: 1em; line-height: 1.5; padding-right: .5em; margin: 0; }

h3 {   float: left;   font-size: 1em;   line-height: 1.5;   padding-right: .5em;   margin: 0; }

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

Неалфавитные символы

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

h3:before { content: «{«; } h3:after { content: «}»; }

h3:before {   content: «{«; }   h3:after {   content: «}»; }

Кроме того, можно добавить под подзаголовок серию звездочек или обычный штрих. Просто установите правило display: block к псевдоэлементу :after и увеличьте размер его шрифта, таким образом выделив самые красивые детали. Даже самые простые глифы, которые есть почти в каждом шрифте, будучи увеличенными, смотрятся очень интересно.[4]

Код довольно прост:

h3:after { content: «—»; display: block; font-size: 2em; }

h3:after {   content: «—»;   display: block;   font-size: 2em; }

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

Поперечные полоски

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

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

h3 { display: table; width: auto; padding: 0 .5em 0 0; position: relative; } h3:after { content: » «; display: block; height: .5em; width: 9999%; overflow: hidden; position: absolute; top: .6em; background: #ccc; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

h3 {   display: table;   width: auto;   padding: 0 .5em 0 0;   position: relative; }   h3:after {   content: » «;   display: block;   height: .5em;   width: 9999%;   overflow: hidden;   position: absolute;   top: .6em;   background: #ccc; }

Вперед!

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

Примечания и ресурсы

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

* { margin: 0; padding: 0; font-weight: normal; } html { font-size: 100%; line-height: 1.5; }

* {   margin: 0;   padding: 0;   font-weight: normal; }   html {   font-size: 100%;   line-height: 1.5; }

2. Для пущего вдохновения и быстрого тестирования нескольких разных шкал, обратите внимание на калькулятор модульных шкал Тима Брауна (Tim Brown).

3. Поддержка гибких подвешенных подзаголовков довольно проста, и подробно описана в моей статье «Перемещение элемента HTML в гибком контейнере».

4. Если требуются идеи глифов, просто посмотрите таблицу знаков UTF.

Автор: Sally Kerrigan

Источник: http://blog.typekit.com/

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

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

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

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

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Заголовки | htmlbook.ru

Заголовки выполняют важную функцию на веб-странице. Во-первых, они показывают важность раздела, к которому относятся. Чем больше заголовок и его «вес» , тем более он значимый. Вспомните, что в газетах и журналах передовицы набраны крупным шрифтом, тем самым, привлекая к ним внимание и говоря: «вот это надо читать обязательно» . Во-вторых, с помощью различных заголовков легко регулировать размер текста. Чем выше уровень заголовка, тем больше размер шрифта. Самым верхним уровнем является уровень 1 (<h2>), а самым нижним — уровень 6 (<h6>). И, в-третьих, поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка. Это важно для раскрутки сайта и для его занятия первых строк выдачи результата в поисковой системе по ключевым словам.

Синтаксис создания заголовков показан в примере 7.3.

Пример 7.3. Добавление заголовков

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Заголовки в тексте</title>
 </head>
 <body>
  <h2>Заголовок первого уровня</h2>
  <h3>Заголовок второго уровня</h3>
  <h4>Заголовок третьего уровня</h4>
  <h5>Заголовок четвертого уровня</h5>
  <h5>Заголовок пятого уровня</h5>
  <h6>Заголовок шестого уровня</h6>
 </body>
</html>

Результат данного примера показан на рис. 7.3. Содержимое тега <h2> отображается самым крупным шрифтом жирного начертания, а <h6> — самым мелким.

Рис. 7.3. Вид заголовков на веб-странице

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

Заголовки HTML уроки для начинающих академия

Заголовки

Заголовки 2

Заголовки 3

Заголовки 4

Заголовки 5

Заголовки 6

---

Заголовки HTML

Заголовки определяются с помощью <h2> для <h6> тегов.

<h2>определяет наиболее важный заголовок. <h6>определяет наименее важный заголовок.

Пример

<h2>Заголовки 1</h2>
<h3>Заголовки 2</h3>
<h4>Заголовки 3</h4>
<h5>Заголовки 4</h5>
<h5>Заголовки 5</h5>
<h6>Заголовки 6</h6>

Примечание: Браузеры автоматически добавляют пробел (поле) до и после заголовка.

---

Заголовки важны

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

Пользователи снимают страницы по заголовкам. Важно использовать заголовки для отображения структуры документа.

<h2>заголовки должны использоваться для основных рубрик, за которыми следуют <h3> заголовки, затем менее важные <h4> и так далее.

Примечание: Используйте заголовки HTML только для заголовков. Не используйте заголовки, чтобы сделать текст BIG или bold.

---

Большие заголовки

Каждый заголовок HTML имеет размер по умолчанию. Однако можно указать размер любого заголовка с атрибутом style, используя свойство CSS font-size:

Пример

<h2 style=»font-size:60px;»>Heading 1</h2>

---

Горизонтальные правила HTML

Тег <hr> определяет тематический разрыв в HTML-странице и чаще всего отображается как горизонтальное правило.

Элемент <hr> используется для разделения содержимого (или определения изменения) в HTML-странице:

Пример

<h2>This is heading 1</h2>
<p>This is some text.</p>
<hr>
<h3>This is heading 2</h3>
<p>This is some other text.</p>
<hr>

---

html — Стилизация тегов заголовков CSS

Переполнение стека

1. Товары
2. Клиенты
3. Случаи использования

1. Переполнение стека Общественные вопросы и ответы
2. Команды Частные вопросы и ответы для вашей команды
3. предприятие Частные вопросы и ответы для вашего предприятия
4. работы Программирование и связанные с ним возможности технической карьеры
5. Талант Нанять технических талантов
6. реклама Обратитесь к разработчикам по всему миру

Загрузка…

.

html — CSS — Стилизация заголовка / навигации

Переполнение стека

1. Товары
2. Клиенты
3. Случаи использования

1. Переполнение стека Общественные вопросы и ответы
2. Команды Частные вопросы и ответы для вашей команды
3. предприятие Частные вопросы и ответы для вашего предприятия
4. работы Программирование и связанные с ним возможности технической карьеры
5. Талант Нанять технических талантов
6. реклама Обратитесь к разработчикам по всему миру

,

HTML-стилей CSS

---

CSS — это каскадные таблицы стилей.

CSS экономит много работы. Он может управлять макетом нескольких веб-страницы сразу.

---

Управление текстом

цветов, Ящики

---

Что такое CSS?

Cascading Style Sheets (CSS) используется для форматирования макета веб-страницы.

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

Совет: Слово каскадно означает, что стиль примененный к родительскому элементу, также будет применяться ко всем дочерним элементам внутри Родитель.Итак, если вы установите цвет основного текста на «синий», все заголовки, абзацы и другие текстовые элементы в теле также получат тот же цвет (если вы не укажете что-то другое)!

---

Использование CSS

CSS можно добавить в HTML-документы тремя способами:

• Inline — с использованием атрибута стиля внутри HTML-элементов
• Внутренний - с использованием элемента