8 klasa — 2. CSS: reguły, selektory i wygląd strony

Klasa 8 · Lekcja 2 z 6 · HTML i CSS w CodePen

Cel lekcji

Rozpoznajesz selektor, deklarację, właściwość i wartość w regule CSS.
Łączysz atrybut class w HTML z selektorem klasy w CSS.
Zmieniasz kolory, krój i rozmiar pisma bez zmieniania znaczenia HTML.
Odróżniasz padding, border i margin oraz wyjaśniasz prosty konflikt reguł.

Wstęp

Twoja strona ma już treść, ale wygląda podobnie do wielu dokumentów bez formatowania. Dzisiaj nadasz jej czytelny wygląd. Wyobraź sobie tablicę ogłoszeń: nawet wartościowa informacja może być trudna do odczytania, jeśli litery są za małe, kolory zlewają się ze sobą, a tekst dotyka krawędzi. CSS pomaga rozwiązać te problemy. Pracujesz dalej nad stroną Klubu Odkrywców z pierwszej lekcji.

Otwórz poprzedni projekt i zachowaj kopię etapu 1. W CodePen kod HTML pozostaje w panelu HTML, a reguły stylu wpisujesz w panelu CSS. Nie dodawaj tam znaczników <style>. Nie włączamy preprocesorów ani bibliotek; używamy zwykłego CSS.

Jak czytać regułę CSS

h1 {
  color: #12395b;
  font-size: 36px;
}

h1 jest selektorem: wybiera elementy do stylowania. Nawiasy klamrowe obejmują deklaracje. W zapisie color: #12395b; właściwością jest color, wartością #12395b, dwukropek je rozdziela, a średnik kończy deklarację. Właściwość rozmiaru pisma nazywa się font-size, nie size. Przy długościach takich jak 36 pikseli zapisujemy jednostkę px.

CSS nie zmienia akapitu w nagłówek. Możesz powiększyć litery w p, ale dla struktury dokumentu pozostanie on akapitem. Dlatego najpierw wybieramy właściwy element HTML, a dopiero później styl.

Element, klasa i identyfikator

<p class="wprowadzenie">Poznaj nasz klub.</p>

.wprowadzenie { background-color: white; }

Selektor elementu p wybiera akapity. Selektor klasy .wprowadzenie wybiera elementy z taką klasą; kropka występuje w CSS, a nie w wartości atrybutu HTML. Klasy można powtarzać. Identyfikator, np. id="projekt", powinien być unikalny w dokumencie; w CSS wskazuje się go przez #projekt. W naszych ćwiczeniach klasy służą przede wszystkim do wyglądu, a identyfikatory później pomogą w nawigacji.

Odstępy wewnątrz i na zewnątrz

Element można wyobrazić sobie jako pudełko. W środku jest treść. padding to przestrzeń między treścią a obramowaniem. border to obramowanie. margin tworzy odstęp na zewnątrz obramowania. Margines nie oznacza wyłącznie odległości od okna przeglądarki: może oddzielać element od sąsiadów.

Sprawdź to na białym akapicie wprowadzenia. Zwiększenie padding odsunie tekst od jego krawędzi. Zwiększenie margin-bottom odsunie następny element. Nie zastępuj tych właściwości wieloma spacjami i znacznikami br.

Skąd przeglądarka wie, którą regułę zastosować

Niektóre właściwości, np. kolor i krój pisma, są dziedziczone przez potomków. Dlatego ustawienie font-family w body porządkuje wygląd większości tekstu. Obramowania nie są w ten sposób automatycznie dziedziczone.

W prostym arkuszu bez stylów liniowych i specjalnych reguł selektor klasy ma większą szczegółowość niż selektor elementu. Jeśli dwie zwykłe reguły mają taką samą szczegółowość i dotyczą tej samej właściwości, zadziała późniejsza. To uproszczony fragment zasad kaskady, a nie reguła „ostatnia linijka zawsze wygrywa”. Na tym etapie nie używaj !important do ukrywania przyczyny problemu.

Reguła CSS składa się z selektora, właściwości i wartości. Model pudełkowy: treść, padding, border i margin.

Ćwiczenie krok po kroku

Zadanie: nadaj stronie spokojny, czytelny wygląd i wyróżnij wprowadzenie. Poświęć około 10 minut na składnię, 25 minut na własne próby i 10 minut na kontrolę.

W pierwszym akapicie pod h1 dodaj class="wprowadzenie". Pozostałą treść etapu 1 zachowaj.
W panelu CSS wpisz poniższy arkusz. Po każdej regule sprawdzaj podgląd.
Odczytaj na głos jedną deklarację: „właściwość — wartość”. Wskaż, które elementy wybiera jej selektor.
Zmień padding wprowadzenia z 20px na 32px. Zaobserwuj wnętrze ramki. Następnie przywróć 20px i zmień margin-bottom z 24px na 40px. Opisz różnicę.
Wybierz własny kolor nagłówków, zachowując wyraźną różnicę między tekstem a tłem. Nie stosuj jasnego tekstu na jasnym tle.
Zapisz etap 2 i kopie obu paneli. Przekaż nauczycielowi link lub pliki zgodnie z ustalonym sposobem oddawania prac.

body {
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #172033;
  background-color: #f1f5f9;
  margin: 0;
  padding: 24px;
}
h1 { color: #12395b; font-size: 36px; }
h2 { color: #12645c; }
p { margin-bottom: 16px; }
.wprowadzenie {
  background-color: #ffffff;
  padding: 20px;
  border: 2px solid #12645c;
  margin-bottom: 24px;
}

Małe doświadczenie z kaskadą

h2 { color: green; }
h2 { color: navy; }

Dopisz obie reguły na końcu arkusza. Zanim spojrzysz na stronę, przewidź kolor h2. Następnie zamień kolejność i sprawdź wynik. Po doświadczeniu usuń próbne reguły, aby nie pozostawić przypadkowych nadpisań.

Dla chętnych: utwórz klasę wazne i zastosuj ją do dwóch różnych akapitów. Pokaż, że jedna reguła może zmienić wygląd obu elementów.

Gdy styl nie działa: sprawdź kropkę przed nazwą klasy, zgodność pisowni, średniki, klamry i jednostki. Kolor tła to background-color, a kolor tekstu to color.

Sprawdź swoją pracę

Wiem, gdzie wpisywać HTML i CSS.
Mam czytelną czcionkę, tło i wyraźne nagłówki.
Potrafię pokazać działanie klasy na konkretnym elemencie.
Potrafię wyjaśnić różnicę między padding i margin na swojej stronie.
Usunąłem próbne nadpisania po doświadczeniu.

Podsumowanie

CSS składa się z reguł, które wybierają elementy i określają ich wygląd. Dobre formatowanie ułatwia czytanie. W następnej lekcji uporządkujesz treść w większe części i zbudujesz układ kart.

Materiały i źródła

Pytania kontrolne

Z jakich części składa się reguła CSS?
Co rozdziela właściwość i wartość?
Dlaczego przed nazwą klasy w CSS zapisujemy kropkę?
Czym różni się kolor tekstu od koloru tła?
Co się zmieni po zwiększeniu padding?
Co się zmieni po zwiększeniu margin-bottom?
Kiedy późniejsza reguła może nadpisać wcześniejszą?
Dlaczego duży rozmiar pisma nie czyni akapitu nagłówkiem HTML?

ilość wywołań: 7