CSS inline
Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 6 z 76.
CSS wbudowany to metoda dodawania stylów CSS bezpośrednio do elementu HTML za pomocą atrybutu style. To podejście pozwala stosować unikalne style do poszczególnych elementów bez potrzeby używania zewnętrznych lub wewnętrznych arkuszy stylów. Style wbudowane są przydatne do szybkiego wprowadzania konkretnych zmian stylu w pojedynczym elemencie.
Oto podstawowa składnia używania CSS w tekście:
<element style="property: value;"></element><element>: Element HTML, który chcesz stylizować.style: Atrybut zawierający deklaracje CSS.
property: Właściwość CSS, którą chcesz ustawić (np. color, font-size).value: Wartość, którą chcesz ustawić dla właściwości (np. blue, 16px).
Na przykład:
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>W tym przykładzie element akapitu ma style wbudowane, które ustawiają kolor tekstu na niebieski, a rozmiar czcionki na 16 pikseli. Te style będą stosowane tylko do tego konkretnego elementu akapitu.
Wyzwanie
ŁatwyOtrzymujesz dokument HTML z elementem akapitu. Użyj CSS inline, aby nadać akapitowi następujące właściwości:
- Ustaw kolor tekstu na czerwony.
- Ustaw rozmiar czcionki na 18 pikseli.
Sprawdź przykład w lekcji, aby poznać wskazówki!
Spróbuj swoich sił
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Sprawdź się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 powitalny
Sekcja „O nas”Sekcja kontaktowaZnacznik viewportMedia query8Model 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