Přeskočit na navigaci

Použití CSS v HTML

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:

 
 ukazkaHTML
 

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-size20px;">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
 
 
 
 
 
 
Aktuálně