TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Samouczek kolorów CSS dla początkujących

2

Kolory nadają stronie znaczenie. Strona będzie wyglądać gładko i nudno bez różnych kolorów. W CSS możesz używać dwóch typów właściwości kolorów na stronie internetowej. Jednym z nich jest kolor pierwszego planu (zwykle jako kolor), który zmienia kolor tekstu lub czcionki. Drugi to kolor tła, aby dodać kolor tła do różnych elementów HTML. W tym samouczku przyjrzyjmy się, jak używać właściwości kolorów CSS z różnymi atrybutami.

Zmiana koloru tekstu w CSS

Weźmy przykład zmiany koloru elementu akapitu

na czerwono. Możesz to zrobić za pomocą poniższej definicji stylu w CSS:

p { color: red; }

W przeglądarce wygeneruje następujący wynik:

To jest akapit w kolorze czerwonym.

Zmiana kolorów tła w CSS

Możesz zmienić kolor tła dowolnego elementu HTML, korzystając z poniższej definicji stylu CSS:

p { background-color:red;color:white; }

Da to następujący wynik:

To jest akapit w kolorze czerwonym.

Zwróć uwagę, że użyliśmy białego koloru tekstu, aby był wyraźnie czytelny na czerwonym tle.

Definiowanie kolorów w CSS

W powyższych przykładach użyliśmy przy nazwie koloru czerwonego i białego. Możesz stworzyć miliony kolorów, łącząc trzy podstawowe kolory: czerwony, niebieski i zielony. Nie jest możliwe zapamiętanie nazwy kolorów, a większość kolorów nie ma rzeczywistej nazwy. Aby uprościć użycie, CSS umożliwia następujące sposoby definiowania wartości koloru:

  • Nazwy kolorów, takich jak czerwony, zielony lub biały
  • Używanie kombinacji czerwonych, zielonych i niebieskich wartości dziesiętnych, takich jak rgb (20,50,200)
  • Używanie wartości szesnastkowych dla koloru czerwonego, zielonego i niebieskiego, np. #ffffff
  • Wartość procentowa kolorów czerwonego, niebieskiego i zielonego, takich jak rgb (10%, 80%, 25%)
  • Używając odcienia, nasycenia i jasności, takich jak hsl(0,80%,70%)
  • Dodawanie nieprzezroczystości do wartości RGB, takich jak rgba(0,0,0,0.8)
  • Dodawanie nieprzezroczystości do wartości HSL, takich jak hsla (200,75%90%0,6)

Używanie nazw kolorów w CSS

Widzieliśmy już, jak używać nazwy we właściwościach CSS koloru i tła. Istnieje tylko około 150 nazw kolorów, które przeglądarki mogą zidentyfikować. Zalecamy używanie liczb zamiast nazw kolorów. Możesz również sprawdzić kody kolorów popularnego serwisu społecznościowego w tym artykule.

Używanie kolorów RGB w CSS

W metodzie RGB kolory czerwony, niebieski i zielony są oznaczone liczbami dziesiętnymi z zakresu od 0 do 255. Na przykład kolor pomidora jest wskazywany jako rgb(255,99,71).

<div style="background-color: rgb(255,99,71);"> This text will have a tomato color background with the RGB value as rgb(255,99,71). </div>

W przeglądarce wygeneruje następujący wynik:

Ten tekst będzie miał tło w kolorze pomidora z wartością RGB jako rgb(255,99,71).

Zmieniając trzy podstawowe wartości kolorów, można utworzyć ponad 16 milionów kolorów. Upewnij się jednak, że używasz odpowiedniego koloru tekstu, aby był łatwy do odczytania. Najlepszą opcją jest wybranie bezpiecznych kolorów internetowych, takich jak płaskie kolory interfejsu użytkownika dla Twojej witryny.

Korzystanie z szesnastkowych wartości kolorów

Kolor pomidora rgb(255,99,71) można przekonwertować na równoważną wartość szesnastkową jako FF6347. Jest to zwykła konwersja 255 na FF, 99 na 63 i 71 na 47. Możesz użyć narzędzi do konwersji kolorów, aby przekonwertować kody RGB na kody szesnastkowe.

Możesz użyć szesnastkowych wartości kolorów w CSS, jak poniżej:

<div style="background-color: #FF6347; padding: 15px; color: #FFFFFF"> This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value. Also both small case #ff6347 and capital case #FF6347 will produce the same result. </div>

„Padding:15px;" służy do dodawania dopełnienia do treści tekstowej wewnątrz

element. W przeglądarce wygeneruje następujący wynik:

Ten tekst będzie miał tło w kolorze pomidora z wartością kodu szesnastkowego jako #FF6347. Pamiętaj, aby użyć symbolu # przed wartością kodu szesnastkowego i użyć koloru tekstu jako #FFFFFF. Również mały przypadek #ff6347 i duży przypadek #FF6347 dadzą ten sam wynik.

Używanie wartości RGB jako wartości procentowych

Zamiast liczby dziesiętnej w zakresie od 0 do 255 można również podać wartość procentową koloru czerwonego, zielonego i niebieskiego.

<div style="background-color: rgb(20%,69%,74%); padding: 15px; color: #FFFFFF"> This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value. Also both small case #ff6347 and capital case #FF6347 will produce the same result. </div>

Da to następujący wynik:

