Stylování

Jednotlivé stránky (html soubory) konkrétního webu by měly vypadat stejně. Vzhled stránek (jestli písmo bude červené nebo zelené, zda bude tabulka maková nebo onaká,...) lze nastavit pomocí stylování. My budeme používat externí soubor (3. externí stylopis), kam tyto vlastnosti (barvu písma, zarovnání,...) jednotlivých elementů (nadpisů, tabulek,...) sepíšeme, a pomocí linků určíme, které html soubory se jím mají řídit.)

Přehled vlastností - Externí odkazy:

• Css - Jak psát web

• Css   -  Inetwork

• souhrn požadavků

 Možnosti Stylování

1.- přímý styl.

 Pomocí atributu style="...". 

Např.:

<div style='position: absolute; left: 10;...'> vlastnosti se oddělují středníkem, za název se dává : úvozovky jsou až na konci.

2. Pomocí "stylopisu" (angl. "stylesheet") v hlavičce stránky mezi tagy <style> a </style>..

Např.:

<style>

p    {color: blue}

</style>

udělá všechny odstavce souboru modrým písmem

3. Externí stylopis - to je soubor *.css, na který se stránka odkazuje tagem

<link rel='stylesheet' type='text/css' href='styly.css'> v hlavičce.

V souboru je umístěný stylopis. 

Na soubor může  odkazovat libovolný počet stránek obvykle téhož webu, takže pak vypadá celý web podobně.

V souboru se zapisuje tag - selektor, jeho vlastnosti a jejich hodnoty.

Např.:

body { background: url('znak_www.gif') repeat fixed;  margin-left: 8px; margin-top:8px; font-face: Times New Roman }

h1 {color: #ff4500}

h2 {color: #8b0000; font-style: italic}

h3 {color: #2f5f5f; font-style: bold}

h4 {color: black; font-style: bold}

Zápis stylu

selector {

vlastnost1: hodnota;

vlastnost2: hodnota a upresneni;

}

Násobné stylování:

mají-li mít například nadpisy stejnou barvu

h1, h2  {color: #8b0000; font-style: italic;}

Třídy a identifikátory:

Všechny odstavce, nebo buňky tabulek na stránce nemusí být stejné. K jejich odlišení mohu  použít třídy class (například potřebuji li odlišit některé části tabulky - buňka číslo - nebo odstavce - otázka nebo odpověď)

V html kodu zapíšu pak například tag pro odstavec <p>:

    <p class='otazka'>Kolik má rok měsíců?</p>

     <p class='odpoved'>Dvanáct</p>

V css nadefinuji, jak má otazka a odpoved vypadat (např. barva textu červená/modrá)

      .otazka{color: red;}

      .odpoved{color: blue;}

Příklady použití tříd (class):

.all {

 text-align: left;

 border: 0px;

 margin-top: 10px;

 margin-left: auto;

 margin-right: auto;

}

.title {

 color: White;

 border: 1px solid #006600;

 background-color: green;

 }

Použít identifikátorů (Id):

#menu {

 text-align: center;

 margin-top: 10px;

 margin-left: auto;

 margin-right: auto;

}

#title {

 color: White;

 border: 1px solid #006600;

 background-color: green;

 }

<tag id="jmeno_identifikatoru">

Rozdíl class  x Id 

Id může být v celém HTML dokumentu pouze jeden. 

Class můžeme přiřadit několika elementům., např více buňkám v tabulce.

Id se využívá ke stylování unikátních prvků na stránce.

Kontextové deklarace

h2 a  {

font-style: italic; color: red; 

}

<h2>Obyčejný text nadpisu s <a>odkazem kurzívou</a></h3>