Таблица цветов в html: Таблица html цветов

Leave a Comment / Html / By /

Таблица цветов HTML

Основные цвета HTML

Название цвета

Код HEX

Образец

WHITE

#FFFFFF

  

SILVER

#C0C0C0

  

GRAY

#808080

  

BLACK

#000000

  

RED

#FF0000

  

MAROON

#800000

  

YELLOW

#FFFF00

  

OLIVE

#808000

  

LIME

#00FF00

  

GREEN

#008000

  

AQUA

#00FFFF

  

TEAL

#008080

  

BLUE

#0000FF

  

NAVY

#000080

  

FUCHSIA

#FF00FF

  

PURPLE

#800080

  

Расширенная таблица цветов HTML

Синие цвета

Aqua(Cyan)

#00FFFF

  

LightCyan

#E0FFFF

  

PaleTurquoise

#AFEEEE

  

Aquamarine

#7FFFD4

  

Turquoise

#40E0D0

  

MediumTurquoise

#48D1CC

  

DarkTurquoise

#00CED1

  

CadetBlue

#5F9EA0

  

SteelBlue

#4682B4

  

LightSteelBlue

#B0C4DE

  

PowderBlue

#B0E0E6

  

LightBlue

#ADD8E6

  

SkyBlue

#87CEEB

  

LightSkyBlue

#87CEFA

  

DeepSkyBlue

#00BFFF

  

DodgerBlue

#1E90FF

  

CornflowerBlue

#6495ED

  

MediumSlateBlue

#7B68EE

  

RoyalBlue

#4169E1

  

Blue

#0000FF

  

MediumBlue

#0000CD

  

DarkBlue

#00008B

  

Navy

#000080

  

MidnightBlue

#191970

  
Зеленые цвета

GreenYellow

#ADFF2F
 

Chartreuse

#7FFF00

  

LawnGreen

#7CFC00

  

Lime

#00FF00

  

LimeGreen

#32CD32

  

PaleGreen

#98FB98

  

LightGreen

#90EE90

  

MediumSpringGreen

#00FA9A

  

SpringGreen

#00FF7F

  

MediumSeaGreen

#3CB371

  

SeaGreen

#2E8B57

  

ForestGreen

#228B22

  

Green

#008000

  

DarkGreen

#006400

  

YellowGreen

#9ACD32

  

OliveDrab

#6B8E23

  

Olive

#808000

  

DarkOliveGreen

#556B2F

  

MediumAquamarine

#66CDAA

  

DarkSeaGreen

#8FBC8F

  

LightSeaGreen

#20B2AA

  

DarkCyan

#008B8B

  

Teal

#008080

  
Красные цвета

IndianRed

#CD5C5C

  

LightCoral

#F08080

  

Salmon

#FA8072

  

DarkSalmon

#E9967A

  

LightSalmon

#FFA07A

  

Crimson

#DC143C

  

Red

#FF0000

  

FireBrick

#B22222

  

DarkRed

#8B0000

  
Розовые цвета

Pink

#FFC0CB

  

LightPink

#FFB6C1

  

HotPink

#FF69B4

  

DeepPink

#FF1493

  

MediumVioletRed

#C71585

  

PaleVioletRed

#DB7093

  
Оранжевые цвета

Coral

#FF7F50

  

Tomato

#FF6347

  

OrangeRed

#FF4500

  

DarkOrange

#FF8C00

  

Orange

#FFA500

  
Коричневые цвета

Cornsilk

#FFF8DC

  

BlanchedAlmond

#FFEBCD

  

Bisque

#FFE4C4

  

NavajoWhite

#FFDEAD

  

Wheat

#F5DEB3

  

BurlyWood

#DEB887

  

Tan

#D2B48C

  

RosyBrown

#BC8F8F

  

SandyBrown

#F4A460

  

Goldenrod

#DAA520

  

DarkGoldenrod

#B8860B

  

Peru

#CD853F

  

Chocolate

#D2691E

  

SaddleBrown

#8B4513

  

Sienna

#A0522D

  

Brown

#A52A2A

  

Maroon

#800000

  
Желтые цвета

Gold

#FFD700

  

Yellow

#FFFF00

  

LightYellow

#FFFFE0

  

LemonChiffon

#FFFACD

  

