CSS

Z MiS
Verze z 7. 1. 2015, 11:25; Spravce (diskuse | příspěvky)
(rozdíl) ← Starší verze | zobrazit aktuální verzi (rozdíl) | Novější verze → (rozdíl)
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ů!

V prvopočátcích jazyka HTML kaskádové styly neexistovaly a vzhled se definoval pomocí atributů HTML elementů či dokonce speciálních elementů (<class><font></class>, <class><i></class>,...). To už je ale dnes překonané a určitě takové atributy a elementy nedoporučujeme používat!


Obsah

Základní použití

Připojení souboru se styly ke stránce

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;
}


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://mis.e-mis.cz/index.php/CSS“
Osobní nástroje
Jmenné prostory
Varianty
Akce
Výuka
Navigace
Nástroje