Kolor i tło
Kolor i tło
Kolor i tło to bezpłatna lekcja HTML for Kids na CoddyKit. To lekcja 1 z 1. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML for Kids, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML for Kids zawiera 1 lekcji w sumie.
Wprowadzenie
Dzień dobry,
Za pomocą właściwości Color możemy zmieniać kolory tekstu.
Wartości tej właściwości możemy przypisywać w formatach RGB, HEX, HSL, RGBA lub HSLA.
Do tej pory używaliśmy już właściwości color w wielu przykładach. Teraz pokażemy jej zastosowanie z użyciem różnych typów wartości.
<style>
#txt1{
color: red;
}
#txt2{
color: #ff0000;
}
#txt3{
color: rgb(255,0,0);
}
/*
0.4 is the alpha value.
We can define decimal values
between 1 and 0.
*/
#txt4{
color: rgba(255,0,0, 0.4);
}
</style>
<div class="box">
<h1 id="txt1">
This is red color
</h1>
<h1 id="txt2">
This is red color that defined with HEX type
</h1>
<h1 id="txt3">
This is red color that defined with RGB type
</h1>
<h1 id="txt4">
This is red color that defined with RGBA type
</h1>
</div>Tło
Za pomocą właściwości Background możemy definiować style tła elementów.
Poznajmy teraz wymienione poniżej właściwości tła.
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-color
Jest to właściwość służąca do zmiany koloru tła elementu.
Spójrzmy na przykład.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec ante purus,
eleifend egestas tempus non, consequat ac ex..
</div>
</body>
</html>Przezroczystość
Jest to właściwość służąca do zmiany krycia tła elementu.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
opacity: 0.5;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">
Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
</div>
</body>
</html>Przezroczystość — 2
Zmianę wartości CSS Opacity pokazano na powyższym obrazie.
Obraz tła
Właściwość background-image służy do dodawania obrazów do tła elementu.
Obraz znajduje się pod adresem https://coddy.s3.amazonaws.com/cms/Profile_Pictures_dc459075ee.png.
Zdefiniujmy teraz element div i dodajmy obraz do jego tła.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position
background-size
Jak można zauważyć w powyższym przykładzie, nie mogliśmy prawidłowo umieścić obrazu, ponieważ jego standardowy rozmiar jest większy niż obszar, w którym chcemy go dodać.
Użyjemy do tego właściwości background-size .
Właściwość Background-size może przyjmować wartości takie jak cover, contain i auto, ale możemy również przypisać jej konkretną wartość szerokości i wysokości.
Zaktualizujmy ponownie nasz przykład.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* the element's background would fill the
div's background without
the image's ratio being distorted*/
background-size: contain;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position 2
Ustawmy teraz dla właściwości background-position wartość procentową.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height values
are set to 50%. */
background-size: 50% 50%;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-repeat
Występuje tu jednak pewien problem. Ponieważ obraz był mniejszy niż tło elementu, został użyty więcej niż raz, aby wypełnić cały obszar.
Aby tego uniknąć, użyj właściwości background-repeat (z wartościami repeat, repeat-x, repeat-y, initial, inherit lub no-repeat).
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-attachment
Kolejną właściwością tła jest background-attachment. Za pomocą tej właściwości można określić, czy obraz tła będzie przewijać się razem ze stroną.
Właściwość ta przyjmuje wartości fixed lub scroll.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-attachment:scroll;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Skrótowa właściwość background
Gdy chcemy zastosować właściwości tła poznane w powyższych przykładach, może być konieczne zdefiniowanie 4–5 wierszy deklaracji.
Używamy skrótowej właściwości background, aby zdefiniować je w jednym wierszu.
Spójrzmy na nasz przykład.
We właściwości background zdefiniowano wartości no-repeat, rozmiar, położenie na stronie oraz adres URL obrazu źródłowego.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background: no-repeat center/50%
url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Gratulacje
Gratulacje 🎉
W tej sekcji poznali Państwo kolor i tło.
W następnej sekcji poznają Państwo koncepcje Box, Block i Inline
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 16
- Lekcje
- 35
Często zadawane pytania
Czy lekcja „Kolor i tło” jest bezpłatna?
Tak — pełny tekst „Kolor i tło” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML for Kids, przejdź na CoddyKit PRO. Kurs HTML for Kids zawiera 1 lekcji w sumie.
Co nauczysz się w „Kolor i tło”?
Kolor i tło Ćwiczysz HTML for Kids z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML for Kids?
Nie wymagamy żadnego doświadczenia. HTML for Kids w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 1.
Ile czasu zajmuje lekcja „Kolor i tło”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML for Kids?
Tak. Każda lekcja HTML for Kids zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.