Použití stylů v dokumentu
Aplikování stylů je možné hned několika způsoby:
- použitím <link> elementu k připojení externího souboru se styly
- použitím pravidla @import v <style> elementu k připojení externího souboru se styly
- definicí stylů v dokumentu v elementu <style>
- použitím atributu style přímo v elementu, který chceme styly ovlivnit
Použití <link> elementu
Jeho výhodou je, že jsou veškeré styly v externím souboru [např. styly.css], tím pádem lze jednoduše měnit vzhled celého projektu.
<link> je uzavřen v elementu <head>
<head> <title>Externí stylopis</title> <link href="styly.css" rel="stylesheet" type="text/css" /> </head>
Použití @import pravidla
@import pravidlo slouží k načtení externího stylopisu do dokumentu stejně jako předchozí případ.
Používá se k zadání konkrétních stylových změn pro daný dokument.
Opět se zadává do hlavičky dokumentu, tentokrát uvnitř elementu <style>
<head>
<title>Externí stylopis</title>
<style type="text/css">
@import "styly.css";
/* a nebo takto */
@import url("http://www.stranka.cz/styly.css");
</style>
</head>
Definice stylů v elementu <style>
Náročné na práci, definice vzhledu elementů je na každé stránce (souboru) dokumentu. Doporučuje se u malých prezentací, nepřesahující několik stránek.
<head>
<title>Externí stylopis</title>
<style type="text/css">
h1 {color: red}
ul>li {list-style-type: square; color: blue}
</style>
</head>
Použití atributu style v elementu
Používá se zejména k definici vzhledu jednoho konkrétního elementu, na stejné elementy na jiném místě
dokumentu se stylopis neuplatňuje.
Může se použít při jednostránkové prezentaci k ostylování všech elementů, u vícestránkové,
rozsáhlé prezentaci tento postup postrádá smysl a je velmi náročný.
<p style="color: red; font-size: 1.5em"> Nějaký text. </p>