Style wbudowane
Zmienianie wyglądu elementów bezpośrednio w HTML
Style wbudowane to bezpłatna lekcja HTML for Kids na CoddyKit. To lekcja 1 z 4. 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 4 lekcji w sumie.
Dodawanie koloru tła
Możesz wyróżnić elementy za pomocą właściwości background-color.
Przykład:
<p style="background-color: yellow;">This text has a yellow background.</p>
Style inline: dodawanie prostych stylów do HTML
Witamy w lekcji poświęconej stylom inline! Dzisiaj nauczysz się, jak stylować elementy bezpośrednio w kodzie HTML za pomocą atrybutu style.
Czym są style inline?
Style inline umożliwiają dodawanie CSS bezpośrednio do znacznika HTML za pomocą atrybutu style. To najprostszy sposób stylowania strony.
Przykład:
<p style="color: red;">This is red text!</p>
Właściwość color: red; zmienia kolor tekstu na czerwony.
Zmienianie rozmiaru czcionki
Użyj właściwości font-size, aby zmienić rozmiar tekstu.
Przykład:
<p style="font-size: 24px;">This text is 24 pixels large.</p>
Łączenie wielu stylów
Style inline umożliwiają łączenie wielu właściwości CSS. Oddziel każdą właściwość średnikiem ;.
Przykład:
<p style="color: white; background-color: black; font-size: 18px;">
This text has multiple styles!
</p>
Stylowanie innych elementów
Style inline działają ze wszystkimi elementami HTML, takimi jak nagłówki, przyciski i obrazy.
Przykład:
<h1 style="color: green;">Styled Heading</h1>
<button style="background-color: coral; color: white; padding: 10px;">
Styled Button
</button>
Spróbuj samodzielnie
Utwórzmy stronę internetową przy użyciu stylów inline. Oto przykład, od którego możesz zacząć:
<!DOCTYPE html>
<html>
<head>
<title>Inline Styles Example</title>
</head>
<body>
<h1 style="color: purple;">Welcome to My Styled Page</h1>
<p style="color: gray; font-size: 16px;">
This is an example of inline styling.
</p>
<button style="background-color: lightblue; padding: 10px; border: none;">
Click Me!
</button>
</body>
</html>
Świetna praca!
Gratulacje! Nauczyłeś się, jak używać stylów inline do dodawania prostych i skutecznych stylów do elementów HTML. Style inline świetnie nadają się do szybkich zmian, ale wraz z rozwojem strony potrzebne będą bardziej zaawansowane techniki stylowania. W następnej lekcji omówimy podstawy CSS. Przygotuj się do projektowania profesjonalnych stron internetowych!
Używanie atrybutu style
Czym są style inline?
Style inline umożliwiają dodawanie CSS bezpośrednio do znacznika HTML za pomocą atrybutu style. To najprostszy sposób stylowania strony.
Przykład:
<p style="color: red;">This is red text!</p>
Właściwość color: red; zmienia kolor tekstu na czerwony.
<p style="color: red;">This is red text.</p>
Często zadawane pytania
Czy lekcja „Style wbudowane” jest bezpłatna?
Tak — pełny tekst „Style wbudowane” 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 4 lekcji w sumie.
Co nauczysz się w „Style wbudowane”?
Zmienianie wyglądu elementów bezpośrednio w HTML Ć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 4.
Ile czasu zajmuje lekcja „Style wbudowane”?
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.
Wszystkie lekcje w tym kursie
- Style wbudowane
- Podstawy CSS
- Kolory i tła
- Formatowanie tekstu