CSS
Wprowadzenie do CSS – selektory i właściwości
Stosowanie selektorów i podstawowych stylów · INF.03
Co to jest selektor?
Selektor wskazuje, do których elementów HTML zostaną zastosowane style CSS.
selector {
property: value;
}
Rodzaje selektorów - podstawowe
- Selektor elementu: wybiera wszystkie dane znaczniki, np.
p,h1 - Selektor klasy: wybiera elementy z określoną klasą, np.
.highlight - Selektor ID: wybiera unikalny element o podanym ID, np.
#main-header
Inne selektory i pseudoklasy
- Selektor atrybutu: np. odede>a[href] wybiera linki z atrybutem href
- Selektory potomków i dzieci: np. odede>div p,
ul > li - Pseudoklasy:
:hover, odede>:focus - dla interakcji użytkownika - Pseudoelementy:
::before,::after- dodają elementy dekoracyjne
Przykład reguły CSS
p.highlight {
color: darkblue;
font-weight: bold;
}
#main-header {
background-color: lightgray;
padding: 10px;
}
Ćwiczenia praktyczne
Ćwiczenie 1 — Ostyluj wszystkie paragrafy na czerwono i pogrub.
Ćwiczenie 2 — Zastosuj styl do elementów z klasą odede>highlight, aby miały tło żółte.
Podsumowanie
Selektory CSS umożliwiają precyzyjne wybieranie elementów, żeby nadać im style. Właściwości CSS definiują wygląd i zachowanie elementów.
Podstawowe selektory to elementy, klasy i ID, ale istnieją też zaawansowane, pozwalające na kompleksowe stylowanie.