Как изменить оформление стандартных тегов например h1

Заголовок H1. Как расположить его правильно - каждая страница содержит один заголовок H1. Как изменить размер заголовка - внесите правки в стили CSS.

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

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

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

Содержание

  1. H1 на сайте
  2. Что такое h1?
  3. H1 как поставить в шаблон
  4. Заголовок блога, изменить размер, цвет
  5. Заголовок записи в анонсе на главной
  6. Как изменить цвет заголовка поста, страницы, не влезая в Html
  7. Заключение

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

Исчез заголовок блога

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

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

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

СТАТЬИ ПО ТЕМЕ:

Поведенческие факторы или ссылки? С нас стригут деньги не так, так этак

Seo анализ сайта. Поисковый аудит в сервисе Megaindex

Megaindex проверка релевантности текста

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

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

Что такое h1?

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

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

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

H1 аудит

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

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

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

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

ЗАМЕНИТЕ строчку

<?php the_title(); ?>

конструкцией

<h1><?php the_title(); ?></h1>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Увеличить шрифт заголовка поста
Изменения внесла в файл index.php и в стили CSS.

Конструкцию

<h2><a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?></a></h2>

заменила на

<div class="zagolovok1">
<h2><a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?></a></h2>
</div>
<div class="clear"></div>

присвоить стиль заголовку поста
В конец файла стили CSS добавила

.zagolovok1 {
margin: 0 0 5px 10px;
font-size: 1.6em;
font-weight: normal;
font-family: Verdana, Arial;
}

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

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

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

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

<span style="color:#EE1818">Правильный тег H1</span>

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

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

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

<span style="color:#EE1818;  
text-shadow:#000 2px 2px 2px;  
font-size: 16px;">Правильный тег H1</span>

Смотрим на результат как изменить стиль заголовка поста или страницы

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

Заключение

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

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

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

Источник

webaikos

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


  • Вопрос задан

    более трёх лет назад

  • 8782 просмотра

Навесьте дополнительный класс на элемент только этой страницы:
<h1 class="custom-colored-h1">Заголовок</h1>

.custom-colored-h1
{
    color: #AF3535;
}

Пригласить эксперта

Назначьте этому конкретному h1 свой класс или id и ему уже задайте цвет.

дописать на странице стиль параметром тега?

Еще по древнему можно:
<h1 style="color:rgb(100,100,200)">цвет</h1>


  • Показать ещё
    Загружается…

10 февр. 2023, в 17:46

40000 руб./за проект

10 февр. 2023, в 17:45

50000 руб./за проект

10 февр. 2023, в 17:14

20000 руб./за проект

Минуточку внимания

Источник

