Informacja o stylu bezpośrednio w elementach

<p style="font-style: italic">Papkin, Śmigalski, kilku służących z kijami...</p>
<h3 style="color: blue">PAPKIN</h3>
<p style="color: blue">Panie majster, proszę waści</p>

Dziedziczenie

Informacja o stylu dotycząca elementu jest dziedziczona przez jego podelementy. Na przykład we fragmencie:

<ol style="color: red">
	<li>Telewizja Polska:
		<ol>
			<li>TVP1</li>
			<li>TVP2</li>
		</ol>
	</li>
	<li>Grupa ITI:
		<ol>
			<li>TVN</li>
			<li style="color: blue">TVN 24</li>
		</ol>
	</li>
</ol>

Kolor czerwony będzie miała nie tylko zewnętrzna lista, ale także listy zagnieżdżone.

Informacja o stylu może być w podelemencie „nadpisana”, w powyższym przykładzie TVN 24 będzie miał jednak kolor niebieski.

1. Telewizja Polska:
   1. TVP1
   2. TVP2
2. Grupa ITI:
   1. TVN
   2. TVN 24

Grupowanie

Nie zawsze dokument w naturalny sposób zawiera takie elementy, które obejmują cały fragment dokumentu, któremu chcemy nadać jakiś styl.

Dlatego HTML zawiera dwa elementy bez nadanego znaczenia semantycznego, ale umożliwiające grupowanie fragmentu dokumentu i nadanie mu określonego stylu.

Elementu div używa się na poziomie bloków (może on zawierać inne bloki, nagówki, akapity, listy, tabele).

Elementu span używa się na poziomie tekstu wewnątrz wierszowego (tzn. może zawierać inne span-y wyróżnienia, cytaty itp., odnośniki, obrazki, ale nie paragrafy div-y, listy itp.).

<p style="font-style: italic">Papkin, Śmigalski, kilku służących z kijami, później Rejent i Cześnik w oknach</p>
<div style="color: blue">
<h3>PAPKIN</h3>
<p>Panie majster, proszę waści</p>
<p>Przyzwoicie, grzecznie, ładnie,</p>
</div>

Globalne definicje stylu

Stylu nie trzeba pisać w każdym elemencie, którego dotyczy. Zamiast tego można raz zdefiniować styl, który będzie stosowany dla wszystkich takich samych elementów.

Załóżmy na przykład, że nie chcemy umieszczać marginesu przed/po akapicie. Odpowiednia definicja stylu to margin: 0.

Zamiast umieszczać ją w każdym znaczniku p umieścimy ją w osobnym pliku, tzw. arkuszu stylu, a w dokumencie powiemy, że chcemy ten arkusz dołączyć.

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

p {
	margin: 0;
}

h3 {
	margin: 2pt 0;
	font-weight: bold;
}

Klasy

Do tej pory nauczyliśmy się jak podać jeden styl dla wszystkich elementów p, inny (ale też jeden) dla wszystkich elementów div itd.

Ale często jest tak, że niektóre elementy tego samego typu mają wyglądać inaczej. Np. u nas wypowiedzi poszczególnych osób chcemy oznaczyć innymi kolorami, a didaskalia chcemy mieć czcionką pochyloną.

Do rozróżniania elementów tego samego typu, które mają wyglądać różnie służą klasy. Wszystko powinien wyjaśnić poniższy przykład.

<p class="did">Papkin, Śmigalski, kilku służących z kijami, później Rejent i Cześnik w oknach</p>

<div class="papkin">
<h3>PAPKIN</h3>
<p>Panie majster, proszę waści</p>
...
</div>

div.papkin {
	color: green;
}

div.rejent {
	color: blue;
}

Kolory

Kolor można okreslić poprzez nazwę: black,green,silver,lime, gray,olive,white,yellow, maroon,navy,red,blue, purple,teal,fuchsia,aqua

Można też podać dowolny kolor w systemie RGB: dla każdego z kolorów składowych (czerwony, zielony, niebieski) podaje się wartość tego koloru w przedziale od 0 do 255.

div.papkin {
	color: green;
}

div.rejent {
	color: rgb(0,24,255);
}

body {
	background-color: rgb(220,220,230);
}

Pudełka

Elementy z poziomu bloków (np. div, p, ol, li) są wyświetlane jako prostokątne „pudełko”. Mogą zawierać inne pudełka oraz tekst (no i obrazki itp.).

W CSS można okreslić cechy tych pudełek, takie jak marginesy, obramowanie, położenie.

Długość podaje się jako wartość i jednostkę miary. Jednostki miary to m.in. piksel, punkt drukarski. Przy zerze nie trzeba podawać jednostki.

Każdą z cech dotyczących pudełek można poda wspólnie dla wszystkich czterech stron, ale także osobno w kolejności: góra, prawo, dół, lewo.

div {
	margin: 5pt;
	padding: 0 2pt 0 4pt;
	border-width: 4px;
	border-style: outset;
	border-color: red;
	background-color: silver;
}

Czcionka

Przepływ tekstu