Teoria
Teoria

Klasy w CSS

Cóż, znowu pokolorowaliśmy streszczenie, ale jakim kosztem. Rozwiązanie z dodatkowymi tagami do stylizacji nie jest najlepsze. O wiele wygodniej jest korzystać z "klas"!

Klasa jest na przykład jednym z atrybutów znaczników HTML:

<p class="important">…</p>
<p class="help">…</p>

W CSS można ustawić style tylko dla elementów z określoną klasą. Odbywa się to za pomocą selektora klasy, który jest zapisywany na przykład jako .class-name:

.important { color: red; } — wybierze wszystkie tagi z klasą "important"
.help { color: green; }    — wybierze wszystkie tagi z klasą "help"

Aby nadać akapitom różne kolory, można dodać do nich różne klasy, a następnie użyć selektorów klas.

Nazwa klasy może zawierać znaki alfabetu łacińskiego, cyfry, myślnik - i podkreślenie _ i musi zaczynać się od znaku alfabetu łacińskiego.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <title>Klasy w CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Zarys kursu</h1> Sparowane znaczniki. Pojedyncze znaczniki. Atrybuty znaczników. Wbudowane style. Style zewnętrzne. Stylizacja według klasy. </body> </html>

CSS

body { font-family: "Tahoma", serif; } h1 { color: #999999; } .completed { color: green; } .in-progress { color: orange; } .new { color: red; }

ObiettiviFatto

Przerabianie wszystkiego z klasami:

Dodaj completed klasę do pierwszych czterech akapitów.
W piątym akapicie dodaj klasę in-progress.
Dodaj new klasę do szóstego akapitu.