Existují 3 způsoby jak použít CSS:
1. Přímý zápis
v konkrétním tagu HTML kódu
<p style="color: red">Tento odstavec bude červený.</p>
2. Stylopisem
Do hlavičky dokumentu se napíše stylopis uzavřený mezi tagy <style></style>:
<style>
p {color: red}
</style>
a do těla stránky se mohou psát odstavce:
<p>Tento odstavec bude červený. </p>
<p>Tento mimochodem také, protože červené budou všechny.</p>
3. Externím CSS souborem
Vytvoří se soubor, který se pojmenuje třeba styly.css. V něm bude pouze tento text:
p {color: red}
Do hlavičky html dokumentu, který chci stylem ovlivnit, musím napsat odkaz na tento soubor:
<link rel="stylesheet" type="text/css" href="styly.css">
Zde vidíte ukázku, jak bude vypadat část webové stránky v případě využití pouze HTML kódu.
<h1>Nyní nabízíme zvýhodněné balíčky pro nové webové stránky!</h1>
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td valign="middle" align="left">
<p><strong>MINI PACKET</strong></p>
</td>
<td valign="middle" align="right">
<p><strong>6.900,-Kč</strong></p>
</td>
<td valign="middle" align="right">
<p><strong>+ 299,-Kč měsíčně</strong></p>
</td>
</tr>
<tr>
<td valign="top" align="left">
<p>jednoduché presentace o rozsahu přibližně 5ti stran</p>
</td>
<td valign="top" align="left">
<ul>
<li>Výběr ze 3 jednoduchých vzhledů</li>
<li>Přenesení vzhledu webu do redakčního systému iRES</li>
<li>Vložení obsahu stránek</li>
<li>Validace kódu</li>
<li>Optimalizace pro prohlížeče (např. Internet Explorer 7a 8, Firefox, Opera, Google Chrome)</li>
<li>Základní SEO optimalizace pro vyhledávače</li>
</ul>
</td>
<td valign="top" align="left">
<ul>
<li>5 základních mailových účtů ve formátu např. jmeno.prijmeni@vasedomena.cz</li>
<li>WEBHOSTING</li>
<li>Spuštění a vedení domény a redakčního systému iRES</li>
<li>Rozšíření redakčního systému iRES<br />- Fotogalerie</li>
</ul>
</td>
</tr>
</tbody>
</table>
Takto bude vypadat výsledek v prohlížeči:
Nyní se podívejte jak může vypadat stejná část webové stránky, když využijeme i CSS stylů. Pro tento příklad jsme zvolili 1. způsob použití CSS.
<div>
<h1 style="color: #457492; font-size: 20px;">Nyní nabízíme zvýhodněné balíčky pro nové webové stránky!</h1>
</div>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr style="background-color: #457492; color: #ffffff;">
<td valign="middle" align="left" style="border-left: 1px solid #457492; border-top: 1px solid #457492; padding-left: 5px;">
<p><span style="font-size: larger;"><strong>MINI PACKET</strong></span></p>
</td>
<td valign="middle" align="right" style="border-top: 1px solid #457492;">
<p><span style="font-size: larger;"><strong>6.900,-Kč</strong></span></p>
</td>
<td valign="middle" align="right" style="border-right: 1px solid #457492; border-top: 1px solid #457492; padding-right: 5px;">
<p><span style="font-size: larger;"><strong>+ 299,-Kč měsíčně</strong></span></p>
</td>
</tr>
<tr>
<td valign="top" align="left" style="border-left: 1px solid #457492; border-bottom: 1px solid #457492; padding-left: 5px;">
<p>jednoduché presentace o rozsahu přibližně 5ti stran</p>
</td>
<td valign="top" align="left" style="border-bottom: 1px solid #457492;">
<ul style="list-style-type:circle;">
<li>Výběr ze 3 jednoduchých vzhledů</li>
<li>Přenesení vzhledu webu do redakčního systému iRES</li>
<li>Vložení obsahu stránek</li>
<li>Validace kódu</li>
<li>Optimalizace pro prohlížeče (např. Internet Explorer 7a 8, Firefox, Opera, Google Chrome)</li>
<li>Základní SEO optimalizace pro vyhledávače</li>
</ul>
</td>
<td valign="top" align="left" style="border-right: 1px solid #457492; border-bottom: 1px solid #457492; padding-right: 5px;">
<ul style="list-style-type:square;">
<li>5 základních mailových účtů ve formátu např. jmeno.prijmeni@vasedomena.cz</li>
<li style="text-decoration:underline;">WEBHOSTING</li>
<li>Spuštění a vedení domény a redakčního systému iRES</li>
<li>Rozšíření redakčního systému iRES<br /> - Fotogalerie</li>
</ul>
</td>
</tr>
</tbody>
</table>
Takto bude vypadat výsledek v prohlížeči:
Nyní nabízíme zvýhodněné balíčky pro nové webové stránky!
|
MINI PACKET
|
6.900,-Kč
|
+ 299,-Kč měsíčně
|
|
jednoduché presentace o rozsahu přibližně 5ti stran
|
- Výběr ze 3 jednoduchých vzhledů
- Přenesení vzhledu webu do redakčního systému iRES
- Vložení obsahu stránek
- Validace kódu
- Optimalizace pro prohlížeče (např. Internet Explorer 7a 8, Firefox, Opera, Google Chrome)
- Základní SEO optimalizace pro vyhledávače
|
- 5 základních mailových účtů ve formátu např. jmeno.prijmeni@vasedomena.cz
- WEBHOSTING
- Spuštění a vedení domény a redakčního systému iRES
- Rozšíření redakčního systému iRES
- Fotogalerie
|