LightGoldenrodYellow

#FAFAD2

  

PapayaWhip

#FFEFD5
 

Moccasin

#FFE4B5

  

PeachPuff

#FFDAB9

  

PaleGoldenrod

#EEE8AA

  

Khaki

#F0E68C

  

DarkKhaki

#BDB76B

  
Фиолетовые цвета

Lavender

#E6E6FA

  

Thistle

#D8BFD8

  

Plum

#DDA0DD

  

Violet

#EE82EE

  

Orchid

#DA70D6

  

Fuchsia(Magenta)

#FF00FF

  

MediumOrchid

#BA55D3

  

MediumPurple

#9370DB

  

BlueViolet

#8A2BE2

  

DarkViolet

#9400D3

  

DarkOrchid

#9932CC

  

DarkMagenta

#8B008B

  

Purple

#800080

  

Indigo

#4B0082

  

SlateBlue

#6A5ACD

  

DarkSlateBlue

#483D8B

  
Белые цвета

White

#FFFFFF

  

Snow

#FFFAFA

  

Honeydew

#F0FFF0

  

MintCream

#F5FFFA

  

Azure

#F0FFFF

  

AliceBlue

#F0F8FF

  

GhostWhite

#F8F8FF

  

WhiteSmoke

#F5F5F5

  

Seashell

#FFF5EE

  

Beige

#F5F5DC

  

OldLace

#FDF5E6

  

FloralWhite

#FFFAF0

  

Ivory

#FFFFF0

  

AntiqueWhite

#FAEBD7

  

Linen

#FAF0E6

  

LavenderBlush

#FFF0F5

  

MistyRose

#FFE4E1

  
Серые цвета

Gainsboro

#DCDCDC

  

LightGray

#D3D3D3

  

Silver

#C0C0C0

  

DarkGray

#A9A9A9

  

Gray

#808080

  

DimGray

#696969

  

LightSlateGray

#778899

  

SlateGray

#708090

  

DarkSlateGray

#2F4F4F

  

Black

#000000

  

Таблица основных цветов CSS

Цвета, выводимые на экране монитора, меняются в зависимости от интенсивности свечения рабочих точек поверхности дисплея, каждая из которых, делает возможным отображение трёх основных каналов: red-красный, green-зеленый и blue-синий.

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

Такой метод передачи цвета называется RGB-способ.

Один канал позволяет передать от 0 до 256 оттенков.

Цвета задаются в шестнадцатеричном коде следующими цифрами:

0 1 2 3 4 5 6 7 8 9 A B C D E F

Цифры с 10 до 15 заменены на латинские буквы.

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

white    #ffffff; белый
black    #000000; чёрный
grey    #bebebe; серый
red    #ff0000; красный
orange    #ffa500; оранжевый
yellow    #ffff00; жёлтый
green    #00ff00; зелёный
cyan    #00ffff; голубой
blue    #0000ff; синий
purple    #a020f0; пурпурный
cream    #fffbf0; кремовый
gold    #ffd700; золотой
chocolate    #d2691e; шоколадный
brown    #a52a2a; коричневый
cornflower blue    #6495ed; васильковый
pink    #ffc0cb; розовый
lime лайм 

HTML

<div>
  white
</div>
  
<div>
  blue
</div>

<div>
  red
</div>



CSS

. box{
    width: 250px;
    font-size: 24px;
    font-weight: bold;
    line-height: 50px;
    margin: 0px auto;
    padding: 3px 20px;
    text-align: center;
}
.red{
    color: #fff;
    background-color: #d52b1e;
}
.blue{
    color: #fff;
    background-color: #0039a6;
}
.white{
    color: #818181;
    background-color: #fff;
}

Цвет таблицы HTML

Эта страница содержит цветовой код таблицы HTML. Другими словами, HTML-коды для указания или изменения цвета ваших таблиц на вашей веб-странице.

Цвет таблицы HTML задается с помощью каскадных таблиц стилей (CSS).

Изменение цвета фона таблицы

Чтобы изменить цвет фона таблицы, используйте свойство CSS background-color .

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

Чтобы сделать это, см. Цвет фона таблицы HTML.

