CSS
Z MiS
(Rozdíly mezi verzemi)
m (→Základní vlastnosti: Přidán border-radius) |
m (→Vlastní styly: Oprava vzhledu) |
||
| Řá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ů == | ||
Verze z 29. 1. 2015, 10:18
Podrobnější materiály: http://www.tvorba-webu.cz/css/
- V prvopočátcích jazyka HTML kaskádové styly neexistovaly a vzhled se definoval pomocí atributů HTML elementů či dokonce speciálních elementů (
<b>,<i>,...). - To už je ale dnes překonané a určitě takové atributy a elementy nedoporučujeme používat!
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:
- Do speciálního textového souboru s příponou
.csszapíš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
- Do hlavičky HTML souboru (element
<head>) doplníme odkaz na soubor se styly:
<link rel="stylesheet" type="text/css" href="nazev_souboru.css" />
- V souboru se styly (
.css)
- 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.
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:
-
color: barva textu -
background-color: barva pozadí -
border: orámování textu či bloku -
margin,padding: vlastnosti okrajů odstavce, obrázku atd. -
font-weight: tučné písmo -
font-style: kurzíva -
text-align: zarovnání textu (na střed, do bloku, vlevo, vpravo) -
text-indent: odsazení prvního řádku odstavce
Příklad:
h2 {
color: blue;
background-color: lightblue;
border: solid 2px blue;
text-align: center;
}
Další užitečné vlastnosti
-
border-radius: zakulacení rohů (viz JakPsatWeb.cz)
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!
Soubor se styly: styly.css
h1 {
color: blue;
}
.OdbornyTermin {
font-style: italic;
color: blue;
}
- Použití stylu na vybraný text (v HTML)
- Text ohraničíme značkami
spannebodiv:-
divvytvoří samostatný odstavec z označeného textu -
spanpouze aplikuje styl na označený text.
-
- V otvírací značce doplníme atribut
classs název stylu jako hodnotou.
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ů
- 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.
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
- Můžeme nastavit vlastnosti více stylům zároveň.
- Zapíšeme to tak, že názvy stylů oddělíme čárkou.
V následujícím případě se ohraničení uplatní na vlastní styl .Poznamka i na elementy table:
.Poznamka, table {
border: 1px blue;
}
- Následně můžeme ještě popis stylů doplňovat.
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
-
float: plovoucí objekt: vlevo, vpravo, na středu -
width: šířka bloku -
height: výška bloku
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...Položka 2
Související stránky
- Základy jazyka HTML, nástroje
- Testování webových stránek (při vývoji stránky)
- Publikování hotové stránky
- Cvičení na HTML a CSS:
Podrobnější zdroje
- GRIMMICH, Šimon. Tvorba webu [online]. c2003, c2008 [cit. 2010-10-06]. Dostupné z WWW: <http://www.tvorba-webu.cz/css>.
- Seznam vlastností CSS
- Učebnice
- Webové pomůcky — Somacon.com
