Zewnętrzny CSS
Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 8 z 76.
Zewnętrzny CSS to metoda dodawania stylów CSS do dokumentu HTML przez umieszczenie ich w osobnym pliku CSS i połączenie tego pliku z dokumentem HTML za pomocą znacznika <link>. Takie podejście pozwala stosować te same style na wielu stronach HTML, dzięki czemu łatwiej utrzymywać i aktualizować wygląd witryny. Zewnętrzny CSS jest idealnym rozwiązaniem w przypadku dużych projektów, w których kluczowe znaczenie mają spójność i wydajność.
Oto jak używać zewnętrznego CSS:
- Utwórz plik CSS (np.
styles.css) z regułami CSS:
body {
background-color: lightblue;
}
p {
color: blue;
font-size: 16px;
} 2. Połącz plik CSS z dokumentem HTML, dodając tag <link> w sekcji <head>:
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a paragraph of text.</p>
</body>
</html>W tym przykładzie tag <link> łączy plik styles.css z dokumentem HTML. Atrybut rel określa relację między dokumentem HTML a połączonym plikiem (arkuszem stylów), atrybut href określa ścieżkę do pliku CSS.
Wyzwanie
ŁatwyMasz pliki HTML i CSS (index.html i styles.css). Dodaj tag link w pliku HTML, aby połączyć pliki, i dodaj style do pliku HTML!
Spróbuj swoich sił
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a paragraph of text.</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