<голова>Пример <стиль> .myTable1 { ширина:100%; выравнивание текста: по левому краю; цвет фона: золото; } <тело> <таблица>ЗаголовокЗаголовокЯчейка таблицыЯчейка таблицыЯчейка таблицыЯчейка таблицыЯчейка таблицыЯчейка таблицы

Изменить цвет текста в таблице

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

<голова>Пример <стиль> .myTable2 { ширина:100%; выравнивание текста: по левому краю; цвет фона: оливковый; белый цвет; } <тело> <таблица>ЗаголовокЗаголовокЯчейка таблицыЯчейка таблицыЯчейка таблицыЯчейка таблицыЯчейка таблицыЯчейка таблицы

Цвет границы таблицы

Чтобы изменить цвет границы, необходимо использовать одно из свойств границы CSS. В большинстве случаев лучше всего использовать свойство border . Вам необходимо предоставить этому свойству 3 значения: значение ширины границы, значение стиля границы (сплошная, пунктирная и т. д.) и еще одно значение цвета границы.

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

При этом необходимо учитывать несколько соображений. См. Граница таблицы HTML для более подробного объяснения границ таблицы.

<голова>Пример <стиль> .myTable3 { ширина:100%; выравнивание текста: по левому краю; цвет фона: золото; граница: 10 пикселей сплошной желто-зеленый; радиус границы: 5px; } <тело> <таблица>ЗаголовокЗаголовокЯчейка таблицыЯчейка таблицыЯчейка таблицыЯчейка таблицыЯчейка таблицыЯчейка таблицы

О цветах HTML

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

  • Цвет HTML
  • Палитра цветов HTML
  • Имена цветов HTML
  • Шестнадцатеричные коды цветов

Выделение HTML-таблицы альтернативными цветами строк с помощью селектора CSS

Введение

 

Иногда нам приходится выделять чередующиеся строки HTML-таблицы, чтобы привлечь внимание пользователя к важным данным. Есть много способов выделить чередующиеся строки, но самый простой способ — использовать селектор стилей CSS, который не требует никакого кода сценариев, такого как JavaScript или jQuery.

 

CSS предоставляет селектор nth-child(), который поддерживает ключевое слово нечетное и четное. Он также поддерживает арифметические операторы

 

Синтаксис

  1. :nth-child(число) {  
  2.   CSS-декларации;
  3. }  

Использование селектора

 

Мы можем использовать селектор :nth-child, как показано ниже, вместе с тегами HTML.

  1. // нечетное ключевое слово  
  2. th:nth-child(нечетный) {  
  3.   фон: красный;
  4. }  
  5. //четное ключевое слово  
  6. p:nth-child(even) {  
  7.   фон: синий;
  8. }  
  9. // арифметический оператор
  10. p:nth-child(4n+0) {  
  11.   фон: синий;
  12. }  

Пример

Давайте рассмотрим, что у нас есть таблица сотрудников, и мы хотим выделить альтернативные строки

Шаг 1 — Создать стиль CSS

Определить следующие стили в заголовке вашу HTML-страницу, используя селектор nth-child для таблицы.

  1. <стиль>  
    2. Таблица
  2.  {  
  3.   семейство шрифтов: arial, без засечек;
  4.   граница-коллапс: коллапс;
  5.   ширина: 100 %;
  6. }  
  7.   
  8. тд, т {  
  9.   граница: 2 пикселя сплошная #DFFF00;
  10.   выравнивание текста: по левому краю;
  11.   отступ: 8 пикселей;
  12. }  
  13. tr:nth-child(even) {  
  14.   цвет фона: #DFFF00;
  15. }  
  16.   

Шаг 2. Создание HTML-таблицы

  1. Сотрудник

      
  2.   
  3. <таблица>  
  4.     
  5.     Имя  
  6.     Город  
  7.     Адрес  
  8.     
  9.    
  10.    
  11.     Витал Вадже  
  12.     Латур  
  13.     Индия  
  14.     
  15.      
  16.     Судхир Вадже  
  17.     Пуна  
  18.     Индия  
  19.     
  20.    
  21.     Вишал  
  22.     Нью-Йорк  
  23.     США  
  24.     
  25.     
  26.     Капил  
  27.     Лондон  
  28.     Великобритания  
  29.     
  30.   

Результат приведенного выше кода будет выглядеть следующим образом:

 

 

Резюме

 

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *