HTML

Web o webu

Text

Formát nadpisů a odstavců

Veškeré formátování (písmo, zarovnání textu, odsazení, barvy apod.) provádíme pomocí css stylů. U html značek nepoužíváme žádné formátovací atributy, neboť jejich změny při při úpravě designu internetových stránek by byly pracné.
Špatně:   <h1 align="center">Nadpis zarovnaný na střed</h1>
Správně: <h1>Nadpis zarovnaný na střed</h1>
a v css:     h1 {text-align: center;}

Změna vlastnosti ve společném externím souboru stylů je rychlá a projeví se okamžitě ve všech stránkách webu.

Nejčastější chybou je použití zbytečných html značek tam, kde můžeme použít css styly, např.:
Špatně:   <h1><i>Nadpis psaný kurzívou</i></h1>
Správně: <h1>Nadpis psaný kurzívou</h1>
a v css:     h1 {font-style: italic;}

Nadpisy a odstavce formátujeme tak, že v css souboru definujeme styly pro značky p, h1, h2, atd.

Soubor css stylů pak připojíme pomocí značky link ke všem html souborům - viz kapitola Jazyk HTML - Struktura

Ukázka definice stylů pro nadpisy a odstavce

h1,h2 { 
  font-family: Arial, sans-serif;
  color: #330000;
}
h1 {font-size: 20px;}
h2 {font-size: 16px;}
p  {text-align: justify;}

Chceme-li některý nadpis nebo odstavec odlišit od ostatních (např. zarovnat na střed či použít barvu), definujeme tzv. třídu stylu, kterou pak přiřadíme danému prvku pomocí parametru class.

Ukázka definice třídy stylů

.stred {text-align: center;}

stred je vlastní název třídy stylu (musí být bez diakritiky a bez mezer), tečka na začátku označuje, že se jedná o třídu (může být přiřazena různým prvkům pomocí parametru class):

<h1 class="stred">Nadpis zarovnaný na střed</h1>
<p class="stred">Odstavec zarovnaný na střed</p>

Pozn.: Chceme-li zarovnat všechny nadpisy h1 na střed, zapíšeme vlastnost text-align: center; přímo do definice stylu h1.

Základní css vlastnosti pro nadpisy a odstavce

Vlastnosti písma
font-family druh písma font-family: Arial; font-family: Helvetica, Arial, serif;
font-size velikost písma font-size: 1em; font-size: 1.2em;
font-size: 110%; font-size: 16px;
font-weight tučné písmo font-weight: bold; font-weight: normal;
font-style kurzíva font-style: italic; font-style: normal;
Vlastnosti textu
text-align zarovnání textu text-align: left; text-align: center;
text-align: right; text-align: justify;
Barvy
color barva písma color: red; color: #DAC6BB;
color: rgb(255,0,0); color: rgb(85%,78%,73%);
background-color barva pozadí background-color: transparent; background-color: #cc6633;

Další užitečné vlastnosti

Okraje
margin vnější okraj margin: 10px; margin: 10px 0px 5px 0px;
margin-top horní okraj margin-top: 10px; margin: 10px 0px 0px 0px;
margin-bottom dolní okraj margin-bottom: 5px;
margin-left levý okraj margin-left: 0px;
margin-right pravý okraj margin-right: 0px;
padding vnitřní okraj - vybarven barvou pozadí padding: 15px; padding: 10px 0px;
padding-top horní okraj padding-top: 10px;
padding-bottom dolní okraj padding-bottom: 5px;
padding-left levý okraj padding-left: 15px;
padding-right pravý okraj padding-right: 15px;
Odsazení prvního řádku
text-indent odsazení prvního řádku textu text-indent: 2em; text-indent: 20px;
Pseudotřída pro první písmeno
h1:first-letter první písmeno hlavního nadpisu h1:first-letter {color: maroon;}
p:first-letter první písmeno každého odstavce p:first-letter {font-size: 150%; font-weight: bold;}