Красивые заголовки

Как bettertext.css делает текст лучше

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

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

Адаптивные размеры для заголовков Чтобы заголовки аккуратно выглядели на маленьких экранах и не было проблем с длинными словами, в типографике предусмотрен отдельный набор размеров для экранов меньше 768px.

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

Не содержит классов и не мешает стилям шаблона CSS написан так, чтобы верстальщику не приходилось ничего обнулять и переопределять в коде шаблона. Стили для структурных тегов section, article, figure, а также для списков ul, ol и таблиц применяются только когда на тегах нет классов.

Самый быстрый/лёгкий способ [решение проблемы]

Даниил Шардаков составил топ-10 самых эффектных шаблонов заголовков, некоторые из которых есть и в нашем списке. Ведь за каждой из формул стоит огромный человеческий опыт и история. По его мнению, самые сильные заголовки – это заголовки, которые точечно и сильно бьют по самому больному месту человека: гордости, самолюбию, опасениям, проблемам и т.д., которые для этого человека актуальны. В таком случае успех заголовка резко перешагивает за отметку 90%. Преимущества этой формулы очевидны: здесь есть и время, и полезность, то есть быстрый способ решения проблемы.

Например:  «Самый быстрый способ привести в порядок страницу профиля».

Видео, гифки и аудио

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

Или пример с портала DTF. В публикации об истории известных музыкальных произведений автор добавил аудио с сервиса YouTube:

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

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

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

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

Заголовок 1

заголовок меньшего уровня;

Заголовок 2

еще меньше;

Подзаголовок
собственно, это и есть подзаголовок.

Урок: Как изменить междустрочный интервал в Ворде

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

Собственно, именно так получилось в наших примерах со стилями “Заголовок 2” и “Подзаголовок”, так как основной текст у нас написан шрифтом Arial, размер — 12.

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

Создание собственного стиля и сохранение его в качестве шаблона

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

1. Откройте диалоговое окно группы “Стили”, расположенной во вкладке “Главная”.

2. В нижней части окна нажмите на первую кнопку слева “Создать стиль”.

3. В окне, которое перед вами появится, задайте необходимые параметры.

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

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

  1. Совет: Под разделом “Форматирование” находится окно “Образец”, в котором вы можете видеть то, как будет выглядеть ваш стиль в тексте.

В нижней части окна “Создание стиля” выберите необходимый пункт:

“Только в этом документе” — стиль будет применим и сохранен только для текущего документа;

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

Выполнив необходимые настройки стиля, сохранив его, нажмите кнопку “ОК”, чтобы закрыть окно “Создание стиля”.

Вот простой пример стиля заголовка (хотя, скорее, подзаголовка), созданного нами:

Урок: Как сделать автоматическое содержание в Ворде

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

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

Примеры CSS H1, H2

Все примеры будут реализованы по принципу стилизации
заголовков моим методом (пример, сайт sitear.ru).

CSS стилизация H1 заголовка

В данном пункте остановимся на реальных примерах стилизации h1 заголовка. Примеры, громко
сказано, так как, у каждого сайта уникальный дизайн. Приведу один,
универсальный пример стилизации H1.
Мою идею стилизации заголовков вы уже поняли, хочу дополнить ее, используя в background-image прозрачность,
которую легко можно сделать в фотошопе. Пример смотрите ниже.

CSS код:

.heading { width:500px; background: #888;}

h1 {height:70px; background: url(left.png) left top no-repeat; color:#FFF; line-height: 50px;} 

h1 strong {height:70px; display:block; margin-left:60px; padding: 6px 60px 0px 0px; background: url(right.png) right top no-repeat;}

Исходные картинки:

HTML код:

Как видите исходные картинки имеют полупрозрачность, а в
классе heading, меняя
значение background, можно
добиться следующих результатов:

CSS h1 + h2 (совместная стилизация)

Стилизировать h1 и h2 вместе,
уместно при наличии эпилога, или маленького вступления к статье на вашем сайте, которое можно поместить в тег h2.
Например:

H1 – Стилизация
h1, h2 заголовков;

H2 – Учимся оформлять h1, h2 заголовки на css.

Это мой пример, вероятней всего у вас своя идея, как оформлять страницы сайта.
Пример css h1 +
h2, схож с пред идущим,
рассмотрим css код.

.left{height:100px; background: url(left.png) left top no-repeat;}

.right{ width:500px; height:100px; display:block; margin-left:45px; padding: 0px 45px 0px 0px; background: url(right.png) right top no-repeat;}

h1 {color:#FFF; font-size:18px; padding:15px;} 

h2 {color:#CCC; font-size:16px; padding:5px;}

Исходные картинки:

HTML код:

Маленькое вступление, или описание статьи, заключенное в H2 тег.

Отображение:

Суть совместной (h1 + h2) стилизации
заголовков, схожа с пред идущим примером, только в этом случае используются div блоки.

CSS стилизация H2 заголовка

Стилизация h2
заголовка дело не хитрое. Но, раз уж наша статья касается стилизации h1 и h2 заголовков, мы рассмотрим все до
конца.

Как правило, тег h2, используют для выделения подпунктов статьи или другого
материала на сайте. Например, как на сайте sitear.ru.
Я бы советовал создавать, скромные, неброские, но удобные h2 заголовки. Мне очень нравится идея,
как организовано на Википедии. Советую и вам создать подобно. Это просто и
удобно. Например:

Пример стилизации h2 заголовка

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut pretium mauris nec arcu. Integer at leo vel ipsum elementum sodales. Nam est quam, posuere non, feugiat nec, consectetuer ac, lectus. Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Еще подраздел вашей статьи

Nulla venenatis, turpis eu vestibulum tincidunt, felis diam luctus velit, facilisis cursus mi ligula vitae nunc. Curabitur libero. Fusce felis. Nam gravida nulla non eros. Donec non nisl. Nulla ut odio. Curabitur sollicitudin nonummy est. Nullam molestie lectus quis nibh.

Отображение:

Просто, удобно и кроссбраузерно.

Надеюсь, вам помогла моя статья. Если остались вопросы
или предложения по поводу css стилизации h1, h2 заголовков,
пишите в комментарии.

Дальше: Конвертация трафика сайта

Таблица стилей CSS

Чтобы упростить работу со стилями, создают специальную «таблицу стилей CSS«, которая представляет из себя просто сборник стилей. Подключается она с помощью тега link в теге head

В данном случае таблица стилей (назовем её style.css) должна содержать следующее:

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

Надеюсь, что Вы поняли всю прелесть таблиц стилей. Стиль нужно написать только в таблице стилей .css, а там где нужно его применить писать class=»имя стиля».

Плюсы при использовании таблицы стилей

  • Файлы .css можно сжимать и кэшировать, за счет этого страница грузится быстрее
  • Стиль прописывается в одном месте, а значит его легко изменить. Представьте, как сложно было бы менять стиль на каждой странице при любой небольшой правке
  • Это позволяет уменьшить html код и является правильным тоном. На странице должен быть контент, а не описание стилей.

Теория и практика

Чтобы красиво оформить текст на странице, придать ему привлекательный вид, необходимо знать некоторые CSS свойства которые помогут сделать это.

font-family

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

Рассмотрим CSS код:

1
2
3
p {
   font-family comic sans ms, times new roman, verdana;
}

Лучше всего название шрифта писать в нижнем регистре. Тогда браузеры их лучше понимают. У вас наверное появился вопрос почему мы указали сразу несколько шрифтов. Это делается для того, чтобы если первый шрифт «comic sans ms» не установлен у пользователя на компьютере, тогда текст будет показан в «times new roman». Если и он не установлен, тогда он будет показан со шрифтом «verdana».

font-size

После того как мы выбрали шрифт, нам необходимо задать его размер. В CSS это делается с помощью свойства font-size. Размер в CSS может задаваться с помощью нескольких величин: пиксели(px), проценты(%), пункты(em) и ключевые слова(small, large, medium). Я рекомендую вам использовать пиксели, и т.к. бразуеры их хорошо масштабируют.

Рассмотрим CSS код:

1
2
3
4
p{
    font-family comic sans ms, times new roman, verdana;
    font-size16px;
}

font-style

Также в CSS текст можно делать курсивный и наклонный. Это делается с помощью свойства font-style. У данного свойства есть несколько значений:

normal — обычный текст.
italic — курсивный текст.
oblique — наклонный текст. Он отличается от курсивного тем, что курсивный это текст написанный «от руки», а наколонный — это просто наклон букв вправо.
inherit — наследуется значение родителя(например:

Text

, который находится внутри

. Тогда необходимо применять данное значение).

Вот пример курсивного и наклонного текста(разница есть, но она не очень заметная).

font-weight

Еще одним из необходимых свойств при работе с текстом это — выделение текста жирным. За это отвечает свойство font-weight.

Пример CSS кода:

1
2
3
4
5
6
p{
    font-family comic sans ms, times new roman, verdana;
    font-size16px;
    font-styleitalic;
    font-weightbold;
}

Ниже можете посмотреть пример и скачать его:

Сегодня мы рассмотрели как задать оформление тексту. Пробуйте всё прописать руками. Тогда вы лучше запомните материал.

Больше практикуйтесь!

Предыдущий урок

Следующий урок

Похожие:

Инструкция содержит подробные правила оформления текстов докладов,…«Труды» лежит на авторах. Доклады, оформленные не в соответствии с изложенными в Инструкции требованиями, Организационный комитет… Инструкция содержит подробные правила оформления текстов докладов,…«Труды» лежит на авторах. Доклады, оформленные не в соответствии с изложенными в Инструкции требованиями, Организационный комитет…
Инструкция содержит подробные правила оформления текстов докладов,…«Трудах» лежит на авторах. Доклады, оформленные не в соответствии с изложенными в Инструкции требованиями, Организационный комитет… Инструкция содержит подробные правила оформления текстов публикаций…Смоленская атомная станция, Смоленск (2) инструкция по оформлению текстов публикаций в «Трудах 2- й Всероссийской научно-практической…
Руководство по форматированию статей для сборника тезисовНструкция содержит подробные правила оформления текстов тезисов, которые будут опубликованы в сборнике тезисов 6-ой международной… Инструкция по эксплуатации трансформаторов дата введения 2012-03-02Гост 5-2001, правила построения, изложения, оформления и обозначения национальных стандартов Российской Федерации, общие требования…
Инструкция по эксплуатации трансформаторов дата введения 2012-03-02Гост 5-2001, правила построения, изложения, оформления и обозначения национальных стандартов Российской Федерации, общие требования… Курсовая работа Тема: Основные правила оформления схемПроцесс оформления обозначений схем вычислительной техники созданной на цифровой основе
Курсовая работа Тема: Основные правила оформления схемПроцесс оформления обозначений схем вычислительной техники созданной на цифровой основе Стандарт организации ОАО «фск еэс» сто 56947007- 29. 130. 10. 090-2011Гост 5-2001, правила построения, изложения, оформления и обозначения национальных стандартов Российской Федерации, общие требования…
Тема: Создание текстовОбразовательные: познакомить с правильной посадкой за компьютером, с созданием текстового документа, с составными частями текстового… Инструкция содержит подробные правила оформления текстов докладов,…Сборнике трудов IX международной школы – семинара молодых ученых и специалистов «Энергосбережение – теория и практика»
Инструкция содержит подробные правила оформления текстов докладов,…Сборнике трудов VII международной школы – семинара молодых ученых и специалистов «Энергосбережение – теория и практика» Инструкция содержит подробные правила оформления текстов докладов,…Сборнике трудов VIII международной школы – семинара молодых ученых и специалистов «Энергосбережение – теория и практика»
Правила именования идентификаторов Общие правила именования идентификаторовДокумент является соглашением по оформлению и написанию кода на языке C#. В документе приведены основные правила оформления кода… Правила оформленияОформление списка литературы в курсовых и других видах проверочных работы регулируются гост 1-2003 «Библиографическая запись. Библиографическое…

Руководство, инструкция по применению

Инструкция, руководство по применению

Таблицы

Прием позволяет подать информацию в простом и понятном виде, структурировать ее в сознании пользователя. Есть четкие правила вставки таблиц в текст:

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

  • Сравнение. Позволяет наглядно сопоставить какие-либо явления, предметы, методы. Часто используется в обзорах на несколько товаров одной ценовой категории и назначения. В качестве примера приведем сравнение качества видеозаписи на iPhone 7 и iPhone 8:

  • «ДО-ПОСЛЕ». С помощью таблицы можно наглядно проиллюстрировать пользователю эффективные-неэффективные методы, результаты каких-либо работ, услуг, методик. Максим Ильяхов, о котором мы уже говорили, часто сопоставляет в них правильные и неправильные варианты текстов, и таким образом доказывает компетентность своего подхода:

Изображения

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

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

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

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

Рейтинги, комментарии и количество прочтений

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

«Тинькофф-Журнал»

179 077 просмотров, 197 комментариев.

Блог 1PS

24 000 просмотров, 18 комментариев.

Информационный портал DTF

286 комментариев, 88 добавлений в закладки, 323 положительных оценки.

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

Мини-заголовок: 4 слова и меньше

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

Возьмем, например, статью Дмитрия Кота «Дайте мне 8 часов…»

За счёт интриги, недосказанности, прямого обращения к читателю такой заголовок привлекает внимание. Хочется ли нам узнать, на что автор просит 8 часов? Конечно, хочется!

Другим известным примером мини-заголовков может послужить оформление предвыборной кампании будущего президента США Барака Обамы.

Онлайн-стратегия Обамы делала упор как раз на мини-заголовки, которые выражали удивление и состояли лишь из английских междометий: Aww! Hey! Whoo-hoo!

Формат реферата

Оформление реферата по ГОСТу, актуальному на 2016 год, подразумевает:

  1. Печатную форму. Документ должен быть создан на компьютере, в идеале – в программе Microsoft Word.
  2. Распечатку на одной стороне листа. Формат стандартный – А4. Вторую сторону каждого листа оставляем чистой, бумагу не экономим.
  3. Поля страницы: левое – 30 мм, другие – по 20 мм.
  4. Выравнивание текста – по ширине. Красная строка оформляется на одном уровне на всех страницах реферата. Отступ красной строки равен 1,25 см.
  5. Шрифт основного текста – Times New Roman. Размер – 14 п. Цвет – черный. Интервал между строками – полуторный.
  6. Оформление заголовков. Названия глав прописываются полужирным (размер – 16 п.), подзаголовки также  выделяют жирным (размер – 14 п.). Если заголовок расположен по центру страницы, точка в конце не ставится. Подчеркивать заголовок не нужно! Названия разделов и подразделов прописывают заглавными буквами (ВВЕДЕНИЕ, ЗАКЛЮЧЕНИЕ).
  7. Интервалы после названий и подзаголовков. Между названием главы и основным текстом необходим интервал в 2,5 пункта. Интервал между подзаголовком и текстом – 2 п. Между названиями разделов и подразделов оставляют двойной интервал.
  8. Нумерацию страниц. Отсчет ведется с титульного листа, но сам лист не нумеруют. Используются арабские цифры.
  9. Правила оформления примечаний. Примечания располагают на той же странице, где сделана сноска.
  10. Оформление цитат. Они заключаются в скобки. Авторская пунктуация и грамматика сохраняется.
  11. Нумерацию глав, параграфов. Главы нумеруются римскими цифрами (Глава I, Глава II), параграфы – арабскими (1.1, 1.2).

Заголовки, названия разделов, подзаголовки лучше оформлять с помощью инструмента «Стили и форматирование» (Меню – Формат). В этом случае вы сможете оформить оглавление автоматически.

Визуальные крючки для привлечения внимания читателя

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

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

Дополнительные требования к оформлению реферата по ГОСТу (на 2018 г.)

Обратите внимание на титульный лист. В верхней его части указывают название организации (вуза), для которого был создан реферат

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

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

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

Добавляем стили для изменения цвета шрифта

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

В HTML-документе будет несколько элементов, но мы будем работать только параграфом. Вот так меняется цвет текста внутри тегов

при помощи внешней таблицы стилей.

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

  1. Добавляем атрибут style к тегу
p { }
  1. Добавляем свойство color:
p { color: }
  1. Добавляем значение цвета после свойства:
p { color: black;}

Элементы

на странице станут чёрными.

Перед тем, как изменить цвет текста в HTML, нужно понимать, что в данном примере используется название цвета black. Несмотря на то, что это один из способов указания цвета в CSS, он имеет определенные ограничения.

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

p { color: #000000; }

Этот CSS-код также сделает элементы

чёрными, так как hex-код #000000 обозначает чёрный цвет. Также можно использовать сокращённый вариант #000, и результат будет тем же.

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

Например:

p { color: #2f5687; }

Данное hex-значение придаст тексту синий цвет. Но в отличие от простого blue этот код позволяет указать конкретные оттенки синего. В данном примере получится тусклый серо-синий цвет.

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

p { color: rgba(47,86,135,1); }

Это RGBA-значение обеспечит всё тот же тусклый, серо-синий цвет. Первые три значения отвечают за красный, зелёный и синий, а последняя цифра — за уровень непрозрачности. «1» означает «100%». То есть, текст будет полностью непрозрачным.

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

p {
  color: #2f5687;
  color: rgba(47,86,135,1);
}

В этом синтаксисе сначала идет hex-значение, которое затем переписывается RGBA-значением. Это значит, что устаревшие браузеры, в которых нет поддержки RGBA, будут использовать первое значение и игнорировать второе. Современные браузеры будут использовать второе значение. Это нужно учитывать, чтобы знать, как изменить цвет текста в таблице HTML.

Данная публикация представляет собой перевод статьи «How to Change the Font Color with CSS» , подготовленной дружной командой проекта Интернет-технологии.ру

Способы стилизации h1, h2 заголовков

Западный способ

Как вариант неплохой, только мне не очень нравится CSS способ
реализации ленты. Данный метод создания css h1 ленты, я нашел на одном из западных сайтов. Данная лента
реализована на чистом css коде, хотя кроссбраузерность пострадала (в IE выглядит
простым блоком). Ниже приведен исходный код css стиля.

h1.ribbon { 

font-size: 16px !important; 

position: relative; 

background: #ba89b6; 

color: #fff; 

text-align: center; 

padding: 1em 2em;

margin: 0 0 3em;

} 

h1.ribbon:before, h1.ribbon:after { 

content: ""; 

position: absolute; 

display: block; 

bottom: -1em; 

border: 1.5em solid #986794; 

z-index: -1; 

} 

h1.ribbon:before { 

left: -2em; 

border-right-width: 1.5em; 

border-left-color: transparent; 

} 

h1.ribbon:after { 

right: -2em; 

border-left-width: 1.5em; 

border-right-color: transparent; 

} 

h1.ribbon .ribbon-content:before, h1.ribbon .ribbon-content:after { 

content: ""; 

position: absolute; 

display: block; 

border-style: solid; 

border-color: #804f7c transparent transparent transparent; 

bottom: -1em; 

} 

h1.ribbon .ribbon-content:before { 

left: 0; 

border-width: 1em 0 0 1em; 

} 

h1.ribbon .ribbon-content:after { 

right: 0; 

border-width: 1em 1em 0 0; 

}

В HTML коде, h1
лента, выглядит таким образом:

CSS стилизация h1, h2 заголовков на sitear.ru

Мой способ

Как видите, css код громоздкой, как для стилизации только h1 тега. Поэтому, предлагаю свой способ
создания подобной ленты. Кросбраузерность тестировалась на IE, FireFox, Opera, Chrome.  Ниже предоставлен css код и все
исходные файлы.

h1 {height:67px; background: url(ribbon_left.png) left top no-repeat; color:#FFF;} 

h1 strong {height:67px; display:block; max-width:450px; margin-left:56px; padding-right:56px; background: url(ribbon_right.png) right top no-repeat;}

Способ применения в
HTML:

Картинки:

Общий вес картинок – 750 байт. CSS
код занимает не более двух строк, вес – 236 байт. Я доволен результатом, притом
все просто и понятно, в отличии от западного метода, где вес CSS кода – 980
байт.  Хотя мой и западный вариант по
весу идентичны, в коде гораздо хуже разобраться, нежели обработать картинку в
фотошопе. Можно предположить, что скорость загрузки одного css файла,
быстрее, нежели  трех файлов (сумарно
идентичных весу одного css файла), но можно реализовать background в
виде спрайтов, которые увеличат скорость загрузки сайта. Узнать об увеличении
скорости методом CSS спрайтов.

Примечания

Этот способ размещения информации взят из журнальной верстки. Суть в том, что дополнительный материал, ссылки, указание автора и другие данные размещены справа от основного текста. Примеры использования приема можно найти в «Тинькофф-Журнале». В этой статье в примечании разместили информацию об авторе:

А здесь дали ссылку на материал по схожей теме:

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

Сомневаетесь? Напишите 25 заголовков

В негласной теории заголовка существует заговор цифры 25. Зарубежные копирайтеры Апворт, Джефкинс, а также российский копирайтер Денис Каплунов опираются на классификацию из 25 заголовков. Так, Апворт предлагал писать по 25 заголовков для каждого текста, проверять лучшие и потом найти свой заголовок.

Идея написать 25 заголовков кажется неплохой и эффективной, но вы видели хотя бы одного человека, кто действительно этим бы занимался? В Америке были такие, кто пробовал. В течение недели команда Блинкист в составе двух человек писала по 25 заголовков к четырём статьям. Одна из участниц, Кейтлин, описала этот опыт так: «Половина заголовков получится просто смешной, половина окажется полной бессмыслицей, остальное – сплошная тоска и скука. Но ребята, какое же это удовольствие, когда ты находишь заголовок, ласкающий слух!»  Кейтлин со своим коллегой писали по 25 заголовков, каждый выбирал три понравившихся, а те, кто нравились им обоим, они отправляли редактору на проверку.

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

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

(Время, затраченное на мозговой штурм – 11 минут).

Какой заголовок понравился больше всего?:)

Стили для заголовков и подзаголовков

h1 — большой

h2 — поменьше

h3 — ещё меньше

и так далее.

.post h1 и дальше стили

.post h2  и дальше стили

.post h3  и дальше стили

.post h4  и дальше стили

Подчёркивание заголовков

Подчёркивание можно сделать через:

text-decoration

border-bottom

box-shadow

background-image

Немного подробнее о text-decoration:

text-decoration-color — цвет линии

text-decoration-style — стиль подчеркивания текста 

text-decoration-line — тип линии

line-through — перечеркнутый текст

underline — нижнее подчеркивание

overline — линия сверху

none — без оформления

inherit — наследуется

solid — сплошная линия

double — двойная

dotted — состоит из последовательности точек

dashed — пунктирное подчеркивание

wavy — волнистая линия

Уголки

.post h1{
  display: table;
  width: auto;
  margin: 15px auto;
  letter-spacing: 2px;
}
.post h1:before {
  content: «»;
  position: absolute;
  top: -50%;
  left: -25px;
  width: 30px;
  height: 20px;
  border-top: 2px solid #fed57b;
  border-left: 2px solid #fed57b;
}
.post h1:after {
  content: «»;
  position: absolute;
  bottom: -50%;
  right: -25px;
  width: 30px;
  height: 20px;
  border-bottom: 2px solid #fed57b;
  border-right: 2px solid #fed57b;
}

Линия сверху

.post h1 {padding-top: 10px;}
.post h1:before {
  content: «»;
  position: absolute;
  top: -2px;
  left: 0;
  width: 25%;
  height: 2px;
  background: #D8BD3D;
}

Градиентное подчёркивание заголовка

.post h1  {margin: 0 0 20px 0;
}
.post h1 {display: inline;background-repeat: no-repeat;background-position: center bottom 1px;background-size: 100% 3px;background-image: linear-gradient(to right, red, blue);
}

Тени

Тень 1

.post h1{
text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

.post h1
{
text-shadow: 4px 2px black; color: #ece2ca;}

Градиентные заголовки

Градиентный заголовок с ховер эффектом

.post h1 {
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(to right , #BBB086 , #000000, #BBB086 60%);
    background-position: 0 0;
    transition: all 0.8s ease-in-out;
}
 .post h1:hover {
    background-position: 500px !important;
}

Заголовок с окантовкой

.post h1  {
  font-size: 2em;
  background: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding: 0.3em 0.6em ;
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  border-image-slice: 1;
}

Где в шаблоне выводятся стили заголовков?

Откройте «Внешний вид» — «Редактор». Найдите таблицу стилей style.css. Найдите блок текста с названием /* =Global.

В нем есть строчки:

/* Headings */
h1,h2,h3,h4,h5,h6 {
	clear: both;
}

Вот с ними мы и будем работать.

Нам нужно вместо этого кода написать следующее:

/* Headings */

h1 {бла бла бла
}
 
 h2 {бла бла бла
}
h3 {бла бла бла
}

h4 {бла бла бла
}

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

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

Выглядеть это будет так:

font-size: 23px !important;

В общем, было так:


А станет так:

А теперь давайте рассмотрим коды нескольких стилей. Они взяты из англоязычного источника. Рекомендую поменять семейство шрифтов на привычные нам Verdana и Arial. Цвета и их коды вы можете посмотреть в Таблице безопасных цветов.

Ссылка на основную публикацию