Wprowadzenie do CSS
Wprowadzenie do CSS
Wprowadzenie do CSS 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 1
Dzień dobry,
W poprzednim rozdziale wyjaśniliśmy, czym jest CSS i dlaczego należy go używać. Teraz chcę przedstawić krótkie wprowadzenie na prostym przykładzie.
Zdefiniujmy prostą stronę HTML.
<html>
<body>
<h1>Hello CSS</h1>
</body>
</html>Stylowanie inline
Załóżmy teraz, że chcemy zmienić kolor nagłówka Hello CSS na czerwony. W tym celu użyjemy atrybutu style , który można dodać do niemal każdego znacznika HTML.
Za pomocą tego atrybutu możemy zdefiniować styl inline dla każdego elementu.
W sekcji podglądu zobaczymy, że kolor nagłówka zmieni się na czerwony.
color: red;
Definicją stylu nadaliśmy kolor czcionki elementu.
<h1 style="color:red;">Hello CSS</h1>Stylowanie inline 2
Pamiętają Państwo, że mówiliśmy, iż atrybutów w HTML używamy do przypisywania znacznikom zachowań i właściwości.
Jednym z najważniejszych atrybutów tego typu jest style — używamy go do definiowania stylu znaczników.
Stylowanie inline 3
Dodajmy teraz nowy styl. Możemy zwiększyć rozmiar tekstu za pomocą właściwości font-size.
Podczas definiowania wielu stylów musimy oddzielać je średnikami.
W poniższym przykładzie style color i font-size są oddzielone średnikiem.
<h1 style="color:red;font-size:50px;">
Hello CoddyKit
</h1>Definiowanie stylu
Podczas dodawania stylu składnia ma znaczenie.
styleName: styleValue;
Przypomnijmy jeszcze raz, że styl należy przypisywać w sposób pokazany powyżej.
Przykład
Rozwińmy teraz nieco nasz przykład.
<html>
<body>
<h1>Hello CoddyKit</h1>
<p>Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a
type specimen book.</p>
<h1>Hello CSS</h1>
</body>
</html>Przykład 2
W tym przykładzie chcemy zmienić kolor całego tekstu na czerwony. Dla każdego znacznika możemy zdefiniować styl w następujący sposób.
<html>
<body>
<h1 style="color:red;">Hello Coddy</h1>
<p style="color:red;">
Lorem Ipsum is simply dummy
text of the printing and typesetting industry
Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley
of type and scrambled it to
make a type specimen book.</p>
<h1 style="color:red;">Hello CSS</h1>
</body>
</html>Selektor CSS
Ale w ten sposób nie wygląda to zbyt dobrze, prawda?
Ponieważ na stronie mamy teraz 3 elementy, zmieniliśmy kolor tekstu każdego z nich na czerwony. Gdyby jednak ich liczba wzrosła do 3000, definiowanie stylu dla każdego elementu nie miałoby większego sensu.
Zamiast definiować styl inline dla każdego elementu, powinniśmy używać selektorów CSS.
Wprowadzenie 12
Poznajmy teraz pojęcie selektora.
Selektory CSS odpowiadają za wybieranie odpowiednich elementów HTML zawartych w dokumencie w celu stylowania elementów HTML.
Jak można wywnioskować z nazwy, wybierają one elementy HTML. 😂
Selektory CSS należy definiować pomiędzy znacznikami <style> w dokumencie HTML lub w zewnętrznym pliku CSS.
W naszych przykładach użyjemy definicji umieszczanych zwykle pomiędzy znacznikami style. Dokładniej rzecz biorąc, lepiej definiować style w zewnętrznym pliku CSS.
Wprowadzenie 13
Operator kropki i nazwa klasy służą do zdefiniowania klasy między znacznikami style. Definicje stylów umieszcza się w nawiasach klamrowych.
.class-name {
font-size:22px;
color:red;
}
W poniższym przykładzie między znacznikami style zdefiniowaliśmy klasę o nazwie my-component. Do odpowiedniej klasy przypisano styl font-size.
<style>
.my-component{
font-size:22px;
}
</style>
Zdefiniujmy teraz dwa elementy akapitu
Zdefiniujmy teraz dwa elementy akapitu, które mają klasę my-component.
Po tej definicji oba akapity mają tę samą nazwę klasy, więc zostaną wybrane przez selektor CSS, a ich rozmiary czcionki zostaną zmienione na 22px.
<style>
.my-component{
font-size:22px;
}
</style>
<p class="my-component">Hello CoddyKit</p>
<p class="my-component">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean maximus neque diam,
in tristique tortor volutpat a. Vivamus porttitor
id est et suscipit. Duis interdum at sem sed vestibulum.
Phasellus sit amet ullamcorper libero, a vestibulum libero.
Fusce laoreet nunc a pharetra viverra.
</p>Wprowadzenie 6
Do jednego selektora możemy przypisać więcej niż jeden styl.
W poniższym przykładzie w tym samym selektorze zdefiniowano style font-size i color.
<style>
.my-component{
font-size:22px;
color:red;
}
</style>Zagnieżdżanie selektorów CSS
Przeanalizujmy poniższy kod HTML.
Zdefiniowano element akapitu, a wewnątrz niego dodano element span zawierający treść „Hello CSS Selectors”.
W takim przypadku możemy powiedzieć, że element akapitu jest rodzicem elementu span.
Z kolei span jest elementem potomnym elementu p.
Podobnie jak w świecie organizmów żywych, będziemy używać elementów HTML w relacjach rodzic–potomek, zależnie od ich położenia w bloku kodu.
<p>
<span>Hello CSS Selectors</span>
</p>Zagnieżdżanie selektorów CSS 2
Rozwińmy nieco nasz przykład i ponownie przeanalizujmy hierarchię między elementami.
- Zgodnie z poniższym przykładem
- Elementy <span> i <a> są swoimi elementami siostrzanymi.
- Elementy <span> i <a> są potomkami elementu div.
- Elementy <span> i <a> są dziećmi elementu <p>.
- Element <p> jest dzieckiem elementu <div>.
<div>
<p>
<span>Hello CSS Selectors</span>
<a href="https://coddykit.com">
Go CoddyKit
</a>
</p>
</div>model drzewa analizy
Przyjrzyjmy się bliżej powyższemu obrazowi.
Poniższy przykładowy kod HTML został przekształcony w model drzewa.
Należy zauważyć, że model drzewa jest w rzeczywistości odzwierciedleniem hierarchii rodzic–potomek.
<!DOCTYPE html>
<html>
<head>
<title>CoddyKit</title>
<meta charset="UTF-8">
</head>
<body>
<h1>This is a Heading</h1>
<p>
<a href="#">Link</a>
<br/>
<span>lorem ipsum</span>
</p>
</body>
</html>
Kiedy zatem używamy tej hierarchicznej relacji?
Kiedy zatem używamy tej hierarchicznej relacji?
Najpierw wykonajmy przykład i przedstawmy problem. Następnie zobaczymy, jak możemy znaleźć rozwiązanie za pomocą tej hierarchii.
Przyjrzyjmy się poniższemu przykładowi kodu.
Załóżmy, że chcemy pokolorować cały tekst na czerwono. Do tej pory poznaliśmy dwa różne sposoby.
- Po pierwsze — i najgorzej — zdefiniujemy atrybut style (style = "color: red") inline dla każdego elementu.
- Po drugie, zdefiniujemy klasę o nazwie red-txt i przypiszemy ją każdemu elementowi jako atrybut (class = "red-txt").
Istnieje jednak łatwiejszy sposób. 🥳
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p><span>
This is a span element
</span>
</p>
</div>
</div>Kiedy więc używamy tej hierarchicznej relacji? 2
Przyjrzyjmy się ponownie powyższemu kodowi.
Gdy zwrócimy uwagę na element div o nazwie klasy root, zauważymy, że jest on w rzeczywistości przodkiem wszystkich elementów w naszym przykładzie.
U ludzi cechy genetyczne są przekazywane od przodków do potomków. Styl przypisany przodkowi w CSS również znajduje odzwierciedlenie w jego potomkach.
W takim przypadku, gdy utworzymy definicję stylu wybierającą odpowiedni element div, możemy oczekiwać, że przypisanie wpłynie na wszystkich jego potomków.
Sprawdźmy to.
Kiedy więc używamy tej hierarchicznej relacji? 3
Zdefiniujmy klasę o nazwie root za pomocą operatora kropki i umieśćmy w niej definicję stylu (z color: red).
Wybierze ona wszystkie elementy mające klasę root i ustawi kolor tekstu na czerwony zarówno dla nich, jak i dla ich potomków.
W sekcji Preview zobaczymy, że wszystkie teksty zmienią kolor na czerwony.
<style>
.root{
color:red;
}
</style>
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p>
<span>
This is a span element
</span>
</p>
</div>
</div>Dziedziczenie
W CSS możemy określić tę koncepcję jako dziedziczenie. Dzięki tej funkcji nauczyliśmy się również pisać krótszy kod.
Tak jak w poprzednim przykładzie, zamiast definiować tę samą właściwość osobno dla każdego elementu, przypisaliśmy ją elementowi przodkowi i uniknęliśmy powtarzania kodu.
Umieszczanie elementu head
W poprzednich przykładach dodawaliśmy element style bezpośrednio obok napisanego elementu HTML.
Jednak prawidłowym miejscem, w którym należy umieścić znacznik style, jest obszar między znacznikami head.
Poniższy sposób użycia jest więc poprawniejszy.
<!DOCTYPE html>
<html>
<head>
<style>
.hello{
font-size:30px;
}
</style>
</head>
<body>
<h1 class="hello">This is a Heading</h1>
</body>
</html>pisać kod możliwie krótko i wielokrotnie go wykorzystywać
Podczas programowania musimy pisać kod możliwie krótko i tak, aby można go było wielokrotnie wykorzystać.
Gratulacje
Gratulacje 🎉
W tej sekcji poznali Państwo pojęcia selektora i dziedziczenia.
W następnej sekcji poznamy rodzaje definiowania stylów w CSS.
Często zadawane pytania
Czy lekcja „Wprowadzenie do CSS” jest bezpłatna?
Tak — pełny tekst „Wprowadzenie do CSS” 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 „Wprowadzenie do CSS”?
Wprowadzenie do CSS Ć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 „Wprowadzenie do CSS”?
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.