CSS - Historie editací

Spravce: Zrušena kategorie Category:Internet.

2017-01-30T10:23:24Z

← Starší verze		Verze z 30. 1. 2017, 10:23
Řá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>

Spravce: /* Vlastní styly */ Oprava vzhledu

2015-01-29T10:18:46Z

Vlastní styly: Oprava vzhledu

← Starší verze		Verze z 29. 1. 2015, 10:18
Řádka 59:		Řádka 59:
	== Další užitečné vlastnosti ==		== Další užitečné vlastnosti ==
	* <code>border-radius</code>: zakulacení rohů (viz [http://www.jakpsatweb.cz/css/border-radius.html JakPsatWeb.cz])		* <code>border-radius</code>: zakulacení rohů (viz [http://www.jakpsatweb.cz/css/border-radius.html JakPsatWeb.cz])
		+

	== Vlastní styly ==		== Vlastní styly ==
Řádka 102:		Řá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ů ==

Spravce: /* Základní vlastnosti */ Přidán border-radius

2015-01-29T07:32:35Z

Základní vlastnosti: Přidán border-radius

← Starší verze		Verze z 29. 1. 2015, 07:32
Řádka 56:		Řádka 56:
	</div>		</div>

		+
		+	== Další užitečné vlastnosti ==
		+	* <code>border-radius</code>: zakulacení rohů (viz [http://www.jakpsatweb.cz/css/border-radius.html JakPsatWeb.cz])

	== Vlastní styly ==		== Vlastní styly ==

Spravce: Oprava vzhledu hlavičky

2015-01-07T11:33:06Z

Oprava vzhledu hlavičky

← Starší verze		Verze z 7. 1. 2015, 11:33
Řádka 3:		Řádka 3:
	<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><b></code>, <code><i></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><font></class>, <class><i></class>,...). To už je ale dnes překonané a určitě takové atributy a elementy nedoporučujeme používat!</div>

Spravce: /* Připojení souboru se styly ke stránce */ Oprava vysvětlujícího popisu.

2015-01-07T11:29:38Z

Připojení souboru se styly ke stránce: Oprava vysvětlujícího popisu.

← Starší verze		Verze z 7. 1. 2015, 11:29
Řádka 10:		Řádka 10:

	== 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><head></code>) doplníme odkaz na soubor se styly:		* Do hlavičky HTML souboru (element <code><head></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 32:
	}		}
	</div>		</div>
−

	== Základní vlastnosti ==		== Základní vlastnosti ==

Spravce: Osamostatnění stránky, revize a doplnění.

2015-01-07T11:25:39Z

Osamostatnění stránky, revize a doplnění.

Nová stránka

[[Category:VSE]][[Category:Informatika]][[Category:Internet]][[Category:CRI]][[Category:HTML]]

<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í,...).
Grafický vzhled prvků stránky by měl být popsán pomocí kaskádových stylů!

<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><font></class>, <class><i></class>,...). To už je ale dnes překonané a určitě takové atributy a elementy nedoporučujeme používat!</div>

== Základní použití ==
=== Připojení souboru se styly ke stránce ===
; V HTML souboru
* Do hlavičky HTML souboru (element <code><head></code>) doplníme odkaz na soubor se styly:

<code><link rel="stylesheet" type="text/css" href="''nazev_souboru''.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:
** název elementu, kterému vlastnost přiřazujeme,
** a pak do složených závorek názvy vlastností a jejich hodnoty.

<div class="Priklad">
Příklad: Tímto zápisem nastavíme všem nadpisům ve stránce zelenou barvu:
h1 {
color: green;
}
</div>

== Základní vlastnosti ==
Stylu můžeme nastavovat různé vlastnosti. Jejich výčet najdete na webu, nejběžnější uvádíme:
* <code>color</code>: barva textu
* <code>background-color</code>: barva pozadí
* <code>border</code>: orámování textu či bloku
* <code>margin</code>, <code>padding</code>: vlastnosti okrajů odstavce, obrázku atd.
* <code>font-weight</code>: tučné písmo
* <code>font-style</code>: kurzíva
* <code>text-align</code>: zarovnání textu (na střed, do bloku, vlevo, vpravo)
* <code>text-indent</code>: odsazení prvního řádku odstavce

<div class="Priklad">
Příklad:
h2 {
color: blue;
background-color: lightblue;
border: solid 2px blue;
text-align: center;
}
</div>

== 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)
* Stejně jako přiřazení vzhledu existujícímu elementu, ale místo názvu elementu uvedeme název stylu.
* Název vlastního stylu uvozujeme tečkou.
* Název nemůže obsahovat mezeru!

<div class="Priklad">
Soubor se styly: styly.css
h1 {
color: blue;
}
'''.'''OdbornyTermin {
font-style: italic;
color: blue;
}
</div>

; Použití stylu na vybraný text (v HTML)
* Text ohraničíme značkami <code>span</code> nebo <code>div</code>:
** <code>div</code> vytvoří samostatný odstavec z označeného textu
** <code>span</code> pouze aplikuje styl na označený text.
* V otvírací značce doplníme atribut <code>class</code> s název stylu jako hodnotou.

<div class="Priklad">
HTML soubor: <tt>index.html</tt>
<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>
</div>

; Výsledek:
<div class="Priklad">
Výsledek (v prohlížeči):
<div style="color:blue; text-size: bigger; font-weight: bold">Obyčejný nadpis</div>
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>

== 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ů
* Můžeme říci, že se vlastnosti uplatní pouze pokud je element vnořen v jiném elementu.
* Zapíšeme to tak, že napíšeme nejprve název „obalujícího“ elementu a pak název vnořeného elementu. Styl se uplatní na vnořený element.
<div class="Priklad">
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;
}
</div>
; Společný vzhled
* Můžeme nastavit vlastnosti více stylům zároveň.
* Zapíšeme to tak, že názvy stylů oddělíme čárkou.
<div class="Priklad">
V následujícím případě se ohraničení uplatní na vlastní styl <tt>.Poznamka</tt> i na elementy <tt>table</tt>:
.Poznamka, table {
border: 1px blue;
}
</div>
* Následně můžeme ještě popis stylů doplňovat.
<div class="Priklad">
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;
}
</div>

== Rozdělení stránky na oddíly ==

Vlastnosti v kaskádových stylech
* <code>float</code>: plovoucí objekt: vlevo, vpravo, na středu
* <code>width</code>: šířka bloku
* <code>height</code>: výška bloku

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

Na tyto styly se odkazujeme pomocí atributu <code>id</code>.

<div class="Priklad">
HTML soubor: <tt>index.html</tt>
<div id="Menu">
Položka 1<br />
Položka 2
</div>
<p>Text text text...</p>
CSS soubor: <tt>styl.css</tt>
#Menu {
float: left;
width: 100px;
background-color: yellow;
}
Výsledek (v prohlížeči):

<div style="float: left; width: 100px; background-color: yellow;">Položka 1<br />Položka 2</div>Text text text...<br /><br /><br />

</div>

== Související stránky ==
* [[HTML| Základy jazyka HTML, nástroje]]
* [[Testování webových stránek]] (při vývoji stránky)
* [[Publikování stránky| Publikování hotové stránky]]
* Cvičení na HTML a CSS:
*#[[Cvičení HTML]]
*# [[Cvičení HTML 2]]
*# [[Cvičení HTML 3]]
*# [[Cvičení HTML 4]]
*# [[Cvičení HTML 5]]

== Podrobnější zdroje ==
* GRIMMICH, Šimon. Tvorba webu [online]. c2003, c2008 [cit. 2010-10-06]. Dostupné z WWW: <[http://www.tvorba-webu.cz/css http://www.tvorba-webu.cz/css]>.
; Seznam vlastností CSS:
* [http://www.jakpsatweb.cz/css/vlastnosti.html Jak psát web.cz → Seznam CSS vlastností]
; Učebnice:
* [http://www.tvorba-webu.cz/css/ Tvorba-webu.cz > CSS]
* [http://www.w3schools.com/css/default.asp W3Schools.com > CSS]
; Webové pomůcky — Somacon.com:
* [http://www.somacon.com/p142.php Barvy na Internetu]
* [http://www.somacon.com/p141.php Průvodce styly tabulek]