Изменение цвета h1 в html. Как изменить цвет текста в HTML-странице

Для изменения шрифта служит тэг с атрибутом FACE. Можно указывать шрифт по названию (Arial, Tahoma, Verdana) или типу(например, monospace). Желательно перечислить несколько имен шрифта, чтобы избежать ситуации, когда окажется, что требуемый шрифт не установлен у пользователя. Рекомендую «забить» хотя бы один из общепринятых шрифтов (например Arial). Не рекомендую на одной странице применять более 2-3 различных шрифтов, иначе страница будет смотреться аляповато и непрофессионально.

Изменение размера шрифта html-страницы

Для изменения размера шрифта используют атрибут SIZE. Чем крупнее шрифт, тем более легким для восприятия становится текст. Однако, мелкий шрифт позволяет уместить в пределах экрана больший объем информации. Используя данный атрибут с тэгом , вы можете изменить размер текста вэб-страницы целиком. Применяя атрибут SIZE совместно с тэгом , можно воздействовать на внешний вид отдельного фрагмента текста. Доступно 7 размеров шрифтов. Самый малый обозначается цифрой 1, а самый крупный — 7.

Изменять шрифт можно с помощью тэгов и . укрупняет шрифт указанного фрагмента по отношению к предыдущему тексту, а , соответственно, уменьшает.

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

Выбор цвета шрифта html-страницы

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

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

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

Наим-е цвета Код aqua ##00FFFF black ##000000 blue ##0000FF fuchsia ##FF00FF gray ##808080 green ##008000 lime ##00FF00 maroon ##800000 navy ##000080 olive ##808000 purple ##800080 red ##FF0000 silver ##C0C0C0 teal ##008080 white ##FFFFFF yellow ##FFFF00

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

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

Меры предосторожности для тех, кто не уверен

• Для начала определимся? что речь идет о темах (шаблонах) WordPress. Если тема блога установлена на этот движок, то это статья для Вас.
• Если Вы не уверены в своих силах, лучше сначала поэкспериментировать на тестовом поддомене. Убедившись в своей дееспособности, можно перенести навык на основной сайт. Впрочем, действия, которые требуются для того, чтобы изменить шрифт заголовка сайта , настолько просты, что напортачить там сложно. Лично я все всегда сначала делаю на тестовом. Чуть больше времени, но надежнее.
• В случае, если сайт все-таки сломался, читайте, >>. Но, если все делать аккуратно, никаких катастроф не произойдет.

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

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

Инструкция по смене шрифта в заголовке сайта

А если времени разбираться нет, но хочется быстрее На все про все нам понадобится наш сайт и программа word (для подбора шрифта).

1. Входим в админпанель своего сайта. Далее, в левом сайдбаре находим Консоль — Внешний вид — Редактор .
2. В правой части находим Список стилей (style.css) и открываем его.
3. Заголовок сайта — это header h1 . Находится ближе к началу. Чтобы не искать глазами, можно нажать Ctrl+F — появится строка поиска. Наберите в поиске. У меня эта часть выглядит так:

Верхний квадрат: строка изменения шрифта.

Нижний квадрат: строка изменения размера шрифта.

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

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

1. Теперь открываем чистый документ Word, копируем на главной странице сайта название и переносим его в вордовский документ, выделяем и начинаем играться с разными шрифтами. Находятся они на верхней панели в левом углу. Почему удобно делать именно в этой программе — потому что сразу видны все изменения шрифта в Вашем названии. Выбирайте шрифт, который будет сочетаться с названием Вашего сайта. Шрифт, который Вам безусловно понравится. Когда выберите, скопируйте в Worde название шрифта.
2. Возвращаемся в админпанель сайта. В строку изменения шрифта (на рис. — верхний синий квадрат) вносим название выбранного шрифта вместо того, что стоит по умолчанию.
3. Внизу страницы нажимаем «Обновить файл».
4. Переходим на сайт и смотрим, хорошо ли встал шрифт в общем контексте. Если нет, возвращаемся в Word и выбираем другой. Все.

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

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

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

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

