Reguły CSS

Przeanalizujmy teraz krok po kroku poszczególne reguły CSS, składające sie na wygląd naszego szablonu.

Proponuję Ci robić to w następujący sposób: utwórz sobie pusty plik CSS (na przykład style2.css) i dołącz go do strony głównej szablonu w miejsce dotychczasowego:

<link rel="stylesheet" type="text/css" href="css/style2.css" />

Następnie, kiedy będziemy omawiać poszczególne reguły, wklejaj je jedna po drugiej do tego pliku i obserwuj jak zmienia się wygląd Twojej strony. Uważam, że będzie to bardzo ciekawe i pouczające doświadczenie.

Pierwsza reguła w naszym pliku wygląda tak:

*
{
   margin: 0;
   padding: 0;
}

Reguła ta mówi nam tyle, że domyślnie wszystkie znaczniki (stąd ta *), jeżeli nie określono inaczej, będą miały parametry margin i padding ustawione na 0. Co to jest margin i padding? Żeby to wyjaśnić konieczne jest przedstawienie tutaj tak zwanego modelu pudełkowego (box model).

Otóż każdy znacznik języka HTML może być traktowany jak prostokąt o następujących parametrach:

Box model

Czyli każdy element, oprócz tego, że ma jakąś zawartość, ma również określony margines wewnętrzny (czyli padding - odstęp od krawędzi do zawartości), margines zewnętrzny (czyli margin - odstęp od innych elementów), no i jeszcze określoną ramkę (czyli border).

Widać to dobrze na przykładzie tekstów pisanych w ramce na tej stronie. Treść nie przylega bezpośrednio do ramki (padding) a cała ramka nie przylega bezpośrednio do tekstu wkoło niej (margin).

Kolejna reguła odnosi się do klasy bottom.

.bottom
{
   clear: both;
}

Regułę tę jednak sobie na razie pominiemy, wrócimy do niej na samym końcu.

Przejdźmy teraz do kolejnej reguły:

body
{
   margin: 0;
   padding: 0;
   background: #CCC;
   color: #000;
   font-size: 80%;
   font-family: "arial";
}

Definiuje nam ona styl dla znacznika <body>. Jak pamiętasz w CSS mamy mechanizm dziedziczenia, a ponieważ wszystkie znaczniki znajdują się wewnątrz znacznika <body>, reguły dla tego znacznika są ogólnymi regułami dla całej strony.

Raz jeszcze mamy tutaj zdefiniowane, że atrybuty margin i padding są zerowe.

