Working with html color: how to change text and background colors
Содержание:
- Изменяем цвет в HTML коде при помощи атрибута style
- Изменения цвета текста средствами HTML
- Шестнадцатеричные значения
- Коды цветов в HTML. Основы HTML для начинающих. Урок №11
- Как поменять цвет ссылки в HTML
- More Examples
- HSLA цвета
- Обзор автомобилей 2008 года.
- Как изменить цвет текста в HTML с использованием CSS?
- RGBA цвета
- Ways to Define Color
- Задаем цвет фона web-страницы
- Как изменить цвет выбранного изображения¶
- Changing the font colour
- Атрибут style
- Цвет текста
- Изменяем цвет в HTML коде при помощи атрибута style
- Цветовые модели HSL и HSLA
Изменяем цвет в HTML коде при помощи атрибута style
Для этого добавляем к тегу для которого нам нужно изменить цвет текста атрибут style.
Здесь же при необходимости через ; вы можете задать и другие CSS свойства, например, размер шрифта, жирность и так далее.
Лично я обычно использую вариант с заданием стилей в CSS файле, но если вам нужно изменить цвет текста для какого то одного-двух элементов, то не обязательно присваивать им класс и потом открывать CSS файл и там дописывать слили. Проще это сделать прямо в HTML при помощи тега <font> или артибута style.
Так же вы должны знать, что есть такое понятие как приоритет стилей. Так вот когда вы задаёте цвет текста или другие стили в html при помощи атрибута style, то у этих стилей приоритет будет выше чем если вы их зададите в CSS файле (при условии что там не использовалось правило !important)
Чтобы изменить цвет текста отдельного слова, фразы или буквы мы можем обернуть их в тег span и задать ему нужный цвет.
Например:
В итог получится вот так:
Пример текста
Изменения цвета текста средствами HTML
К счастью в HTML есть специальный тег с атрибутом color, в котором можно указать нужный цвет текста.
PHP
<font color=»red»>Красный текст</font>
| 1 | <font color=»red»>Красныйтекст<font> |
Значение цвета можно задавать несколькими способами:
- При помощи кодового названия (Например: red, black, blue)
- В шестнадцатиричном формате (Например: #000000, #ccc)
- В формате rgba (Например: rgba(0,0,0,0.5))
Более подробно о способах задания цветов и перечень их значений описан в этой статье: Изменение цвета шрифта в CSS. Коды цветов HTML и CSS
Если вы ещё не знаете как определить значение цвета на сайте, то вам сюда
Таким образом вы можете изменить цвет у целого абзаца, слова или одной буквы, обернув то что вам нужно в тег <font>
Шестнадцатеричные значения
Шестнадцатеричные значения цвета поддерживается всеми основными браузерами. Цвет с использованием шестнадцатеричной системы задается с использованием следующего синтаксиса:
селектор {
color : #RRGGBB;
}
#RR (красный)
#GG (зеленый)
#BB (синий)
Значение, фактически содержит три шестнадцатеричных числа (RR — для красного, GG — для зеленого, BB — для синего). Каждое значение (RR, GG и BB) должно находиться в диапозоне между 00 и FF. В шестнадцатиричной системе счет ведется следующим образом: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
Например, значение #0000FF соответствует синему цвету, так как компонент BB установлен в его самое высокое значение — (FF), а другие установлены в самое низкое значение (00). Значение, фактически содержит три шестнадцатеричных числа, значение цвета получается при смешивании трех вышеуказанных составляющих.
Обращаю Ваше внимание, что допускается сокращать шестнадцатеричные числа до трех символов, в том случае если каждое из трех двухзначных чисел содержит одинаковые символы. Например, #0000FF можно записывать как #00F, или значение #777777 можно указать следующим образом:
p.intro {
color : #777; /* задаём темно-серый цвет для всех абзацев с классом intro */
}
Коды цветов в HTML. Основы HTML для начинающих. Урок №11
Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я вкратце покажу, как менять цвет текста, и в конце урока вы найдете таблицу цветов для HTML, которые вы сможете использовать для своих веб страниц.
Цвет в оформлении веб страниц, да и вообще в любой дизайнерской сфере, играет большую роль. Удачно подобранный цвет на сайте поможет создать приятную атмосферу.
Для того, чтобы поменять цвет текста, мы используем атрибут «color» для тега «font» (об этом я уже говорил в статье «Форматирование текста»)
<font color="red">499$</font>
Раньше в HTML, чтобы задать цвет тексту, мы использовали только названия цветов, т.е. прописывали их словами:
- Red (красный)
- Orange (оранжевый)
- Yellow (желтый)
- Green (зеленый)
- Blue (голубой)
- Indigo (синий)
- Violet (сиреневый)
- Purple (фиолетовый)
- Pink (розовый)
- Silver (серебряный)
- Gold (золотой)
- Beige (бежевый)
- Brown (коричневый)
- Gray (серый)
- Black (черный)
- White (белый)
Вот так:
<font color="red">красный</font> <font color="Orange">оранжевый</font> <font color="Yellow">желтый</font> <font color="Green">зеленый</font> <font color="Blue">голубой</font> <font color="Indigo">синий</font> <font color="Violet">сиреневый</font> <font color="Purple">фиолетовый</font> <font color="Pink">розовый</font> <font color="Silver">серебряный</font> <font color="Gold">золотой</font> <font color="Beige">бежевый</font> <font color="Brown">коричневый</font> <font color="Gray">серый</font> <font color="Black">черный</font> <font color="White">белый</font>
Результат:
красный оранжевый желтый зеленый голубой синий сиреневый фиолетовый розовый серебряный золотой бежевый коричневый серый черный белый
Благодаря кодам, вы сможете получить массу различных цветов и оттенков.
Если использовать код цвета, то достаточно поставить в атрибуте «color» решетку «#», а потом код цвета:
<font color="#cc0000">красный</font>
Если вы хотите сделать красный немножко потемнее , тогда используйте другой код:
<font color="#8B0000">красный</font>
Результат: красный красный
○ Где брать код цвета?
Вы можете смотреть в таблицу цветов для html, выбирать подходящий цвет, копировать его код и вставлять на веб страницу. Ничего сложного .
А можно цвет кода выводить самому. Нужно только знать, что цвет задаётся в шестнадцатеричной системе счисления (цифры от «0» до «9» и латинские буквы от «a» до «f»).
Не знаю как вам, но мне проще знать кода основных цветов, а если нужны оттенки, я иду за помощью к своей таблице.
Как поменять цвет ссылки в HTML
Линки в HTML выглядят следующим образом:
<a href="/URL-адрес страницы" title="Ссылка HTML">Изменяем цвет ссылки</a>
Для того чтобы задать ссылке определенные параметры, используется свойство style. Для того чтобы свойство сработало его необходимо добавить внутрь тега. Вот как это будет выглядеть на примере:
<a href="/URL-адрес страницы" title="Ссылка HTML" style="color: #FF0000; text-decoration: none">Изменяем цвет ссылки</a>
Так как все ссылки по умолчанию имеют подчеркивание в нашем примере мы его запретили, использовав свойство text-decoration: none
В независимости от цветового оформления сайта, цвет ссылок также установлен по умолчанию. Изначально все ссылки (за исключением некоторых) синего окраса. Для изменения этого параметра используется свойство color, после которого через двоеточие устанавливается цветовой код HTML.
More Examples
Example
A demonstration of related methods:
var txt = «Hello World!»;document.write(«The original string: » + txt);document.write(«<p>Big: » + txt.big() + «</p>»);document.write(«<p>Small: » + txt.small() + «</p>»);document.write(«<p>Bold: » + txt.bold() + «</p>»);document.write(«<p>Italic: » + txt.italics() + «</p>»);
document.write(«<p>Fixed: » + txt.fixed() + «</p>»);document.write(«<p>Strike: » + txt.strike() + «</p>»);document.write(«<p>Fontcolor: » + txt.fontcolor(«green») + «</p>»);document.write(«<p>Fontsize: » + txt.fontsize(6) + «</p>»);document.write(«<p>Subscript: » + txt.sub() + «</p>»);document.write(«<p>Superscript: » + txt.sup() + «</p>»);
document.write(«<p>Link: » + txt.link(«https://www.w3schools.com») + «</p>»);
document.write(«<p>Blink: » + txt.blink() + » (works only in Opera)</p>»);
❮ JavaScript String Reference
HSLA цвета
По аналогии с RGB, HSL поддерживает прозрачность с помощью добавления альфа-канала, который задает уровень прозрачности со значениями от до 1 (от невидимого до полностью непрозрачного).
Данный формат задания цвета называется HSLA, давайте рассмотрим его применение:
<p style = color: hsla(0,100%,50%,0.1)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.1 --> <p style = color: hsla(0,100%,50%,0.2)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.2 --> <p style = color: hsla(0,100%,50%,0.3)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.3 --> <p style = color: hsla(0,100%,50%,0.4)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.4 --> <p style = color: hsla(0,100%,50%,0.5)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.5 --> <p style = color: hsla(0,100%,50%,0.6)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.6 --> <p style = color: hsla(0,100%,50%,0.7)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.7 --> <p style = color: hsla(0,100%,50%,0.8)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.8 --> <p style = color: hsla(0,100%,50%,0.9)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.9 -->
Обзор автомобилей 2008 года.
2. Второй способ задания нужноо цвета — это прописать цвет его шестнадцатеричным значением в палитре RBG в виде: #RRBBGG, где RR — красный цвет (red), BB — синий (blue) и GG — зеленый (green). Чем выше значение одной из компонент, тем она более интенсивна (насыщена).
Оттенки серого получаются при задании одинаковых значений для всех трех компонент. Каждая компонента может варьироваться от 0 до FF (255), т.е. всего можно получить 256х256х256=16777216 цветов. При указании цвета в шестнадцатеричным значением обязательно ставится знак: # . Полностью код будет выглядеть вот так:
|
<p><font color=»#FF0000″> Текст красного цвета </font></p> |
Записи вида:
|
<p><font color=»red»> Текст красного цвета </font></p> <p><font color=»#FF0000″> Текст красного цвета </font></p> |
равнозначны и отображаться браузерами будут совершенно одинаково.
Для нашей web-странички, я например шрифт заголовка выделил красным цветом «red», а текст на статьи задал темно-синим, прописав внутри каждого абзаца (p) таким образом:
|
<p><font color=»#000080″>Текст абзаца </font></p> |
Как изменить цвет текста в HTML с использованием CSS?
Для изменения цвета текста для определённого абзаца или слова можно присвоить ему класс, а затем в CSS файле задать для этого класса свойство color.
Выглядеть это будет так:
HTML
CSS
Вместо color-text вы можете указать свой класс.
Если вы не хотите лезть в CSS файл чтобы внести изменения, то можно дописать CSS стили прямо в HTML коде станицы, воспользовавшись тегом <style>.
Для этого:
- 1.Находи вверху HTML страницы тег </head>. Если ваш сайт работает на CMS, то этот фрагмент кода находится в одном из файлов шаблона. Например: header.php, head.php или что-то наподобие этого в зависимости от CMS.
- 2.Перед строкой </head> добавляем теги <style>…</style>.
- 3.Внутри этих тегов задаём те CSS свойства, которые нам нужны. В данном случае color:
Этот способ подходит если вам нужно изменить цвет сразу для нескольких элементов на сайте.
Если же такой элемент один, то можно задать или изменить цвет текста прямо в HTML коде.
RGBA цвета
RGBA является более современным методом задания цвета, где:
- R означает Red (красный)
- G означает Green (зеленый)
- B означает Blue (синий)
- A означает Alpha (степень смешивания с фоном)
Этот метод отличается от RGB тем, что он добавляет альфа-канал, который позволяет задать уровень прозрачности со значениями от до 1, где:
- — цвет невидимый.
- 1 — цвет непрозрачный.
<p style = color: rgba(255, 0, 0, 0.1)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.1 --> <p style = color: rgba(255, 0, 0, 0.2)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.2 --> <p style = color: rgba(255, 0, 0, 0.3)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.3 --> <p style = color: rgba(255, 0, 0, 0.4)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.4 --> <p style = color: rgba(255, 0, 0, 0.5)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.5 --> <p style = color: rgba(255, 0, 0, 0.6)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.6 --> <p style = color: rgba(255, 0, 0, 0.7)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.7 --> <p style = color: rgba(255, 0, 0, 0.8)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.8 --> <p style = color: rgba(255, 0, 0, 0.9)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.9 -->
Ways to Define Color
Name
The color name depicts the specific name for the HTML color. There are 140 color names supported in CSS, and you can use any of them for your elements. For example, you can simply use to define HTML red:
red
Example Copy
Pros
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
Main Features
- Nanodegree programs
- Suitable for enterprises
- Paid certificates of completion
100% FREE Pros
- Professional service
- Flexible timetables
- A variety of features to choose from
Main Features
- Professional certificates of completion
- University-level courses
- Multiple Online degree programs
100% FREE Pros
- Great user experience
- Offers quality content
- Very transparent with their pricing
Main Features
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
100% FREE
RGB and RGBA Values
The RGB value defines HTML color by mixing red, green, and blue values. The first number describes the red color input, the second – the green color input, and the third one – the blue color input.
The value of each color can vary from 0 to 255. For example, to get the same HTML red you saw in previous section, we would have to use :
RGB(255,0,17)
Example Copy
While RGBA values are very similar, they have one more value in the mix. The additional fourth value A stands for alpha and represents the opacity. It can be defined in a number from 0 (not transparent) to 1 (completely transparent):
Example Copy
HEX Value
HEX color value works pretty similarly to RGB but looks different. When you define HEX, the code contains both numbers from 0 to 9 and letters from A to F to describe the intensity of the color. The first two symbols determine red intensity, the two in the middle — green intensity, and the last two — blue intensity.
For example, to get a simple HTML blue, we would use the code :
#0000fe
Example Copy
HSL and HSLA Values
In HTML, colors can also be defined in HSL values. HSL stands for hue, saturation and lightness:
- Hue is defined in degrees from 0 to 360. On a color wheel, red is around 0/360, green is at 120 and blue is at 240.
- Saturation is defined in percentages from 0 (black and white) to 100 (full color).
- Lightness is defined in percentages from 0 (black) to 100 (white).
For example, to color the background in HTML blue, you could use :
hsl(240, 100%, 50%)
Example Copy
Just like in RGBA, the fourth value A in HSLA values stands for alpha and represents the opacity which defined in a number from 0 to 1:
Example Copy
Задаем цвет фона web-страницы
Так же как и цвет текста Мы можем изменить и цвет фона нашей страницы.
По умолчанию фон web-страницы всегда задается белый цветом (white или #FFFFFF), но даже если Вы хотите оставить фон страницы белым, его всеравно рекомендуется прописать, потому что не всегда браузеры корректно отображают значения по умолчанию. Делается это через атрибут: bgcolor. Цвет фона на web-странице прописывается внутри тега: body , т.е запись будет выглядеть так:
|
< body bgcolor=»#FFDEAD»> |
Посмотреть на то, что у нас получилось можно здесь. Если Вам что-то не понятно можно открыть HTML код страницы. В браузере IE это делается через меню: Вид > Просмотр HTML кода, в браузере Opera это меню: Вид > Исходный текст.
В разделе Статьи Вы найдете названия основных цветов и их значения в палитре RBG. Попробуйте применить разные цвета теста, заголовков, фона, но помните: цвет текста и фон страницы выбираются по желанию дизайнера, но нужно учитывать и тот факт, что от них зависит визуальное восприятие всего сайта. Не стремитесь все затемнить, текст удобно читать, если его хорошо видно.
Всего Вам доброго.
Обновлено: 06.10.2014 г.
Просмотров: 31958
Я пробовал изменять цвет фона, и у меня не получается! Как изменить цвет фона?
внимательно проверьте код
Я пробовал изменять цвет фона, и у меня не получается! Как изменить цвет фона?
Вова вам же сказали: <body bgcolor=»#FFDEAD»>
Прикольно,всего вам самого хорошего.
там пробел убрать надо просто..
если цвет задается 16-ричным кодом, то код записывается только через диес (#), если же цвет задается словом, то только в кавычках. Т.О. <body bgcolor=#FFFFFF> не верно: <body bgcolor=»WHITE»> или
ой, пардон, там ошибка:
Т.О. <body bgcolor=»#FFFFFF»> не верно,верно: <body bgcolor=»WHITE»> или <body bgcolor=#FFFFFF>
а как сделатьфон рисунком?
Как сделать фон из рисунка посмотрите здесь:
http://www.luksweb.ru/view_post.php?id=29
скажите а между допустим: <p> <strong> <font color=»red»> Нынешний год </font> </strong> — <em> пора обновления </em> обязательно ставить пробелы или можно без них: <p><strong><font color=»red»>Нынешний год</font></strong>-<em>пора обновления</em>
непонятно нужны ковычки или нет «#FFFFFF» в этом примере <body bgcolor=»#FFFFFF»>
Всё понятно, благодарю.
Спасиба очень помогли…
<h2><font color=»red»> Обзор автомобилей 2008 года. </font></h2>
Не получается изменить цвет =(
<font color=»red»>Красный</font>
Я хочу в Мозилле сделать сейчас текст и фон полностью Цветным и всю страницу цвете!Прокомментировал Вадим Галялетдинов
Как изменить цвет выбранного изображения¶
Вы можете изменить цвет выделенного изображения с помощью псевдоэлемента ::selection. Смотрите пример сами:
Пример
Попробуйте сами!
Представьте, что у вас есть 4 параграфа, и вы хотите применить разные цвета для каждого из них по отдельности.
В таком случае необходимо изменить цвет выделения для разных параграфов или разных разделов страницы.
Пример
Попробуйте сами!
Селекторы не могут быть объединены ни в коем случае. Если вы объедините несколько селекторов, они не будут работать, так как браузеры игнорируют все селекторы, когда какая-нибудь часть непонятна или недействительна.
Changing the font colour
To change the colours of the text on a page for the entire page, you can define it in the tag. I have a complete tutorial on body here.
To change the colours of just a small block of text or an individual word, you have to use the old tag again. The format is
Colours in HTML have to be defined as », which are 6-digit codes representing the amount of red, green and blue (RGB) in the colour. To see a full chart of these codes so you can pick out the ones you like, see the HEX colour chart. Newer browsers allow you to give the color name instead, but your choices are more limited. To see a chart of these colours, look at this chart.
Keep Learning // Special Characters → Go! Go!
Other Text Articles //
Headings and Font Size ·
Font and Colour ·
Special Characters ·
Internal Links ·
Lists ·
Text Formatting List ·
Marquees
What’s Related //
<body> Attributes ·
CSS and Text ·
Named Colours ·
Non-dithering Colours ·
Writing for the Web
Homepage · Full Index · Section Index
Атрибут style
Атрибут style используется для стилизации элементов непосредственно в HTML коде. Цель атрибута style заключается в предоставлении простого способа изменения внешнего вида практически любого HTML элемента.
Примечание: тут мы рассматриваем атрибут для формирования общего представления об использовании CSS стилей для оформления веб-страниц. Подробнее о возможностях CSS вы можете почитать в CSS самоучителе.
Код примера познакомит вас с новым способом форматирования документа:
<html>
<body style="background-color:ivory;">
<h1>Посмотрите на цвета и стили</h1>
<p style="font-family:verdana;color:red;">
Этот текст написан красным цветов с помощью шрифта Verdana.
</p>
<p style="font-family:times;color:green;">
Этот текст написан зеленым цветом с помощью шрифта Times.
</p>
<p style="font-size:30px;">Этот текст имеет размер 30 пикселей.</p>
</body>
</html>
Попробовать »
Внимательно посмотрите на пример, с помощью атрибута мы задаем CSS стиль внутри HTML-элементов, такой способ задания стилей называется встроенным стилем. применяется только к элементу, в котором он был определён, и к его дочерним элементам (если применённые CSS свойства наследуются).
Примечание: посмотреть наследуется ли значение применённого свойства дочерними элементами или нет, можно в CSS справочнике на странице с данным свойством.
Цвет текста
А можно ли сделать текст цветным? Да ради бога! Для этого существует атрибут <color>. Вот с этим колером мы сейчас и поработаем. Вообще, цвета можно задавать двумя разными способами. Первый — можно использовать словесное обозначение цвета: blue, black, yellow, green, white и т.д. А можно — и их цифровое обозначение, только не забывайте перед цифровым эквивалентом ставить «решетку» — «#»! Так, цвет blue (голубой) имеет свое числовое значение #0000ff, цвет red (красный) — значение #FF0000 и так далее. То есть если мы напишем:
или
Обе эти записи идентичны. Приведу значения некоторых цветов:
Таблица цветов
| Название цвета | Color | Код | Цвет |
|---|---|---|---|
| aква | Aqua | #00FFFF | |
| Черный | black | #000000 | |
| Синий | blue | #0000FF | |
| Фуксия | fuchsia | #FF00FF | |
| Серый | gray | #808080 | |
| Зеленый | green | #008000 | |
| Известь | lime | #00FF00 | |
| Темно-бордовый | maroon | #800000 | |
| Темно-синий | navy | #000080 | |
| Оливковый | olive | #808000 | |
| фиолетовый | purple | #800080 | |
| Красный | red | #FF0000 | |
| Серебряный | silver | #C0C0C0 | |
| Чирок | teal | #008080 | |
| Белый | white | #FFFFFF | |
| желтый | yellow | #FFFF00 |
Ну а теперь от слов к практике?
Возьмем то же самое стихотворение, и поставим перед собой задачу:
- Заголовок напишем шрифтом Comic Sans MS, дадим крупный размер в 7 пунктов, разместим по центру и зальем красным цветом.
- Каждый куплет стихотворения раскрасим в свой цвет: первый — в синий, второй — в зеленый, ну а третий — в желтый. Причем, цвет первого куплета дадим в простом названии blue, второй и третий — в числовом эквиваленте зеленого и желтого цветов.
- Первый куплет напишем шрифтом Impact
- Размер второго куплета дадим размером в абсолютном размере 4 пункта
- Размер третьего куплета дадим в относительном размере +1 пункт
- Ну и автора задвинем в тег ADDRESS
Задача ясна? Ну тогда поехали!
Открываем наш незаменимый шаблон shablon.html и вставляем туда то, что нам надо:
Листинг 10. Стихотворение
СТИХОТВОРЕНИЕ
Это не сложно
Это не важно
Просто отважно
В небо шагнуть
И осторожно
Там, где возможно
Темного облака
Край отогнуть.
Стертые лица,
Забытые профили
И многоточий упрямая нить. Свет разливается
И проявляется
То, что уже никогда не забыть
Свет разливается
И проявляется
То, что уже никогда не забыть.
Сохраним наш файл под именем «text4.html» и затем откроем этот файл в окне браузера:
Вот они, цвета радуги!
Прошу прощенья за дизайн. Вряд ли он может выдержать даже самую мягкую критику. Но, согласитесь, зато сразу стало многое понятно. Не только как правильно форматировать текст, но и то, что не нужно смешивать в одном тексте разные стили, размеры и цвета.
Вот и подошел к концу наш очередной урок. Он был не таким уж и легким, согласитесь! Но зато мы теперь знаем самое необходимое, чтобы красиво оформить любой текст.
А в следующем уроке мы научимся работать с фоном. И это будет последнее, что необходимо для нашей первой странички.
Изменяем цвет в HTML коде при помощи атрибута style
Для этого добавляем к тегу для которого нам нужно изменить цвет текста атрибут style.
PHP
<p style=”color:red;”>Пример</p>
| 1 | <pstyle=”colorred;”>Пример<p> |
Здесь же при необходимости через ; вы можете задать и другие CSS свойства, например, размер шрифта, жирность и так далее.
PHP
<p style=”color:red; font-size:20px; font-weight:bolder;”>Пример</p>
| 1 | <pstyle=”colorred;font-size20px;font-weightbolder;”>Пример<p> |
Лично я обычно использую вариант с заданием стилей в CSS файле, но если вам нужно изменить цвет текста для какого то одного-двух элементов, то не обязательно присваивать им класс и потом открывать CSS файл и там дописывать слили. Проще это сделать прямо в HTML при помощи тега <font> или артибута style.
Так же вы должны знать, что есть такое понятие как приоритет стилей. Так вот когда вы задаёте цвет текста или другие стили в html при помощи атрибута style, то у этих стилей приоритет будет выше чем если вы их зададите в CSS файле (при условии что там не использовалось правило !important)
Чтобы изменить цвет текста отдельного слова, фразы или буквы мы можем обернуть их в тег span и задать ему нужный цвет.
Например:
PHP
<p>Пример <span style=”color:#2F73B6;”> текста</span></p>
| 1 | <p>Пример<span style=”color#2F73B6;”> текста</span></p> |
В итог получится вот так:
Пример текста
Цветовые модели HSL и HSLA
К еще одному методу задания цвета в CSS относится система HSL, её можно значительно реже встретить на страницах сайтов. HSL это аббревиатура, которая объединяет в себе первые буквы трех следующих признаков:
- Hue — тон.
- Saturation — насыщенность.
- Lightness — осветленность.
Система HSL использует следующий синтаксис:
hsl(от 0° до 360°, от до 100%, от 0% до 100%), где:
Первое значение – это тон, который указывается в градусах от 0° до 360°. Градусы соответствуют цвету на круге оттенков (изображенном ниже):
Рис. 48 Круг оттенков, применяемый при задании цвета с использованием HSL.
Красный цвет соответствует значениям — 0° и 360°, желтый — 60°, зеленый — 120°, голубой — 180°, синий — 240°, фиолетовый — 300° и так далее.
Второе значение (насыщенность) — определяет, насколько чистым является цвет и указывается в процентах от 0% до 100%, где 0% — полное отсутствие насыщенности (тусклый серый), а 100% это чистый и яркий цвет.
Третье значение (осветленность) — указывается в процентах от 0% (полностью черный) до 100% (полностью белый), среднее значение 50% даёт чистый цвет.
Давайте рассмотрим пример задания цвета с помощью системы HSL на примере красного цвета (значение тона 0°):
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Применение HSL в CSS</title>
<style>
div {
display : inline-block; /* выстраиваем элементы <div> в линейку, как строчные элементы */
width : 60px; /* устанавливаем ширину для всех <div> элементов */
height : 60px; /* устанавливаем высоту для всех <div> элементов */
}
.test1 {
background-color : hsl(0, 10%, 50%); /* 0 – соответствует красному цвету, 10% - насыщенность, 50%- осветленность (соответствует чистому цвету) */
}
… /* и так до десятого блока с шагом 10% (увеличение насыщенности) */
.test10 {
background-color : hsl(0, 100%, 50%); /* насыщенность 100% (чистый и яркий цвет) */
}
.test11 {
background-color : hsl(0, 100%, 10%); /* 0 – соответствует красному цвету, 100% - насыщенность (чистый и яркий цвет), 10%- осветленность */
}
… /* и так до двадцатого блока с шагом 10% (увеличение осветленности)*/
.test20 {
background-color : hsl(0, 100%, 100%); /* как вы можете заметить осветленность 100% дает белый цвет */
}
</style>
</head>
<body>
<div class = "test1"> hsl(0, 10%, 50%)</div>
…/* и так до десятого блока */
<div class = "test10"> hsl(0, 100%, 50%)</div>
<br>/* переводим строку */
<div class = "test11" style = "color:white">hsl(0, 100%, 10%)</div> /* добавляем внутренний стиль для элемента (цвет текста белый) */
…/* и так до двадцатого блока */
<div class = "test10"> hsl(0, 100%, 100%)</div>
</body>
</html>
Результат нашего примера:
Рис. 49 Пример задания цвета с помощью HSL в CSS.
По аналогии с RGB, HSL поддерживает прозрачность с помощью добавления альфа канала, который задает уровень прозрачности со значениями от до 1 (от невидимого до полностью непрозрачного).
Данный формат задания цвета в CSS называется HSLA, давайте рассмотрим его применение на примере фиолетового цвета (значение тона 300°):
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Применение HSLA в CSS</title>
<style>
div {
display : inline-block; /* выстраиваем элементы <div> в линейку, как строчные элементы */
width : 60px; /* устанавливаем ширину для всех <div> элементов */
height : 60px; /* устанавливаем высоту для всех <div> элементов */
}
.test1 {
background-color : hsla(300, 100%, 50%,.1); /* фиолетовый цвет со 100% насыщенностью и 50% осветлённостью с добавлением альфа-канала, который задает уровень прозрачности */
}
…/* и так до десятого блока с шагом 0.1 */
.test10 {
background-color : hsla(300, 100%, 50%, 1); /* альфа-канал полностью непрозрачный */
}
</style>
</head>
<body>
<div class = "test1">hsla(300, 100%, 50%,.1)</div>
…
<div class = "test10">hsla(300, 100%, 50%, 1)</div>
</body>
</html>
Результат нашего примера:
Рис. 50 Пример задания цвета с помощью HSLA в CSS.
