Задать/изменить цвета заголовков css/html

Подробно об изменении цвета заголовка на сайте

1. Цвет заголовка h1-h6 по умолчанию
2. Изменим цвет в тега заголовка
3. Изменение цвета заголовка классом
4. Изменение цвета заголовка ид

Скопировать ссылку



Цвет заголовка 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

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---