HTML цветове - Как да зададете цвят на фона в HTML? - пример

Съдържание:

Anonim

Въведение в HTML цветове

Тази статия обхваща как да използвате цветове в уебсайта с помощта на HTML по прости и лесни начини. Цветовете играят важна роля при създаването на уебсайтове, които да изглеждат и да се чувстват добре. Няма индивидуален вграден таг HTML, вместо това той използва атрибут стил или свойство цвят. Точно цветовете са вградени в HTML елементите с помощта на Cascading Style Sheet (CSS). Цветовете придават елегантен вид на уеб страницата. Добавянето на цветове към уеб страницата включва настройка на цветовете на фона, таблиците, абзаците и т.н.

Как да зададете цвят на фона в HTML?

Повишаването на цвета на фона прави уебсайта да изглежда красив и по-смел. Извършва се чрез използване на цветове, шестнадесетични кодови цветове. RGB и RGBA цветови стойности (Алфа стойност 0 до 1).

Шестнадесетичният цвят се прилага директно към Html кода с помощта на атрибут Style вътре в елемента на тялото на Html. Hex е комбинация от числа и букви. По-долу е примерът, илюстриращ цвета на фона на уеб страницата.

My Sample

HTML BG Color

This page is a demo


My Sample

HTML BG Color

This page is a demo


My Sample

HTML BG Color

This page is a demo

Кодови фрагменти:

За да добавите цвят на фона, можете да използвате атрибут bgcolor за показване. Той е съвместим с всички браузъри, с изключение на HTML 5.

Color Name
Hexadecimal
RGB Value

Color Name
Hexadecimal
RGB Value

Color Name
Hexadecimal
RGB Value

Color Name
Hexadecimal
RGB Value

Color Name
Hexadecimal
RGB Value

Как да приложим цвят към текст в HTML?

Прилагането на цвят към HTML текста е доста лесно, можем да добавим / променим цвета на текста, като приложим три начина, а именно шестнадесетичен цвят, HSL стойности и имена на цветове. По-долу са трите различни техники за прилагане на цвят към съответните уеб страници.

1. Имена на цветове

Това е съвсем просто, като се използват английски имена на цветове, когато приложението е направо напред, тези имена на цветове се използват. Посочването на имената на цветовете са директни методи и W3C обяви 16 основни цвята (Черен, жълт, червен, Maroon, Grey, Lime, Green, Olive, Silver, Aqua, Blue, Navy, White, Purple, Fuchsia, Teal)

2. HSL

Цветни стойности на наситеност и лекота. Оттенъкът се определя от 0 до 360 градуса, наситеността и лекотата от 0 до 100%.

3. Шестнадесетичен цвят

За да получите точен резултат, се прилага шестцифрено шестнадесетично число. За да се изработят първите двуцифрени обозначават червено, следващите две обозначават зелено, другите две означават синя стойност и се предхождат от „#“.

Следващият пример обяснява различните начини за прилагане на цветове към документите.


EDUCBA
h1(
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
)
h4(
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
)
li(
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU


EDUCBA
h1(
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
)
h4(
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
)
li(
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU


EDUCBA
h1(
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
)
h4(
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
)
li(
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU


EDUCBA
h1(
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
)
h4(
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
)
li(
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU


EDUCBA
h1(
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
)
h4(
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
)
li(
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU

    EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU

  • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


    • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU

  • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


    • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU

  • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


    • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU

  • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


    • EDUCBA
    h1(
    color:#97cae0;
    background-color: hsl(200, 50%, 20%);
    color: hsl(200, 20%, 90%);
    )
    h4(
    color:rgb(0, 255, 0);
    background-color: hsl(130, 10%, 30%);
    color: hsl(280, 20%, 80%);
    )
    li(
    color:rgba(12, 88, 120, 1);
    background-color: hsl(210, 36%, 50%);
    color: hsl(145, 45%, 81%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


EDUCBA
h1(
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
)
h4(
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
)
li(
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU

изход:

Има различни методи за оцветяване на текст, тъй като HTML има много персонализирани приложения.

  1. Прилагане на раздел Style
  2. създаване на индивидуален лист за CSS стил
  3. Опаковане на текста

Как да приложим цвят на текст с помощта на раздел?

Нека видим различни методи за използване на HTML цветове:

1. Опаковане с помощта на HTML цветове

По-долу код променя цвета на текста в абзаца с прости HTML кодове. има 140 цветни имена за оцветяване на уебсайтовете. По-долу код демонстрира как да прилагате цвят на текст, като използвате раздел.


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color

Това съдържание е много ясно

текст на розов параграф

изход:

2. Използване на HEXCOLOR

Отново този пример взема раздел за стил, за да декларира шестнадесетичен цвят, последван от символ „#“.



Color Picker

changing text color



Color Picker

changing text color



Color Picker

changing text color

Здравей свят

Текст на параграф на шестнадесетичен

изход:

3. Използване на RGB цвят

Червеното, зеленото, синьото използва по 8 бита всеки и стойността им варира от 0 до 255, което произвежда различни цветове. Примерът по-долу избира RGB цвят според техните стойности.



Color Picker

Текст в син параграф

изход:

4. Метод с помощта на лист Style



Style Sheet in HTML
@import url("/examples/css/style.css");
p (
color: green;
font-size: 26px;
)

The styles for Html documents



Style Sheet in HTML
@import url("/examples/css/style.css");
p (
color: green;
font-size: 26px;
)

The styles for Html documents



Style Sheet in HTML
@import url("/examples/css/style.css");
p (
color: green;
font-size: 26px;
)

The styles for Html documents

Всеки маркер да бъде оформен с цветове.

изход:

5. Създаване на индивидуален CSS стил

.html файл




CSS style sheet




CSS style sheet




CSS style sheet

Множество HTMl документ.

Здравей свят!

Външен CSS файл lcolor.css

.lcolor ( font-size: 40px;
color:red )

изход:

Как да зададете цвят на рамката в HTML?

Извършва се с помощта на атрибутна граница color = ”“. Извършва се с помощта на елемента Html

и дори можем да създадем 3D ефекти. Цветът на рамката се прилага с помощта на различни атрибути като border = "width", bordercolor = "color def", bordercolorlight = "". CSS има някои подобрени свойства на границата, които помагат при създаването на граници. Примерът по-долу показва задаването на един цвят на границата на съответната таблица. Тук означава ред на таблицата и
обозначава данните от таблицата и тя започва да се използва маркер. И границата за тях се прилага с помощта на тяхната ширина и цветове




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California


Chicago
new york
Texas
California


Chicago
new york
Texas
California


Chicago
new york
Texas
California



Chicago
new york
Texas
California

изход:

Сега нека да видим как да настроите два оцветяващи рамки отделно. Кодът по-долу използва атрибут на таблицата с техните елементи.



Samsung Nokia Apple Iphone Xiami Redmi



Samsung Nokia Apple Iphone Xiami Redmi


Samsung Nokia Apple Iphone Xiami Redmi


Samsung Nokia Apple Iphone Xiami Redmi


Samsung Nokia Apple Iphone Xiami Redmi


Samsung Nokia Apple Iphone Xiami Redmi

изход:

Използване на таг

Използва се за групиране на всички елементи и помага с оглед на уеб страница в нейната конкретна позиция. В кода по-долу сме използвали два за абзац и други, за да реализираме атрибута на стил, като задаваме гранични пиксели, а дебелината се увеличава, като даваме ширината и сме добавили подплънки, за да ги демонстрираме отляво.



Sample border color using div

Природата е красива

div с цвят на рамката.

изход:

Пример: Това обяснява как да зададете цвета за подплънки и марж, като използвате маркери клас и списък.



Borders
UL (
background: Green;
margin: 10px 10px 5px 5px;
padding: 4px 4px 4px 4px;
)
LI (
color: red;
background:yellow;
margin: 11px 11px 7px 6px;
padding: 10px 0px 10px 10px;
list-style: none
)
LI.colorbord (
border-style: dashed;
border-width: small;
border-color: orange;
)


DOM model
Document object model helps in creating document tree



    Borders
    UL (
    background: Green;
    margin: 10px 10px 5px 5px;
    padding: 4px 4px 4px 4px;
    )
    LI (
    color: red;
    background:yellow;
    margin: 11px 11px 7px 6px;
    padding: 10px 0px 10px 10px;
    list-style: none
    )
    LI.colorbord (
    border-style: dashed;
    border-width: small;
    border-color: orange;
    )


    DOM model
    Document object model helps in creating document tree


  • Borders
    UL (
    background: Green;
    margin: 10px 10px 5px 5px;
    padding: 4px 4px 4px 4px;
    )
    LI (
    color: red;
    background:yellow;
    margin: 11px 11px 7px 6px;
    padding: 10px 0px 10px 10px;
    list-style: none
    )
    LI.colorbord (
    border-style: dashed;
    border-width: small;
    border-color: orange;
    )


    DOM model
    Document object model helps in creating document tree


  • Borders
    UL (
    background: Green;
    margin: 10px 10px 5px 5px;
    padding: 4px 4px 4px 4px;
    )
    LI (
    color: red;
    background:yellow;
    margin: 11px 11px 7px 6px;
    padding: 10px 0px 10px 10px;
    list-style: none
    )
    LI.colorbord (
    border-style: dashed;
    border-width: small;
    border-color: orange;
    )


    DOM model
    Document object model helps in creating document tree



Borders
UL (
background: Green;
margin: 10px 10px 5px 5px;
padding: 4px 4px 4px 4px;
)
LI (
color: red;
background:yellow;
margin: 11px 11px 7px 6px;
padding: 10px 0px 10px 10px;
list-style: none
)
LI.colorbord (
border-style: dashed;
border-width: small;
border-color: orange;
)


DOM model
Document object model helps in creating document tree

изход:

Как да определите цвета с помощта на стойности в HTML?

Основните стойности на цвета варират от 0 до 255 за червено, синьо, зелено. Стойността на цвета е важна при раздаването на лекотата.

По-долу са показани примерни стойности за цветовете

Пример: По-долу примерът показва различни стойности на цветовете в техните настройки на фона.

Техники за обработка на данни е да се разберат модели

класификация


предвиждане


регресия


Класификация, Техники за прогнозиране

HTML цветове


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

изход:

Как да използвате стойностите на цветовете RGB в HTML?

RGB обозначава директно червени зелени сини цветове и използва RGB функция. Тези три стойности се приемат като параметри и се декларират като цяло понякога в проценти. Който и цвят да искаме, неговата интензивност получава по-висока стойност 255, тъй като цяло число пада между o до 255. Например, за да има син цвят, за предпочитане е да се обозначава (0, 0255). тук първите две стойности са отбелязани като 0, 0, а последната стойност е 255 за синьо.

Пример: RGB цвят



div (
background-color: rgb(255, 0, 180);
color: rgb(0, 255, 255);
padding: 30px;
)

Norway the most beautiful place it's a Scandinavian Country.



div (
background-color: rgb(255, 0, 180);
color: rgb(0, 255, 255);
padding: 30px;
)

Norway the most beautiful place it's a Scandinavian Country.



div (
background-color: rgb(255, 0, 180);
color: rgb(0, 255, 255);
padding: 30px;
)

Norway the most beautiful place it's a Scandinavian Country.

Това е най-скъпата държава в света, Осло е столица на този зелен град.

изход:

Как да определите лекотата на цветовете в HTML

Лекотата на цвета се определя от яркостта, която предпочитаме тя се измерва в проценти. Повечето от уеб дизайнерите искат да използват лекота, отколкото RGB, която може да се регулира според изискванията. Тук черно задава яркостта на 0% бяло, зададено на 100%. Тя се определя чрез функция hsl ().



div (
background-color: hsl(150, 50%, 60%);
color: hsl(100%, 0%, 0%);
padding: 30px;
)

Norway the most beautiful place its an Scandinavian Country.



div (
background-color: hsl(150, 50%, 60%);
color: hsl(100%, 0%, 0%);
padding: 30px;
)

Norway the most beautiful place its an Scandinavian Country.



div (
background-color: hsl(150, 50%, 60%);
color: hsl(100%, 0%, 0%);
padding: 30px;
)

Norway the most beautiful place its an Scandinavian Country.

Това е най-скъпата държава в света, Осло е столица на този зелен град.

изход:

Можете да опитате с различни стойности за цвят в горния пример.

заключение

Следователно, в заключение видяхме, че това има различни свойства. В по-ранните дни уеб разработката има много начини да посочи цветове за своя уебсайт, а в наши дни най-популярните цветови цветове са цветови кодове RGB и шестнадесетичен (RGB е добре познат). Има различни приложения, при които цветовете се реализират като плъзгаща се скала, цветова палитра и т.н.

Препоръчителни статии

Това е ръководство за HTML цветове. Тук обсъждаме Въведение, Как да зададете цвят на фона в HTML, Как да приложите цвят към текст в HTML и т.н. Можете също да прегледате и другите ни предложени статии, за да научите повече -

  1. Тагове за HTML таблици
  2. Създайте таблици в HTML
  3. Стилове на HTML шрифтове
  4. HTML елементи на формуляр
  5. Програма за създаване на HTML Избор на цветове (пример)
  6. Как да внедрите цвят и да промените стила в Matlab?
  7. Как да качите файл в PHP с примери