SlideShare una empresa de Scribd logo
1 de 14
Kurz XHTML a CSS Část 3:  Formátování vzhledu stránky pomocí CSS -- vyšší dívčí
Vzorový CSS předpis Nastavíme font pro celý dokument: body { font: 0.8em/1.4em Arial, sans-serif; } Nastavíme rodinu fontu pro všechny prvky: body, input, textarea, option, select, td, th { font-family: Arial, sans-serif; } Nastavíme okraje pro všechny blokové prvky: ul, ol, p, blockquote { padding: 0;  margin: 0 0 1em 0; } Nastavíme barvu odkazu: a { color: red; } Vynuluje přednastavené okraje: a img { border: 0; }  form { margin: 0; padding: 0; }
Jednoduchá tabulka v CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Seznamy v XHTML ,[object Object],[object Object],[object Object],[object Object],[object Object]
Seznamy v CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Formuláře ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Šířka a výška ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Float - základ CSS layoutu ,[object Object],[object Object],[object Object],[object Object]
Clear - abychom neplavali v CSS layoutu ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Jednoduchý layout webu - nejdříve si jej nakreslíme Hlavička  (id=“hlavicka“) Patička  (id=“paticka“) Navigace  (id=“navigace“) Obsah  (id=“obsah“)
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Jednoduchý layout webu: v XHTML
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Jednoduchý layout webu: v CSS
Jak strukturovat CSS dokument? 1. Definice společné pro celý web:   velikost a rodina fontu, barva odkazů 2. Vynulování předdefinovaných hodnot:   okraje u formulářů a obrázků, blokové značky 3. Layout celého webu 4. Univerzální třídy a identifikátory 6. Výjimky pro jednotlivé stránky
Děkuji za pozornost www.vzhurudolu.cz/xhtml-css

Más contenido relacionado

Más de Martin Michálek

Más de Martin Michálek (20)

Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojářeRychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
 
CSS a sazba knih: jak jsme daleko?
CSS a sazba knih: jak jsme daleko?CSS a sazba knih: jak jsme daleko?
CSS a sazba knih: jak jsme daleko?
 
Browsers: from competition to collaboration
Browsers: from competition to collaborationBrowsers: from competition to collaboration
Browsers: from competition to collaboration
 
„To my ne, to oni!“ – komponenty třetích stran a rychlost webu
„To my ne, to oni!“ – komponenty třetích stran a rychlost webu„To my ne, to oni!“ – komponenty třetích stran a rychlost webu
„To my ne, to oni!“ – komponenty třetích stran a rychlost webu
 
17 technických tipů ke zrychlení webů
17 technických tipů ke zrychlení webů17 technických tipů ke zrychlení webů
17 technických tipů ke zrychlení webů
 
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?
 
Blbosti kolem webové rychlosti
Blbosti kolem webové rychlostiBlbosti kolem webové rychlosti
Blbosti kolem webové rychlosti
 
SEO jako Brno - workshop k rychlosti webu
SEO jako Brno - workshop k rychlosti webuSEO jako Brno - workshop k rychlosti webu
SEO jako Brno - workshop k rychlosti webu
 
Web rychlý jako blesk (s důrazem na AMP)
Web rychlý jako blesk (s důrazem na AMP)Web rychlý jako blesk (s důrazem na AMP)
Web rychlý jako blesk (s důrazem na AMP)
 
Devel.cz: Bootstrap 4
Devel.cz: Bootstrap 4Devel.cz: Bootstrap 4
Devel.cz: Bootstrap 4
 
AMP: Co řeší a co nového nabízí
AMP: Co řeší a co nového nabízíAMP: Co řeší a co nového nabízí
AMP: Co řeší a co nového nabízí
 
Metriky rychlosti načítání
Metriky rychlosti načítáníMetriky rychlosti načítání
Metriky rychlosti načítání
 
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzoryWebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
 
Je CSS vážně tak podivné?
Je CSS vážně  tak podivné?Je CSS vážně  tak podivné?
Je CSS vážně tak podivné?
 
Slasti a pasti prototypování v HTML
Slasti a pasti  prototypování v HTMLSlasti a pasti  prototypování v HTML
Slasti a pasti prototypování v HTML
 
10 praktických CSS3 a SVG řešení
10 praktických  CSS3 a SVG řešení10 praktických  CSS3 a SVG řešení
10 praktických CSS3 a SVG řešení
 
Debugování responzivních webů
Debugování responzivních webůDebugování responzivních webů
Debugování responzivních webů
 
Mobile First v praxi
Mobile First v praxiMobile First v praxi
Mobile First v praxi
 
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webůVše co potřebuje markeťák vědět o rychlostní optimalizaci webů
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů
 
Design webů v prohlížeči
Design webů v prohlížečiDesign webů v prohlížeči
Design webů v prohlížeči
 

CSS - vyšší dívčí

  • 1. Kurz XHTML a CSS Část 3: Formátování vzhledu stránky pomocí CSS -- vyšší dívčí
  • 2. Vzorový CSS předpis Nastavíme font pro celý dokument: body { font: 0.8em/1.4em Arial, sans-serif; } Nastavíme rodinu fontu pro všechny prvky: body, input, textarea, option, select, td, th { font-family: Arial, sans-serif; } Nastavíme okraje pro všechny blokové prvky: ul, ol, p, blockquote { padding: 0; margin: 0 0 1em 0; } Nastavíme barvu odkazu: a { color: red; } Vynuluje přednastavené okraje: a img { border: 0; } form { margin: 0; padding: 0; }
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10. Jednoduchý layout webu - nejdříve si jej nakreslíme Hlavička (id=“hlavicka“) Patička (id=“paticka“) Navigace (id=“navigace“) Obsah (id=“obsah“)
  • 11.
  • 12.
  • 13. Jak strukturovat CSS dokument? 1. Definice společné pro celý web: velikost a rodina fontu, barva odkazů 2. Vynulování předdefinovaných hodnot: okraje u formulářů a obrázků, blokové značky 3. Layout celého webu 4. Univerzální třídy a identifikátory 6. Výjimky pro jednotlivé stránky
  • 14. Děkuji za pozornost www.vzhurudolu.cz/xhtml-css