Powiedzieliśmy wcześniej, że styl, to nic innego jak zbiór cech i przypisanych im wartości. Dobrze, ale jak to się zapisuje w CSS? Jak zwykle, nie ma i w tym przypadku niczego trudnego:
selektor
{
cecha:wartość;
cecha:wartość;
cecha:wartość;
...
}
Będziemy zamiennie używali określeń cecha oraz właściwość, czego nie tłumaczę, bowiem jak mówi stare polskie porzekadło - koń jaki jest, każdy widzi. Tajemnicza nazwa selektor, to nic innego jak wskazanie do jakich elementów ma zostać przypisane formatowanie ujęte w nawiasach klamrowych. W najprostszym układzie selektorem może być znacznik obiektu. Wartość piszemy zaraz po nazwie cechy i znaku dwukropka, czasem pisze się kilka wartości oddzielonych przecinkami lub spacjami. W przykładzie poniżej przecinkami oddzielone są nazwy czcionek w rozumieniu ta albo inna - jeżeli w komputerze nie ma czcionki Verdana, to zastosuj Arial, jeżeli zaś i tej czcionki nie ma, to zastosuj dowolną inną bezszeryfową. Spacjami oddzielone są wartości na zasadzie jedna wartość i druga i trzecia - w przykładzie obramowanie (border) ma być rysowane linią ciągłą (solid) o grubości 2 piksele (2px) koloru niebieskiego (blue). Nie wolno zapominać o średnikach pisanych po wartościach.
Selektor i deklarację stylu moglibyśmy równie dobrze zapisać w jednej linii. Co prawda taki styl działałby, jednak zapis byłby nieczytelny. Będziemy tutaj, tak jak w kodzie HTML stosować wcięcia i odstępy pokazujące np. dziedziczenie stylów związane z obiektowym modelem dokumentu.
p
{
font-family:Verdana,Arial,sans-serif;
font-size:14px; color:red;
border:2px solid blue;
}
Ćwiczenie 3_1_1_1
Wykonaj stronę zawierającą powyższy przykład. Zastosuj następujący kod:
<!doctype html>
<html>
<head>
<title>Budowa stylu</title>
<meta charset="UTF-8" />
<meta name="keywords" content="HTML5, style CSS" />
<meta name="description" content="Budowa stylu" />
<meta name="author" content="Jan Kowalski" />
<meta name="robots" content="all" />
<style type="text/css">
p
{
font-family:Verdana,Arial,sans-serif; font-size:14px;
color:red; border:2px solid blue;
}
</style>
</head>
<body>
<p>
Ten tekst powinien być napisany zgodnie ze stylem zdefiniowanym dla akapitu, a więc czcioną Verdana, jeżeli nie ma jej w komputerze, to czcionką Arial, jeżeli i tej czcionki nie ma, to inną czcionką bezszeryfową. Kolor czcionki powinien być czerwony, rozmiar - 14 pikseli. Akapit powinien posiadać obramowanie narysowane linią ciągłą o grubości 2 piksele, koloru niebieskiego. </p> Ten tekst znajduje się poza akapitem, więc powinien być sformatowany wg domyślnego stylu przeglądarki. </body>
</html>
Pokazuję cały kod, ponieważ chcąc nie chcąc "zahaczamy" o temat następny mówiący o sposobie osadzania stylów, tutaj osadziliśmy w nagłówku dokumentu head. Tak powinna wyglądać wykonana strona:
Praca domowa
Wykonaj ponownie ćwiczenie z zajęć pisząc własny tekst akapitu.