«цвет заголовка» или — как «Задать/изменить цвета заголовков css/html«. С примерами и стилями.

  • Цвет заголовка h1-h6 по умолчанию

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

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

    И мы увидим на скрине, что по умолчанию нет никакого цвета у заголовка wall
    смайлы, что автоматически означает самый черный. Но ведь мы хотим точно узнать!

    Цвет заголовка h1-h6 по умолчанию

    Узнаем цвет заголовка по умолчанию

    Как узнать цвет заголовка по умолчанию? Для этого вам понадобится:

    Выбираем любой тег на странице(кроме заголовка).

    Если у него нет цвет — задаем цвет.

    Слева видим пипетку(она может включаться автоматически).

    Теперь наводим на заголовок и кликаем по нему…

    Как видим цвет заголовка…

    #000000

    Что означает — просто черный цвет «black»

    Нажмите, чтобы открыть в новом окне.

    Узнаем цвет заголовка по умолчанию

  • Изменим цвет в тега заголовка

    Как можно изменить цвет заголовка? Как вы наверное знаете, что есть «3 способа css», поэтому далее вам понадобится:

    Нам потребуется один из тегов заголовка-пусть это будет h2.

    <h1>Здесь текст заголовка h1</h1>

    Во внутрь первого открывающего тега добавим attribute style с пусть это будет цвет red

    <h2 style=»color:red»>Цвет заголовка</h2>

    Далее выведем собранный код:

    Видим, что наш цвет заголовка изменился на наш — красный цвет.

    Цвет заголовка

  • Изменение цвета заголовка классом

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

    В нашем случае нас интересует цет заголовка — вам понадобится:

    Вам «опять» потребуется один из тегов заголовка-пусть это будет h2.

    Про атрибуты я уже сказал — у нас это будет атрибут класса. С произвольным значением пусть это будет «example».

    <h2 class=»example»>Цвет заголовка через class</h2>

    Далее нам потребуется прописать стили(цвет) — у нас будети происходить изменение цвета заголовка в теге style

    <style>

    .example{color:red;}

    </style>

    Выведем весь код:

    Код изменения цвета заголовка через атрибут класса:


    Html:

    <h2 class="example">Цвет заголовка через class</h2>

    Css:

    <style>

    .example{color:red;}

    </style>

    Пример изменения цвета заголовка через атрибут

    Выведем выше приведенный код прямо здесь:

    Цвет заголовка через class

  • Изменение цвета заголовка с помощью id

    Один из примеров — «Изменение цвета заголовка с помощью id»

    Чтобы изменить этим способом цвет заголовка — вам понадобится:

    Опять тег заголовка заголовка-пусть это будет h2.

    Добавляем ему id с произвольным значением «color_heading»

    <h2 id=»color_heading»>Цвет заголовка через id</h2>

    Аналогично нам потребуются стили с измененным цветом заголовка:

    <style>

    #id{color:blue;}

    </style>

    Соберем весь код:

    Код изменения цвета заголовка через id:


    Html:

    <h2 id="color_heading">Цвет заголовка через id</h2>

    Css:

    <style>

    #color_heading{color:blue;}

    </style>

    Пример изменения цвета заголовка через id

    Выведем выше приведенный код прямо здесь:

    Цвет заголовка через id

    Источник

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

    Nicolas Chabanovsky's user avatar

    задан 11 фев 2018 в 7:30

    Данил Березовский's user avatar

    Данил БерезовскийДанил Березовский

    1712 золотых знака3 серебряных знака10 бронзовых знаков

    2

    Или ещё проще:

    <h1 style="color: red">Hello, world!</h1>

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

    ответ дан 11 фев 2018 в 7:41

    entithat's user avatar

    entithatentithat

    13k2 золотых знака19 серебряных знаков36 бронзовых знаков

    Как вариант:

    .color {
color: red;
background-color: #f5f5f5;
}
    <h1 class="color">Сегодня воскресенье, сегодня выходной</h1>

    Ознакомьтесь, каким образом определяется цвет текста элемента, а также цвет фона элемента.

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

    ответ дан 11 фев 2018 в 7:39 

    html,body{
width:100%;
height:100%;
}
div{
background:red;
width:100px;
height:30px;
}
/*а это на будущее))))  есть теги которым стили не подвласты*/
br{
width:100px;
height:100px;
background:green;
}
    <!--вот стили для данного тега прописаны в CSS-->
<div>div1</div>
<br/>
<!--вот стили для данного тега прописаны в CSS-->
<div>div2</div>
<br/>
<!--вот стили для данного тега прописаны на пряму  в HTML атрибутом style-->
<div style="background:yellow">div3</div>

<br/>
<!--вот стили для данного тега  можно прописать с помощью JS-->
<!--JS -  'это JavaScript  не путать c JAVA абсолютно два разных языка-->
<div class="div">div4</div>
<script>
document.getElementsByClassName('div')[0].style.background = 'gray';
</script>

    ответ дан 11 фев 2018 в 7:57

    Air's user avatar

    AirAir

    14.3k6 золотых знаков32 серебряных знака66 бронзовых знаков

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

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

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

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head><title></title></head> <!-- Тег <title> обязателен -->
  <body>
    <h1><font color="maroon">Hello, World!</font></h1>
  </body>
