Tabela 1 Przydatne właściwości określające postać strony.

Właściwość	Opis
margin-top	Konfiguruje obszar pomiędzy elementem a jego sąsiadami (górny margines elementu). Można go definiować w jednostkach absolutnych, w procentach względem szerokości tekstu lub automatycznie (wartość auto).
margin-right	Konfiguruje obszar pomiędzy elementem a jego sąsiadami (prawy margines elementu). Można go definiować w jednostkach absolutnych, w procentach względem szerokości tekstu lub automatycznie (wartość auto).
margin-bottom	Konfiguruje obszar pomiędzy elementem a jego sąsiadami (dolny margines elementu). Można go definiować w jednostkach absolutnych, w procentach względem szerokości tekstu lub automatycznie (wartość auto).
margin-left	Konfiguruje obszar pomiędzy elementem a jego sąsiadami (lewy margines elementu). Można go definiować w jednostkach absolutnych, w procentach względem szerokości tekstu lub automatycznie (wartość auto).
Margin	Właściwość skrótowa dająca możliwość łatwiejszego określenia właściwości margin-top, margin-right, margin-bottom oraz margin-left. Akceptowane wartości tej właściwości to długości wyrażone liczbowo, wartości procentowe lub wartość auto.
Padding-top	Określa odległość pomiędzy górną granicą obszaru a elementami zawartymi w tym obszarze. Odległość może być podawana w dowolnych stosowanych jednostkach miary, w procentach lub automatycznie (wartość auto).
Padding-right	Określa odległość pomiędzy granicą obszaru z prawej strony a elementami zawartymi w tym obszarze. Odległość może być podawana w dowolnych stosowanych jednostkach miary, w procentach lub automatycznie (wartość auto).
Padding-bottom	Określa odległość pomiędzy dolną granicą obszaru a elementami zawartymi w tym obszarze. Odległość może być podawana w dowolnych stosowanych jednostkach miary, w procentach lub automatycznie (wartość auto).
Padding-left	Określa odległość pomiędzy granicą obszaru z lewej strony a elementami zawartymi w tym obszarze. Odległość może być podawana w dowolnych stosowanych jednostkach miary, w procentach lub automatycznie (wartość auto).
Padding	Określa odległości pomiędzy granicą obszaru a elementami zawartymi w tym obszarze. Odległość może być podawana w dowolnych stosowanych jednostkach miary, w procentach lub automatycznie (wartość auto).

We właściwościach margin oraz padding można podać od jednej aż do czterech wartości, które będą interpretowane w następujący sposób:

• jedna wartość — będzie dotyczyła wszystkich czterech marginesów lub wypełnień,

• dwie wartości — pierwsza z nich będzie dotyczyła górnego i dolnego wypełnienia lub marginesu, natomiast druga — prawego i lewego,

• trzy wartości — pierwsza wartość dotyczy górnego marginesu lub wypełnienia, druga — prawego i lewego, natomiast trzecia wartość — dotyczy dolnego marginesu lub wypełnienia.

