Wprowadzenie do nazwy koloru w HTML

Nazwa koloru w HTML odgrywa bardzo ważną rolę w procesie projektowania stron internetowych i aplikacji. Pomaga zmienić wygląd naszej witryny lub aplikacji. Dzięki temu nasza aplikacja jest bardziej atrakcyjna i interaktywna. Istnieją różne sposoby definiowania nazwy koloru w HTML do formatu kodowania HTML. można użyć dodatkowych właściwości CSS, aby użyć go bardziej efektywnie. Jesteśmy w stanie użyć nazwy koloru HTML na poziomie strony, włączając go do części ciała, a także ustawiając indywidualny kolor dla określonego elementu. Nazwa koloru w HTML jest celowo używana do koloru tekstu, koloru tła, koloru obramowania, cieni, gradientów i wielu innych.

Składnia

  • Istnieją różne sposoby używania kolorów HTML. Zobaczmy jeden po drugim.
  • Podstawowym zastosowaniem koloru HTML jest zastosowanie go do tekstu. po prostu użyj jako koloru tekstu, aby wyświetlić tekst w różnych kolorach HTML.

1. Składnia koloru tekstu

color : color_name;

Zobaczmy, jak ta składnia będzie działać,

Welcome to EDUBCA

W powyższym przykładzie wyświetli tekst Witamy w EDUBCA w kolorze niebieskim, takim jak:

  • Za pomocą kolorów HTML można również dodać je jako kolor tła.

2. Składnia koloru tła

background-color:color_name;

Zobaczmy, jak ta składnia będzie działać,

Kategoria zawiera wszystkie informacje projektowe rozłożone na wiele podkategorii na kursie projektowania.

  • Możliwe jest również dodanie kolorowej ramki wokół dowolnego tekstu lub elementu za pomocą koloru HTML przy użyciu następującej składni:

3. Kolor ramki Składnia: ramka

value color_name;

Zobaczmy, jak ta składnia będzie działać,

EDUCBA free certification course

Typy nazw kolorów w HTML

Istnieją różne sposoby definiowania nazw kolorów w HTML. Trudno zapamiętać inną nazwę w różnych kolorach. Dlatego należy zdecydować o nadaniu wartości różnym kolorom. Zobaczmy jeden po drugim

1. Wartość RGB

  • Jest to jeden ze sposobów definiowania nazw kolorów HTML w kombinacji wartości formatu koloru czerwonego, zielonego i niebieskiego. Który służy do definiowania intensywności kolorów między liczbą od 0 do 255?
  • Załóżmy, że chcemy zdefiniować kolor czarny za pomocą kombinacji RGB, a następnie polubi RGB (0, 0, 0). Tutaj wszystkie parametry koloru zostaną ustawione na 0. Więc wyświetli czarny kolor.
  • Podobnie jak inny RGB (0, 0, 255) wyświetli kolor niebieski, ponieważ 255 jest ustawione jako najwyższa wartość na niebieską, a druga to 0.
  • Jeśli przejdziemy do 3 równych wartości RGB, wygeneruje odcienie szarości.

Przykład: RGB (0, 0, 0) dla najciemniejszego koloru, gdzie RGB (255, 255, 255) dla najjaśniejszego koloru.

2. Wartość HEX

  • Jest to jeden z najczęściej używanych formatów nazw kolorów w HTML, w których nazwy kolorów będą definiowane w formacie wartości szesnastkowych.
  • Format #rrggbb zawiera wartości z RR dla czerwonego, gg dla zielonego i bb dla niebieskiego są umieszczone między 00 toff szesnastkową.
  • Rozważmy jeden przykład definiujący kolor # 00ff00. więc te wartości zostaną wygenerowane w kolorze zielonym, ponieważ zielony zawiera najwyższą wartość (ff), gdzie druga ma być ustawiona na 00.

3. Wartość HSL

  • Kolejny format do definiowania koloru HTML w postaci odcienia, nasycenia, jasności.
  • Teraz zobaczymy wszystkie warunki jeden po drugim. Barwa jest definiowana jako stopień koloru, który zawiera się w przedziale od 0 do 360. w którym 0 oznacza kolor czerwony, 120 oznacza kolor zielony, a 240 - kolor niebieski.
  • Nasycenie określa wartość koloru w procentach, w których 0% oznacza odcień szarości, a 100% dla pełnego koloru.
  • Jasność działa również jako procent, który określa 0% dla czerni, 50% nie jest ani jasne ani ciemne, a 100% dla bieli.

4. Wartość RGBA

  • Ten typ koloru HTML określa rozszerzenie koloru RGB, w tym wartość alfa. Gdzie alfa służy do zdefiniowania krycia koloru.
  • Wartość alfa zawiera się w przedziale od 0, 0 (w pełni przezroczysty) do 1, 0 (w ogóle nieprzezroczysty)
  • Przykładem jest rgba (255, 99, 71, 0)

5. Wartość HSLA

  • Działa tak samo, jak wartość kolorów HSL, dodatkowo z wartością alfa do definiowania krycia koloru.
  • hsla (8, 100%, 80%, 0) dla w pełni przezroczystego koloru.
  • hsla (8, 100%, 80%, 0, 9) dla niezbyt przezroczystego koloru.

Przykłady nazw kolorów w HTML

Zobaczmy, jak używa się nazwy koloru w HTML za pomocą kilku przykładów wymienionych poniżej:

Przykład 1

Rozważmy ogólny przykład pokazujący, jak zostanie użyta przykładowa nazwa koloru w HTML:

Kod HTML:



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun

Dowiesz się więcej od porażki niż od sukcesu. Nie pozwól, żeby cię to powstrzymało. Niepowodzenie buduje postać. Jeśli pracujesz nad czymś, na czym naprawdę ci zależy, nie musisz być popychany. Wizja cię pociąga

Wynik:

Przykład nr 2

Teraz bierzemy inny przykład, który zdefiniuje wszystkie typy kolorów HTML w następujący sposób:

Kod HTML:



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade

Wynik:

W powyższym przykładzie możemy zobaczyć użycie różnych typów kolorów HTML i ich nazwy w HTML.

Przykład nr 3

Kolejnym zastosowaniem koloru HTML jest zdefiniowanie granicy elementu, która wygląda następująco:

W przykładzie możemy tutaj dodać ramkę do treści kodu, zmieniając również tło i kolor tekstu.

Kod HTML:

Teoria samoaktualizacji mówi o wewnętrznych nagrodach nieodłącznie związanych z wykonywaniem zadania, takich jak zadowolenie z pracy, poczucie osiągnięcia itp.

Wynik:

Wniosek

Przekonaliśmy się, że kolory HTML są zdefiniowane pod różnymi nazwami, wartością procentową, wartością szesnastkową, wartością alfa i wieloma innymi. Nazwa koloru w HTML służy do kolorowania tekstu, tła, obramowania i gradacji. Istnieją różne typy definiowania nazw kolorów HTML jako RGB, hex, hsl, rgba, hsla.

Polecane artykuły

To jest przewodnik po nazwie koloru w HTML. Tutaj omawiamy wprowadzenie, Typy nazw kolorów w HTML wraz z przykładami, składnią i kodami HTML. Możesz także przejrzeć nasze inne sugerowane artykuły, aby dowiedzieć się więcej -

  1. Atrybut stylu HTML
  2. Tagi tabeli HTML
  3. Link do obrazu w HTML
  4. Twórz tabele w HTML
  5. Wydarzenia HTML

Kategoria:

Narzędzia programistyczne