</html>

    К слову, <font> позволяет задать цвет не только заголовку, но вообще любому фрагменту текста. Однако он должен быть размещён внутри блочного тега (<hN>, <p> и т. д.). То есть комбинация <h1><font> корректна, а <font><h1> — уже нет (тег заголовка автоматически закроет предшествующий тег).

    ответ дан 11 фев 2018 в 8:34

    Arhadthedev's user avatar

    ArhadthedevArhadthedev

    11.4k8 золотых знаков39 серебряных знаков69 бронзовых знаков

    1

    Источник

    Im new to html/css and was wondering if someone had advice on a current problem I have.

    For a site I am working I have the header under the h1 css tag. I want to add padding to it, but I don’t want to affect all the other headers on other pages with the same h1 tag. What is the best way to add padding to the h1 in css without affecting all the other headers using the same tag.

    Thank you for taking the time to read my question ^^ and I apologize for such an simple question

    asked Apr 9, 2013 at 18:12

    Christopher Chin Fong's user avatar

    Method 1

    You can define inline styles

    <h1 style="padding-bottom: 10px">Header</h1>

    Method 2

    You could create a class

    <h1 class="specialHeader">Header</h1>

    Then your CSS would look something like

    h1.specialHeader {
    padding-bottom: 10px;    
}

    Method 3

    Access it by some parent div which is unique to this page. Your CSS would be

    #mainPage h1{
    padding-bottom: 10px
}

    JFiddle

    Cody Guldner's user avatar

    Cody Guldner

    2,8821 gold badge23 silver badges36 bronze badges

    answered Apr 9, 2013 at 18:17

    Artur K.'s user avatar

    Artur K.Artur K.

    3,1933 gold badges40 silver badges53 bronze badges

    0

    In order to accomplish this, you will likely need to give that head a class name.
    If you only want the styles reflected on the homepage for instance, you should assign a class name:

    h1.main {
  padding:5px;
}

    All other headers would use the default styles.
    In your HTML, you would simply add the class:

    <h1 class="main">Title</h1>

    answered Apr 9, 2013 at 18:18

    lindseytron's user avatar

    0

    Add a class (or id) to your specific h1 element; for example:

    HTML

    <h1 class="header">blabla</h1>

    CSS

    h1.header {
    padding: 2em;
}

    Although for headers, you should use the HTML5 <header> element.

    answered Apr 9, 2013 at 18:15

    Bart's user avatar

    BartBart

    25.8k1 gold badge22 silver badges24 bronze badges

    0

    header h1{ /*Some sort of more specific selector*/
  padding: /*Value*/;
}

    Insert this into your CSS file, and this should work for you

    This will only effect h1 that is in the header.
    So your HTML would be:

    <header>
  <h1>Hello World!</h1>
</header>

    Link: jsfiddle to check it out

    answered Apr 9, 2013 at 18:15

    herinkc's user avatar

    herinkcherinkc

    3812 silver badges13 bronze badges

    0

    This assumes you want the first H1 tag on the page. If you give the surrounding HTML, I could give a better selector, but this will style the first instance of an H1 tag on the page.

    h1:nth-child(1) {
    padding: 1em;
}

    answered Apr 9, 2013 at 18:15

    Chris Doggett's user avatar

    Chris DoggettChris Doggett

    19.4k4 gold badges61 silver badges86 bronze badges

    2

    Источник

    Im new to html/css and was wondering if someone had advice on a current problem I have.

    For a site I am working I have the header under the h1 css tag. I want to add padding to it, but I don’t want to affect all the other headers on other pages with the same h1 tag. What is the best way to add padding to the h1 in css without affecting all the other headers using the same tag.

    Thank you for taking the time to read my question ^^ and I apologize for such an simple question

    asked Apr 9, 2013 at 18:12

    Christopher Chin Fong's user avatar

    Method 1

    You can define inline styles

    <h1 style="padding-bottom: 10px">Header</h1>

    Method 2

    You could create a class

    <h1 class="specialHeader">Header</h1>

    Then your CSS would look something like

    h1.specialHeader {
    padding-bottom: 10px;    
}

    Method 3

    Access it by some parent div which is unique to this page. Your CSS would be

    #mainPage h1{
    padding-bottom: 10px
}

    JFiddle

    Cody Guldner's user avatar

    Cody Guldner

    2,8821 gold badge23 silver badges36 bronze badges

    answered Apr 9, 2013 at 18:17

    Artur K.'s user avatar

    Artur K.Artur K.

    3,1933 gold badges40 silver badges53 bronze badges

    0

    In order to accomplish this, you will likely need to give that head a class name.
    If you only want the styles reflected on the homepage for instance, you should assign a class name:

    h1.main {
  padding:5px;
}

    All other headers would use the default styles.
    In your HTML, you would simply add the class:

    <h1 class="main">Title</h1>

    answered Apr 9, 2013 at 18:18

    lindseytron's user avatar

    0

    Add a class (or id) to your specific h1 element; for example:

    HTML

    <h1 class="header">blabla</h1>

    CSS

    h1.header {
    padding: 2em;
}

    Although for headers, you should use the HTML5 <header> element.

    answered Apr 9, 2013 at 18:15

    Bart's user avatar

    BartBart

    25.8k1 gold badge22 silver badges24 bronze badges

    0

    header h1{ /*Some sort of more specific selector*/
  padding: /*Value*/;
}

    Insert this into your CSS file, and this should work for you

    This will only effect h1 that is in the header.
    So your HTML would be:

    <header>
  <h1>Hello World!</h1>
</header>

    Link: jsfiddle to check it out

    answered Apr 9, 2013 at 18:15

    herinkc's user avatar

    herinkcherinkc

    3812 silver badges13 bronze badges

    0

    This assumes you want the first H1 tag on the page. If you give the surrounding HTML, I could give a better selector, but this will style the first instance of an H1 tag on the page.

    h1:nth-child(1) {
    padding: 1em;
}

    answered Apr 9, 2013 at 18:15

    Chris Doggett's user avatar

    Chris DoggettChris Doggett

    19.4k4 gold badges61 silver badges86 bronze badges

    2

    Источник


    Загрузить PDF


    Загрузить PDF

    В HTML цвет текста меняется с помощью тега <font>, но этот метод больше не поддерживается в HTML5. Вместо указанного тега нужно пользоваться CSS, чтобы задать цвет текста различных элементов страницы. Использование CSS гарантирует, что веб-страница будет совместима с любым браузером.

    1. 1

      Откройте файл HTML. Лучший способ изменить цвет текста — это воспользоваться CSS. Старый тег <font> больше не поддерживается в HTML5. Поэтому воспользуйтесь CSS, чтобы определить стиль элементов страницы.

      • Этот метод также применим к внешним таблицам стилей (отдельным файлам CSS). Приведенные ниже примеры предназначены для файла HTML с внутренней таблицей стилей.

    2. 2

      Размеcтите курсор внутри тега <head>. Стили определяются внутри этого тега, если используется внутренняя таблица стилей.

    3. 3

      Введите <style>, чтобы создать внутреннюю таблицу стилей. Когда тег <style> находится внутри тега <head>, таблица стилей, которая находится внутри тега <style>, будет применена к любым элементам страницы. Таким образом, начало HTML-файла должно выглядеть следующим образом:[1]

      <!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>

    4. 4

      Введите элемент, цвет текста которого нужно изменить. Используйте раздел <style>, чтобы определить внешний вид элементов страницы. Например, чтобы изменить стиль всего текста на странице, введите следующее:

      <!DOCTYPE html>
<html>
<head>
<style>
body {

}
</style>
</head>

    5. 5

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

      <!DOCTYPE html>
<html>
<head>
<style>
body {
	color:
}
</style>
</head>

    6. 6

      Введите цвет текста. Это можно сделать тремя способами: ввести имя, ввести шестнадцатеричное значение или ввести значение RGB. Например, чтобы сделать текст синим, введите blue, rgb(0, 0, 255) или #0000FF.

      <!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
</style>
</head>

    7. 7

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

      <!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
h1 {
	color: #00FF00;
}
p {
	color: rgb(0,0,255)
}
</style>
</head>
<body>

<h1>Этот заголовок будет зеленым.</h1>

<p>Этот параграф будет синим.</p>

Этот основной текст будет красным.
</body>
</html>

    8. 8

      Укажите стилевой класс CSS вместо того, чтобы менять элемент. Можно указать стилевой класс, а затем применить его к любому элементу страницы, чтобы изменить стиль элемента. Например, класс .redtext окрасит текст элемента, к которому применен этот класс, в красный цвет:

      <!DOCTYPE html>
<html>
<head>
<style>
.redtext {
	color: red;
}
</style>
</head>
<body>

<h1 class="redtext"> Этот заголовок будет красным</h1>
<p>Этот параграф будет стандартным.</p>
<p class="redtext">Этот параграф будет красным</p>

</body>
</html>

      Реклама

    1. 1

      Откройте файл HTML. Можно воспользоваться атрибутами встроенного стиля, чтобы изменить стиль одного элемента страницы. Это может быть полезно, если нужно внести одно-два изменения в стиль, но не рекомендуется для широкомасштабного применения. Чтобы полностью изменить стиль, используйте предыдущий метод.[2]

    2. 2

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

      <!DOCTYPE html>
<html>
<body>

<h1>Этот заголовок нужно изменить</h1>

</body>
</html>

    3. 3

      К элементу добавьте атрибут стиля. Внутри открывающего тега изменяемого элемента введите style="":

      <!DOCTYPE html>
<html>
<body>

