Działanie arkusza stylów CSS

Poniżej przedstawiłem działający arkusz stylów CSS z rzeczywistej, stworzonej przezemnie strony internetowej. Na jego podstawie chciałbym omówić zasadę działania CSSa. Obecnie preferuje się zamieszczanie arkuszy stylów w zewnętrznym pliku .css i dołączanie ich do głównego dokumentu strony, tak jak przedstawiono to poniżej:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”> <html xmlns=”http://www.w3.org/1999/xhtml”>
<head>

<title>Gospodarstwo gościnne “POD DZIKĄ ROŻĄ” – Noclegi Baligród</title>

<meta name=”keywords” content=”noclegi Baligród – noclegi w Baligrodzie – nocleg, pokoje gościnne – pod dzika roza”/>

<meta name=”description” content=”noclegi Baligród – noclegi w Baligrodzie – nocleg, pokoje gościnne – pod dzika roza”/>

<link rel=”stylesheet” rev=”stylesheet” href=”baligrodcss.css”/>

<script type=”text/javascript” language=”Javascript” src=”menup.js”>

</script> </head>

<body>

Sam dokument z arkuszami stylów ma następującą postać. Kursywą zaznaczyłem faktyczną treść dokumentu CSSowego, natomiast kolorem niebieskim komentuje co dana linijka robi.

body { – dany styl odnosi się do całego element body
background-color: #CC5; – ustawienie koloru tła, na jasnooliwkowy color: #black; – kolor tekstu ustawiono na czarny
margin-left: 1.3cm; – margines lewy ma rozmiar 1,3 cm
margin-right: 1.3cm; – podobnie wygląda sprawa z marginesem prawym

}

p { – tutaj odwołujemy się do akapitów, czyli elementów oznaczonych w kodzie strony jako p
text-align: justify; – tekst wewnątrz akapitu jest wyśrodkowany (wyjustowany) margin-left: 7%; – lewy margines stanowi 7% całej szerokości strony

margin-right: 7%; – prawy margines również 7% całej szerokości }

p:first-letter { – odwołanie się do pierwszej litery (bądź pierwszego znaku) akapitu font-weight: bold; – waga czcionki jest bold, czyli mówiąc po normalnemu stosujemy pogrubienie
}

H1 { – odwołanie się do nagłówka H1 color: #008000; – ustawienie koloru

text-align: center; – wycentrowanie tekstu

font-size: 25px; – ustawienie rozmiaru czcionki na 25 pikseli }

H2 { – odwołanie się do nagłówka H2 color:chocolate; – kolor ustawiamy na czekoladowy text-align: center;
font-size: 18px;

}

#stopka { – odwołanie się do element o id stopka, który zamieściłem poniżej text-align: center;

font-size: 13px;

font-style: italic; – tekst pisany kursywą }

<p id=”stopka”> <BR><BR>

&copy;2009-2010 </p>

div { – odwołanie się do wszystkich akapitów bez konkretnej nazwy margin-bottom: 3px; – margines dolny ustawiony na 3 piksele width: 180px; – szerokość akapitu to 180 pikseli
background-color: #CF3;

float: left; – tak zwane ‘pływanie elementu’ ustawione na lewo, czyli element div znajduje się po lewej stronie całości, opływa całość z lewej strony
}

div2 { – odwołenie się do akapitów div2 margin-bottom: 20px;
float: center; – element znajduje się w środku całości text-align: center; – wyśrodkowanie tekstu

}

ul.menu li { – odwołwanie się do element li w pozycji menu font: 12px arial, helvetica, sans-serif; – ustawienia czcionki padding-left: 10px; – lewe dopełnienei ustawione na 10 pikseli

}