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
- Utwórz nowy projekt codesandbox.
- Dodaj plik css – style.css
- Dodaj link, aby połączyć style z plikiem html.
- W ciele dokumentu dodaj przykładowy nagłówek oraz akapit z różnymi klasami.
- W dokumencie CSS, utwórz regułę w której dodasz po przecinku swoje klasy z html.
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
- Przejdź do codesandbox.
- Wykonaj forka (kopie poprzedniego ćwiczenia – przycisk w prawym górnym rogu).
- Nadaj tagowi ‘body’ kolor czerwony.
- Akapitowi kolor niebieski.
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
- Przejdź do codesandbox.
- Wykonaj forka poprzedniego ćwiczenia.
- Dodaj link do przykładowej strony.
- Dodaj regułę stylu do dodanego przed chwilą linka.
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
- Przejdź do codesandbox.
- Wykonaj forka poprzedniego ćwiczenia.
- Dodaj pod linkiem strony nagłówek drugiego stopnia z identyfikatorem.
- Dodaj styl, np. kolor.
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