<h1 style="">Этот заголовок нужно изменить</h1>

</body>
</html>

    4. 4

      Внутри "" введите color:. Например:

      <!DOCTYPE html>
<html>
<body>

<h1 style="color:">Этот заголовок нужно изменить </h1>

</body>
</html>

    5. 5

      Введите цвет текста. Это можно сделать тремя способами: ввести имя, ввести шестнадцатеричное значение или ввести значение RGB. Например, чтобы сделать текст желтым, введите yellow;, rgb(255,255,0); или #FFFF00;:

      <!DOCTYPE html>
<html>
<body>

<h1 style="color:#FFFF00;">Этот заголовок стал желтым</h1>

</body>
</html>

      Реклама

    Советы

    • Список поддерживаемых цветов и их шестнадцатеричные значения можно найти на сайте http://www.w3schools.com/colors/colors_names.asp

    Реклама

    Об этой статье

    Эту страницу просматривали 242 817 раз.

    Была ли эта статья полезной?

    Источник

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

    Содержание

    1. Какие проблемы с заголовками h1 были на моём блоге
    2. Как изменить тег заголовка h1 в зависимости от условий
    3. Как должно быть после внедрения условий
    4. Подведение итогов

    Суть в том, что все эти доработки не должны слетать при обновлении темы. У меня же, как только обновил тему, так и давай всё заново настраивать. Но фишка в другом, элементы дизайна – это цветочки, а подлянка заключается в том, что у меня после этих обновлений перестали работать древовидные комментарии и постоянно меняются местами заголовки 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><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

    Описание сайта.

    <h2><?php bloginfo('description'); ?></h2>

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

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

    <?php if (!is_single () && !is_page ()) :?>

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

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

    <?php endif; ?>

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

    <?php if (!is_single () && !is_page ()) :?>
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php endif; ?>

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

    <?php if (is_single () || is_page ()) :?>
