CSS
Kaskádové styly
formátování webových stránek
Co je CSS?
• Layout webových stránek
• Nástroj na formátování html tagů
• Cascading style sheets – možnost vrstvení
Význam
• tagy HTML – významová vs. formátovací fce
• oddělení vzhledu od struktury a obsahu
• barva a velikost písma, pozadí, zarovnání atd.
Výhody a nevýhody
Výhody
• HTML vs. CSS formátování
• jednodušší při častém použití
• jednodušší na správu/změny
Nevýhody
• možnost různého zobrazení v různých prohlížečích
• CSS hack
http://www.webdevout.net/css-hacks http://mike.treba.cz/css-hacky-do-kazdeho-pocasi/
Způsob použití
1. Inline
atribut „style“, součást tagů (font, center apod.)
<body>
<p style="color: blue">modrý odstavec
</p>
<p>normální odstavec </p>
</body>
• Nutnost změny v každém tagu
Způsob použití
2. Hlavička
tag „style“ – v hlavičce dokumentu (párový)
<head>
<style type="text/css">
p {color: red; font-style: italic}
h1 {color: blue; font-weight: bold ; font-size: large}
</style>
</head>
• Nutnost změny v každé stránce
Způsob použití
3. Externí soubor
Soubor → New CSS Page → Save as „soubor.css“
h2 {color: blue; font-style: italic;}
a {color: red; text-decoration: none}
Soubor → New HTML Page → Save as „stranka.html“
<head>
<link href="soubor.css" rel="stylesheet" type="text/css" />
</head>
– atributy „type“ a „rel“ = typ a druh odkazu jsou povinné
Syntaxe
• tagy div a span (párové)
• pomoc při stylování celků neohraničených tagy
• span – ohraničení jednotlivých slov či řádků
• div – ohraničení větších celků
• syntaxe
– tagy p (selektor, jméno tagu)
– závorky {} (vymezují deklaraci formátu daného selektoru) – dvojtečky : (odděluje vlastnosti a hodnoty)
– oddělovníky ; (oddělují jednotlivé deklarace)
Základy CSS
Stylování odkazů
a {text-decoration: none}
a:link {color: green} /*zelené odkazy*/
a:visited {color: navy} /*navštívené odkazy jsou tmavě modré*/
a:active {color: black}
a:hover {color: red; text-decoration: underline}
• Komentáře v CSS souboru /**/
selektor vlastnost hodnota deklarace
Jak na to
1. vytvoříme stránku html a libovolně ji nazveme a uložíme (stranka1.html)
– vytvoříme obsah
2. vytvoříme soubor css a libovolně ho nazveme (format.css) a uložíme do stejné složky
– externí soubor nezačínáme tagem style, hned deklarace 3. do hlavičky stránky vložím odkaz na css soubor (je fyzicky
uložen ve stejné složce)
<link href="format.css" rel="stylesheet" type="text/css" >
4. pozor na cache prohlížeče
CSS – body
• nastavení primárních stylů pro celý dokument
• Co je vhodné?
– Barva pozadí – Odkazy
– Text/Písmo – Odrážky
– Nadpisy – …
CSS – text
• vytvořte novou stránku v programu CoffeeCup
– Odstavec, Nadpis 1, 2, 3, Číslovaný seznam, Odkaz(y)
– Odstavce = tučné, černé písmo, šedě podbarvené, Times – Nadpis 1 = červené písmo na modrém pozadí, arial
– Nadpis 2 = zelené písmo na modrém pozadí, arial, menší – Nadpis 3 = žluté písmo na modrém pozadí, arial, nejmenší – Číslovaný seznam = kurzíva, Times, odrážky malé římské
Barvy
• Klíčové slovo (např. red, green, blue, aqua, silver atd.) – jen základní barvy
Barvy – RGB model
• Kód RGB, RGBA (např. rgba(0,0,255,0.75)) A-průhlednost
• Decimálně (desítkově) (0-255)
• Hexadecimálně (šestnáctkově) 0-9, A-F (000000-ffffff) (např. #0000FF)
• CSS3 - gradienty (lineární, radiální atd.) – např. pozadí stránek
• HSL, HSLA
Velikosti
Velikosti: (hodnoty) – zvětšování v prohlížečích (ne pt a px)
jednotka význam příklad velikost písma příkladu
px pixel, obrazovkový bod,
0,75pt 12px dvanáct pixelů (obrazovkových bodů)
pt typografický bod (jako ve
Wordu), 1/72 palce 9pt devět typografických bodů (na windows 12px)
mm milimetr 5mm pět milimetrů
in palec (+/- 25mm) .5in půl palce
em výška písmena M 1.5em jeden a půl normální velkosti
% procento 80% osmdesát procent normální velikosti
(nadřazeného prvku) small, large,
xx-large atd. klíčová slova x-small menší než malé
Border, margin, padding
margin
margin-top: 6px;
margin-right: 12px;
margin-bottom: 5px;
margin-left: 3px;
nebo
margin: 6px 12px 5px 3px;
border
• border: 1px dotted #009900;
Řešení
• p {
color: #000000;
text-indent:30px;
margin:5px 5px 5px 5px;
padding:10px 10px 10px 10px;
text-align:justify;
border: 4px dotted #009900;
}
Deklarace
Hromadná deklarce:
H1, H2, H3 {color: green} – důležitá je čárka mezi selektory
platí pro všechny nadpisy 1, 2 i 3
Kontextová deklarce:
H3 A {font-style: italic} – bez čárky mezi selektory platí pro všechny odkazy v rámci nadpisů 3
Nadpisy
– Nadpis 1 = červené písmo na tmavě modrém pozadí, arial
– Nadpis 2 = červené písmo na modrém pozadí, arial, menší
– Nadpis 3 = červené písmo na světle modrém pozadí, arial, nejmenší
Řešení
h1, h2, h3 { color: #ff0000;
font-family:Arial;
}
h1 {
font-size:2em;
background-color: #0000aa;
}
h2 {
font-size:1.5em;
background-color: #20bbFF;
}
h3 {
font-size:1.2em;
background-color: #80FFFF;
}
Odstavce
Řešení
p {
color: #000000;
text-indent:30px;
margin:5px 5px 5px 5px;
text-align:justify;
}
Stylování seznamů
Odkazy
Řešení
a {
color: #0000ff;
text-decoration:none;
}
a:hover {
color: #ff0000;
text-decoration: underline;
}
a:visited { color:#800080; } a:active { color:#FF0000; } li a {
color: #00ff00;
text-decoration:none;
}
Třídy a identifikátory
• vlastní styly pro konkrétní prvky
• identifikátory = jedinečný výskyt, DHTML, menu
• třídy = možno vícero výskytů
• obdobná funkčnost
• lze kombinovat s kontextovou deklarací
Třídy
• Třídy – vyšší priorita než zákl.tagy
– HTML atribut: class, – CSS zápis:
. podtitul
• CSS
.podtitul { text-align: center; font-weight:
bold; font-style: italic;} /* zarovnání na střed, tučné písmo a kurzíva*/
Třídy
• HTML:
<h3 class="podtitul">Text podtitulu</p>
• CSS: pseudotřídy
a:hover {color: green}
p:first-letter {font-size: 200%}
Identifikátory
• Identifikátory – nejvyšší priorita CSS:
#menu1 { text-align: center; font-weight: bold; text- decoration: overline}
HTML:
<span id=„menu1">Text podtitulu</span>
Třídy a identifikátory
Řešení
p {color: #000000;
text-indent:30px;
margin:5px 5px 5px 5px;
text-align:justify;
}
p:first-letter {font-size: 200%}
p.zvyrazneny {
background-color: #C0C0C0;
color: #000000;
font-weight: bold;
font-style: italic;
}
Vyzkoušejte si – CSS
• vytvořte novou stránku v programu CoffeeCup
– Tabulku formátovanou s pomocí CSS
první druhý třetí
A a b c
B d e f
C
g h i
j k l
Řešení
table {
width: 50%;
color:#000000;
background-color:#7DCE5B;
border-collapse: collapse;
border:1px #000000;}
border:1px solid #000000;td { }
th {
border:5px double #000000;
background-color:#008A00;
} .orange {
background-color:#FF5F11;
}
Další možnosti CSS - SNIPPETS
Pozadí
body {background:#ffffff url("img_tree.png") no-repeat right top;}
Zaoblené hrany
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
nebo
border-radius: 10px 10px 10px 10px;
Stíny, 3D, animace (transitions), gradienty apod.
http://www.vzhurudolu.cz/prirucka/css3-transitions http://www.colorzilla.com/gradient-editor/
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
Hotová řešení
Lightbox – fotogalerie
– CSS, JavaScript, HTML
– Odkazy do hlavičky HTML (JS, CSS) – Složka s obrázky (images)
http://lokeshdhakar.com/projects/lightbox2/
http://planetozh.com/projects/lightbox-clones/
Hotová řešení
Číslovaný seznam
http://print.wordpress.com/2006/02/22/cs s-beautifully-numbered-lists/
Hotová řešení
Menu
Kurzory
http://www.free-css.com/free-css-menus/page1 http://www.echoecho.com/csscursors.htm
Hotová řešení
Grafy
http://applestooranges.com/goodies/css-for-bar-graphs/
Hotová řešení
Formuláře
http://web.natur.cuni.cz/pripravnykurzchemie/
Vyzkoušejte si
• Vytvořte:
– Novou HTML stránku
• Text + rovnice reakce
• Obrázek k reakci
• Video? k reakci
• Tabulku s vlastnostmi použitých chemikálií
– Nový CSS soubor
• Použijte kaskádové styly k formátování všech prvků
• Využijte i třídy případně identifikátory
Zdroje informací
• http://polopate.jakpsatweb.cz/
• http://www.jakpsatweb.cz/
• http://www.coffeecup.com/free-editor/
• http://www.w3schools.com/
• http://www.free-css.com/free-css-layouts
