Содержание
- 1 По названию
- 2 Оттенки серого
- 3 Безопасная палитра Netscape
- 4 Имена цветов в HTML
- 5 Названия цветов в X11
- 6 Web Safe цвета?
- 7 CSS Справка
- 8 CSS свойства
- 9 HSL
- 10 Как выбрать идеальный цвет
- 11 Свойство CSS Color
- 12 По шестнадцатеричному значению
- 13 CSS свойства
- 14 Тег html изменения цвета текста через атрибут style
По названию
Браузеры поддерживают некоторые цвета по их названию. В табл. 1 приведены названия, шестнадцатеричный код, значения в формате RGB, HSL и описание.
| Имя | Цвет | Код | 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%) | Фиолетовый |
Оттенки серого
Серые цвета отображаются с помощью равное количество энергии для всех источников света. Для того, чтобы сделать его более легким для вас, чтобы выбрать правильный серый цвет мы составили таблицу оттенков серого для Вас:
| оттенков серого цвета | HEX | RGB |
|---|---|---|
| # 000000 | RGB (0,0,0) | |
| # 080808 | RGB (8,8,8) | |
| # 101010 | RGB (16,16,16) | |
| # 181818 | RGB (24,24,24) | |
| # 202020 | RGB (32,32,32) | |
| # 282828 | RGB (40,40,40) | |
| # 303030 | RGB (48,48,48) | |
| # 383838 | RGB (56,56,56) | |
| # 404040 | RGB (64,64,64) | |
| # 484848 | RGB (72,72,72) | |
| # 505050 | RGB (80,80,80) | |
| # 585858 | RGB (88,88,88) | |
| # 606060 | RGB (96,96,96) | |
| # 686868 | RGB (104104104) | |
| # 707070 | RGB (112112112) | |
| # 787878 | RGB (120120120) | |
| # 808080 | RGB (128128128) | |
| # 888888 | RGB (136136136) | |
| # 909090 | RGB (144144144) | |
| # 989898 | RGB (152152152) | |
| # A0A0A0 | RGB (160160160) | |
| # A8A8A8 | RGB (168168168) | |
| # b0b0b0 | RGB (176176176) | |
| # B8B8B8 | RGB (184184184) | |
| # C0C0C0 | RGB (192192192) | |
| # C8C8C8 | RGB (200200200) | |
| # D0D0D0 | RGB (208208208) | |
| # D8D8D8 | RGB (216216216) | |
| # E0E0E0 | RGB (224224224) | |
| # E8E8E8 | RGB (232232232) | |
| # F0F0F0 | RGB (240240240) | |
| # F8F8F8 | RGB (248248248) | |
| #FFFFFF | RGB (255,255,255) |
Безопасная палитра Netscape
В эпоху 256-цветных видеокарт широко применялась так называемая «безопасная палитра Netscape» — однородная палитра 6×6×6. В truecolor у безопасных цветов все три компонента — R, G и B — равняются , , , , и . Браузер Netscape гарантировал, что эти цвета будут отображены без приближения или растрирования.
Другими словами, 216 цветов стандартной 16-цветовой палитры и палитры 6×6×6 были наиболее предпочтительными для цвета изображения и фона.
К концу 90-х годов, с полным исчезновением 8-битного цвета с рабочих столов ОС, это требование исчезло. Тем не менее, Adobe Photoshop и поныне оснащён опцией «Только Web-цвета» (англ. Only Web Colors).
Имена цветов в HTML
В спецификации HTML 4.01 определены следующие 16 ключевых цветов (в данном контексте можно использовать как заглавные, так и строчные буквы):
| Цвет | Код | Цвет | Код | Цвет | Код | Цвет | Код |
|---|---|---|---|---|---|---|---|
| aqua (морская волна, cyan) | #00ffff | black (чёрный) | #000000 | blue (синий) | #0000ff | fuchsia (фуксия, magenta) | #ff00ff |
| gray (серый) | #808080 | green (зелёный) | #008000 | lime (лайм, lightgreen) | #00ff00 | maroon (тёмно-бордовый) | #800000 |
| navy (тёмно-синий) | #000080 | olive (оливковый) | #808000 | purple (пурпурный) | #800080 | red (красный) | #ff0000 |
| silver (серебряный) | #c0c0c0 | teal (сине-зелёный) | #008080 | white (белый) | #ffffff | yellow (жёлтый) | #ffff00 |
В спецификации используются английские названия цветов.
Названия цветов в X11
Основная статья: Список цветов в X11
|
|
|
Слово «Gray» в названиях серых цветов не нужно писать как «Grey», так как ряд браузеров интерпретируют это как «Green»
Web Safe цвета?
Много лет назад, когда компьютеры поддерживаются максимум 256 различных цветов, список 216 «Web Safe Colors» был предложен в качестве Web стандарта (40 фиксированных оговорку цвета системы).
Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов htmlЭто не важно сейчас, так как большинство компьютеров может отображать миллионы разных цветов. Это 216 шестнадцатеричные значения кросс-браузерный цветовая палитра была создана, чтобы гарантировать, что все компьютеры будут корректно отображать цвета при работе 256 цветовой палитры в:
Это 216 шестнадцатеричные значения кросс-браузерный цветовая палитра была создана, чтобы гарантировать, что все компьютеры будут корректно отображать цвета при работе 256 цветовой палитры в:
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366cc | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| cc0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | cc33ff |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | ff9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
❮ Предыдущий Следующий Ссылка ❯
CSS Справка
CSS СправкаCSS СелекторыCSS функцииCSS Ссылка AuralCSS Веб-Safe шрифтыCSS AnimatableCSS ЕдиницыCSS PX-EM конвертерCSS ЦветаCSS цвет ЗначенияCSS3 Поддержка браузеров
CSS свойства
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-shadow
box-sizing
caption-side
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
hanging-punctuation
height
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
nav-down
nav-index
nav-left
nav-right
nav-up
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
position
quotes
resize
right
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
vertical-align
visibility
Палитра цветов для сайтаwhite-space
width
word-break
word-spacing
word-wrap
z-index
HSL
Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359.
Рис. 1. Цветовой круг
Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.
Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.
Как выбрать идеальный цвет
Если верить исследованиям, большинство людей принимают подсознательное решение о покупке продукта в течение 90 секунд. Причем это решение чаще всего основывается на восприятии цветов, которые видит человек. Наверняка вы заметили, что большинство luxury-брендов делают ставку на черный, а за экомарками прочно закрепился зеленый и его оттенки.
Чтобы научиться подбирать красивые сочетания оттенков и улавливать гармонию, придется потратить немало времени на самообучение. Если времени на это нет, а к работе нужно приступать, сосредоточьтесь на основах.
Изучите фирменные цвета конкурентов или обратите внимание на оттенки, используемые в смежной отрасли. Попросите у клиента информацию о рекламных продуктах компании — если повезет, вам выдадут брендбук и вопрос о подборе цвета отпадет
Попросите у клиента информацию о рекламных продуктах компании — если повезет, вам выдадут брендбук и вопрос о подборе цвета отпадет.
Свойство CSS Color
Свойства color воздействует не на сам элемент (блок), а на шрифт внутри него. Цвет элемента обычно регулируется с помощью свойств background-color, border-color, а также сокращенных версий свойств background и border. Также можно использовать свойство box-shadow, которое отвечает за тень элемента.
Свойство background-color, примененное к элементу, отвечает за его содержимое, поля и границы. Но есть способы оформить поля и контент разными цветами.
Объявление цвета
Есть три способа определения цвета текста CSS: RGB-значение, HEX и название:
/* Давайте подробнее рассмотрим все три способа. */
.red-rgb {
background-color: rgb(255, 0, 0);
}
.red-hex {
background-color: #ff0000;
}
.red-name {
background-color: red;
}
Второй по счету пример (HEX-значение) наиболее распространен. Но HEX-значение покажется абсолютно бессмысленным, если вы не знакомы с принципом работы модели RGB.
RGB-значения
На цветных экранах устройств каждый пиксель делится на три субпикселя: красный, зеленый и синий — так называемые “первичные цвета света”. Комбинация этих трех цветов с различной интенсивностью позволяет получить любой оттенок, который способен распознать человеческий глаз и формирует таблицу цветов CSS.
Модели дисплеев различаются между собой по диапазону интенсивности излучения, который могут воспроизвести субпиксели. Самый простой экран может иметь лишь две интенсивности (то есть, режимы «включено» и «выключено»), в то время как высокотехнологичные современные экраны способны предложить обширную градацию. Обычно в компьютерных мониторах используются шкала от до 255. Интенсивность каждого субпикселя может иметь значение до 256. А это значит, что значение каждого субпикселя можно хранить в виде 8-битного байта (28 = 256). Так как задействуется три цвета, то каждый из них представляется в 8 битах. Общее количество цветов превышает 16 млн. (2563 = 16,777,216).
Эту шкалу цветов можно задействовать, указывая значение каждого субпикселя следующим образом:
rgb(0, 128, 255)
В данном примере красный субпиксель выключен, зеленый используется наполовину, а синий — полностью включен. Такое объявление позволит нам получить следующий цвет:
все цвета включеныrgb255, 255, 255все цвета выключеныrgb0, 0, 0
RGB-цвета также можно указывать в процентном соотношении, используя десятичные числа, но такой способ не получил широкого распространения:
rgb (0.0, 50.0, 100.0)
HEX-значения
Аналогичный результат можно получить более простым — используя HEX-значение. Оно задается с использованием хэша (#) и 6 символов, разделенных на три пары:
#0080ff
Первая пара цвета в CSS отвечает за красный, вторая отвечает за зеленый, третья – за синий. В данном примере 00 означает, что красного не будет вообще. 80 указывает, что зеленый задействован наполовину, а ff означает полное включение синего цвета. То есть, мы получим тот же результат, что и при rgb (0, 128, 255).
Поначалу это может сбивать с толку, особенно если вы раньше никогда не работали с шестнадцатеричными числами. В привычной десятичной системе у каждого символа есть 10 значений от 0 до 9. В шестнадцатеричной – у каждого символа 16 возможных значений (0-9 и a-f). Это и позволяет указывать цвета от до 255 при помощи двух символов, = ff. В рамках шестнадцатеричной системы, белый цвет обозначается как #ffffff, а черный – #000000. HEX-значения наиболее часто используются для указания цветов в CSS.
Названия цветов в CSS
Последний способ указания цветов в CSS заключается в использовании предопределенных названий конкретных цветов. W3C регулярно обновляет таблицу цветов CSS. Например, вместо #000000 можно использовать название black.
На «заре» интернета эти названия позволяли использовать небольшой неофициальный набор “безопасных для веб” цветов, которые точно поддерживались всеми доступными на тот момент браузерами.
На сегодняшний день одно из главных преимуществ данного подхода заключается в том, что эти названия цветов гораздо проще запомнить. Например, слово lightblue (светло-голубой) запомнить гораздо проще, чем его эквиваленты: #add8e6 или rgb (173, 216, 230).
Данная публикация является переводом статьи «CSS Colors Reference» , подготовленная редакцией проекта.
По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трёх цветов — красный, зелёный и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зелёную, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.
CSS свойства
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-shadowbox-sizingcaption-sideclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weighthanging-punctuationheightjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthnav-downnav-indexnav-leftnav-rightnav-upopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidivertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapz-index
Тег html изменения цвета текста через атрибут style
Html атрибут style совместим абсолютно с любыми тегами: абзаца <p>; курсивного шрифта <em>; жирного шрифта <strong>; подчеркивания текста <u>; маркированного <ul> и нумерованного <ol> списков, и их составляющих <li>; таблицы <table> и составляющих <tr> и <td>.
Но помимо атрибута style, нам для изменения цвета текста необходимо знать html коды цветов, и в этом нам поможет специальная таблица html цветов с кодами 147 различных цветовых оттенков.
Переходим на сайт этой таблицы ColorScheme.Ru и сразу сохраняем в закладки своего браузера, если в дальнейшем собираетесь менять цвет текста в своих статьях на блоге.
А теперь давайте творить и вытворять. Начнем с абзаца, который мы не хотим видеть в стандартном черном цвете. Верстаем.
Изменение цвета текста абзаца <p>
В открытый тег абзаца <p> будем вставлять атрибут style и html код самого цвета, который нам нужен color: #FF0000 (я выбрал Red — красный). Для этого заходим на сайт ColorScheme.Ru и копируем код необходимого цвета:
Теперь собираем атрибут изменения цвета текста и вставляем в открытый тег абзаца:
<p style=»color: #FF0000″> (кавычки должны быть именно такого вида — » «, иначе цвет не поменяется)
Верстаем сам абзац:
<p style=»color: #FF0000»> Итак, у нас остался не оформленным раздел ”Рубрики”. По умолчанию на сайте он выглядит обычным списком. Что же можно сделать и как оформить рубрики, чтобы было приятно глазу посетителей, и они заметив этот раздел, переходили по рубрикам и на статьи, подольше находясь на блоге?</p>
Смотрим как будет выглядеть на блоге:
Итак, у нас остался не оформленным раздел ”Рубрики”. По умолчанию на сайте он выглядит обычным списком. Что же можно сделать и как оформить рубрики, чтобы было приятно глазу посетителей, и они заметив этот раздел, переходили по рубрикам и на статьи, подольше находясь на блоге?
Изменение цвета текста списков <ul> и <ol>
Верстаем, к примеру маркированный список, код необходимого цвета также берем в таблице html цветов:
<li>Специалист по контекстной рекламе</li>
<li>Дизайн и Photoshop</li>
<li>Копирайтинг</li>
<li>Видео монтаж</li>
<li>Вёрстка сайтов</li>
<li>Специалист по продвижению Вконтакте</li></ul>
На сайте будет в таком виде:
А на примере нумерованного списка изменим цвета строк:
<li style=»color: #006400″>Специалист по контекстной рекламе</li>
<li style=»color: #C71585″>Дизайн и Photoshop</li>
<li style=»color: #FFD700″>Копирайтинг</li>
<li style=»color: #FF4500″>Видео монтаж</li>
<li style=»color: #191970″>Вёрстка сайтов</li>
<li style=»color: #8B4513″>Специалист по продвижению Вконтакте</li></ol>
На сайте список будет отображаться таким образом:
Изменение цвета текста таблицы <table>
Верстаем таблицу с изменением цвета текста всей таблицы:
<table style=»color: #FF0000″><tr><td>ячейка 1</td>
<td>ячейка 2</td>
<td>ячейка 3</td></tr>
<tr><td>ячейка 4</td>
<td>ячейка 5</td>
<td>ячейка 6</td></tr>
<tr><td>ячейка 7</td>
<td>ячейка 8</td>
<td>ячейка 9</td></tr></table>
На блоге получаем таблицу в таком виде:
| ячейка 1 | ячейка 2 | ячейка 3 |
| ячейка 4 | ячейка 5 | ячейка 6 |
| ячейка 7 | ячейка 8 | ячейка 9 |
Теперь изменим цвет текста построчно:
<table><tr style=»color: #FF0000″><td>ячейка 1</td>
<td>ячейка 2</td>
<td>ячейка 3</td></tr>
<tr style=»color: #FFA500″><td>ячейка 4</td>
<td>ячейка 5</td>
<td>ячейка 6</td></tr>
<tr style=»color: #191970″><td>ячейка 7</td>
<td>ячейка 8</td>
<td>ячейка 9</td></tr></table>
И на сайте увидим такую таблицу:
| ячейка 1 | ячейка 2 | ячейка 3 |
| ячейка 4 | ячейка 5 | ячейка 6 |
| ячейка 7 | ячейка 8 | ячейка 9 |
В каждой ячейке таблицы, также можно изменить цвет текста:
<table><tr><td style=»color: #FF0000″>ячейка 1</td>
<td style=»color: #FFA500″>ячейка 2</td>
<td style=»color: #191970″>ячейка 3</td></tr></table>
На блоге увидим в таком варианте:
| ячейка 1 | ячейка 2 | ячейка 3 |
По такому же принципу меняется цвет текста в открытых тегах жирного, курсивного шрифта и подчеркивания текста.
Применяйте на своих блогах атрибут style для изменения цвета текста в своих публикациях, там, где это действительно необходимо.
Успехов вам и до новых встреч!
