• Save
CSS - vyšší dívčí
Upcoming SlideShare
Loading in...5
×
 

CSS - vyšší dívčí

on

  • 857 views

Kurz XHTML/CSS -- Část 3: Formátování vzhledu stránky pomocí CSS -- vyšší dívčí

Kurz XHTML/CSS -- Část 3: Formátování vzhledu stránky pomocí CSS -- vyšší dívčí

Statistics

Views

Total Views
857
Views on SlideShare
794
Embed Views
63

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 63

http://www.vzhurudolu.cz 63

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CSS - vyšší dívčí CSS - vyšší dívčí Presentation Transcript

  • 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
    • table { tabulka
    • border-collapse: collapse; úzký rámeček
    • border-top: 1px solid black; rámečky:
    • border-left: 1px solid black;
    • }
    • th, td { buňky tabulky
    • border-bottom: 1px solid black;
    • border-right: 1px solid black;
    • vertical-align: top; vertikální zarovnání
    • }
    • th { buňky hlavičky tabulky
    • text-align: left; horizontální zarovnání
    • }
    View slide
  • Seznamy v XHTML
    • Kromě použití v textu dokumentu jsou vhodné i pro definici navigace webu.
    • <ul id=&quot;navigace&quot;>
    • <li><strong><a href=&quot;index.html&quot;>Úvod</a></strong></li>
    • <li><a href=&quot;cenik.html&quot;>Ceník</a></li>
    • </ul>
    View slide
  • Seznamy v CSS
    • ul {
    • list-style-type: square; typ odrážky
    • }
    • li {
    • padding-left: 0; okraje u odrážky
    • margin-left: 1.5em;
    • }
  • Formuláře
    • form { vynulujeme okraje formuláře
    • margin: 0;
    • padding: 0;
    • }
    • input, textarea, input, textarea, option, select {
    • background: #ddd; nastavíme pozadí prvků
    • }
  • Šířka a výška
    • #obsah {
    • width: 500px; šířka
    • height: 200px; výška
    • }
    • Výšku je třeba nastavit jenom výjimečně, proto se jí raději vyhýbejte!
    • Výška i šířka platí jen pro samotný prvek - bez okrajů a rámečků (padding, margin, border).
  • Float - základ CSS layoutu
    • Vlastnost float „vytrhne“ prvek z toku dokumentu a umístí ho na stranu.
    • Využívá se v layoutu -- když chceme vzhled stránky ve více sloupcích.
    • #navigace { float: left; width: 200px; }
    • #obsah {float: right; width: 500px; }
  • Clear - abychom neplavali v CSS layoutu
    • Jakmile je vlastnost float jednou nastavena, všechny následující prvky se jí řídí.
    • Je jí třeba zrušit vlastností clear.
    • .clear { clear: both; }
    • XHTML:
    • <div id=„navigace“> … </div>
    • <div id=„obsah“> … </div>
    • <div class=„clear“>&nbsp;</div>
  • Jednoduchý layout webu - nejdříve si jej nakreslíme Hlavička (id=“hlavicka“) Patička (id=“paticka“) Navigace (id=“navigace“) Obsah (id=“obsah“)
    • XHTML:
    • <div id=„hlavicka“> … </div>
    • <div id=„navigace“> … </div>
    • <div id=„obsah“> … </div>
    • <div class=„clear“>&nbsp;</div>
    • <div id=„paticka“> … </div>
    Jednoduchý layout webu: v XHTML
    • V CSS dáme vše do obalu a pak nastavíme jednotlivé vlastnosti:
    • #obal {width: 700px; }
    • #hlavicka { }
    • #navigace { float: left; width: 200px; }
    • #obsah {float: right; width: 500px; }
    • #paticka { }
    • .clear { clear: both; }
    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