Szybki tutorial

Arkusz stylów składa się z reguł, które mówią przeglądarkom jak mają wyświetlać dany dokument. Istnieje kilka sposobów łaczenia tych reguł z dokumentami HTML, ale najprostrzym jest zastosowanie elementu STYLE w HTML. Element ten jest umieszczony w sekcji HEAD i zawiera reguły jedynie dla danej strony.

Element STYLE może być jedynie medodą eksperymentacji z CSS, ponieważ posiada on wiele wad. Wady takowe opisane są w innej sekcji niniejszego tutorialu.

Każda reguła składa się z selektora – zazwyczaj elementu HTML np.: BODY, P lub EM–i stylu jaki powinien dany element używać.

Istnieje wiele właściwości definiujących dany element. Każda właściwość zawiera w sobie wartość, które razem z właściwością pokazuja jak dany selektor ma być prezentowany.

Reguły stylów tworzy się w nastepujący sposób:

selector { property: value }

Kilka deklaracji dla pojedynczego selektora oddziela się średnikiem:

selector { property1: value1; property2: value2 }

Poniższy przykład definiuje właściwości color i font-size dla elementów H1 oraz H2:

<HEAD>
<TITLE>CSS Example</TITLE>

<STYLE TYPE=”text/css”>
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
</STYLE>

</HEAD>

Powyższy arkusz stylów mówi przeglądarce, że nagłówek H1 ma być większy i w kolorze czerwonym, natomiast H2 ma być duży i niebieski. Specyfikacja CSS definiuje właściwości i wartości, które są dostępne.

Niniejszy tutorial jest jedynie wprowadzenie do arkuszy CSS, ale dostracza informacji, które pozwolą na eksperymentowanie z sama ideą CSS.

Szybkie menu