Оформление заголовка css – Как сделать декорацию заголовка подстраиваемую под ширину текста в CSS ? — Хабр Q&A

Добавление горизонтальных линий до и после заголовка или изображения на CSS

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

Для этого нужно использовать псевдоэлементы :before и :after. Html-конструкция должна выглядеть следующим образом:

<div> <span>ЗАГОЛОВОК</span> </div>

<div>     <span>ЗАГОЛОВОК</span> </div>

Для основной обертки используем следующие CSS-правила:

.block { text-align: center; /* выравнивание заголовка по центру обертки */ width: 80%; /* ширина обертки. На самом деле для фиксированной верстки можно использовать и px, но лучше сразу адаптировать под разные устройства, т.к. это, что называется, тренди 🙂 */ margin: 0 auto; /* выравнивание обертки по центру документа */ overflow: hidden; /* прячем линии за границами обертки, чтобы в случае изменения ширины экрана линии не выходили за ее пределы */ }

.block {     text-align: center;  /* выравнивание заголовка по центру обертки */     width: 80%;          /* ширина обертки. На самом деле для фиксированной верстки можно использовать и px, но лучше сразу адаптировать под разные устройства, т.к. это, что называется, тренди 🙂 */     margin: 0 auto;      /* выравнивание обертки по центру документа */     overflow: hidden;    /* прячем линии за границами обертки, чтобы в случае изменения ширины экрана линии не выходили за ее пределы */ }

Для дочернего элемента <span> добавляем позиционирование, чтобы впоследствии управлять расположением линий в рамках обертки:

.block span { position: relative; }

.block span {      position: relative; }

Теперь перейдем непосредственно к оформлению псевдоэлементов (будущих линий):

.block span:before { display: block; /* делаем псевдоэлемент блоком для последующего работы с ним, как с простым div’ом */ width:1000px; /* устанавливаем ширину линию. Можно использовать произвольную ширину */ content: »; /* позволяет вставлять генерируемое содержание в текст страницы, которое первоначально в тексте отсутствует */ position: absolute; /* абсолютное позиционирование для управления линиями */ border-bottom: 1px solid #000; /* бордер псевдо дива, т.е. сама линия */ top:50%; /* позиционирование по вертикали */ right: 110px; /* позиционирование по горизонтали */ } /* аналогичные стили для второго псевдоэлемента */ .block span:after { display: block; width:1000px; content: »; position: absolute; border-bottom: 1px solid #000; top:50%; left: 110px; }

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

.block span:before {     display: block;                  /* делаем псевдоэлемент блоком для последующего работы с ним, как с простым div’ом */     width:1000px;                    /* устанавливаем ширину линию. Можно использовать произвольную ширину */     content: »;                     /* позволяет вставлять генерируемое содержание в текст страницы, которое первоначально в тексте отсутствует */     position: absolute;              /* абсолютное позиционирование для управления линиями */     border-bottom: 1px solid #000;   /* бордер псевдо дива, т.е. сама линия */     top:50%;                         /* позиционирование по вертикали */     right: 110px;                    /* позиционирование по горизонтали */ }   /* аналогичные стили для второго псевдоэлемента */   .block span:after {     display: block;     width:1000px;     content: »;     position: absolute;     border-bottom: 1px solid #000;     top:50%;     left: 110px; }

Вот собственно все. Линии слева и справа от заголовка появились, они полностью на CSS, смотряться аккуратно как на десктопе, так и на мобильных устройствах.
Демо

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 шапку сайта

От автора: приветствуем вас на нашем блоге о сайтостроении. У любого сайта есть то, чем он обычно запоминается и выделяется среди остальных. Обычно это именно шапка сайта. 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 с нуля

Смотреть

Заголовки style.css — Тема

Это особенный файл именно по нему WordPress идентифицирует тему. Когда вы заходите в раздел Темы в админке, WordPress ищет все файлы style.css в папках тем и показывает все доступные темы. Название темы и другие данные берутся из этого файла. Такие данные считываются из данных в начале файла (они находятся в комментариях):

/**
 * Theme Name: Моя первая темы
 */

Theme Name — это обязательное поле! Но можно указать и другие поля:

• Theme Name * — Название темы.
• Template — Название родительской темы. Пример: Twenty Seventeen.
• Description * — Краткое описание темы.
• Theme URI — URL страницы, где можно найти дополнительные сведения о теме.
• Author * — Имя лица или организации, разработавшей тему. Рекомендуется указывать имя пользователя на сайте wordpress.org.
• Author URI — URL — адрес автора или организации.
• Version * — Версия темы, в формате X.X или X.X.X.
• License * — Лицензия темы.
• License URI * — URL лицензии.
• Text Domain * — Строка, используемая как textdomain при переводе перевода.
• Domain Path — Путь до файла MO перевода относительно папки темы. Используется чтобы WordPress знал, где найти перевод, когда тема отключена. По умолчанию /languages.
• Tags — Слова или фразы, черзе запятую, позволяющие пользователям находить тему с помощью фильтра тегов. Полный список тегов приведен в руководстве по обзору темы.

Элементы, обозначенные *, необходимы для темы в репозитории тем WordPress.

Пример полного заголовка файла style.css

/**
 * Theme Name:  Название темы
 * Theme URI:   URL темы в каталоге WordPress или где-то еще. Пример: http://wordpress.org/themes/twentythirteen
 * Author:      Имя автора темы
 * Author URI:  URL автора. Пример: http://mysite.org/
 * Description: Короткое описание темы. 
 * License:     Лицензия. Пример: GNU General Public License v2 or later
 * License URI: URL на лицензию. Пример: http://www.gnu.org/licenses/gpl-2.0.html
 * Tags:        Метки темы, по которым тему можно будет найти в каталоге WordPress. Например: black, brown, orange, tan, white, yellow
 * Text Domain: Домен перевода для темы. Нужен чтобы можно было перевести описание указанное в Description. Например: twentythirteen
 * Version:     Версия темы. Пример: 1.0
 */

Красивое оформление заголовка сообщения |шпаргалки блогерши

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

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



Вот такую красоту мы будем делать.

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

Ну и код

h4{
font-family: Times New Roman !important;
font-style:italic !important;
}
.post h4 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;
}
.post h4:hover {
color: #00BFFF;
border-left:10px solid#75A6CB ;
border-right:10px solid#75A6CB ;
box-shadow:0px 0px 13px#75A6CB;
-webkit-box-shadow:0px 0px 13px #75A6CB;
-moz-box-shadow:0px 0px 13px#75A6CB;
}
blockquote {
background: #FFFAFA url() no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font: bold 0.9em «comic sans ms», «GEORGIA», Times, serif;
border:1px solid #DCDCDC;
}
blockquote:hover {
background: #FFFAFA url() no-repeat right bottom ;
color:#FF0000;
}
blockquote p {
margin: 0;
padding-top:10px;
}

 То, что выделено синим цветом, а именно, значение #00BFFF- отвечает за цвет фона. Значение italic можно просто удалить. Тогда шрифт будет прямой, а не курсив, как у меня.

После всех изменений заходим во вкладку шаблон-изменить HTML. Находим нашу любимую строку 

 ]]></b:skin> и сразу над ней вставляем его. Проверьте шаблон. Если всё нормально, форматируем, сохраняем, возвращаемся и видим, что все заголовки постов в красивом оформлении.

Подобным образом можно оформить и участок текста в сообщении. Здесь более подробно об этом.

Всегда перед тем как что-то менять в шаблоне не забывайте делать резервное копирование!

У меня на сегодня всё. Буду признательна если поделитесь, кому это пригодилось.

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