Teoria
Teoria

Właściwości i wartości CSS

Tak więc język CSS składa się z selektorów i właściwości. Selektory określają, do których elementów zastosować style, a właściwości określają sposób wyświetlania elementów.

Istnieje ogromna liczba właściwości CSS, które wpływają na prawie wszystkie aspekty wyświetlania elementów. Każda właściwość ma określony zestaw wartości.

Niektóre wartości są ustawiane za pomocą stałych tekstowych, np. red, bold, inne za pomocą wartości liczbowych: 12px, 120% itd.

Siła stylów polega na tym, że można szybko i elastycznie zmieniać wygląd elementów, które chcemy, zwłaszcza gdy używamy klas. Na przykład, aby przekreślić tekst wszystkich badanych punktów w konspekcie, wystarczy dodać tylko jedną linię w CSS:

.completed {
  color: green;
  text-decoration: line-through;
}

Wszystkie znaczniki z klasą .completed będą wyświetlane z przekreślonym tekstem. Wyobraź sobie teraz, ile czasu zajmuje zrobienie tego samego za pomocą stylów wbudowanych, gdy w konspekcie znajduje się ponad sto akapitów.

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

Dodaj właściwość text-decoration do reguły .completed z wartością line-through,
w regule .in-progress z właściwością padding-left o wartości 15px,
w regule .new właściwość background-colour z wartością #fff0f0.
Na koniec zaznacz dwa ostatnie akapity konspektu jako zaliczone, zastępując ich klasę na completed.