Kolory HTML - Jak ustawić kolor tła w HTML? - Przykład

Spisie treści:

Anonim

Wprowadzenie do kolorów HTML

W tym artykule opisano, jak używać kolorów w witrynie za pomocą HTML w prosty i łatwy sposób. Kolory odgrywają ważną rolę w tworzeniu stron internetowych, aby wyglądać i czuć się dobrze. Zamiast tego nie ma wbudowanego tagu HTML, który korzysta z atrybutu style lub właściwości color. Dokładnie kolory są osadzone w elementach HTML za pomocą kaskadowego arkusza stylów (CSS). Kolory nadają stronie elegancki wygląd. Dodawanie kolorów do strony internetowej obejmuje ustawianie kolorów tła, tabel, akapitów itp.

Jak ustawić kolor tła w HTML?

Rozjaśnienie koloru tła sprawia, że ​​strona wygląda ładniej i odważniej. Odbywa się to za pomocą kolorów, kodów kolorów Hex. Wartości kolorów RGB i RGBA (wartość alfa od 0 do 1).

Kolor szesnastkowy jest nakładany bezpośrednio na kod HTML za pomocą atrybutu Styl wewnątrz elementu treści HTML. Szesnastkowy jest kombinacją zarówno cyfr, jak i liter. Poniżej znajduje się przykład ilustrujący kolor tła na stronie internetowej.

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

Fragmenty kodu:

Aby dodać kolor tła, możesz użyć atrybutu bgcolor do wyświetlenia. Jest kompatybilny ze wszystkimi przeglądarkami oprócz 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

Jak zastosować kolor do tekstu w HTML?

Stosowanie koloru do tekstu HTML jest dość łatwe, możemy dodawać / zmieniać kolor tekstu, stosując trzy sposoby, mianowicie kolor szesnastkowy, wartości HSL i nazwy kolorów. Poniżej przedstawiono trzy różne techniki nakładania kolorów na odpowiednie strony internetowe.

1. Nazwy kolorów

Jest to dość proste, używając angielskich nazw kolorów, gdy aplikacja jest prosta, używa się tych nazw kolorów. Określanie nazw kolorów to metody bezpośrednie, a W3C ogłosił 16 podstawowych kolorów (czarny, żółty, czerwony, bordowy, szary, limonkowy, zielony, oliwkowy, srebrny, aqua, niebieski, granatowy, biały, fioletowy, fuksja, turkusowy)

2. HSL

Wartości nasycenia odcienia i jasności koloru. Barwa jest definiowana w zakresie od 0 do 360 stopni, nasycenie i jasność od 0 do 100%.

3. Kolor heksadecymalny

Aby uzyskać dokładny wynik, stosuje się sześciocyfrową liczbę szesnastkową. Aby rozwinąć pierwsze dwucyfrowe oznaczenie koloru czerwonego, następne dwa oznaczenia koloru zielonego, pozostałe dwa oznaczenia wartości niebieskiej i poprzedzone znakiem „#”.

Poniższy przykład wyjaśnia różne sposoby stosowania kolorów do dokumentów.


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

Wynik:

Istnieją różne metody kolorowania tekstu, ponieważ HTML ma wiele dostosowywalnych aplikacji.

  1. Stosowanie sekcji stylów
  2. tworzenie indywidualnego arkusza stylów CSS
  3. Zawijanie tekstu

Jak zastosować kolor tekstu za pomocą sekcji?

Zobaczmy różne metody korzystania z kolorów HTML:

1. Zawijanie za pomocą kolorów HTML

Poniższy kod zmienia kolor tekstu w akapicie za pomocą prostych kodów HTML. istnieje 140 kolorowych nazw do pokolorowania stron internetowych. Poniższy kod pokazuje, jak zastosować kolor tekstu za pomocą sekcji.


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color

Ta treść jest bardzo jasna

różowy tekst akapitu

Wynik:

2. Korzystanie z HEXCOLOR

Ponownie, w tym przykładzie sekcja stylu deklaruje kolor szesnastkowy, po którym następuje symbol „#”.



Color Picker

changing text color



Color Picker

changing text color



Color Picker

changing text color

Witaj świecie

Tekst akapitu szesnastkowego

Wynik:

3. Używanie koloru RGB

Czerwony, zielony, niebieski używa 8 bitów każdy, a ich wartość waha się od 0 do 255, co daje różne kolory. Poniższy przykład wybiera kolor RGB według ich wartości.



Color Picker

Tekst akapitu niebieskiego

Wynik:

4. Metoda przy użyciu arkusza stylów



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

Każdy tag ma być stylizowany kolorami.

Wynik:

5. Tworzenie indywidualnego stylu CSS

plik .html




CSS style sheet




CSS style sheet




CSS style sheet

Wiele dokumentów HTMl.

