Marginesy i wcięcia

text-indent

wcięcie pierwszego wiersza tekstu

margin

margines zewnętrzny (wypełniony kolorem tła elementu nadrzędnego)

padding

margines wewnętrzny (wypełniony kolorem tła bieżącego elementu)

Wartością jest wielkość, np. w pikselach bądź milimetrach. Można podać jedną wartość dla wszystkich czterech stron lub cztery wartości w kolejności dla stron: góra, prawo, dół, lewo.

Można też podawać margines tylko dla określonej strony, np. margin-top.

img {
	margin: 5px;
	border-color: red green blue maroon; 
}

p {
	text-indent: 2em;
}

Obramowania

border-style

styl obramowania: none, solid, double dotted, dashed, outset, inset, ridge, groove

border-color

kolor obramowania

border-width

szerokość obramowania

Podobnie jak dla marginesów można podać jedną wartość dla wszystkich stron lub po kolei dla czterech kierunków.

Można też podawać tylko dla określonej strony, np. border-top-width.

Obramowanie występuje między obszarem marginesu zewnetrznego (margin), a obszarem marginesu wewnętrznego (padding), co widać na tym obrazku.

img {
	border-style: outset;
	border-width: 4px;
	border-color: #88AAFF;
}

Rozmiar bloku

width, height

na sztywno podana szerokość i wysokość bloku

min-width, max-width, min-height, max-height

minimalny i maksymalny rozmiar bloku

h1 {
	border-style: solid; /* żeby było widać granice bloku */
	min-height: 2em;
	width: 60%;
	margin: 5px auto 10px auto; /* wyśrodkowanie całego bloku na stronie */
}

Klasy

Chociaż HTML zawiera wiele znaczników, czasami jest to dla za mało. Na przykład możemy chcieć w szczególny sposób oznaczyć akapity, które są definicjami, po to, by nasz arkusz stylu "wiedział", że ma je w szczególny sposób wyświetlić.

Nie powinniśmy w takiej sytuacji wpisywać stylu bezpośrednio w HTML-u, gdyż wtedy musielibyśmy to robić dla każdego akapitu-definicji i w przypadku późniejszej zmiany stylu moglibyśmy przeoczyć jakieś jego wystąpienie.

Właśnie w takich sytuacjach można wykorzystać atrybut class, który powie nie dość, że akapit jest akapitem, ale że jest akapitem szczególnym, akapitem będącym definicją.

<p>Zwykły akapit tekstu.</p>
<p class="definicja">
	Urządzenie, które służy do pisania na komputerze, zwie się <dfn>klawiaturą</dfn>.
</p>

DIV i SPAN

Czasami chcemy oznaczyć jakiś fragment dokumentu, objąć go nawiasem, ale ten fragment nie ma znaczenia związanego z żadnym z dostępnych w HTML elementów, nie jest ani akapitem, ani listą, ani cytatem itd.

Można wtedy skorzystać z elementów div i span, które nie niosą żadnego szczególnego znaczenia. div jest elementem poziomu blokowego (może zawierać inne bloki i tekst), span jest elementem poziomu tekstowego (może zawierać tylko tekst z zanurzonymi znacznikami poziomu tekstowego).

W pełni odkryjemy sens stosowania tych elementów, gdy połączymy je z klasami, co pozwoli nadać im znaczenie i wykorzystać je w arkuszach stylu.

<div class="obrazek">
	<img src="eu07_duze.jpg" alt="Zdjęcie lokomotywy EU07">
	<br>
	Kielce, <span class="data">sierpień 2002</span>
</div>

div.obrazek {
	border-style: solid;
	border-color: black;
	border-width: 1px;
	padding: 5px;
	text-align: center;
}

span.data {
	font-family: sans-serif;
	font-style: italic;
}

img {
	margin: 5px;
}