čtvrtý - šestý týden

Transkript

Návrh a tvorba WWW stránek
1/20
Káskádové styly = CSS
• CSS = Cascading Style Sheets = tabulky kaskádových stylů
• na začátku byl stylesheet – soubor pravidel definující vzhled textu
nezávisle na obsahu
• pomocí CSS lze nadefinovat společný vzhled souboru stránek
• v HTML bez podpory CSS vzhled definován pro každou značku
zvlášť, typicky pomocí značky <font>, XHTML ji již nepodporuje
• nyní CSS 2.1 – http://www.w3.org/Style/CSS
• CSS je tvořen pravidly ve tvaru
selektor {
vlastnost1: hodnota;
vlastnost2: hodnota;
...
}
• selektor – seznam značek, kterých se uvedená pravidla týkají
2/20
Káskádové styly = CSS
Příklady:
h1 {
color:red;
background:yellow;
/* červená barva písma */
/* žlutá barva pozadí */
}
h1,h2,h3 {color:red;}/* pravidla platí pro h1, h2, h3*/
h1 {color:red;} /* alternativní zápis výše uvedeného */
h2 {color:red;}
h3 {color:red;}
ol ol {color:red;} /* 2. úroveň uspořádaného seznamu */
3/20
CSS – možnosti definice stylů
• lokální definice stylů – platí v rámci značky
• globální definice stylů – platí v rámci XHTML dokumentu
• externí definice stylů – lze použít pro libovolný XHTML dokument
Při použití různých typů definic se uplatňuje kaskáda v pořadí
LOKÁLNÍ → GLOBÁLNÍ → EXTERNÍ definice
V pořadí EXTERNÍ → GLOBÁLNÍ → LOKÁLNÍ definice se
naopak uplatňuje dědičnost
4/20
Lokální definice stylů
• na úrovni jednotlivých značek XHTML
• platí jen v rámci použité značky
• styly se vkládají pomocí atributu style přímo do značky:
<h1 style="color:red;font-size:30px;">Červený nadpis</h1>
definice celého odstavce:
<p style="color:red;font-weight:bold;">Tučný odstavec</p>
definice celé stránky:
<body style="color:red;background:black;">...</body>
Globální definice stylů
• na úrovni jednoho XHTML dokumentu
• definice se vkládají do hlavičky dokumentu
• mezi značky <style> a </style>
<head>
<title>Globální definice stylů</title>
<style type="text/css">
h1 {
color:red;font-size:30px;
p
}
{
color:red;font-weight:bold;
}
</style>
</head>
5/20
6/20
Externí definice stylů
• pro jeden či více XHTML dokumentů
• nejvýhodnější – společný styl souboru stránek
• snadná změna vzhledu stránek – pouze úprava CSS
• CSS v samostatném souboru
• do XHTML se vkládá pomocí nepárové značky <link> v hlavičce
<head>
<title>Externí definice stylů</title>
<link rel="stylesheet" type="text/css"
href="styly.css" media="screen" />
</head>
• atribut rel – specifikuje, že jde o CSS
• atribut type – není povinný, specifikace CSS ve formě textu
• atribut href – cesta k externímu CSS souboru
• media – určuje výstupní zařízení
7/20
Externí definice stylů – atribut media
• určuje pro jaké výstupní zařízení se má použít specifikovaný styl
media="screen" – zobrazení na monitoru
media="print" – tisk
media="handheld" – mobilní zařízení (nízké rozlišení)
media="aural" – hlasové syntetizéry – lze nastavit hlasitost, barvu
media="all, projection, tv, braille"
Základní použití CSS stylů
• barva, případně obrázek na pozadí
• typy písma a jeho formátování
• velikost a obtékání
• okraje, rámečky
• zarovnávání
• seznamy
• styly odkazů
8/20
9/20
Nastavení pozadí dokumentu
• vlastnost společná pro celý dokument - selektor body
• pro nastavení barev lze použít předdefinované názvy (17),
hexadecimální tvar (např. #000000 – černá), RGB zápis rgb(255,0,0)
body {
background-color: red; /* nastavení barvy pozadí */
background-color:#0000ff;
/* color:rgb(0,0,255);*/
background-image:url(pozadi.gif); /* obrázek */
}
• obrázek je menší než obrazovka – vydláždění pozadí
body {
background-image:url(pozadi.gif);
background-repeat:repeat-x;
background-image: no-repeat;
background-position: top right;
background-attachement: scroll (fixed);
}
10/20
Typy písma a jeho formátování
• barva písma – atribut color
• pozadí písma – atribut background
h1 {
color:red;
background-color: yellow;
}
• vlastnost font-family
p {
font-family:Arial;
font-family:sans-serif;
font-family:'Arial CE','Verdana CE',Arial,Verdana,
sans-serif;
}
• vlastnost font-size (v jednotkách px, pt, mm, %)
p {
font-size:12px;
}
11/20
Typy písma a jeho formátování
• vlastnost font-weight – tučnost písma (normal, bold, 100-900)
p {
font-weight:bold;
}
• vlastnost font-style – kurzíva (normal, italic)
p {
font-style:italic;
}
• font-variant – kapitálky (normal, small-caps)
• sdružená vlastost font
p {
font: italic small-caps bold 12px arial
}
Kdekoli v XHTML dokumentu (Transitional) lze používat klasické
značky pro formátování písma - <b>, <i>, <strong>, <em> atd.
12/20
Velikost a obtékání, práce s blokem
• uvedené atributy se vztahují k rodičovské značce
• vlastnost width – šířka rodiče (px, pt, %, auto)
• vlastnost height – výška rodiče (px, pt, %, auto)
• vlastnost float – umístění obtékaného objektu (left, right, none)
• vlastnost clear – ukončení obtékání objektů (left, right, both, none)
• vlastnost display – především možnost skrytí bloku (např. tisk)
– definice řádkového/blokového prvku
13/20
Okraje a rámečky
• mají význam u blokových elementů – odstavce, buňky tabulky atd.
• vlastnost margin – šířka vnějšího okraje (auto, px, pt, %)
– margin-top (right, bottom, left)
– u tabulek cellspacing
• vlastnost padding – šířka vnitřního okraje (px, pt, %)
– padding-top (right, bottom, left)
– u tabulek cellpadding
• vlastnost border – rámeček kolem blokového elementu (px, pt)
- border-width (px), border-top-width (atd.)
- border-color
- border-style (solid, dotted, dashed, groove atd.)
- border-top: solid 1px red;
14/20
Okraje a rámečky
border-color:red;
border-style:solid; border-style:dashed;
border: solid green 4px;
border-style:dotted;
• border-width (thin, medium, thick, hodnota)
• border-style (dotted, dashed, solid, double, groove, ridge, in(out)set
• border-color
• border-top, border-right, border-bottom, border-left
• margin, margin-top, margin-right, ... (auto, hodnota, %)
• padding, padding-top, padding-right, ... (auto, hodnota, %)
15/20
Zarovnávání a úpravy textu
• text-align – horizontální zarovnání v bloku (left, right, center)
p {
text-align:center; /* text bude zarovnán na střed */
}
• vertical-align – vertikální zarovnání v bloku (top, middle, bottom,
pouze pro řádkové elementy)
td {
vertical-align:top; /* zarovnání nahoru */
}
• text-decoration – none, underline, overline, line-through, blink
• text-transform – none, capitalize, uppercase, lowercase
• letter-spacing, word-spacing – mezery mezi písmeny, slovy
• direction (ltr, rtl) – směr textu
• text-indent – odsazení prvního řádku
• white-space (normal, pre, nowrap)– chování "bílých znaků"
16/20
Styly hypertextových odkazů
• (pouze) pro značku <a> existují speciální pseudotřídy
a:link {color:#00ff00;} /* barva nenavštíveného odkazu */
a:visited {color:#00ff00;} /* barva navštíveného odkazu */
a:hover {color:red;} /* barva odkazu pod kurzorem myši */
a:active {color:red;} /* barva odeslanéhho odkazu */
Mezi a a dvojtečkou NENÍ MEZERA!!
Záleží na pořadí!
17/20
Styly seznamů
• vlastnosti značek <ul>, <ol>,<li>
• list-style-image (url)
• list-style-type (disc, circle, square, decimal, lower-roman, upperroman, lower-alpha, upper-alpha, lower-greek, hebrew, ...)
• list-style-position (inside, outside) – zarovnání
• sdružená vlastnost list-style
ul {
list-style:decimal outside;
}
Třídy a identifikátory
• efektivní využití vlastních stylů
• třídu kaskádového stylu určuje atribut class
• třídy lze používat v rámci XHTML dokumentu opakovaně
Třídy vztahující se k použité značce
p {color:red;}
/* nastavení stylu odstavců */
p.zeleny {color:green;} /* některé budou zelené */
<p>Tento odstavec bude červený.</p>
<p class="zeleny">Druhý odstavec bude zelený.</p>
18/20
19/20
Obecné třídy pro všechny značky
p {color:red;}
/* nastavení stylu odstavců */
h1 {color:red;} /* nastavení stylu nadpisu h1 */
.zeleny {color:green;} /* zelené písmo kdekoli */
<p>Tento odstavec bude červený.</p>
<p class="zeleny">Druhý odstavec bude zelený.</p>
<h1>Červený nadpis</h1>
<h1 class="zeleny">Zelený nadpis</h1>
NEBO
<p class="zeleny">Všechno v tomto odstavci, co není jinak
definováno v CSS, bude napsáno zeleným písmem. </p>
20/20
• identifikátor kaskádového stylu určuje atribut id
• v XHTML dokumentu lze identifikátor použít pouze jednou
• spíše pro blokové prvky
#zahlavi {color:green;
/* formát záhlaví stránky */
background:yellow;}
<div id="zahlavi">Záhlaví stránky</div>
V XHTML nahrazuje atribut id dříve používaný atribut name.
21/21
Značky <div> a <span>
• jediné dvě značky, které nenesou žádný význam (≠ nemají)
• ideální pro potřeby CSS
<div class="obalovaci">
<p>odstavec</p>
<p>další odstavec</p>
...
</div>
<p class="obalovaci">
<p>odstavec</p>
<p>další</p>
...
</p>
• <div> je element blokový, <span> je element řádkový, neboli <div>
před a za sebou zalomí řádek, <span> nikoli
• <div> by se neměl vyskytovat v rámci řádkové značky

čtvrtý - šestý týden

Transkript

Podobné dokumenty

3. týden

Program v Clipsu

Signal processing in Python Zpracování signálů v jazyce

CSS – Cascading style sheet přehled vlastností selektory

Kapitola 4

Elektronické publikování

Kaskádové styly (CSS)

Prezentace ke stažení