Kolory RGB
Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 27 z 76.
W CSS kolory RGB to sposób określania kolorów za pomocą notacji funkcyjnej rgb(). RGB to skrót od Red, Green i Blue, a każdy kolor jest reprezentowany przez wartość z zakresu od 0 do 255. Łącząc różne intensywności tych trzech kolorów podstawowych, możesz uzyskać szeroką gamę kolorów.
Oto podstawowa składnia używania kolorów RGB w CSS:
selector {
color: rgb(red, green, blue);
background-color: rgb(red, green, blue);
}Na przykład:
p {
color: rgb(255, 0, 0); /* Czerwony */
background-color: rgb(0, 255, 0); /* Zielony */
}
h1 {
color: rgb(0, 0, 255); /* Niebieski */
}
.highlight {
background-color: rgb(255, 255, 0); /* Żółty */
}Wyzwanie
ŁatwyOtrzymujesz dokument HTML z nagłówkiem (<h1>), akapitem (<p>) i elementem div (<div>). Nadaj wszystkim elementom na stronie wybrany kolor tła i tekstu, używając do tego rgb().
Domyślne kolory nie zostaną zaakceptowane!
Spróbuj swoich sił
<html>
<head>
<title>RGB Colors</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a division.</div>
</body>
</html>Ta lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.
Wszystkie lekcje w sekcji Stylizacja za pomocą CSS
4Podstawy tekstu
Kolor tekstuRodzina czcionekRozmiar czcionkiGrubość czcionkiWyrównanie tekstuDekoracja tekstuWyzwanie powtórkowe #1Wyzwanie powtórkowe #27Model pudełkowy, część 1
Czym jest model pudełkowy?Odstęp wewnętrznyMarginesyObramowaniaSzerokość i wysokośćZadanie podsumowujące13Strona internetowa Tonga
Menu nawigacyjneNagłówek powitalny8Model pudełkowy, część 2
Rozmiar pudełkaZaokrąglenie rogówPrzepełnienieCień pudełkaWyzwanie podsumowujące3Podstawowe selektory
Wprowadzenie do selektorówSelektor typuSelektor klasySelektor identyfikatoraGrupowanie selektorówSelektor uniwersalnyWyzwanie: selektory9Flexbox
Czym jest Flexbox?Kierunek flexJustify ContentAlign ItemsIdealne wyśrodkowanieWyzwanie Flexbox12Podstawy responsywnego projektowania
Czym jest responsywne projektowanie?Znacznik meta viewportElastyczne układyJednostki viewportuPodstawy Media QueriesElastyczne obrazyPoćwicz samodzielnie: Edytor online Web