CSS

Z MiS
(Rozdíly mezi verzemi)
Přejít na: navigace, hledání
(Osamostatnění stránky, revize a doplnění.)
 
m (Zrušena kategorie Category:Internet.)
 
(Nejsou zobrazeny 4 mezilehlé verze od 1 uživatele.)
Řádka 1: Řádka 1:
−
[[Category:VSE]][[Category:Informatika]][[Category:Internet]][[Category:CRI]][[Category:HTML]]
+
[[Category:VSE]][[Category:Informatika]][[Category:CRI]][[Category:HTML]]
  
 
<div class="Poznamka">Podrobnější materiály: http://www.tvorba-webu.cz/css/</div>
 
<div class="Poznamka">Podrobnější materiály: http://www.tvorba-webu.cz/css/</div>
  
−
Jazyk HTML by dnes měl popisovat pouze strukturu dokumentu (co je nadpis, co tabulka,...), nikoli vzhled prvků (barvy, ohraničení, uspořádání,...).
+
* V prvopočátcích jazyka HTML kaskádové styly neexistovaly a vzhled se definoval pomocí atributů HTML elementů či dokonce speciálních elementů (<code>&lt;b&gt;</code>, <code>&lt;i&gt;</code>,...).
−
Grafický vzhled prvků stránky by měl být popsán pomocí kaskádových stylů!
+
* To už je ale dnes překonané a určitě takové atributy a elementy nedoporučujeme používat!
 +
 
 +
<div class="Varovani">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ů!</div>
  
−
<div class="Poznamka">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>&lt;font&gt;</class>, <class>&lt;i&gt;</class>,...). To už je ale dnes překonané a určitě takové atributy a elementy nedoporučujeme používat!</div>
 
  
  
 
== Základní použití ==
 
== Základní použití ==
−
=== Připojení souboru se styly ke stránce ===
+
Grafický vzhled webu popíšeme tak, že:
 +
# Do speciálního textového souboru s příponou <code>.css</code> zapíšeme, jak mají jednotlivé elementy vypadat. (Dále jen ''soubor se styly''.)
 +
# Do každé stránky webu vložíme odkaz na soubor se styly.
 +
 
 +
 
 
; V HTML souboru
 
; V HTML souboru
 
* Do hlavičky HTML souboru (element <code>&lt;head&gt;</code>) doplníme odkaz na soubor se styly:
 
* Do hlavičky HTML souboru (element <code>&lt;head&gt;</code>) doplníme odkaz na soubor se styly:
  
 
  <code><link rel="stylesheet" type="text/css" href="''nazev_souboru''.css" /></code>
 
  <code><link rel="stylesheet" type="text/css" href="''nazev_souboru''.css" /></code>
 +
  
 
; V souboru se styly (<code>.css</code>)
 
; V souboru se styly (<code>.css</code>)
−
* (Jedná se o textový soubor s příponou <code>.css</code>)
 
 
* Popíšeme, jaké grafické vlastnosti mají mít jednotlivé elementy a další prvky. Vždy uvádíme:
 
* Popíšeme, jaké grafické vlastnosti mají mít jednotlivé elementy a další prvky. Vždy uvádíme:
 
** název elementu, kterému vlastnost přiřazujeme,  
 
** název elementu, kterému vlastnost přiřazujeme,  
Řádka 28: Řádka 34:
 
  }
 
  }
 
</div>
 
</div>
−
 
  
 
== Základní vlastnosti ==
 
== Základní vlastnosti ==
Řádka 50: Řádka 55:
 
  }
 
  }
 
</div>
 
</div>
 +
 +
 +
== Další užitečné vlastnosti ==
 +
* <code>border-radius</code>: zakulacení rohů (viz [http://www.jakpsatweb.cz/css/border-radius.html JakPsatWeb.cz])
  
  
Řádka 94: Řádka 103:
 
Text, ve kterém je <span style="font-style: italic; color: blue">odborný termín</span>. A druhý <span style="font-style: italic; color: blue">pojem</span> je také odborný termín.
 
Text, ve kterém je <span style="font-style: italic; color: blue">odborný termín</span>. A druhý <span style="font-style: italic; color: blue">pojem</span> je také odborný termín.
 
</div>
 
</div>
−
 
  
 
== Další způsoby připojení stylů ==
 
== Další způsoby připojení stylů ==

Aktuální verze z 30. 1. 2017, 10:23


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