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, vyvarujeme se i přímého zápisu stylu u html značky, neboť následné změny při při úpravě designu internetových stránek by byly pracné.
Nevhodné: <h1 style="text-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
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;} | |
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; |