Меню

Как изменить цвет строки заголовка



Меняем цвет текста и фона

В этом уроке вы узнаете, как менять цвет фона и текста любых элементов HTML-страницы. Вообще, в языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега

нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style , который позволит нам менять цвет там, где мы захотим.

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

  • Имя цвета — В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
  • HEX-код цвета — Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета — красный, зеленый и синий. HEX-код — это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

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

Как изменить цвет текста?

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style . Общий синтаксис следующий:

style= «color:имя цвета» >. — указание цвета текста по имени.

style= «color:#HEX-код» >. — указание цвета текста по коду.

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

Пример изменения цвета текста

Результат в браузере

Красный текст заголовка

Синий текст параграфа.

Зеленый курсив. Красный текст.

Как изменить цвет фона?

Цвет фона любого элемента страницы меняется также с помощью атрибута style . Общий синтаксис такой:

style= «background:имя цвета» >. — указание цвета фона по имени.

style= «background:#HEX-код» >. — указание цвета фона по коду.

Пример изменения цвета фона

Результат в браузере

Заголовок.

Жирный текст. Обычный текст.

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

  1. Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
  2. Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи — 22px, а у подзаголовков по 19px.
  3. Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков — #CC3366.
  4. Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
  5. Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).
Читайте также:  Сочетание мятного цвета с синим

Источник

Как задать цвет заголовку?

Подскажите, какой контейнер или атрибут тега задает цвет заголовку?

4 ответа 4

Чтобы задать цвет — color .

Обратите внимание на ответ @entithat, на такой способ внесения стилей, это один из способов, он тоже верный. Также можно внести изменения в стили с помощью JavaScript.

Если вам зачем-то нужен именно атрибут или контейнер (обозреватель древний или движок оформления не поддерживает CSS), можете воспользоваться тегом . Однако:

сейчас принято разделять структуру документа и его оформление, поэтому настоятельно рекомендуется перейти на стили при первой же возможности (как указано в других ответах),

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

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

и т. д.). То есть комбинация

корректна, а

— уже нет (тег заголовка автоматически закроет предшествующий тег).

Источник

Правильный тег H1. Как изменить цвет, размер заголовка страницы

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

Выясним, как изменить цвет заголовка поста, размер шрифта. И зачем это надо сделать.

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

H1 на сайте

Случилась эта история, когда я по обыкновению копалась в кодах своего бесплатного шаблона, убирая дубли. Цель – привести в порядок теги h1 и h2 (согласно рекомендациям внутренней оптимизации). Правильное распределение заголовков на страницах постов заставит поисковые системы относиться к веб-ресурсу более лояльно.

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

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

Читайте также:  Оптическая розетка черного цвета

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

Возможно, кто-то возразит: « А как же некоторые раскрученные проекты, к примеру, ktonanovenkogo? Имеют тег h1 в шапке сайта, кучу дубликатов и преуспевают при этом? Все потому, что они уже трастовые, внесены в каталоги, уже заслужили авторитет у поисковиков. Автор блога Ktonanovenkogo отлично знает о своей ошибке, и даже предупреждает о ней остальных. Но уже боится кардинально переделывать свой раскрученный веб-ресурс.

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

Что такое h1?

Название элемента образовано от английского heading. Это наиболее значимый с точки seo заголовок первого уровня. Более правильно, когда каждая страничка содержит один заголовок H1:

  1. на странице записей (single.php) он озаглавливает статью. Продвигаемый запрос, включенный в заголовок, приобретает большую значимость. Тогда страничке обеспечено более легкое продвижение;
  2. каждая статическая страничка (в моем шаблоне page-full.php, Page with Slider);
  3. главная (динамическая) страница, на которой выводятся анонсы статей, не должна содержать несколько тегов H1, только H2 и менее значимые. В шапке блога также оставим только H2.

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

Об этом прямо указывает сервис определения релевантности страниц Mega Index.ru

Как все это организовать?

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

НАЙДИТЕ в редакторе файл single.php, он отвечает за выведение записей.

В шапке блога ВНЕШНИЙ ВИД — РЕДАКТОР — header.php одновременным нажатием клавиш CTRL+F найдите тег H1 и замените его тегом H2.

H1 как поставить в шаблон

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

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

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

Мы уже поняли, что H1 может располагаться:

  • на главной (статическая — в шапке, динамическая— в первом анонсе);
  • в записи.

Разберем варианты, как изменить его размер или цвет.

Заголовок блога, изменить размер, цвет

Чтобы изменить размер заголовка (записи или в шапке блога) — увеличить или уменьшить шрифт, найдите, где именно надо внести правки в стили CSS.

Читайте также:  Кал зеленого цвета может быть от чая

ОТКРОЙТЕ свой сайт.

НАВЕДИТЕ курсор на элемент, который надо изменить (название блога).

ПРАВАЯ КНОПКА мыши — ПРОСМОТР кода элемента (в Google Chrome), или ИССЛЕДОВАТЬ элемент (в Mozilla Firefox), или ПРОИНСПЕКТИРОВАТЬ элемент (в Opera). Далее во всех этих браузерах действия аналогичны.

Появится окно в нижней части экрана. Просматриваемый элемент в нем подсвечен.

В правом окне мы видим, какой элемент надо изменить в стилях CSS (у меня это logo).

Я заменила logo H1 на logo Н2 и, о чудо, заголовок появился.

Можете также изменить:

ЦВЕТ ЗАГОЛОВКА (выберите его онлайн, нажав на квадратик со цветом). Примерьте на странице разные цвета, запишите или скопируйте буквенное обозначение;

РАЗМЕР ШРИФТА заголовка блога;

ШРИФТ (выбирайте те шрифты, которые есть не только у вас на компьютере, но и у большинства пользователей, чтобы те не увидели лишь кракозябры).

Все действия будут происходить ТОЛЬКО на открытой странице. Если вы довольны результатом, ВНЕСИТЕ ИЗМЕНЕНИЯ в стилях CSS и обновите шаблон.

Заголовок записи в анонсе на главной

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

Поэтому на него должны были действовать стили CSS, относящиеся к ссылкам.

  • a:link — непосещенная;
  • a:visited — посещенная;
  • a:active — активная;
  • a:hover — та, на которую наводится мышь:

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

Пришлось присвоить заголовку собственный встроенный стиль.

К большому сожалению, я не такой большой специалист по CSS, учить никого не собираюсь.

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


Изменения внесла в файл index.php и в стили CSS .


В конец файла стили CSS добавила


Причем на цвет заголовка влияет стиль h2 (принадлежащий postmeta),

на размер шрифта стиль zagolovok1.

Как изменить цвет заголовка поста, страницы, не влезая в Html

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

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

Атрибут style обеспечит так называемый встроенный стиль.

Получаем результат

Чтобы изменить размер или добавить эффекты, к примеру, тень напишите следующее

Смотрим на результат

Кстати, заголовок изменится также в хлебных крошках, если такие есть на вашем сайте.

Заключение

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

Согласно рекомендаций на 2019 год длина этого тега должна составлять не более 50 символов, содержать высокочастотное слово. Он должен быть читабельным, привлекать внимание и отличаться от тайтла.

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

Источник

Adblock
detector