h2 {

padding-top: 15px;

padding-bottom: 15px;

background-color: #ccffcc;}

Tabela 2 Właściwości CSS określające postać tła

Właściwość	Opis
Background-color	Określa kolor tła dla elementu. Możliwymi wartościami są nazwy kolorów (lub odpowiadający im heksadecymalny „tryplet” rgb) lub słowo transparent.
Background-image	Definiuje obraz jako tło elementu. Wartością powinien być adres URL pliku obrazu lub słowo none.
Background-repeat	Jeśli konieczne jest złożenie tła z identycznych obrazów, ten atrybut umożliwi określenie sposobu wyświetlania tła. Wartości atrybutu to repeat, repeat-x i repeat-y. Wartość repeat wskazuje, że obraz powinien być powielany w sposób normalny. Zastosowanie wartości repeat-x spowoduje powtórzenie obrazu w pojedynczej linii poziomej, a zastosowanie wartości repeat-y — w linii pionowej.
Color	Określa kolor elementu (w większości przypadków dotyczy to koloru tekstu wyświetlanego wewnątrz elementu strony WWW). Kolor można określić, podając jedną z 16 nazw lub używając kilku różnych sposobów zapisu wartości RGB.
Background-attachment	Określa czy obraz tła jest stały (dołączony do dokumentu), czy też będzie przewijany wraz z nim. Dostępne wartości tej właściwości to: scroll oraz fixed.
Background-position	Określa początkowe położenie obrazu tła. Dostępne wartości zostały opisane poniżej w tabeli.
Background	Właściwość skrótowa umożliwiająca określenie jednej lub kilku powyższych właściwości w jednym miejscu arkusza stylów.

body { background-color: #FFCC66;

background-image: url("butterfly.gif");

background-repeat: no-repeat;

background-attachment: fixed;

background-position: right bottom; }

Tabela 3 Właściwości CSS określające postać obramowań

Właściwość	Opis
border-style	Określa styl wszystkich czterech obramowań elementu. Wartości tej właściwości są identyczne jak wartości właściwości border-bottom-style. Styl poszczególnych obramowań można także określać niezależnie, posługując się właściwościami border-bottom-style, border-left-style, border-top-style oraz border-right-style. Dostępne wartości, które można przypisać tej właściwości to: none, dotted, dashed, solid, double, grove, ridge, inset oraz outset.
border-color	Określa kolor wszystkich czterech obramowań elementu. Kolor poszczególnych obramowań można także określać niezależnie, posługując się właściwościami border-bottom-color, border-left-color, border-top-color oraz border-right-color. Wartością tych właściwości może być jedna z 16 nazw kolorów, wartość RGB zapisana w jednej z kilku dostępnych postaci lub też wartość transparent.
border-width	Określa grubość wszystkich czterech obramowań elementu. Grubość p szczególnych obramowań można także określać niezależnie, posługując się właściwościami border-bottom-width, border-left-width, border-top-width oraz border-right-width. Dostępne wartości to: thin, medium, thick lub też wartość określająca długość.
Border	Właściwość skrótowa umożliwiająca jednoczesne określenie grubości, stylu oraz koloru wszystkich czterech obramowań elementu. Wygląd poszczególnych obramowań elementu (jego grubość, kolor oraz styl) można także określa niezależnie, przy użyciu właściwości border-bottom, border-left, border-top oraz border-right.

h1 {

border-color: #cccc33 #cc9933;

border-style: outset;

border-width: thin }

Tabela 4 Właściwości CSS określające postać czcionek

Właściwość	Opis
font-family	Określa krój czcionki. Pozwala na podanie nazwy czcionki (na przykład: Arail, Times lub Palatino),bądź jednej z pięciu ogólnych nazw czcionek: serif, sans-serif, cursive, fantasy lub monospace.
font-size	Określa wielkość czcionki, wyrażoną w wielkościach bezwzględnych, względnych lub jako wartość procentową.
font-style	Określa styl czcionki, może to być jedna z wartości: oblique, italic lub normal.
font-weight	Określa grubość (wagę) czcionki, można ją ustalić przy użyciu wartości normal, bold, bolder, lub lighter.
font-variant	Określa modyfikację czcionki, może to być wartość small-caps lub normal.
Font	Właściwość skrótowa umożliwiająca określenie wartości właściwości font-weight, font-size, font-style, font-family oraz line-height w jednym miejscu arkusza stylów. Właściwość line-height została szczegółowo opisana w następnym podrozdziale, pt.: „Właściwości CSS określające wyrównanie tekstu”.

p {font-family: arial, verdana, sans-serif;}

td {font-family: arial, verdana, sans-serif; font-weight: bold;}

Tabela 5 Właściwości CSS określające wyrównanie tekstu

Właściwość	Opis
word-spacing	Umożliwia zwiększenie domyślnych odstępów pomiędzy wyrazami. Odstępy są podawane w jednostkach absolutnych. Wartość domyślna to normal.
letter-spacing	Umożliwia zwiększenie domyślnych odstępów pomiędzy literami. Odstępy są podawane w jednostkach absolutnych. Wartość domyślna to normal.
line-height	Określa odległość pomiędzy liniami bazowymi dwóch kolejnych linii. Wartość liczbowa określa, że wysokość linii będzie wielkością czcionki pomnożoną przez podaną liczbę, na przykład, line-height: 2 tworzy linię o wysokości równej dwukrotnej wielkości czcionki. Właściwości line-height można także przypisać wartość bezwzględną. Na przykład, line-height: 15px oznacza, że wysokość linii będzie wynosiła 15 pikseli. W przypadku podania wartości procentowej, wysokość linii jest obliczana na podstawie wysokości elementu. Na przykład, line-height: 200% jest równoważne podaniu wartości liczbowej: line-height: 2. Można także użyć wartości normal, która sprawi, że linia będzie miała domyślną wysokość. Aktualnie właściwość ta jest obsługiwana przez przeglądarkę Netscape Navigator 4.0
vertical-align	Określa absolutną pozycję tekstu w pionie lub jego pozycję względem elementu nadrzędnego. Oto lista jego wartości: baseline, middle, sub, super, text-top i text-bottom (określają pozycję względem elementu nadrzędnego) oraz top i bottom (określają pozycję względem wiersza). Stosując procentowe wartości ujemne lub dodatnie, obniżamy lub podnosimy element ponad linię bazową elementu nadrzędnego.
text-align	Umożliwia nie tylko to, co standardowe wyrównanie HTML (wartości left, right, center), ale także wyrównanie do obu marginesów (justify). Wartość justify tej właściwości jest aktualnie obsługiwana przez przeglądarkę Netscape Navigator 4.0, Internet Explorer 4.0 jej nie obsługuje.
Text-decoration	Umożliwia wprowadzanie dodatkowych ozdobników, takich jak podkreślenie, przekreślenie i miganie. Może przyjmować cztery wartości: none, overline, line-through i blink.
text-indent	Określa wcięcie pierwszej linii sformatowanego tekstu w elemencie. Wartość ta może być wartością bezwzględną lub wartością procentową, bazującą na szerokości elementu. Wartości procentowe określane są na podstawie szerokości elementu i w przeważającej większości przypadków działają najlepiej. Aktualnie właściwość ta jest obsługiwana w Netscape Navigatorze 4.0, Internet Explorer 4.0 nie obsługuje jej.
white-space	Atrybut określa odstępy i złamania wiersza w obrębie elementu. Wartości są następujące: normal — w tym przypadku dodatkowe odstępy są ignorowane, tak jak w przypadku zwykłego HTML, pre — jak w formatowanym wstępnie za pomocą znacznika <PRE> tekście HTML lub nowrap — wiersze są łamane tylko za pomocą znacznika <BR />.

a:link {

color: blue;

text-decoration:none;

}

a:visited {

color: purple;

text-decoration:none;

}

a:active {

background-color: yellow;

text-decoration:none;

}

a:hover {

text-transform: uppercase;

font-weight:bold;

color:blue;

background-color:yellow;

}

JS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=iso-8859-2">

<script type="text/javascript" language="JavaScript">

function changeBgColor (color, id) {

document.bgColor = color;

makeSelectProperties (id);

return 0;

}

function makeSelect (id) {

values = new Array ("#FF0000", "#FFFF00", "#008000", "#000000", "#FFFFFF");

texts = new Array ("Czerwony", "Żółty", "Zielony", "Czarny", "Biały");

output = "<select id='" + id + "' style='background-color: #f0f0f0;' onChange='changeBgColor

(this.options[this.selectedIndex].value, this.id);'>";

for (i = 0; texts[i]; i++)

output += "<option value='" + values[i] + "' style='color: " + values[i] + ";'>" + texts[i] + "</option>";

output += "</select>";

write (output);

makeSelectProperties (id);

return 0;

}

function makeSelectProperties (id) {

x = document.getElementById (id);

for (i = 0; x.options[i]; i++)

if (x.options[i].value == document.bgColor) {

x.selectedIndex = i;

break;

}

x.style.color = x.options[x.selectedIndex].value;

return 0;

}

function write (text) {

if(document.getElementById)

document.getElementById("place").innerHTML= text;

else if(document.all)

document.all.place.innerHTML=text;

else if(document.layers) {

document.layers.place.document.open();

document.layers.place.document.write(text);

document.layers.place.document.close();

}

}

</script>

</head>

<body bgcolor="#000000" onLoad="makeSelect ('colorSelect');">

<div id="place"></div>

</body>

</html>

---