Ten tekst będzie miał tło w kolorze pomidora z wartością kodu szesnastkowego jako #FF6347. Pamiętaj, aby przed wartością kodu szesnastkowego użyć symbolu #. Również mały przypadek #ff6347 i duży przypadek #FF6347 dadzą ten sam wynik.

Dodawanie krycia do kolorów RGB

W CSS3 masz możliwość podania wartości alfa lub krycia kolorów. Wartość alfa jest dodawana jako liczba dziesiętna od 0,0 do 1,0 jako czwarta wartość. Wartość 0 oznacza całkowitą przezroczystość, czyli 0% nieprzezroczystości, a 1.0 oznacza nieprzezroczystość o 100% nieprzezroczystości.

Poniżej znajduje się składnia używania wartości alfa w kolorze rgb z kryciem 20%:

<div style="background-color: rgba(255,0,0,0.2);"> Content Here...... </div>

Pokażmy kolor czerwony z wartościami krycia 20%, 40%, 60%, 800% i 100%, aby był bardziej zrozumiały.

Samouczek kolorów CSS dla początkujących

Pamiętaj, że istnieje również oddzielna właściwość CSS o nazwie „opacity: która również może być używana w tym samym celu. Zaletą krycia jest to, że można go również używać na obrazach. Ale nie jest obsługiwany przez wszystkie przeglądarki. Poniżej znajduje się sposób oddzielnego używania właściwości opacity:

p { background-color: rgb(255,0,0); opacity: 0.5; }

Używanie kolorów HSL w CSS

CSS3 posiada dodatkową opcję definiowania koloru metodą HSL. HSL oznacza odcień, nasycenie, lekkość i ma trzy wartości:

  • Odcień jest stopniem wskazanym na kole kolorów z odniesieniami jako 0 = czerwony, 120 = zielony, 240 to niebieski.
  • Nasycenie to procentowa wartość szarości w kolorze.
  • Jasność to procentowa wartość światła lub ciemności, gdzie 0% to ciemność (czarny), a 100% to światło (biel).

Poniżej znajduje się przykład wykonania zielonego tła z kolorem HSL w CSS:

<div style="background-color: hsl(120,100%,50%,0.2);"> Content Here...... </div>

HSL z kryciem

Podobnie jak w przypadku RGBA, możesz również dodać nieprzezroczystość do koloru HSL jako czwartą wartość. Nieprzezroczystość lub alfa jest wskazywana jako liczba dziesiętna z zakresu od 0,0 do 1,0, gdzie 0,0 oznacza pełną przezroczystość, a 1,0 oznacza nieprzezroczystość. Poniżej znajduje się przykład tworzenia koloru zielonego z kryciem 50% za pomocą deklaracji HSLA w CSS.

<div style="background-color: hsla(120,100%,50%,0.6);"> Content Here...... </div>

Poniższe pola prezentują zielony kolor na różnych poziomach alfa:

Samouczek kolorów CSS dla początkujących

Kompletny przykład użycia kolorów w CSS

Jak na razie widzieliśmy różne sposoby definiowania kolorów w CSS. Pokażmy pełny przykład tworzenia kolorów pierwszego planu i tła:

<!-- This is CSS --> <style> div {background-color:tomato; padding:10px;} p {color: rgba(50,90,20,0.8);} p {color: #ffffff;} /* This will be the final paragraph color */ h1 {color: yellow;} div > h1 {color:#008754;} /* This will be the final h1 color */ h2 {background:hsla(10,20%,30%,0.8);} h2 {color:#ffffff;} em {color: #4500aa;} p > em {background-color: rgba(60,43,78,0.7); color:yellow;} </style> <!-- This is HTML --> <div> <!-- Background Tomato --> <h1>This is a H1 heading.</h1> <!-- Color #008754 --> <p>Here is a paragraph element.</p> <!-- Color #ffffff --> <h2>This is a H2 heading.</h2> <!-- Background hsla(10,20%,30%,0.8) --> <p>Here is another paragraph. <!-- Color #ffffff --> <em>This is emphasized text inside paragraph.</em> <!-- Background rgba(60,43,78,0.7) Color yellow --> </p> <em>This is emphasized text outside paragraph.</em> <!-- Color #4500aa --> </div>

Ostateczny wynik zostanie pokazany jak poniżej:

Oto element akapitu.

To jest nagłówek h2.

Oto kolejny akapit.
Jest to podkreślony tekst w akapicie.
To jest podkreślony tekst poza akapitem.

  • Jeśli zdefiniujesz wiele kolorów w CSS dla tego samego elementu, ostatnia będzie miała pierwszeństwo przed wszystkimi poprzednimi deklaracjami. W powyższym przykładzie akapit będzie miał kolor #ffffff z tego powodu.
  • Określone style będą miały pierwszeństwo przed stylem nadrzędnym lub ogólnym. Kolorem h1 będzie #008754, a nie żółty.
  • Możesz również użyć skróconej właściwości tła, aby zdefiniować kolor tła.

Jeśli kolor tła nie zostanie wymieniony, element będzie miał przezroczyste tło. Ponieważ przeglądarki używają białego tła, zobaczysz, że większość stron w sieci ma białe tło. W rzeczywistości elementy stron są deklarowane z białym tłem, aby zapewnić prawidłowe wyświetlanie, ponieważ użytkownicy mogą zmieniać kolor tła przeglądarki.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów