WORDPRESS 19 HEX коды и стили ссылок

Лекция

Привет, сегодня поговорим про wordpress hex коды, обещаю рассказать все что знаю. Для того чтобы лучше понимать что такое wordpress hex коды, стили ссылок , настоятельно рекомендую прочитать все из категории Системы управления контентом CMS.

Продолжая знакомиться с CSS, сегодня мы узнаем больше о HEX кодах. Свойство цвета с присвоенным шестнадцатиричным HEX кодом (hexadecimal (hex) code) предназначено для окрашивания текста. Например, body { color: #000000;} означает, что весь текст внутри тега <body> вашей страницы будет черным.
Свойство фона с присвоенным HEX кодом существует для придания цвета всему, что не является текстом. Например, body {background: #ffffff; } означает, что фон будет белый.

Hexadecimal Codes:

с предшествующим знаком #, каждый цветовой HEX код имеет шесть цифр. Эти цифры варьируются от #ffffff (белый) до #000000 (черный).
#ffffff, #eeeeee, #dddddd, #cccccc, #bbbbbb, #aaaaaa, #999999, #888888,#777777, #666666, #555555, #444444, #333333, #222222, #111111, #000000.
первые две цифры представляют красный цвет, третья и четвертая – зеленый, последние две – синий. #ff0000 это красный. #550000 это темно красный. #220000 это бордовый.#00ff00 это зеленый. #0000ff это синий. Стоп, а разве желтый не основной цвет? Какой код соответствует желтому? #ffff00 это желтый. #ff00ff — фиолетовый.

Шаг 1

Вставьте следующий код под селектором body{ }:

?



a, a:visited{
text-decoration: underline;
color: #336699;
}

Вы сделали так, что все ссылки были подчеркнуты (text-decoration: underline;) и выделены синим цветом (color: #336699;). Об этом говорит сайт https://intellect.icu . Это другой оттенок синего, но это синий, потому что последние две цифры, характеризующие степень синего, наиболее большие.

a – а это для стилизации ссылок. Когда вы хотите слово превратить в ссылку, что вы используете? Тэги <a> и </a>, следовательно, A — это a в вашем CSS.
a:visited — для стилизации ссылок, которые вы уже посещали ранее.
вместо того, чтобы вставлять:

?



a {
text-decoration: underline;
color: #336699;
}

?



a:visited {
text-decoration: underline;
color: #336699;
}

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

Шаг 2

Вставьте следующий код под a, a:visited{ }

?

a:hover{
text-decoration: none;
}

Что это делает? Вы удостоверились, что подчеркивание ссылки исчезает, когда вы наводите на нее курсор, отсюда a:hover. Если вы не хотите подчеркивания по умолчанию, а чтобы оно появлялось только во время наведения курсора,тогда поменяйте значение параметра text-decoration: для a и a:hover наоборот. Если вы хотите, чтобы ссылка меняла цвет во время наведения курсора, добавьте color: и любой цветовой код. Например:

?



a:hover {
text-decoration: none;
color: #ff0000;
}

Пока все, пробуйте и не бойтесь делать ошибок и спрашивать совета!

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

Из статьи мы узнали кратко, но содержательно про wordpress hex коды

WORDPRESS 19 HEX коды и стили ссылок

Hexadecimal Codes:

Шаг 1

Шаг 2

Комментарии

Оставить комментарий

Системы управления контентом CMS

Термины: Системы управления контентом CMS