Как изменить цвет шрифта в html? как изменить цвет текста в html?

Добавляем стили для изменения цвета шрифта

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

В HTML-документе будет несколько элементов, но мы будем работать только параграфом. Вот так меняется цвет текста внутри тегов

при помощи внешней таблицы стилей.

Значения цветов можно указывать при помощи названий, RGB или шестнадцатеричных значений.

  1. Добавляем атрибут style к тегу
p { }
  1. Добавляем свойство color:
p { color: }
  1. Добавляем значение цвета после свойства:
p { color: black;}

Элементы

на странице станут чёрными.

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

Нет ничего страшного в том, чтобы использовать названия black (чёрный) и white (белый). Но этот способ не позволяет указывать конкретные оттенки. Поэтому для указания цвета чаще используются шестнадцатеричные значения:

p { color: #000000; }

Этот CSS-код также сделает элементы

чёрными, так как hex-код #000000 обозначает чёрный цвет. Также можно использовать сокращённый вариант #000, и результат будет тем же.

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

Например:

p { color: #2f5687; }

Данное hex-значение придаст тексту синий цвет. Но в отличие от простого blue этот код позволяет указать конкретные оттенки синего. В данном примере получится тусклый серо-синий цвет.

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

p { color: rgba(47,86,135,1); }

Это RGBA-значение обеспечит всё тот же тусклый, серо-синий цвет. Первые три значения отвечают за красный, зелёный и синий, а последняя цифра — за уровень непрозрачности. «1» означает «100%». То есть, текст будет полностью непрозрачным.

Если сомневаетесь в поддержке браузерами, то цвета можно указывать следующим образом:

p {
  color: #2f5687;
  color: rgba(47,86,135,1);
}

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

Данная публикация представляет собой перевод статьи «How to Change the Font Color with CSS» , подготовленной дружной командой проекта Интернет-технологии.ру

Как поменять цвет текста в HTML

А здесь я расскажу только об одном старом добром способе, который использует
тег цвета текста
в HTML — тег (точнее, этот тег может изменять не только цвет, но об этом как-нибудь в другой раз).

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

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

Тег может иметь несколько разных атрибутов. Для изменения цвета используется
атрибут .

Значение этого атрибута может быть введено одним из двух способов:

  • Как определение красного, зелёного и синего (RGB).
  • Как стандартное название цвета.

Пример:

Следующий текст будет .

Следующий текст будет тоже .

Значение атрибута лучше заключать в кавычки (хотя это и необязательно).

Информация о статье

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

Категории: Веб–дизайн и разработка сайтов

На других языках:

English: Set Background Color in HTML, Français: mettre une couleur de fond de page en HTML, Español: establecer el color de fondo en HTML, Bahasa Indonesia: Memasang Warna Latar Belakang HTML, Deutsch: In HTML die Hintergrundfarbe festlegen, Português: Configurar Cores de Fundo em HTML, Italiano: Impostare il Colore di Sfondo in HTML, ไทย: เปลี่ยนสีพื้นหลังเว็บด้วย HTML, Nederlands: De achtergrondkleur in HTML aanpassen, العربية: إدراج لون خلفية في لغة الترميز HTML, Tiếng Việt: Thiết lập màu nền trong HTML, 日本語: HTMLで背景色を指定する, 中文: 在HTML中设置网页背景颜色, 한국어: HTML 배경색 바꾸는 방법, हिन्दी: HTML में बैकग्राउंड कलर सेट करें (Set Background Color in HTML), Türkçe: HTML’de Arka Plan Rengi Nasıl Ayarlanır

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

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

Да
Нет

 

Font-size — задаем размер шрифта с помощью CSS

 Свойство стиля font-size определяет размер шрифта для какого-либо элемента в html-коде. Синтаксис применения:

font-size: |xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|inherit

Давайте теперь рассмотрим подробнее способы применения данного свойства.

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

  • px — пиксели;
  • pt — пункты;
  • in — дюймы;
  • cm — сантиметры;
  • mm — миллиметры;
  • pc — пики.

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

p { font-size: 10px; }
strong { font-size: 12pt; }

При использовании этих стилей, текст во всех элементах p на странице будет размером 10 пикселей, а элементов strong 12 пунктов.

Для задания относительных размеров шрифта используются следующие обозначения:

  • em — размер буквы «m» текущего шрифта;
  • ex — размер буквы «x» текущего шрифта;
  • % — проценты от размера шрифта родительского элемента.

Например:

h1 { font-size: 3em; }
em { font-size: 150%; }

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

Кроме числовых значений, свойству font-size можно задавать одно из семи символьных значений: xx-small, x-small, small, medium, large, x-large или xx-large, — которые задают определенные размеры шрифта от самого маленького до самого большого:

Ну, и последний способ это использование значений «larger» и «smaller», которые позволяют увеличивать и уменьшать размер шрифта относительно унаследованного. Например, если для родительского элемента определен шрифт размера small, то значение larger установит для текущего элемента размер шрифта medium.

Предопределённые цвета

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

Например:

p.intro {
color : gray; /* задаём серый цвет для всех абзацев с классом intro */
}
i {
color : orange; /* задаём оранжевый цвет для всех элементов  */
}
h2:first-child {
color : red; /* задаём красный цвет для всех элементов 

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

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

Практическое задание № 12.

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

Работа со шрифтами в CSS

Единицы измерения CSS,
размер шрифта

Функции операций с цветами¶

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

Манипулирование насыщенностью цвета (Saturate и Desaturate)

Функция позволяет увеличить насыщенность цвета, заданного в формате HSL. Так, например, чтобы увеличить насыщенность цвета, параметры которого имеют значения на 20%, нужно:

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

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

Осветление и затемнение цвета (Lighten и Darken)

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

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

Работа с прозрачностью (Fade, Fadein, Fadeout)

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

Соответственно, функция увеличивает значение альфа-канала, а функция , обратная ей, уменьшает его.

Управление тоном (Spin)

Эта функция, в отличие от предыдущих, не имеет пары и на её использование накладываются некоторые ограничения.

Функция позволяет задавать значение, на которое отклоняется угол тона (Hue) на цветовом круге. На вход, как и другие функции, она принимает цвет в удобном для вас формате и положительное или отрицательное значение, на которое будет отклоняться угол тона. Например, если значение угла тона соответствует 245 и передать в функцию значение -45, то новое значение будет 200:

Обратите внимание, что если вы передаёте в функцию значение в формате RGB, то оно преобразуется в формат HSL и не сохраняет оттенок серого, так как оттенок не имеет смысла, если нет никакого насыщения. Таким образом, если в функцию передать оттенок серого, то результат будет равен исходному, за исключением того, что Less может преобразовать короткую запись цвета в полную:

Таким образом, если в функцию передать оттенок серого, то результат будет равен исходному, за исключением того, что Less может преобразовать короткую запись цвета в полную:

Смешивание цветов в пропорциях (Mix)

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

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

Обесцвечивание цвета (Grayscale)

Функция позволяет обесцветить цвет, что соответствует удалению его насыщенности. По сути своей, представляет собой обёртку над функцией .

Нахождение контрастного цвета (Contrast)

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

Функция принимает на вход до четырёх параметров:

  • — основной цвет для сравнения
  • — тёмный цвет (опционально, изначально чёрный).
  • — светлый цвет (опционально, изначально белый).
  • — порог, позволяющий задать преобладание тёмного или светлого цвета при определении контрастного цвета (опционально, изначально 43%).

Посмотрим на работу порогового значения на примере:

Что делать если внесённые изменения не меняются?

Казалось бы, изменение цвета – одна из простейших операций при оформлении текста, ну что здесь может пойти не так?

Однако и здесь есть свои нюансы, которые нужно учитывать:

  1. 1.Приоритет стилей, о котором я писала выше. Если задавать цвет текста прямо в HTML то приоритет будет выше. Если вы задали его при помощи атрибута style, а он всё равно не изменилcя, то попробуйте добавить к нему правило !important;

    PHP

    1 pstyle=”color#fff!important;”>…
  2. 2.Особенности тегов. Если вы зададите цвет текста для абзаца внутри которого есть ссылка, то он изменится для всего абзаца кроме ссылки. Чтобы изменился цвет ссылки нужно задавать его именно для тега ссылки.

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

  3. 3.Кеширование. Часто современные браузеры кешируют стили сайта и даже после внесения изменений в код они ещё какое то время отображают старую версию стилей. Для решения проблемы можно обновлять страницу при помощи сочетания клавиш CTRL+F5.
    Так же у вас на сайте может стоять плагин для кеширования, из-за которого вы так же можете не видеть внесённых изменений на сайте.

Более подробно об этом я писала в отдельной статье: Почему не работают CSS-стили?

Успехов вам и вашим проектам!

С уважением Юлия Гусарь

Поведение пустых ячеек

С

¸Ã»Ã°Ã¼Ã¸ CSS üþöýþ ÃÂÃÂÃÂðýþòøÃÂÃÂ, ÃÂûõôÃÂõàûø þÃÂþñÃÂðöðÃÂàóÃÂðýøÃÂàø ÃÂþý ÿÃÂÃÂÃÂÃÂàÃÂÃÂõõú ò ÃÂðñûøÃÂõ øûø ýõÃÂ. ÃÂð ÃÂÃÂþ ÿþòõôõýøõ þÃÂòõÃÂðõàÃÂòþùÃÂÃÂòþ empty-cells, úþÃÂþÃÂþõ ÿþ ÃÂüþûÃÂðýøÃÂ, úðú òàüþóûø ÷ðüõÃÂøÃÂàø÷ ÿÃÂõôÃÂôÃÂÃÂøàÿÃÂøüõÃÂþò, þÃÂþñÃÂðöðõàÿÃÂÃÂÃÂÃÂõ ÃÂÃÂõùúø.

ÃÂðòðùÃÂõ ÿõÃÂõùôõü ú ÿÃÂøüõÃÂÃÂ:


	ÃÂÃÂøüõàþÃÂþñÃÂðöõýøàÿÃÂÃÂÃÂÃÂàÃÂÃÂõõú ÃÂðñûøÃÂà
table {
float: left; /* ÃÂðñûøÃÂàÃÂÃÂðýþòÃÂÃÂÃÂàÿûðòðÃÂÃÂøüø ÃÂûõüõýÃÂðüø, ÃÂüõÃÂõýýÃÂüø ÿþ ûõòþüàúÃÂðà*/
margin-right: 30px; /* ÃÂÃÂÃÂðýðòûøòðõü òýõÃÂýøõ þÃÂÃÂÃÂÃÂÿàÃÂÿÃÂðòð */
}
td, th {
border: 1px solid #F50; /* ÷ðôðõü ÃÂÿûþÃÂýÃÂàóÃÂðýøÃÂàÃÂð÷üõÃÂþü 1 ÿøúÃÂõûàÃÂòõÃÂð #F50 */
width: 75px; /* ÃÂøÃÂøýð ÃÂÃÂõõú */
height: 50px; /* òÃÂÃÂþÃÂð ÃÂÃÂõõú */
background: wheat; /* ÷ðôðõü ÃÂòõà÷ðôýõóþ ÃÂþýð ÃÂÃÂõõú */
}
caption {
font-weight: bold; /* öøÃÂýþõ ýðÃÂõÃÂÃÂðýøõ */
}
.first {
empty-cells: show; /* ÿþúð÷ÃÂòðÃÂàÿÃÂÃÂÃÂÃÂõ ÃÂÃÂõùúø (ÿþ ÃÂüþûÃÂðýøÃÂ) */	
}
.second {
empty-cells: hide; /* ÃÂúÃÂÃÂòðÃÂàÿÃÂÃÂÃÂÃÂõ ÃÂÃÂõùúø */	
}


	
		

«first»>
empty-cells: show;

1

2

3

2

3

«second»>
empty-cells: hide;

1

2

3

2

3

ÃÂþýÃÂÃÂÃÂ, úðú ôõùÃÂÃÂòÃÂõàÃÂòþùÃÂÃÂòþ empty-cells ø÷ ÃÂÃÂþóþ ÿÃÂøüõÃÂð þÃÂõýàÿÃÂþÃÂÃÂþ, õÃÂûø ôûàýõóþ ÃÂÃÂÃÂðýþòûõýþ ÷ýðÃÂõýøõ hide, ÃÂþ ÿÃÂÃÂÃÂÃÂõ ÃÂÃÂõùúø ø ÃÂþý ò ýøàñÃÂôÃÂàÃÂúÃÂÃÂÃÂÃÂ, õÃÂûø ÃÂÃÂÃÂðýþòûõýþ ÷ýðÃÂõýøõ show (ÿþ ÃÂüþûÃÂðýøÃÂ), ÃÂþ þýø ñÃÂôÃÂàþÃÂþñÃÂðöðÃÂÃÂÃÂÃÂ.


àøÃÂ. 147 ÃÂÃÂøüõàþÃÂþñÃÂðöõýøàÿÃÂÃÂÃÂÃÂàÃÂÃÂõõú ÃÂðñûøÃÂÃÂ.

Инструмент для определения значений цветов онлайн

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

Кликните по области палитры чтобы определить значение цвета

  • RGB:
  • HSV:
  • HEX:

Здесь вы можете двигать мышкой указатель  и получать значения цветов в формате RGB и HEX (в шестнадцатеричном коде)


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

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

Хорошего вам настроения! До встречи в следующих статьях!

С уважением Юлия Гусарь

Font-family — задаем имя шрифта в CSS

Начнем с атрибута стиля font-family с помощью которого можно задать гарнитуру и тип шрифта, которым будет выведен текст html-элемента (например текст заголовка или абзаца p). Синтаксис применения атрибута выглядит так:

font-family:

Список имен шрифтов задается в виде их названий (например Arial, Verdana или Times New Roman). Если имя шрифта содержит пробелы, то его необходимо взять в кавычки. Можно указать несколько наименований шрифтов, разделив их запятыми. В этом случае браузер сначала будет искать первый из указанных шрифтов, в случае неудачного поиска — второй, третий и так далее:

p { font-family: Arial, Verdana, ‘Times New Roman’, san-serif; }

В данном примере браузер сначала будет искать на компьютере пользователя шрифт Arial и если найдет, то отобразит все элементы p этим же шрифтом. Если же Arial на компьютере пользователя не найдется, тогда браузер будет искать Verdana, затем, в случае неудачи — Times New Roman, и так далее. Последним в списке имен шрифтов в данном примере идет не имя конкретного шрифта, а имя целого семейства шрифтов, представляющего целые наборы аналогичных шрифтов.

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

  • serif — шрифты с засечками;
  • sans-serif -шрифты без засечек;
  • cursive — шрифты, имитирующие рукописный текст;
  • fantasy — декоративные шрифты;
  • monospace — моноширинные шрифты.

Кроме имен шрифтов, свойству font-family можно задать особое значение inherit, которое говорит браузеру, что текст данного элемента нужно отображать таким же шрифтом, как и текст родительского элемента.

Горизонтальное и вертикальное выравнивание

В

большинстве случаев при работе с таблицами вам придется настраивать выравнивание содержимого внутри заголовочных ячеек и ячеек данных. Свойство text-align применяется для горизонтального выравнивания по аналогии с любой текстовой информацией. Применение этого свойства для текста мы рассматривали ранее в статье «Форматирование текста в CSS».

Чтобы установить выравнивание для содержимого в ячейках, необходимо использовать специальные ключевые слова со свойством text-align. Рассмотрим применение ключевых слов этого свойства на следующем примере.


	Пример горизонтального выравнивания в таблице 
table {
border-collapse: collapse; /* объединяем границы ячеек в одну */	
}
td, th {
border: 1px solid; /* задаем сплошную границу размером 1 пиксель */
}
.left {
text-align: left; /* выравнивает текст ячейки влево */
}
.right {
text-align: right; /* выравнивает текст ячейки вправо */
}
.center {
text-align: center; /* выравнивает текст ячейки по центру */
}
.justify {
text-align: justify; /* выравнивает текст ячейки по ширине */
}


	
		
Значение Описание

«left»>
left

Выравнивает текст ячейки влево. Это значение по умолчанию (если направление текста слева направо).

class = «right»>
right

Выравнивает текст ячейки вправо. Это значение по умолчанию (если направление текста справа налево).

class = «center»>
center

Выравнивает текст ячейки по центру.

class = «justify»>
justify

Растягивает линии так, что каждая линия имеет одинаковую ширину (растягивает текст ячейки по ширине).

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

Результат нашего примера:


Рис. 149 Пример горизонтального выравнивания в таблице.

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

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

Значение Описание
baseline Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию.
top Выравнивает содержимое ячейки вертикально по верхнему краю.
middle Выравнивает содержимое ячейки вертикально по середине.
bottom Выравнивает содержимое ячейки вертикально по нижнему краю.

* — Значения sub, super, text-top, text-bottom, length и %, примененные к ячейке таблицы будут вести себя как при использовании значения baseline.

Рассмотрим пример использования:


	Пример вертикального выравнивания в таблице 
table {
border-collapse: collapse; /* объединяем границы ячеек в одну */	
}
td, th {
border: 1px solid; /* задаем сплошную границу размером 1 пиксель */
height: 55px; /* задаем высоту ячеек */
}
.baseline {
vertical-align: baseline; /* выравнивает базовую линию ячейки по базовой линии родителя */
}
.top {
vertical-align: top; /* выравнивает содержимое ячейки вертикально по верхнему краю */
}
.middle {
vertical-align: middle; /* выравнивает содержимое ячейки вертикально по середине */
}
.bottom {
vertical-align: bottom; /* выравнивает содержимое ячейки вертикально по нижнему краю */
}


	
		
Значение Описание

«baseline»>
baseline

Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию.

class = «top»>
top

Выравнивает содержимое ячейки вертикально по верхнему краю.

class = «middle»>
middle

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

class = «bottom»>
bottom

Выравнивает содержимое ячейки вертикально по нижнему краю.

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


Рис. 150 Пример вертикального выравнивания в таблице.

TinyMCE Color Grid — улучшенная палитра цветов

По факту, TinyMCE Color Grid содержит 2 функции. Первая значительно расширяет стандартную палитру цветов:

С таким то выбором вы легко сможете изменять цвета вордпресс в любом сайте. Если их недостаточно, плагин позволяет добавлять свои персональные варианты. Для этого заходите в меню «Настройки» — «TinyMCE Color Grid» и отмечаете галочкой опцию «I’d like to define some custom colors». Сразу после этого появится инструмент как на картинке ниже:

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

Итого. Выбор из этих двух методов изменения цвета текста в WordPress зависит от вашего уровня подготовки. Мне лично проще использовать хак: в нем меньше кода, он проще, не требуется следить за новыми версиями модуля. Хотя здесь есть такой нюанс, что движок TinyMCE может изменится, и тогда нужно будет обновлять код.

Абзац цветом через файл css

css

Об этом способе покрасить каждый абзац новым цветом, я как-то и позабыл!

Для данного способа покраски абзаца в новый цвет потребуется какой-то div и внутри данного блока должен повторять какой-то другой тег, например:

   

Здесь текст

   

Здесь текст

   

Здесь текст

   …

Далее нам потребуется псевдокласс :nth-child… и каждой строке по порядку прописываем цвет:

.example p:nth-child(1) {
color: red;
}
.example p:nth-child(2) {
color: green;
}
.example p:nth-child(3) {
color: orange;
}

Теперь возьмем тот же текст поместим его в div с классом example, для каждой строки припишем новый цвет… всего строк получились 10:

И так!

Погнали!

Это уже будет абзац номер 2, хотя порядковый номер будет №1 и цвет будет Yellow.

На самом деле! Я не хотел переделывать эту страницу о цветах абзаца!

Но тут, анализируя поисковые запросы увидел такой интересный запрос… :

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

Вообще! На самом деле я не знаю, что это такое, но было интересным. Как же можно сделать это таким образом. Чтобы каждый абзац автоматически красился в тот цвет, который мы ему назначим!

И тут меня затянуло, вроде бы и подумать-то такая глупая задачка, но я люблю решать задачки – меня хлебом не корми – дай задачку решить!

И дописав до 7 строки, решил сходить посмотреть! И желтый явно не очень, его нужно немного сделать темным!

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

Чтобы явно было отличие цвета – надо сделать например квадрат с цветом…

И это последний…измененный цветом

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

1).\n2).explode$text = explode(«\n» , $text) ;
3).$array_color = array(«red»,»orange «,»yellow «,»green «,»blue «,»indigo «,»violet «,»#78ff00″,»#00ffd2″,»#ff8300»);

Цвета в данном массиве:

0.Красный – red
1.Оранжевый – orange
2.Желтый .Yellow
3.Зеленый Green
4.Голубой Blue
5.Синий indigo
6.Фиолетовый – violet
7.Между зеленым и желтым – 78ff00
8.Между зеленым и голубым – 00ffd2
9.Между красным и желтым – ff8300

4).for

for ($i=0; $i

{

$new_str .=».$text. » «;

}

echo $new_str;

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

$array_color

Что это значит!? Давайте прямо здесь поэкспериментируем чтобы понимать, как это работает — нет ничего лучше примера:

$i = 124;

echo «Это будет последняя цифра :

«.substr($i, -1). »

ну и далее, думаю вы догадались, здесь будет название цвета :

» . $array_color;

И результат вы приведенного примера:

Это будет последняя цифра :

4

ну и далее, думаю вы догадались, здесь будет название цвета :

blue

Цвета в данном массиве

Результат работы скрипта, который делает каждый абзац новым цветом!:

И так!
Погнали!
Это уже будет абзац номер 2, хотя порядковый номер будет №1 и цвет будет Yellow.
На самом деле! Я не хотел переделывать эту страницу о цветах абзаца!
Но тут, анализируя поисковые запросы увидел такой интересный запрос… :
на странице с абзацами сделать так, чтобы абзацы были цветами радуги, а ссылки великие на описаниях цветов в википедии.
Вообще! На самом деле я не знаю, что это такое, но было интересным. Как же можно сделать это таким образом. Чтобы каждый абзац автоматически красился в тот цвет, который мы ему назначим!
И тут меня затянуло, вроде бы и подумать-то такая глупая задачка, но я люблю решать задачки – меня хлебом не корми – дай задачку решить!
И дописав до 7 строки, решил сходить посмотреть! И желтый явно не очень, его нужно немного сделать темным!
И еще .. промежуточный цвета для абзацев не очень заметно отличаются от основных!
Чтобы явно было отличие цвета – надо сделать например квадрат с цветом…
И это последний…измененный цветом

Как изменить цвет строки в таблице

И

ðú, üààòðüø ýðÃÂÃÂøûøÃÂàüõýÃÂÃÂàÃÂòõÃÂð ÃÂÃÂõõú, ð ÃÂðúöõ ÃÂÃÂõõú-÷ðóþûþòúþò, øÃÂÿþûÃÂ÷ÃÂàòþ÷üþöýþÃÂÃÂø CSS. ÃÂÃÂûø üàÃÂúð÷ÃÂòðõü ÃÂÃÂøûø ôûàÃÂðúøàÃÂõóþò, úðú th øûø td, ÃÂþ ôþûöýàÿþýøüðÃÂÃÂ, ÃÂÃÂþ ÿÃÂøüõýøüàÃÂÃÂøûø ñÃÂôÃÂàø ú þÃÂÃÂðûÃÂýÃÂü ÃÂõóðü.

ÃÂôýðúþ, ñÃÂòðÃÂàÃÂøÃÂÃÂðÃÂøø, úþóôð ýðôþ ø÷üõýøÃÂàÃÂòõàúþýúÃÂõÃÂýþù ÃÂÃÂõùúø øûø öõ ýõÃÂúþûÃÂúþ ÃÂÃÂõõú, øûø öõ òÃÂàÃÂÃÂÃÂþúàÃÂõûøúþü. çÃÂþ ôõûðÃÂàò ôðýýþü ÃÂûÃÂÃÂðõ? ÃÂôõÃÂàÃÂûõôÃÂõàøÃÂÿþûÃÂ÷þòðÃÂàúûðÃÂÃÂÃÂ, ð ÃÂðúöõ þÃÂÃÂÃÂõÃÂÃÂòûÃÂÃÂàÿÃÂøüõýõýøõ øàÃÂÃÂøûõù. ÃÂð ÿÃÂðúÃÂøúõ ÃÂÃÂþ òÃÂóûÃÂôøàòþàÃÂðú:

àÃÂÃÂþñàø÷üõýøÃÂàÃÂòõààÿþüþÃÂÃÂàÃÂÃÂþóþ úûðÃÂÃÂð þÿÃÂõôõûÃÂýýÃÂõ ÃÂÃÂÃÂþúø ýÃÂöýþ ÃÂôõûðÃÂàÃÂûõôÃÂÃÂÃÂõõ:

àÃÂõ÷ÃÂûÃÂÃÂðàò ñÃÂðÃÂ÷õÃÂõ:

Добавление своего цвета текста в WordPress

Также на картинке выше под вариантами цветов найдете ссылку «Произвольный» — она откроет инструмент палитры для выбора других вариантов кроме базовых.

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

Именно поэтому более надежным способом добавления своего цвета изменения шрифта является следующий хак. Вам нужно открывать файл функций functions.php и дописать туда такой код:

function my_mce4_options($init) {
  $default_colours = '"000000", "Black",
                      "993300", "Burnt orange",
                      "333300", "Dark olive",
                      "003300", "Dark green",
                      "003366", "Dark azure",
                      "000080", "Navy Blue",
                      "333399", "Indigo",
                      "333333", "Very dark gray",
                      "800000", "Maroon",
                      "FF6600", "Orange",
                      "808000", "Olive",
                      "008000", "Green",
                      "008080", "Teal",
                      "0000FF", "Blue",
                      "666699", "Grayish blue",
                      "808080", "Gray",
                      "FF0000", "Red",
                      "FF9900", "Amber",
                      "99CC00", "Yellow green",
                      "339966", "Sea green",
                      "33CCCC", "Turquoise",
                      "3366FF", "Royal blue",
                      "800080", "Purple",
                      "999999", "Medium gray",
                      "FF00FF", "Magenta",
                      "FFCC00", "Gold",
                      "FFFF00", "Yellow",
                      "00FF00", "Lime",
                      "00FFFF", "Aqua",
                      "00CCFF", "Sky blue",
                      "993366", "Red violet",
                      "bfbfbf", "Light gray",
                      "FF99CC", "Pink",
                      "FFCC99", "Peach",
                      "FFFF99", "Light yellow",
                      "CCFFCC", "Pale green",
                      "CCFFFF", "Pale cyan",
                      "99CCFF", "Light sky blue",
                      "CC99FF", "Plum",
                      "FFFFFF", "White"';
 
  $custom_colours =  '"4c83c3", "Nice Blue Header",
                      "D83131", "Color 2 Name",
                      "ED1C24", "Color 3 Name",
                      "F99B1C", "Color 4 Name",
                      "50B848", "Color 5 Name",
                      "00A859", "Color 6 Name",
                      "00AAE7", "Color 7 Name"';
 
  // build colour grid default+custom colors
  $init'textcolor_map' = '';
 
  // enable 6th row for custom colours in grid
  $init'textcolor_rows' = 6;
 
  return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

Немного пояснений. Здесь вначале в переменной default_colours определяется список базовых цветов, затем — ваши новые значения в custom_colours. После оба массива объединяются в один. Всего получится 40 пар «код цвета + название». Переменная textcolor_rows:

$init'textcolor_rows' = 6;

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

Кстати, вы можете задавать разное число колонок (rows) и строк (cols) для этого элемента, например:

$init'textcolor_rows' = 5;
$init'textcolor_cols' = 10;

Хак работает для версий WP 3.9+ и для редактора TinyMCE 4+.

По названию

Браузеры поддерживают некоторые цвета по их названию. В табл. 1 приведены названия, шестнадцатеричный код, значения в формате RGB, HSL и описание.

Табл. 1. Названия цветов
Имя Цвет Код RGB HSL Описание
white #ffffff или #fff rgb(255,255,255) hsl(0,0%,100%) Белый
silver   #c0c0c0 rgb(192,192,192) hsl(0,0%,75%) Серый
gray   #808080 rgb(128,128,128) hsl(0,0%,50%) Тёмно-серый
black   #000000 или #000 rgb(0,0,0) hsl(0,0%,0%) Черный
maroon   #800000 rgb(128,0,0) hsl(0,100%,25%) Тёмно-красный
red   #ff0000 или #f00 rgb(255,0,0) hsl(0,100%,50%) Красный
orange   #ffa500 rgb(255,165,0) hsl(38.8,100%,50%) Оранжевый
yellow   #ffff00 или #ff0 rgb(255,255,0) hsl(60,100%,50%) Желтый
olive   #808000 rgb(128,128,0) hsl(60,100%,25%) Оливковый
lime   #00ff00 или #0f0 rgb(0,255,0) hsl(120,100%,50%) Светло-зелёный
green   #008000 rgb(0,128,0) hsl(120,100%,25%) Зелёный
aqua   #00ffff или #0ff rgb(0,255,255) hsl(180,100%,50%) Голубой
blue   #0000ff или #00f rgb(0,0,255) hsl(240,100%,50%) Синий
navy   #000080 rgb(0,0,128) hsl(240,100%,25%) Тёмно-синий
teal   #008080 rgb(0,128,128) hsl(180,100%,25%) Сине-зелёный
fuchsia   #ff00ff или #f0f rgb(255,0,255) hsl(300,100%,50%) Розовый
purple   #800080 rgb(128,0,128) hsl(300,100%,25%) Фиолетовый

HSL

Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359.

Рис. 1. Цветовой круг

Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.

Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.

Глобальные стили

Ñи иÑполÑзовании глобалÑнÑÑ ÑÑилей ÑвойÑÑва CSS
опиÑÑваÑÑÑÑ Ð² Ñамом докÑменÑе и ÑаÑполагаÑÑÑÑ Ð² заголовке
веб-ÑÑÑаниÑÑ. Ðо Ñвоей гибкоÑÑи и возможноÑÑÑм ÑÑÐ¾Ñ ÑпоÑоб добавлениÑ
ÑÑÐ¸Ð»Ñ ÑÑÑÑÐ¿Ð°ÐµÑ Ð¿ÑедÑдÑÑемÑ, но Ñакже позволÑÐµÑ ÑÑаниÑÑ ÑÑили в одном меÑÑе,
в данном ÑлÑÑае пÑÑмо на Ñой же ÑÑÑаниÑе Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ
конÑейнеÑа ,
как показано в пÑимеÑе 3.3.

ÐÑÐ¸Ð¼ÐµÑ 3.3. ÐÑполÑзование глобалÑного ÑÑилÑ

HTML5CSS 2.1IECrOpSaFx

Рданном пÑимеÑе задан ÑÑÐ¸Ð»Ñ Ñега

,
коÑоÑÑй заÑем можно повÑемеÑÑно иÑполÑзоваÑÑ Ð½Ð° данной веб-ÑÑÑаниÑе (ÑиÑ. 3.1).

РиÑ. 3.1. Ðид заголовка, оÑоÑмленного Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ ÑÑилей

Ссылка на основную публикацию