Kolejna linijka definiuje nam tło (background). Oznaczenie, które widzisz jako jego wartość (#CCC) to zapis koloru w systemie szesnastkowym.

background: #CCC;

Jak zapisywany jest kolor w tym systemie? Kolory mają trzy składowe: czerwoną (R), zieloną (G) i niebieską (B). Każda z tych składowych może przyjmować określony poziom intensywności od 0 do 255, co w zapisie szesnastkowym odpowiada zakresowi od 0 do FF. Aby zapisać liczbowo kolor należy podać wartość liczbową dla każdej składowej w formacie #RRGGBB. Czyli na przykład #000000 to będzie kolor czarny (bo żadna składowa nie świeci), natomiast #FF0000 to będzie kolor czerwony (bo składowa czerwona świeci na maksa a pozostałe są wygaszone).

No tak - ale pewnie zauważysz, że kolor podany w powyższej deklaracji ma tylko trzy cyfry. Zgadza się, jest to zapis uproszczony, stosowany w arkuszach CSS tylko dlatego żeby było krócej. Oznacza on po prostu, że obie cyfry każdej ze składowych są takie same, czyli de facto mamy tu do czynienia z kolorem #CCCCCC. Takie zestawienie daje nam jeden z odcieni koloru szarego.

Kolejna linijka definiuje nam kolor tekstu (w tym przypadku jest to czarny):

color: #000;

Następny atrybut to wielkość czcionki:

font-size: 80%;

Jest ona wyrażona jednostkami względnymi, jako 80%. Zapytasz pewnie - jako 80% czego? Już wyjaśniam - 80% domyślnej wielkości czcionki Twojej przeglądarki. Z reguły jest to 16px więc te 80% da nam ok 13px.

Wielkość czionek w arkuszach CSS można definiować na różne sposoby, zarówno w jednostkach bezwzględnych (czyli pikselach) jak i względnych (%, em). Te względne służą wygodzie użytkowników, którzy zmieniają sobie czcionkę żeby poprawić czytelność strony (bo na przykład niedowidzą).

Doszliśmy już do ostatniego atrybutu naszej reguły. Tym razem mówi on nam, że tekst będzie drukowany czcionką arial.

font-family: "arial";

Kolejna reguła dotyczy znaczników <img> (czyli obrazków) i mówi nam, że wszystkie one nie będą posiadały ramki:

img
{
   border: 0;
}

Kolejna reguła dotyczy pojemnika topCont (choć nie jest tu wskazane, że jest to pojemnik, czyli <div>, jednak taki identyfikator ma tylko ten pojemnik, więc reguła jest jednoznaczna).

#topCont
{
   width: 100%;
   height: 250px;
   color: #CCC;
}

W regule tej mamy atrybut width (szerokość) ustawiony na 100%. 100% czego? Szerokości okna przeglądarki. Ten pojemnik więc będzie się rozciągał na całą szerokość okna.

Oprócz tego, wysokość pojemnika (height) jest ustawiona na 250px, a kolor tekstu jest szary (#CCC).

Kolejna reguła dotyczy pojemnika top:

#top
{
   margin: 0 auto;
   width: 900px;
   height: 50px;
   background: #000;
   font-weight: bold;
}

Ma on w specyficzny sposób ustawiony margines. Taka wartość oznacza, że pojemnik ten będzie wyśrodkowany (jego lewy i prawy margines będzie automatycznie zmieniany w zależności od wielkości okna). Natomiast górny i dolny margines będzie zerowy.

Oprócz tego ten pojemnik ma ściśle określoną szerokość, wysokość, kolor tła a ostatni atrybut mówi nam o tym, że czcionka tekstu znajdującego się w tym pojemniku będzie pogrubiona.

Kolejna reguła dotyczy pojemniczka topleft, który jak pamiętasz siedzi w pojemniku top.

#topleft
{
   float: left;
   width: 225px;
   height: 32px;
   font-size: 85%;
   padding: 18px 0 0 25px;
   color: #666;
}

Pierwsza linijka mówi nam o tym, że ten pojemnik ustawi się maksymalnie jak tylko da radę do lewej (czyli będzie dotykał lewej krawędzi pojemnika top. Pozostałe elementy strony będą natomiast opływały ten pojemnik (stąd słówko float.

Kolejnym atrybutem wartym wyjaśnienia jest wielkość czcionki:

font-size: 85%;

Znów mamy tu do czynienia z sytuacją, gdy wielkość ta podana jest w jednostkach względnych. Względem czego w tym przypadku liczony jest rozmiar? Względem rodzica tego elementu (pamiętasz dziedziczenie?). Czyli względem czcionki pojemnika top, a ponieważ w jego deklaracji nic przy czcionce nie mieszaliśmy, pojemnik ten odziedziczył wielkość czcionki po znaczniku <body>.

Ostatnim atrybutem wartym uwagi jest w nieznany nam dotąd sposób zadeklarowamy atrybut padding:

padding: 18px 0 0 25px;

Deklaracja ta odpowiada regule określania odstępów zgodnie z ruchem wskazówek zegara. Czyli odstęp górny będzie miał 18px, prawy 0, dolny 0 a lewy 25px. Stosuje się ją gdy każdy z odstępów chcemy określić osobno.

Następna reguła dotyczy znaczników <a> (czyli linków) zawartych w pojemniku topleft:

#topleft a
{
   color: #FC0;
   text-decoration: none;
}

Mówi nam ona o tym, że tekst linku będzie miał kolor #FC0 i będzie to zwykły tekst, ani nie podkreślony, ani nie przekreślony, ani nie migający, po prostu zwykłe literki (text-decoration: none;).

Następna na liście jest reguła, która odnosi się do zachowania linka przy najechaniu nad niego kursorem myszy:

#topleft a:hover
{
   color: #FFF;
   text-decoration: none;
}

W tym przypadku tekst linka pozostanie dalej zwykłym, nieudekorowanym tekstem, jedyne co się zmieni to jego kolor (na biały #FFF).

Z górnego paska strony pozostał nam jeszcze pojemnik topright:

#topright
{
   float: left;
   width: 625px;
   height: 34px;
   padding: 16px 25px 0 0;
   text-align: right;
   font-size: 120%;
   color: #999;
}

Ten pojemnik również ustawia się do lewej (float: left), czyli przyklei się swym lewym bokiem do pojemnika topleft. Natomiast tekst, który w nim się znajdzie będzie wyrównany do prawej (text-align: right;) i będzie większy (font-size: 120%).

Ufff

Jak widzisz jest już tego całkiem sporo, dlatego w kolejnej części omówienia reguł CSS wymienię tylko te atrybuty, które do tej pory jeszcze nie wystąpiły.

Mam nadzieję, że wygląd poszczególnych znaczników będziesz w stanie prześledzić samodzielnie.