Меню

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



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

В этой статье мы познакомимся с возможностями HTML и CSS по смене цвета текста на страницах сайта. Будет рассмотрено несколько вариантов. Для каждого отдельного случая удобен свой конкретный способ.

Для начала отметим, что все цвета можно задавать в трех форматах:

  • Название цвета (red, blue, green и т.д.)
  • Шестнадцатеричный формат (#104A00, #0F0 и т.д.)
  • Формат rgba (rgba(0,0,0,0.5) и т.д.)

На нашем сайте представлена полная палитра и названия html цветов для сайта, где можно выбрать подходящий цвет.

Способ 1. Через html тег

Самым простым способом изменить цвет текста в html является использование тега . Он позволяет изменить цвет, размер и стиль текста. Для этого у него есть три атрибута. Синтаксис:

На странице преобразуется в следующее

Новая версия стандарта HTML5 его не поддерживает. Но все современные браузеры понимают и еще видимо будут долго понимать. Тег font широко распространен на сайтах. Что впрочем легко объяснить его доступностью и простотой.

Способ 2. Через атрибут style

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

Синий цвет текста

Если текст не изменяет свой цвет, то можно попробовать воспользоваться декларацией !important

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

Способ 3. Через стили CSS

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

Классы primer1 и primer2 можно применить к любым другим html тегам.

Источник

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

Читайте также:  Темно синие цвета бмв

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

Источник

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

Всем привет! Сегодня мы начинаем цикл статей на тему работы со стандартными шаблонами конструктора uCoz.

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

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

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

В качестве примера возьмем шаблон №1802. Однако всё, о чем мы будем говорить далее, применимо к любому другому.

Совет: все шаблоны в библиотеке разбиты по тематикам. Не ограничивайте область поиска определенной тематикой. Ищите подходящий вам дизайн среди всех шаблонов.

Меняем цвет текста

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

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

Название этой функции может немного различаться в зависимости от того, каким браузером вы пользуетесь. Просмотреть код — в Google Chrome, Исследовать элемент — в браузере Yandex, Проверить объект — в Safari и так далее.

А вот и интересующая нас информация. Здесь мы видим, что за цвет и прочие параметры заголовка ответственен элемент #site-logo.

Открываем таблицу стилей CSS и находим его там.

За цвет отвечает параметр color. Меняем стандартные данные #26bf66 на свои. Например, сделаем заголовок черным, прописав color: #000.

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

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

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

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

Цвет ссылки при наведении

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

Видим, что за настройки нашей ссылки отвечает стиль .services h4. Также отмечаем, что он располагается на 93-й строке таблицы стилей CSS.

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

Здесь нам необходимо заменить значение #26bf66 на код, соответствующий синему цвету. Выглядит он так: #0000ff.

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

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

В такой ситуации нужно аккуратно добавить эту строчку самостоятельно.

Настройка фона блока

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

В качестве примера заменим фон блока «О нас», или «About us» в нашем случае.

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

Нужным нам стилем здесь является .about-me, который располагается на 54-й строчке CSS.

Необходимый параметр для замены фонового цвета — background-color. Заменим текущее значение #f1f1f1 на что-то более контрастное. Например, установим яркий лимонный цвет #fde910.

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

Посмотреть на готовые варианты правильного сочетания цветов можно здесь.

Безграничные возможности HTML и CSS

Конечно же, мы не рассмотрели сейчас даже 1% тех возможностей, которые открываются перед вебмастером в процессе изучения HTML и CSS. Однако надеемся, что этот материал сподвигнет начинающих пользователей на эксперименты с дизайном собственных сайтов.

Читайте также:  Визитка с зеленым цветом

Не бойтесь и не ленитесь пробовать что-то новое, не забывая про резервную копию шаблонов 🙂

Здравствуйте. Что-то сделать через визуальный редактор можно, но далеко не всё. Кроме того, визуальный редактор имеет неприятную особенность – засоряет код сайта.
А где именно показалось туманно? Вроде старался максимально понятным языком описать все настройки, но буду рад дополнительно пояснить.

По поводу шаблона необходимо было обратиться на почту support@utemplate.pro
Подскажите, туда вы отправляли сообщение?

таких уроков полно на просторах интернета. это обычные какие-то махинации с аштиэмл.

интереснее и правильнее делать уроки именно с вашей цмс. например

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

как сделать так чтобы у каждой опции было несколько картинок??
есть товар, у него несколько цветов, и у каждого цвета несколько ракурсов или подробных фотографий.

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

как сделать блок с временем типа акция и до конца акции осталось 23 часа 12 минут. и после того как время истечет блок или товар исчезал или менялась цена на стандартную.

как сделать так чтобы сортировка на странице каталога осуществлялась помимо того что по имени цене и т.д. ещё была галочка «товары в наличии»

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

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

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

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

как сделать бонусную систему сайта?

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

прошу передать в нужные ваши отделы эту информацию.
об этих проблемах во всех форумах, на всех ветках, на всех ювиш (или как она там эта доска желаний называется?) везде всегда все просят сделать. и не недавно это все, это уже года 4 как просят точно. а вы решили потянуть тут резину с тем как менять цвет.
лучше тогда уж пишите урок » КАК СМЕНИТЬ УКОЗ НА ДРУГУЮ ЦМС «

простите конечно, но хочется видеть сервис развивающийся

Помнится был у меня простенький сайт на Народе в нулевых, приходилось все делать методом тыка. Сейчас по каждой мелочи в интернете есть настолько развернутые уроки, есть площадки, где помогут и подскажут как лучше реализовать любую идею, что подобные уроки больше похожи на то, что в блоге настолько уже нечего писать, что решили хоть этой обжеванной и пережеванной миллионы раз темой забивать новостную ленту. Да и вообще не понимаю это жлобство! Не понимаешь и есть желание учиться — заплати деньги, походи на курсы, научат куда более профессиональным вещам чем в подобных статейках. Нет курсов или лень разбираться — заплати деньги, тебе сделают сайт под ключ. Я конечно понимаю, что мы живем во времена беспомощного подрастающего поколения и видеоинструкций на YT «как забить гвоздь» или «как сварить яйцо вкрутую», но блин не в блоге же этим заниматься.

Если UCOZ реально хочет быть полезным — прислушайтесь к моему совету, уже не единожды говорил об этом, возьмите за правило раз в 2 месяца анонсировать работу над планируемым модулем. Месяц пользователи накидывают свои идеи и рассказывают чего им не хватает, вы выбираете на ваш взгляд самые адекватные и востребованные предложения и месяц реализуете их + все ваши наработки по ТЗ. Если бы мы совместно поработали в таком ключе год-полтора, то реально бы подтянули систему до современного уровня. Сейчас же складывается впечатление, что люди, которые пишут ТЗ вообще далеки от того или иного модуля, от представлений как должно работать, от тонкостей каждого модуля, как их улучшать и развивать. Пришли, за наши деньги штаны попротирали на рабочем месте, ЗП получили и забыли.

Источник