<h2><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h2>
<?php endif; ?>

    Это условие обозначает: Если (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 и восстановил работоспособность микроразметки. Всего-то пару строк кода, а какое удобство.

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

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

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

    С уважением, Максим Зайцев.

    Источник

    В этой статье рассмотрим различные варианты оформления HTML заголовков, а также познакомимся с Bootstrap классами h1..h6 и page-header.

    Назначение HTML заголовков

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

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

    Заголовок второго уровня h2 обычно используется для создания разделов внутри статьи. Заголовки третьего уровня h3 используются для создания подразделов в заголовках второго уровня.

    Заголовки 4 уровня h4 обычно используют в боковых панелях. Заголовки 5 и 6 уровня веб-мастерами используются очень редко, вместо них обычно используются теги strong или em.

    Но такое использование заголовков было до появления HTML5. В этой версии появились новые элементы article, aside, nav и section. Эти элементы в отличие от заголовков предназначены для создания явных разделов.

    Заголовки h1…h6 в HTML 5 уже не являются «сквозными». Т.е. если они используются внутри какого-то элемента из категории sectioning, то они уже влияют только на его структуру, и не создают неявные разделы вне его. Поэтому, например, заголовок h1 может много раз использоваться на странице. Т.е. являться отправной точкой, с которой будет начинаться создания структуры каждого явного раздела веб-страницы.

    Классы h1..h6 в Bootstrap

    В Bootstrap 3 и 4 имеются классы h1…h6. Данные классы предназначены для стилизации некоторого контента в виде заголовка соответствующего уровня.

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

    <p class="h2">Некоторый контент...</p>

    Например, если добавить класс h2 к элементу h1, то заголовок 1 уровня будет выглядеть как заголовок 2 уровня.

    <h1 class="h2">Заголовок 1 уровня, который выглядит как заголовок 2 уровня</h1>

    В Bootstrap 3 имеется класс page-header, который добавляет к элементу светло-серую нижнюю границу и дополнительные отступы сверху и снизу. В основном данный класс используется для оформления заголовка h1.

    <h1 class="page-header">Название статьи</h1>

    Варианты CSS оформления заголовков

    В этом разделе рассмотрим как с помощью CSS можно стилизовать (оформить) заголовки на сайте.

    Вариант 1.

    Bootstrap - Пример оформления заголовков (вариант 1)

    <style>
  .header-h1 {
    position: relative;
    margin-bottom: .5rem;
  }
  .header-h1::after {
    content: "";
    position: absolute;
    border-top: 2px solid #c62828;
    border-bottom: 2px solid #c62828;
    height: .375rem;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: -999;
  }
  .header-h1 h1 {
    font-size: 1.5rem;
    color: #c62828;
    display: inline-block;
    background: #fff;
    margin-bottom: 0;
    padding-right: 1rem;
    text-transform: uppercase;
  }
  .header-h1-center {
    text-align: center;
  }
  .header-h1-center h1 {
    padding-left: 1rem;
  }
  .header-h1-right {
    text-align: right;
  }
  .header-h1-right h1 {
    padding-left: 1rem;
    padding-right: 0;
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-center">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-right">
  <h1>Название заголовка</h1>
</div>

    Вариант 2.

    Bootstrap - Пример оформления заголовков (вариант 2)

    <style>
  .header-h1 h1 {
    position: relative;
    padding-bottom: .5rem;
    font-size: 1.5rem;
    text-transform: uppercase;
    text-align: center;
    color: #00838f;
  }
  .header-h1 h1::before {
    content: "";
    position: absolute;
    border-bottom: 2px solid #00838f;
    bottom: .25rem;
    left: 50%;
    width: 30%;
    transform: translateX(-50%);
  }
  .header-h1 h1::after {
    content: "";
    position: absolute;
    border-bottom: 2px solid #00838f;
    bottom: 0;
    left: 50%;
    width: 15%;
    transform: translateX(-50%);
  }
  .header-h1-left h1 {
    text-align: left;
  }
  .header-h1-left h1::before,
  .header-h1-left h1::after {
    left: 0;
    transform: translateX(0);
  }
  .header-h1-right h1 {
    text-align: right;
  }
  .header-h1-right h1::before,
  .header-h1-right h1::after {
    left: unset;
    right: 0;
    transform: translateX(0);
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-left">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-right">
  <h1>Название заголовка</h1>
</div>

    Вариант 3.

    Bootstrap - Пример оформления заголовков (вариант 3)

    <style>
  .header-h1 {
    position: relative;
    margin-bottom: .5rem;
    text-align: center;
  }
  .header-h1 h1 {
    display: inline-block;
    background: #fff;
    margin-bottom: 0;
    font-size: 1.5rem;
    text-transform: uppercase;
    padding: .5rem 1.5rem;
    border: .125rem solid #6a1b9a;
    color: #6a1b9a;
  }
  .header-h1 h1::after {
    content: "";
    position: absolute;
    background: #6a1b9a;
    height: .125rem;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: -999;
  }
  .header-h1-dark h1 {
    background: #6a1b9a;
    color: #fff;
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-dark">
  <h1>Название заголовка</h1>
</div>

    Вариант 4.

    Bootstrap - Пример оформления заголовков (вариант 4)

    <style>
  .header-h1 {
    position: relative;
    margin-bottom: .5rem;
    text-align: center;
  }
  .header-h1 h1 {
    display: inline-block;
    background: #fff;
    margin-bottom: 0;
    font-size: 1.5rem;
    text-transform: uppercase;
    padding-left: 1rem;
    padding-right: 1rem;
    color: #f57f17;
  }
  .header-h1::after {
    content: "";
    position: absolute;
    background: #f57f17;
    height: .25rem;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: -999;
  }
  .header-h1-left {
    text-align: left;
  }
  .header-h1-left h1 {
    padding-left: 0;
  }
  .header-h1-right {
    text-align: right;
  }
  .header-h1-right h1 {
    padding-right: 0;
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-left">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-right">
  <h1>Название заголовка</h1>
</div

    Вариант 5.

    Bootstrap - Пример оформления заголовков (вариант 5)

    <style>
  .header-h1 h1 {
    padding-bottom: .125rem;
    border-top: .125rem solid #000;
    border-bottom: .125rem solid #000;
    font-size: 1.5rem;
    text-transform: uppercase;
    text-align: center;
  }
  .header-h1-left h1 {
    text-align: left;
  }
  .header-h1-right h1 {
    text-align: right;
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-left">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-right">
  <h1>Название заголовка</h1>
</div>

    Вариант 6.

    Bootstrap - Пример оформления заголовков (вариант 6)

    <style>
  .header-h1 {
    position: relative;
    text-align: center;
    margin-bottom: .5rem;
  }
  .header-h1 h1 {
    display: inline-block;
    background: #fff;
    margin-bottom: 0;
    padding: 0.25rem .875rem;
    border-left: .125rem solid #e0e0e0;
    border-right: .125rem solid #e0e0e0;
    font-size: 1.25rem;
    text-transform: uppercase;
    color: #9e9e9e;
  }
  .header-h1::after {
    content: "";
    position: absolute;
    background: #e0e0e0;
    height: .125rem;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: -999;
  }
  .header-h1-left {
    text-align: left;
  }
  .header-h1-left h1 {
    padding-left: 0;
    border-left: none;
  }
  .header-h1-right {
    text-align: right;
  }
  .header-h1-right h1 {
    padding-right: 0;
    border-right: none;
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-left">
  <h1>Название заголовка</h1>
</div>

<div class="header-h1 header-h1-right">
  <h1>Название заголовка</h1>
</div>

    Вариант 7.

    Bootstrap - Пример оформления заголовков (вариант 7)

    <style>
  .header-h1 {
    position: relative;
    text-align: center;
    margin-bottom: .5rem;
  }
  .header-h1 h1 {
    position: relative;
    display: inline-block;
    background: #fff;
    margin-bottom: 0;
    padding: 0.5rem 1rem;
    border-bottom: .125rem solid #a5d6a7;
    font-size: 1.25rem;
    text-transform: uppercase;
    color: #4caf50;
  }
  .header-h1 h1::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1.25rem;
    transform: translateX(-1.25rem);
    border-top: 1.25rem solid #a5d6a7;
    border-left: 1.25rem solid transparent;
    border-right: 1.25rem solid transparent;
  }
  .header-h1 h1::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1.125rem;
    transform: translateX(-1.25rem);
    border-top: 1.25rem solid #fff;
    border-left: 1.25rem solid transparent;
    border-right: 1.25rem solid transparent;
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

    Вариант 8.

    Bootstrap - Пример оформления заголовков (вариант 8)

    <style>
  .header-h1 {
    text-align: center;
    margin-bottom: .5rem;
  }
  .header-h1 h1 {
    background: #0097a7;
    margin-bottom: 0;
    padding: .5rem 1rem;
    font-size: 1.25rem;
    text-transform: uppercase;
    color: #fff;
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

    Вариант 9.

    Bootstrap - Пример оформления заголовков (вариант 9)

    <style>
  .header-h1 {
    text-align: center;
    margin-bottom: .5rem;
  }
  .header-h1 h1 {
    display: inline-block;
    position: relative;
    background: #0097a7;
    color: #fff;
    margin-bottom: 0;
    padding: .5rem 3rem;
    font-size: 1.5rem;
    text-transform: uppercase;
  }
  .header-h1 h1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-left: 1.5rem solid #fff;
    border-top: 3rem solid transparent;
    border-bottom: 3rem solid transparent;
  }
  .header-h1 h1::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-right: 1.5rem solid #fff;
    border-top: 3rem solid transparent;
    border-bottom: 3rem solid transparent;
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

    Вариант 10.

    Bootstrap - Пример оформления заголовков (вариант 10)

    <style>
  .header-h1 {
    text-align: center;
    margin-bottom: .5rem;
  }
  .header-h1 h1 {
    display: inline-block;
    background: #0097a7;
    color: #fff;
    margin-bottom: 0;
    padding: .5rem 1rem .625rem 1rem;
    font-size: 1.5rem;
    text-transform: uppercase;
    border-radius: 30px;
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>

    Вариант 11.

    Bootstrap - Пример оформления заголовков (вариант 11)

    <style>
  .header-h1 {
    position: relative;
    margin-bottom: .5rem;
  }
  .header-h1 h1 {
    font-size: 1.5rem;
    margin-bottom: 0;
    padding-left: 3rem;
    color: #e91e63;
  }
  .header-h1 h1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2.25rem;
    height: 2.25rem;
    background: #e91e63;
  }
  .header-h1 h1::after {
    content: "";
    position: absolute;
    left: 0;
    top: 2rem;
    width: 100%;
    height: .25rem;
    background-color: #e91e63;
  }
</style>

<div class="header-h1">
  <h1>Название заголовка</h1>
</div>
    Источник

    Понравилась статья? Поделить с друзьями:

    Читайте также:

  • Как изменить оформление pycharm
  • Как изменить оформление сайта ucoz
  • Как изменить оформление microsoft edge
  • Как изменить оформление роблокса
  • Как изменить оформление рабочего стола на андроид

    • 0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии