Selektory i Podstawowe Stylowanie

Witaj ponownie.

W poprzedniej lekcji nauczyłeś się, czym jest CSS i jak połączyć go z HTML.

Teraz poznajemy selektory.

Selektory to sposób, w jaki CSS wybiera, co ma stylować.

Bez selektorów CSS stoi pośrodku pokoju i krzyczy:

“Zrób to niebieskie!”

A przeglądarka pyta:

“Co dokładnie?”

Dobre pytanie, przeglądarko.

Bardzo profesjonalnie.

Czego Się Nauczysz

W tej lekcji nauczysz się:

czym są selektory CSS;
jak działają selektory elementów;
jak działają selektory klas;
jak działają selektory ID;
jak działają selektory grupowane;
jak działają selektory potomków;
jak pisać czystszy CSS;
jak stosować podstawowe style do prawdziwego HTML.

Czym Jest Selektor?

Selektor mówi CSS, które elementy HTML ma stylować.

Przykład:

p {
  color: gray;
}

Tutaj p jest selektorem.

Oznacza to:

Wybierz wszystkie elementy paragrafu i ustaw ich tekst na szary.

CSS zawsze musi wiedzieć, co ma stylować.

Selektor to “kto”.

Deklaracje to “co”.

Przykład:

h1 {
  color: blue;
  font-size: 48px;
}

To oznacza:

Znajdź każde h1, zrób je niebieskie i duże.

Bardzo bezpośrednio.

Prawie rozkazująco.

Ale w web developmencie odrobina stanowczości czasem pomaga.

Podstawowa Struktura Reguły CSS

Reguła CSS wygląda tak:

selector {
  property: value;
}

Przykład:

h2 {
  color: #111827;
}

Części są takie:

h2 — selektor;
color — właściwość;
#111827 — wartość.

Selektor wybiera element.

Właściwość mówi, co zmienić.

Wartość mówi, jak to zmienić.

CSS to lista instrukcji.

Czasem elegancka.

Czasem dramatyczna.

Czasem oddalona o jeden brakujący średnik od zamieszania.

Stwórz Projekt

Stwórz folder dla tej lekcji:

mkdir css-lesson2
cd css-lesson2
touch index.html
touch style.css

Teraz masz:

css-lesson2/
  index.html
  style.css

Otwórz folder w swoim edytorze.

Najpierw napiszemy HTML.

Potem wystylizujemy go różnymi selektorami.

Taki jest plan.

I tym razem plan może nawet przetrwać spotkanie z przeglądarką.

Napisz HTML

Otwórz index.html i dodaj to:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Selektory CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header id="top">
    <h1>Selektory CSS</h1>
    <p class="intro">Selektory pomagają CSS znaleźć właściwe elementy HTML.</p>
  </header>

  <main>
    <section class="card">
      <h2>Selektory Elementów</h2>
      <p>Selektory elementów stylują wszystkie elementy tego samego typu.</p>
    </section>

    <section class="card featured">
      <h2>Selektory Klas</h2>
      <p>Selektory klas są wielokrotnego użytku i bardzo przydatne.</p>
    </section>

    <section class="card">
      <h2>Selektory ID</h2>
      <p>Selektory ID wskazują jeden unikalny element na stronie.</p>
    </section>

    <section class="practice-box">
      <h2>Obszar Ćwiczeń</h2>
      <p>Ten obszar pomoże nam testować różne selektory.</p>
      <a href="#top">Wróć na górę</a>
    </section>
  </main>

  <footer>
    <p>Stworzone podczas nauki selektorów CSS.</p>
  </footer>
</body>
</html>

Zwróć uwagę na kilka ważnych rzeczy:

id="top";
class="intro";
class="card";
class="card featured";
class="practice-box".

To są zaczepy.

CSS może ich użyć, żeby stylować konkretne części strony.

Zaczepy są ważne.

Bez zaczepów CSS musi zgadywać.

A CSS nie jest detektywem.

Selektory Elementów

Selektory elementów wybierają elementy HTML według nazwy tagu.

Przykład:

body {
  font-family: Arial, sans-serif;
}

To styluje całe body.

Inny przykład:

p {
  font-size: 18px;
}

To styluje wszystkie paragrafy.

Dodaj to do style.css:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #222;
  margin: 0;
}

h1 {
  color: white;
  font-size: 48px;
}

h2 {
  color: #111827;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

To są selektory elementów:

body;
h1;
h2;
p.

Działają na każdy pasujący element na stronie.

Przydatne.

Potężne.

Ale czasem zbyt szerokie.

Jak używanie wałka malarskiego do poprawienia jednej małej kropki.

Selektory Klas

Selektor klasy wybiera elementy z konkretną klasą.

W HTML:

<p class="intro">Selektory pomagają CSS znaleźć właściwe elementy HTML.</p>

W CSS:

.intro {
  font-size: 20px;
}

Kropka . oznacza klasę.

Czyli .intro wybiera każdy element z:

class="intro"

Dodaj to do style.css:

.intro {
  font-size: 20px;
  color: #dbeafe;
}

Teraz tylko paragraf z klasą intro dostaje taki styl.

Klasy są wielokrotnego użytku.

Możesz używać tej samej klasy na wielu elementach.

Przykład:

<section class="card">

I CSS:

.card {
  background-color: white;
  padding: 24px;
  margin-bottom: 20px;
  border-radius: 12px;
}

Dodaj to:

.card {
  background-color: white;
  padding: 24px;
  margin-bottom: 20px;
  border-radius: 12px;
}

Teraz każda sekcja z klasą card dostaje ten sam styl.

To jedna z najważniejszych idei CSS.

Style wielokrotnego użytku.

Mniej powtarzania.

Mniej cierpienia.

Szlachetny cel.

Wiele Klas

Jeden element może mieć więcej niż jedną klasę.

Przykład:

<section class="card featured">

Ten element ma dwie klasy:

card;
featured.

Dostaje style z obu.

Dodaj ten CSS:

.featured {
  border: 2px solid #2563eb;
  background-color: #eff6ff;
}

Teraz wyróżniona karta dostaje dodatkowy styl.

Nadal ma normalne style .card.

Ale dostaje też style .featured.

To przydatne, gdy chcesz mieć styl bazowy plus specjalną wersję.

Jak normalna pizza.

A potem pizza z dodatkowym serem.

CSS rozumie dodatkowy ser.

Przynajmniej emocjonalnie.

Selektory ID

Selektor ID wybiera jeden unikalny element.

W HTML:

<header id="top">

W CSS:

#top {
  background-color: #111827;
}

Symbol # oznacza ID.

Dodaj to:

#top {
  background-color: #111827;
  padding: 40px;
  text-align: center;
}

ID powinno być unikalne na stronie.

To znaczy, że nie powinieneś mieć wielu elementów z tym samym ID.

Używaj ID ostrożnie.

Do stylowania klasy są zwykle lepsze.

ID są przydatne dla:

unikalnych obszarów strony;
linków wewnętrznych;
JavaScript później;
specjalnych elementów użytych tylko raz.

Pomyśl o ID jak o numerze paszportu.

Klasa jest bardziej jak koszulka drużyny.

Wiele osób może mieć tę samą koszulkę.

Tylko jedna osoba powinna mieć ten sam numer paszportu.

Selektory Grupowane

Czasem chcesz zastosować ten sam styl do kilku selektorów.

Zamiast pisać to:

h1 {
  font-family: Arial, sans-serif;
}

h2 {
  font-family: Arial, sans-serif;
}

Możesz je zgrupować:

h1,
h2 {
  font-family: Arial, sans-serif;
}

Przecinek oznacza:

Zastosuj tę regułę do obu selektorów.

Przykład:

h1,
h2 {
  margin-top: 0;
}

Dodaj to:

h1,
h2 {
  margin-top: 0;
}

Selektory grupowane pomagają utrzymać CSS krótszy i czystszy.

Czystszy CSS łatwiej czytać.

Łatwiejszy do czytania znaczy łatwiejszy do naprawienia.

Łatwiejszy do naprawienia znaczy mniej dramatycznych westchnień.

Selektory Potomków

Selektor potomka wybiera element wewnątrz innego elementu.

Przykład:

footer p {
  color: #666;
}

To oznacza:

Wybierz każdy p wewnątrz footer.

Nie wybiera wszystkich paragrafów.

Tylko paragrafy w stopce.

Dodaj to:

footer p {
  color: #666;
  text-align: center;
}

Inny przykład:

.practice-box a {
  color: #2563eb;
  font-weight: bold;
}

To wybiera linki wewnątrz .practice-box.

Dodaj to:

.practice-box a {
  color: #2563eb;
  font-weight: bold;
}

Selektory potomków są przydatne, gdy liczy się kontekst.

Link w paragrafie może wyglądać normalnie.

Link w specjalnym pudełku może wyglądać inaczej.

CSS potrafi to obsłużyć.

CSS ma opinie.

Dużo opinii.

Wystylizuj Layout

Teraz dodaj więcej struktury do strony:

main {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

.practice-box {
  background-color: #fff7ed;
  padding: 24px;
  border-radius: 12px;
  border: 2px dashed #fb923c;
}

footer {
  padding: 20px;
}

Teraz strona powinna wyglądać bardziej uporządkowanie.

Używasz:

selektorów elementów;
selektorów klas;
selektorów ID;
selektorów grupowanych;
selektorów potomków.

To poważny krok.

Skrzynka narzędzi CSS się otwiera.

Postaraj się nie uderzyć młotkiem we własny palec.

Pełny CSS

Twój style.css powinien teraz wyglądać tak:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #222;
  margin: 0;
}

#top {
  background-color: #111827;
  padding: 40px;
  text-align: center;
}

h1 {
  color: white;
  font-size: 48px;
}

h2 {
  color: #111827;
}

h1,
h2 {
  margin-top: 0;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

.intro {
  font-size: 20px;
  color: #dbeafe;
}

main {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

.card {
  background-color: white;
  padding: 24px;
  margin-bottom: 20px;
  border-radius: 12px;
}

.featured {
  border: 2px solid #2563eb;
  background-color: #eff6ff;
}

.practice-box {
  background-color: #fff7ed;
  padding: 24px;
  border-radius: 12px;
  border: 2px dashed #fb923c;
}

.practice-box a {
  color: #2563eb;
  font-weight: bold;
}

footer {
  padding: 20px;
}

footer p {
  color: #666;
  text-align: center;
}

Zapisz.

Odśwież przeglądarkę.

Obserwuj.

Jeśli nic się nie zmieniło, sprawdź:

nazwę pliku;
link do CSS;
pisownię;
średniki;
nawiasy klamrowe;
czy zapisałeś plik.

Bug “zapomniałem zapisać” jest legendarny.

Pokonał wielu dzielnych developerów.

Klasa czy ID?

Używaj klas przez większość czasu.

Używaj ID tylko wtedy, gdy coś jest naprawdę unikalne.

Dobre użycie klasy:

<section class="card">

Bo możesz mieć wiele kart.

Dobre użycie ID:

<header id="top">

Bo istnieje tylko jeden górny obszar.

Zły pomysł:

<section id="card">
<section id="card">
<section id="card">

Nie rób tego.

ID nie powinny się powtarzać.

Przeglądarka może nadal pokazać stronę.

Ale kod robi się podejrzany.

Jak trzy osoby używające tego samego paszportu na lotnisku.

Częste Błędy

Zapomnienie kropki dla klas

Źle:

card {
  background-color: white;
}

Dobrze:

.card {
  background-color: white;
}

Bez kropki CSS szuka elementu HTML <card>.

A jeśli go nie stworzyłeś, nic się nie stanie.

CSS jest surowy.

Nie zgaduje twoich marzeń.

Zapomnienie kratki dla ID

Źle:

top {
  background-color: black;
}

Dobrze:

#top {
  background-color: black;
}

# mówi CSS, że to jest ID.

Bez # nie ma selektora ID.

Mały symbol.

Duża różnica.

Zbyt szerokie selektory

To wpływa na wszystkie paragrafy:

p {
  color: red;
}

Czasem to jest w porządku.

Czasem chcesz tylko jeden obszar:

.card p {
  color: #444;
}

Bądź konkretny, kiedy trzeba.

Nie styluj całej wioski, jeśli chciałeś pomalować tylko jedne drzwi.

Praktyka

Stwórz własną stronę z:

jednym headerem;
jednym paragrafem wprowadzającym;
trzema kartami;
jedną kartą featured;
jednym practice box;
jednym footerem.

Użyj:

selektorów elementów;
selektorów klas;
jednego selektora ID;
jednego selektora grupowanego;
jednego selektora potomka.

Spróbuj wystylizować:

kolory tła;
kolory tekstu;
odstępy;
obramowania;
border radius;
kolor linków.

Trzymaj CSS uporządkowany.

Nie rzucaj stylami wszędzie jak konfetti po weselu.

Konfetti jest fajne.

Debugowanie konfetti już nie.

Mini Wyzwanie

Stwórz trzy karty:

Basic Plan;
Standard Plan;
Premium Plan.

Daj wszystkim kartom klasę card.

Daj Premium Plan dodatkową klasę featured.

Przykład:

<section class="card featured">
  <h2>Premium Plan</h2>
  <p>This plan has extra features.</p>
</section>

Potem wystylizuj:

wszystkie karty z tym samym paddingiem i tłem;
wyróżnioną kartę z obramowaniem;
nagłówki ze wspólnym stylem;
tylko linki wewnątrz kart specjalnym kolorem.

Dokładnie tak działają prawdziwe strony.

Style wielokrotnego użytku.

Specjalne warianty.

Mniej chaosu.

Więcej kontroli.

Podsumowanie

Dzisiaj nauczyłeś się, że:

selektory mówią CSS, co stylować;
selektory elementów wybierają tagi HTML;
selektory klas używają kropki, np. .card;
selektory ID używają kratki, np. #top;
klasy są wielokrotnego użytku;
ID powinny być unikalne;
selektory grupowane współdzielą style między wieloma selektorami;
selektory potomków wybierają elementy wewnątrz innych elementów;
czystsze selektory ułatwiają zarządzanie CSS.

Selektory są fundamentem CSS.

Jeśli rozumiesz selektory, możesz kontrolować stronę.

Jeśli nie rozumiesz selektorów, CSS staje się tajemniczą zupą.

A już ustaliliśmy:

Zupa należy do miski.

Nie do twojego stylesheet.

Następna Lekcja

W następnej lekcji będziemy dokładniej stylować tekst, fonty i kolory.

Bo czytelny tekst jest ważny.

Strona z nieczytelnym tekstem to po prostu zagadka z hostingiem.