Witaj świecie!

Zewnętrzny plik CSS lcolor.css

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

Wynik:

Jak ustawić kolor obramowania w HTML?

Odbywa się to za pomocą koloru obramowania atrybutu = ”„. Odbywa się to za pomocą elementu HTML

i nawet my możemy tworzyć efekty 3D. Kolor obramowania jest nakładany przy użyciu różnych atrybutów, takich jak border = „szerokość”, bordercolor = „color def”, bordercolorlight = ”„. CSS ma kilka ulepszonych właściwości granic, które pomagają w tworzeniu granic. Poniższy przykład pokazuje ustawienie pojedynczego koloru obramowania dla odpowiedniej tabeli. Tutaj oznacza wiersz tabeli i
oznacza dane tabeli i jest on uruchamiany przy użyciu etykietka. I obramowanie dla nich jest stosowane przy użyciu ich szerokości i kolorów




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

Wynik:

Zobaczmy teraz, jak ustawić oddzielnie dwa kolory obramowania. Poniższy kod używa atrybutu tabeli z ich elementami.



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

Wynik:

Za pomocą tagu

Służy do grupowania wszystkich elementów i pomaga w widoku strony internetowej w jej konkretnej pozycji. W poniższym kodzie użyliśmy dwóch z nich dla akapitu, a drugiego do zaimplementowania atrybutu stylu poprzez ustawienie pikseli granicznych, a grubość jest zwiększana przez podanie szerokości, a my dodaliśmy dopełnianie, aby pokazać je po lewej stronie.



Sample border color using div

Natura jest piękna

div z kolorem obramowania.

Wynik:

Przykład: wyjaśnia, jak ustawić kolor wypełnienia i marginesu za pomocą znaczników class i list.



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

Wynik:

Jak określić kolor za pomocą wartości w HTML?

Podstawowe wartości kolorów różnią się od 0 do 255 dla czerwonego, niebieskiego i zielonego. Wartość koloru jest ważna przy nadawaniu lekkości.

Poniższa tabela pokazuje przykładowe wartości kolorów

Przykład: Poniższy przykład pokazuje różne wartości kolorów w ustawieniach tła.

Techniki Data Mining to zrozumienie wzorców

Klasyfikacja


Prognoza


Regresja


Klasyfikacja, techniki prognozowania

Kolory HTML


Kolory stołów

Wynik:

Jak używać wartości kolorów RGB w HTML?

RGB oznacza bezpośrednio czerwony zielony niebieski kolor i używa funkcji RGB. Przyjmuje te trzy wartości jako parametry i deklaruje czasami jako liczbę całkowitą. Niezależnie od tego, jakiego koloru chcemy, jego intensywność ma wyższą wartość 255, ponieważ liczba całkowita mieści się w przedziale od o do 255. Na przykład, aby mieć kolor niebieski, lepiej jest zaznaczyć (0, 0, 255). tutaj dwie pierwsze wartości są oznaczone jako 0, 0, a ostatnia wartość to 255 dla koloru niebieskiego.

Przykład: kolor 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.

To najdroższy kraj na świecie, Oslo jest stolicą tego zielonego miasta.

Wynik:

Jak określić jasność kolorów w HTML

Jasność koloru jest określona przez jasność, którą wolimy mierzyć w procentach. Większość projektantów stron internetowych chce używać lekkości niż RGB, którą można regulować zgodnie z wymaganiami. Tutaj czarny ustaw jasność na 0% biały ustaw na 100%. Określany jest za pomocą funkcji 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.

To najdroższy kraj na świecie, Oslo jest stolicą tego zielonego miasta.

Wynik:

Możesz spróbować z różnymi wartościami koloru w powyższym przykładzie.

Wniosek

Dlatego, podsumowując, widzieliśmy, że ma to różne właściwości. Wcześniej tworzenie stron internetowych miało wiele sposobów określania kolorów dla swojej witryny, a obecnie najpopularniejszymi kolorami są kody kolorów RGB i Hex (RGB jest dobrze znany). Istnieją różne aplikacje, w których kolory są wdrażane, takie jak przesuwana skala, paleta kolorów itp.

Polecane artykuły

To jest przewodnik po kolorach HTML. Tutaj omawiamy Wprowadzenie, Jak ustawić kolor tła w HTML, Jak zastosować kolor do tekstu w HTML itp. Możesz również przejrzeć nasze inne sugerowane artykuły, aby dowiedzieć się więcej -

  1. Tagi tabeli HTML
  2. Twórz tabele w HTML
  3. Style czcionek HTML
  4. Elementy formularza HTML
  5. Program do tworzenia próbnika kolorów HTML (przykład)
  6. Jak wdrożyć kolor i zmienić styl w Matlabie?
  7. Jak przesłać plik w PHP z przykładami