#7. Coś więcej na temat selektorów

Wiemy już trochę o stylowaniu tagów i klas. Teraz rozszerzmy swoją wiedzę na temat CSS❕

Stylowanie wielu znaczników

CSS umożliwia nam nadawanie danego stylu dwóm lub więcej wybranym znacznikom HTML. Przed deklaracją stylu dodajemy kolejne tagi po przecinku, np.

h1, h2 {
 color: blue;
}

Dzięki takiej regule wszystkie nagłówki h1 i h2 w dokumencie HTML zostaną ustawione w kolorze niebieskim.

A jak mamy dodawać wiele klas❓ Po przecinku❓ Odpowiedź – tak.

.danger, .warning, h1 {
 color: green;
}

Ćwiczenie

  1. Utwórz nowy projekt codesandbox.
  2. Dodaj plik css – style.css
  3. Dodaj link, aby połączyć style z plikiem html.
  4. W ciele dokumentu dodaj przykładowy nagłówek oraz akapit z różnymi klasami.
  5. W dokumencie CSS, utwórz regułę w której dodasz po przecinku swoje klasy z html.
ROZWIĄZANIE ĆWICZENIA. KLIKNIJ, ABY PODEJRZEĆ...

kind-stonebraker-bgs8s

kind-stonebraker-bgs8s by danielminschinski

Dziedziczenie stylów

W pliku HTML można zagnieżdżać jedne tagi w drugie. Pisząc kod z automatu to robimy. Najwyższy tag jest rodzicem, a zagnieżdżony dzieckiem. Najprostszy przykład który przychodzi mi do głowy to tag ‘body’ jako rodzic, a w nim dziecko h1, p, itd…

Jeżeli ‘body’ nadamy kolor tekstu niebieski, to h1, p w nim zawarte również zmieni im się kolor.

Dzięki takim sposobom, szybciej wykonamy modyfikację stylów dla wielu tagów.

Ćwiczenie

  1. Przejdź do codesandbox.
  2. Wykonaj forka (kopie poprzedniego ćwiczenia – przycisk w prawym górnym rogu).
  3. Nadaj tagowi ‘body’ kolor czerwony.
  4. Akapitowi kolor niebieski.
ROZWIĄZANIE ĆWICZENIA. KLIKNIJ, ABY PODEJRZEĆ...

angry-sid-jxgs6

angry-sid-jxgs6 by danielminschinski

Stylowanie zagnieżdżonych

Złożone selektory zostały wdrożone, aby dokładniej wskazywać, które elementy chcemy stylować. CSS umożliwia, które elementy HTML mają zostać ostylowane.

Zobrazujmy sobie powyższe stwierdzenie na przykładzie:

li a {
 color: red;
}

Powyższa reguła nadaje kolor czerwony wszystkim znacznikom <a>, ale jedynie tym które znajdują się w elemencie <li>. Pozostałych styl nie obejmuje.

Osobiście nasuwa mi się myśl, że powyższy selektor to taka ścieżka za pomocą której, definiujemy elementy zagnieżdżone które mają być stylowane daną regułą.

Ćwiczenie

  1. Przejdź do codesandbox.
  2. Wykonaj forka poprzedniego ćwiczenia.
  3. Dodaj link do przykładowej strony.
  4. Dodaj regułę stylu do dodanego przed chwilą linka.
ROZWIĄZANIE ĆWICZENIA. KLIKNIJ, ABY PODEJRZEĆ…

dry-wildflower-g5irv

dry-wildflower-g5irv by danielminschinski

Czas na identyfikator

Dotychczas stylowaliśmy nasze elementy HTML po klasie czy tagu. Poznajmy identyfikator. Jak do tego się zabrać? Już tłumaczę.

W HTML w danym tagu wstawiamy atrybut ID, np.

Akapit 1

Temat dość prosty, więc szybko przejdźmy do ćwiczenia:

Ćwiczenie

  1. Przejdź do codesandbox.
  2. Wykonaj forka poprzedniego ćwiczenia.
  3. Dodaj pod linkiem strony nagłówek drugiego stopnia z identyfikatorem.
  4. Dodaj styl, np. kolor.
ROZWIĄZANIE ĆWICZENIA. KLIKNIJ, ABY PODEJRZEĆ…

romantic-lederberg-8gd4v

romantic-lederberg-8gd4v by danielminschinski

Trochę czasu musieliście czekać na kolejnego posta, ale obowiązki zawodowe i prywatne nie pozwalały mi na dodatkową pracę…

Ale nie zamierzam się zniechęcać i dodawać kolejne posty jak najczęściej. Wszystkie nowe posty umieszczam na moim profilu fb, tak więc zapraszam do polubienia i śledzenia.

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA