Sprawdzanie selektorów
Selektory CSS służą do wybierania elementów do zastosowania stylu. Selektory oferują dużą elastyczność i moc. Selektory umożliwiają zastosowanie stylu do wszystkich elementów lub do jednego określonego elementu, a nawet jednej określonej litery.
Istnieją trzy podstawowe typy selektorów:
- Elementy
- Klasy
- Identyfikatory
Za pomocą tych selektorów można zastosować style do wielu elementów lub kilku.
Selektory elementów
Selektor elementów ma zastosowanie do wszystkich elementów z tym tagiem. Dowolny element HTML może służyć jako selektor elementów. Użycie h1 umożliwia modyfikowanie wszystkich h1 elementów na stronie.
h1 {
/* style */
}
Selektory klas
Wszystkie elementy HTML umożliwiają dodanie atrybutu class .
class służy do grupowania elementów razem i umożliwia oznaczenie ich do stosowania ustawień CSS.
Podczas tworzenia CV masz sekcje dotyczące Twojego wykształcenia i historii zatrudnienia. Użycie klasy umożliwia formatowanie tych elementów przy użyciu tego samego stylu.
<div class="history">
<h2>Employer name</h2>
<h3>Job title</h3>
<h3>3 Jun 19 - 8 Jun 21</h3>
</div>
<div class="history">
<h2>School name</h2>
<h3>Major</h3>
<h3>Sep 2014 - May 2018</h3>
</div>
W poprzednim przykładzie prawdopodobnie chcesz, aby formatowanie dla każdego z nich div było takie samo, jak w przypadku wyświetlania podobnych typów informacji. Oznaczając dwa div elementy z tą samą klasą, można zastosować do każdego z nich ten sam styl CSS.
Aby zidentyfikować klasę w arkuszu CSS, prefiks przed . nazwą. W naszym przykładzie użyjesz polecenia .history.
.history {
/* your styles */
}
Jeśli używasz pliku CSS, napisz definicję stylu klasy w pliku CSS. Atrybut klasy w kodzie HTML odwołuje się do definicji z pliku CSS.
Pseudo-klasy
Pseudo-klasy umożliwiają identyfikowanie elementów na podstawie ich lokalizacji na stronie lub sposobu interakcji użytkownika z nimi.
Gdy użytkownik wchodzi w interakcję ze stroną internetową, zmienia się stan różnych elementów. Użytkownik może umieścić wskaźnik myszy na elemencie i chcesz zmienić kolor po umieszczeniu wskaźnika myszy. Lub jeśli użytkownik wybrał link. Po odwiedzeniu tego linku możesz dać im znać, zmieniając styl. Arkusz CSS obsługuje wiele pseudo-klas, które są stosowane dynamicznie w oparciu o to, co robi lub zrobił użytkownik. Pseudo-klasy są poprzedzone prefiksem :, i są umieszczane po innym selektorze.
Aby na przykład ustawić kolor tła łącza na żółty, gdy użytkownik umieści na nim kursor, możesz użyć następującego kodu CSS:
a:hover {
background-color: yellow;
}
Niektóre z najbardziej typowych pseudo-klas są wymienione w poniższej tabeli:
| Pseudoklasa | opis |
|---|---|
hover |
Użytkownik umieszcza kursor na elemencie |
visited |
Link, który został wcześniej kliknięty |
link |
Nieodwiedzony link |
first-child |
Pierwsze podrzędne dopasowanie selektora w hierarchii |
last-child |
Ostatnie podrzędne dopasowanie selektora w hierarchii |
Ważne
Za pomocą pseudoelementów i css można usunąć podkreślnie z hiperlinków. Ogólnie rzecz biorąc, najlepiej pozostawić podkreślenie dla celów ułatwień dostępu. Podkreślony tekst umożliwia użytkownikowi szybkie identyfikowanie linków na stronie.
Selektory identyfikatorów
Podobnie jak w przypadku klas, identyfikator umożliwia zastosowanie stylu do elementu. Jednak mimo że klasa może być stosowana do wielu elementów, identyfikator musi być unikatowy i odwoływać się tylko do jednego elementu.
Wznawianie może zawierać sekcję dotyczącą mediów społecznościowych, takich jak X, GitHub lub blog. Jeśli chcesz utworzyć styl niestandardowy dla tej sekcji, możesz ustawić identyfikator:
<div id="social-media">
<!-- list of links -->
</div>
Identyfikatory są poprzedzone prefiksem w arkuszu # CSS:
#social-media {
/* style */
}
Uwaga
Standardowa konwencja nazewnictwa klas i identyfikatorów polega na użyciu "skewer-casing". Każdy wyraz jest małymi literami i oddzielony symbolem -. Nazwa skewer-case pochodzi z tego, jak wyrazy wyglądają tak, jakby mogły być na skewer.