Jak definiować style?
Jak definiować style?
Jak definiować style? 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
Witajcie,
Wyjaśniliśmy to częściowo w poprzedniej lekcji. Powtórzmy więc.
W CSS style można definiować na 3 sposoby:
- Stylowanie inline
- Pomiędzy znacznikami <style>.
- Za pomocą zewnętrznego pliku CSS
Stylowanie inline
1. Stylowanie inline
Jak można wywnioskować z nazwy, chodzi o style definiowane przez przekazanie atrybutu style inline do każdego elementu.
Ten sposób nie jest zalecany, ponieważ zmniejsza możliwość ponownego wykorzystania każdego stylu, a jego czytelność jest bardzo niska.
W poniższym przykładzie styl letter-spacing zapewnił odstęp 15px między każdą literą tekstu.
<p style="letter-spacing:15px">
Inline Style
</p>z użyciem znacznika style
2. Pomiędzy znacznikami <style>.
Styl można zdefiniować pomiędzy znacznikami style. Ten sposób również nie jest zalecany, z wyjątkiem niektórych sytuacji (na przykład obszaru treści widocznego bez przewijania).
Będziemy nadal używać znaczników style, aby zachować porządek w naszych przykładach. Jednak nie zalecam używania tego rozwiązania w aplikacjach (poza wspomnianymi wyjątkowymi przypadkami).
<html>
<head>
<style>
.root {
color:red;
}
</style>
</head>
<body class>
<div class="root">Test</div>
</body>
</html>Zewnętrzny plik CSS
3. Zewnętrzny plik CSS
Dowiedzmy się teraz, jak używać zewnętrznych plików CSS.
Jest to sposób definiowania stylów, którego będziemy używać najczęściej. Najpierw tworzy się plik zawierający wyłącznie selektory CSS.
Następnie odpowiedni plik CSS można zdefiniować dla elementu link umieszczonego pomiędzy znacznikami head.
W poniższym przykładzie plik style.css przypisano do elementu link za pomocą atrybutu href.
<link rel = "stylesheet" href = "styles.css">
Ta funkcja jest najlepszym rozwiązaniem, gdy ten sam plik CSS ma być używany przez wiele plików, a także zwiększa możliwość ponownego wykorzystania kodu.
W poniższym przykładzie utworzono definicję stylu wybierającą klasę external.
.external{
color:red;
font-size:30px;
letter-spacing:10px;
}
W poniższym przykładzie utworzono definicję stylu wybierającą klasę external.
Zapiszmy to wyrażenie w pliku o nazwie test 1.css i przypiszmy go do elementu link.
<html>
<head>
<link rel="stylesheet"
href="https://coddy.s3.amazonaws.com/css/test_1.css">
</head>
<body>
<div class="external">Hello</div>
</body>
</html>Gratulacje
Gratulacje 🎉
W tej sekcji poznali Państwo rodzaje definiowania stylów w CSS.
W następnej sekcji poznamy selektor id.
Często zadawane pytania
Czy lekcja „Jak definiować style?” jest bezpłatna?
Tak — pełny tekst „Jak definiować style?” 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 „Jak definiować style?”?
Jak definiować style? Ć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 „Jak definiować style?”?
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.