Чтобы подобрать цвет, можно использовать одну из опций темы: Консоль — Внешний вид — Фон . В строке «Цвет фона» можно выбрать цвет, скопировать его буквенно-числовое значение и вставить вместо того, что был (в моем случае #11006а). Изменения сохранить. Переходим на сайт и любуемся.

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

Красивый, хорошо читаемый заголовок,

сочетающийся с общим духом темы,

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

Экспериментируйте, выбирайте то, что Вам по душе!

P.S. Когда я вношу даже незначительные изменения в файлы редактора темы, то на всякий случай копирую измененный текст целиком в блокнот — в папку, где хранится zip установленной на моем сайте темы. В том случае, если сайт вдруг сломается и придет необходимость переустанавливать тему, у меня сохранены все измененные на мой вкус файлы. Останется только при переустановке wordpress или темы перенести файлы в соответствующие папки на хостинге.

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

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

Для задания цвета достаточно указать его название, например: red, green, blue. Рассмотрим небольшой пример:

Правильный тег 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 символов, содержать высокочастотное слово. Он должен быть читабельным, привлекать внимание и отличаться от тайтла.

Как добавить цвет фона к заголовку текста?

Для изменения цвета фона под текстом используется универсальное свойство background , которое следует добавить к селектору h1 . Цвет заголовка меняется с помощью свойства color , которое также добавляется к этому селектору (пример 1).

Пример 1. Цвет фона под заголовком

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Цвет фона под заголовком текста

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

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

Здравствуйте, уважаемые друзья. Сегодня пойдёт речь о наболевшей для меня проблеме, а именно о заголовках h1. В общем, вы уже знаете, что установив тему WordPress её ещё и дорабатывать, придётся под свои нужды. И это нормально, дизайн подправить, если необходимо объединить элементы дизайна в CSS-спрайты, может, размеры шрифтов подправить, да перечислять можно долго. Так в чём проблема?

Какие проблемы с заголовками h1 были на моём блоге

Суть в том, что все эти доработки не должны слетать при обновлении темы. У меня же, как только обновил тему, так и давай всё заново настраивать. Но фишка в другом, элементы дизайна – это цветочки, а подлянка заключается в том, что у меня после этих обновлений перестали работать древовидные комментарии и постоянно меняются местами заголовки h1 и h2. А вы знаете, что поисковики не жалуют сайты, где тег h1 отсутствует или слишком часто используется.

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

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

А также установить логотип.

В моей теме тоже всё это есть. Заголовок прописывается тегом h1, а описание сайта тегом h2. А если установить логотип, то он будет обозначен как заголовок и внесёт в тег h1.

И вроде бы всё хорошо – на главной странице заголовок сайта имеет тег h1, а заголовки статей h2. А вот в статьях и страницах тоже изначально было так. Причём это не в одной моей теме, во многих темах WordPress заголовки статей и страниц прописаны в теге h2 – что по правилам SEO неверно.

Я этот момент подправил – в статьях и страницах заголовки изменил на h1, а заголовок сайта на h2.

Но вот прошло обновление, визуально я заметил только проблемы с дизайном. Исправил и не о чём не волнуюсь. Через какое-то время прошло ещё обновление и вдобавок к дизайну перестали работать древовидные комментарии. Ну, это то, что я заметил визуально.

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

Но после последнего обновления на самом деле всё оказалось хуже – произошла подмена тегов h1 и h2. А точнее, изображение, которое я использовал в качестве логотипа, и которое было заключено в тег h1, — тег просто исчез (на главной странице). Так на главной странице вообще не осталось тега h1. Зато в статьях и страницах заголовок сайта обрёл тег h1. И соответственно заголовок сайта, и заголовок статьи были обозначены тегом h1. Перебор!

А ещё эта путаница повлияла на микроразметку – пропал заголовок сайта.

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

Как изменить тег заголовка h1 в зависимости от условий

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

Если открывается статья или отдельная страница, — заголовок сайта должен обозначаться тегом h2.

Итак, приступаем к реализации задуманного.

Как известно, практически во всех темах шаблон состоит из нескольких блоков и такие блоки, как шапка (header.php), подвал (footer.php), сайтбар (sidebar.php) подключаются как отдельные элементы к основной странице (index.php), статьям (single.php), страницам (page.php).

Следовательно, заголовок и описание сайта находятся в шапке (header.php). И нужно лишь прописать условие, которое будет менять тег h1 в зависимости от того какая страница открывается.

А для этого открываем административную панель WP – «Внешний вид» — «Редактор» — «Заголовок (header.php)».

Нужно найти строчку кода с тегом h1, в некоторых случаях это может быть и тег h2. Во всяком случае, нужно обращать внимание на содержимое этих строк. Изначально в моей теме было так.

Вот это и нужно будет подправить. В описание сайта можно только добавить код микроразметки, а вот с заголовком сайта поработаем.

Итак, перед строкой кода с заголовком h1 вставляем вот этот код:

Это условие обозначает: Если (if) открыта «не» (!) статья (is_single) и (&&) «не» (!) страница (is_page) – заголовок сайта будет обозначен тегом h1.

А после строки с кодом h1 нужно закрыть условие, этим кодом:

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

А теперь по аналогии добавляем ещё одно условие, сразу после первого:

Это условие обозначает: Если (if) открыта статья (is_single) или (||) страница (is_page) – заголовок сайта будет обозначен тегом h2.

Обратите внимание, я изменил тег заголовка во втором условии с h1 на h2. Так же можно заменить h1 на абзац (р) или блоки div, span. Это важно!

Сохраняем файл и проверяем.

Как должно быть после внедрения условий

Открываете любую страницу сайта, далее просмотр исходного кода (CTRL+U) и ищите тег h1 (CTRL+F) – на странице должен быть один тег h1.

На главной странице, рубриках, поиске и так далее заголовок сайта должен быть обозначен тегом h1, а все заголовки статей и так далее h2, h3…

При открытии статьи или отдельной страницы, заголовок сайта меняется на h2. Если вы изменили на предыдущем шаге h2 на p, div, span — значит и изменения у вас будут соответствующие. Только не забудьте прописать стили для этих элементов.

Здесь очень важно проверить в файлах single.php и page.php чтобы заголовки статей и страниц обозначались тегом h1. Если у вас не так, откройте эти файлы и исправьте циферку.

Подведение итогов

Этим решением я избавился от конфликта с тегами заголовков h1 и h2 и восстановил работоспособность микроразметки. Всего-то пару строк кода, а какое удобство.

Друзья, у кого подобная ситуация берите на вооружение.

И в завершение видеоурок по теме. Я покажу на своём блоге, как этот метод работает.

А у меня на этом сегодня всё. Всем желаю хорошего настроения и до встречи в новых статьях и видеоуроках.