3. týden

Transkript

3. týden

Návrh a tvorba WWW stránek
1/31
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>, HTML5 ji již nepodporuje
• nyní standard CSS 2.1 – http://www.w3.org/Style/CSS, reálně CSS 3
• CSS je tvořen pravidly ve tvaru
selektor {
vlastnost1: hodnota;
vlastnost2: hodnota;
...
}
• selektor – seznam značek, kterých se uvedená pravidla týkají
2/31
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/31
CSS – možnosti definice stylů
• lokální definice stylů – platí v rámci značky
• globální definice stylů – platí v rámci HTML dokumentu
• externí definice stylů – lze použít pro libovolný HTML 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
• výjimkou je nastavení váhy pravidla – má vliv na
vícenásobnou definici stejného stylu pro stejný element
h1 {color: blue !important}
4/31
Lokální definice stylů
• na úrovni jednotlivých značek HTML
• 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 HTML 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/31
6/31
Externí definice stylů
• pro jeden či více HTML 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 HTML 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 – tzv. MIME typ, specifikace CSS ve formě textu
• atribut href – cesta k externímu CSS souboru
• media – určuje výstupní zařízení
7/31
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"
Media Queries v CSS3
• styly podmíněné parametry zařízen (rozměry, rozlišení, orientace)
<link rel="stylesheet" href="bigscreen.css"
media="screen and (min-width: 1100px)">
<link rel="stylesheet" href="iphoneandandroid.css"
media="screen and (max-device-width: 480px)">
<link rel="stylesheet" href="iphone4.css" media="only
screen and (-webkit-min-device-pixel-ratio: 2)">
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/31
9/31
Nastavení pozadí (dokumentu)
• pozadí dokumentu – selektor body
• pozadí buňky tabulky, odstavce, bloku – selektor td, p, div
• 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 */
}
p {
background-image:url(pozadi.gif);
background-repeat:repeat-x;
background-repeat: no-repeat;
background-position: top right;
background-attachment: scroll (fixed);
}
10/31
Typy písma a jeho formátování
• barva písma – vlastnost color
• pozadí písma – vlastnost 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, %, em)
p {
font-size:12px;
}
11/31
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 HTML dokumentu lze používat klasické značky pro
formátování písma - <b>, <i>, <strong>, <em> atd.
12/31
Externí fonty
• formou relativní cesty nebo URL
• podporované formáty TTF, OTF, WOFF, latin extended
<style>
div {
@font-face {
font-family: Sansation;
font-family: Sansation;
src: url(sansation_light.woff); }
}
</style>
@import
url(http://fonts.googleapis.com/css?family=Open+Sans&subse
t=latin,latin-ext);
<link
href='http://fonts.googleapis.com/css?family=Open+Sans&sub
set=latin,latin-ext' rel='stylesheet' type='text/css'>
font-family: 'Open Sans', sans-serif;
/* CSS */
13/31
Icon fonts
• fonty místo obrázků, úspora dat
• IcoMoon App
14/31
Velikost a obtékání, práce s blokem
• uvedené vlastnosti se vztahují k blokovému elementu
• vlastnost width – šířka rodiče (px, pt, em, %, auto)
• vlastnost height – výška rodiče (px, pt, em, %, 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
• vlastnost position – nastavení pozice bloku v dokumentu
• vlastnost overflow – nastavení obsahu bloku při při jeho přetečení
(visible, hidden, auto)
• vlastnost figure (figurecaption) – obtékání obrázků (popisků)
15/31
Okraje a rámečky
• mají význam u blokových elementů
• vlastnost margin – šířka vnějšího okraje (auto, px, pt, em, %)
– 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;
16/31
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, %)
• box-sizing: border-box
17/31
Zarovnávání a úpravy textu
• text-align – horizontální zarovnání v bloku (left, right, center)
• vertical-align – vertikální zarovnání v td (top, middle, bottom,
!pouze pro řádkové elementy)
• text-decoration – none, underline, overline, line-through, blink
• text-transform – none, capitalize, uppercase, lowercase
• letter-spacing, word-spacing – mezery mezi písmeny, slovy
• text-indent – odsazení prvního řádku
• white-space (normal, pre, nowrap)– chování „bílých znaků“
18/31
Ostatní
• nastavení čáry <hr /> – různá podpora prohlížečů, nejlépe takto:
<hr style="border-style:solid; border-width:1px;
border-color:red" width="50%" align="left" />
• border-collapse – v tabulce spojí rámečky sousedních buněk
(collapse)
19/31
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 */
Pseudotřída :hover pro další elementy
<p class=“hover“>Změna textu</p>
pro styl
p.hover:hover {color:red;}
20/31
CSS3 pseudotřídy
li:first-child , li:last-child, li:only-child, li:nthchild(2)
p:nth-last-child(2)
p:first-letter
p:first-line
p:first-of-type, p:last-of-type, p:nth-of-type(2), p:nthof-type(2n+1),
p:only-of-type
p.nth-last-of-type(2)
21/31
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>
22/31
23/31
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>
24/31
• 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>
25/31
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
26/31
CSS3 výběr podle atributů
element[atribut*="hodnota"]
element[atribut^="hodnota"]
element[atribut$="hodnota"]
a[href^="https"]
hodnota href začíná https
a[href$=".pdf"]
hodnota href končí .pdf
a[href*="upce"]
hodnota href obsahuje upce
Další CSS3 selektory
http://www.w3schools.com/cssref/css_selectors.asp
27/31
Výběr nových vlastností CSS3
• uvedené vlastnosti nepodporuje IE<9
HTML5Shiv
border-radius
<div style="-webkit-border-radius:50px; -moz-borderradius:50px; border-radius:50px; width:200px; height:60px;
background-color:#808080; color:#fff; text-align:center;
line-height:50px;">Objekt</div>
box-shadow (horizontálně, vertikálně, šířka, barva)
<div style="-webkit-box-shadow:10px 5px 20px #000; -mozbox-shadow:10px 5px 20px #000; width:200px; height:60px;
background-color:#808080; color:#fff; text-align:center;
line-height:50px; box-shadow:10px 5px 20px
#000;">Objekt</div>
-webkit = safari, opera, -moz = mozilla, -ms = IE
28/31
text-shadow (jako u box-shadow)
<span style="-webkit-text-shadow:15px 10px 15px #000; -moztext-shadow:15px 10px 15px #000; text-shadow:15px 10px 15px
#000; font-size:50px; color:#808080;">Text</span>
transform (translate)
.objekt{float:left;margin:5px 10px;width:100px;height:60px;
background-color:gray;color:#fff;text-align:center;
-webkit-transition:all 1s ease-in-out; /* typ animace */
-moz-transition:all 1s ease-in-out}
.objekt1:hover{
-webkit-transform:translate(3em,1em);
-moz-transform:translate(3em,1em)}
</style>
<div class="objekt objekt1">translate</div>
<div style="clear:both;"></div>
29/31
transform (rotate)
background-color:gray;color:#fff; text-align:center;-webkittransition:all 1s ease-in-out;-moz-transition:all 1s easein-out;}
.objekt2:hover{
-webkit-transform:rotate(100deg);
-moz-transform:rotate(100deg)}
</style>
<div class="objekt objekt2">rotate</div>
30/31
transform (scale)
background-color:gray;color:#fff; text-align:center;-webkittransition:all 1s ease-in-out;-moz-transition:all 1s easein-out;}
.objekt3:hover{-webkit-transform:scale(2);-moztransform:scale(2)}
</style>
<div class="objekt objekt3">scale</div>
31/31
průhlednost (opacity)
<div style="opacity:0.5; width:200px; height:60px;
color:#000; text-align:center; lineheight:50px;background>red;">Průhledný objekt</div>
průhlednost (barevný model RGBA)
<div style="background-color:rgba(100, 0, 0, 0.5);
width:200px; height:60px; color:#fff; text-align:center;
line-height:50px;">Průhledný objekt</div>
sloupce (multiple columns)
<div style=“width:250px;-moz-column-count:2; -moz-columngap:10px; -webkit-column-count:2; -webkit-column-gap:10px;
column-count:2; column-gap:10px;">Text bude rozdělen do
dvou sloupců! </div>
pozadí (multiple backgrounds)
background: url('left.jpg') top left no-repeat,
url('prvni.jpg') top right no-repeat,
url('druhy.jpg') top center repeat-x;

3. týden

Transkript

Podobné dokumenty

čtvrtý - šestý týden

Specifikace výroby dat pro Digi ShowCAR Sc01

jQuery

Studijní opora. - Katedra technické a informační výchovy PdF UP v

ladění player6

CSS – Cascading style sheet přehled vlastností selektory

Elektronické publikování

zadání tutoriálu

Program v Clipsu

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

TOPlist - Webtrh