CSS

Z MiS
Přejít na: navigace, hledání


Podrobnější materiály: http://www.tvorba-webu.cz/css/
Jazyk HTML by dnes měl popisovat pouze strukturu dokumentu (co je nadpis, co tabulka,...), nikoli vzhled prvků (barvy, ohraničení, uspořádání,...). Grafický vzhled prvků stránky by měl být popsán pomocí kaskádových stylů!


Obsah

Základní použití

Grafický vzhled webu popíšeme tak, že:

  1. Do speciálního textového souboru s příponou .css zapíšeme, jak mají jednotlivé elementy vypadat. (Dále jen soubor se styly.)
  2. Do každé stránky webu vložíme odkaz na soubor se styly.


V HTML souboru 
<link rel="stylesheet" type="text/css" href="nazev_souboru.css" />


V souboru se styly (.css)

Příklad: Tímto zápisem nastavíme všem nadpisům ve stránce zelenou barvu: 

h1 {
  color: green;
}

Základní vlastnosti

Stylu můžeme nastavovat různé vlastnosti. Jejich výčet najdete na webu, nejběžnější uvádíme:

Příklad: 

h2 {
  color: blue;
  background-color: lightblue;
  border: solid 2px blue;
  text-align: center;
}


Další užitečné vlastnosti

Vlastní styly

Pomocí kaskádových stylů můžeme přiřadit vzhled existujícímu elementu HTML (třeba všem nadpisům), ale můžeme také vytvořit vlastní styl a ten použít kdekoli ve stránce.

Vytvoření vlastního stylu (v CSS)

Soubor se styly: styly.css 

h1 {
   color: blue;
}
.OdbornyTermin {
   font-style: italic;
   color: blue;
}
Použití stylu na vybraný text (v HTML)

HTML soubor: index.html 

<h1>Obyčejný nadpis</h1>
<p>
  Text, ve kterém je <span class="OdbornyTermin">odborný 
  termín</span>.
  A druhý <span class="OdbornyTermin">pojem</span> je také 
  odborný termín.
</p>
Výsledek

Výsledek (v prohlížeči):

Obyčejný nadpis

Text, ve kterém je odborný termín. A druhý pojem je také odborný termín.


Další způsoby připojení stylů

Snazší popis více stylů

Pokud je více stylů podobných, můžeme jejich popis kombinovat.

Vnoření elementů

V následujícím případě se velikost písma uplatní na nadpis pouze pokud je v buňce tabulky: 

td h1 { 
    font-size: bigger;
}
Společný vzhled

V následujícím případě se ohraničení uplatní na vlastní styl .Poznamka i na elementy table: 

.Poznamka, table { 
    border: 1px blue;
}

V následujícím případě se barva nastaví nadpisům úrovně 1 i 2, ale velikost textu jen na nadpisy úrovně 1: 

h1, h2 {
    color: indigo;
}
h1 { 
    font-size: bigger;
}


Rozdělení stránky na oddíly

Vlastnosti v kaskádových stylech

Vlastnosti přiřazujeme speciálním stylům, uvozeným znakem #.

Na tyto styly se odkazujeme pomocí atributu id.

HTML soubor: index.html 

<div id="Menu">
  Položka 1

  Položka 2
</div>
<p>Text text text...</p>

CSS soubor: styl.css 

#Menu {
   float: left;
   width: 100px;
   background-color: yellow;
}

Výsledek (v prohlížeči):

Položka 1
Položka 2
Text text text...



Související stránky


Podrobnější zdroje

Seznam vlastností CSS
Učebnice
Webové pomůcky — Somacon.com
Citováno z „http://www.mis.e-mis.cz/index.php/CSS“
Osobní nástroje
Jmenné prostory
Varianty
Akce
Výuka
Navigace
Nástroje