Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Budowa stylu

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.


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.