Preamble

Lasaris

CSS

  • Jazyk pro popis prezentace XML/SGML dat.
  • Umožňuje:
    • nastavení vzhledu stránky (barvy, fonty, rozložení částí textu, zarovnání, okraje, …)
    • oddělit obsah od vzhledu
    • přizpůsobení vzhledu různým zařízením (klasický počítač, mobilní prohlížeč, tiskárny, …)
    • změnu vzhledu stránky/prezentace pouhou změnou stylu bez nutnosti modifikace dat v prezentaci.
  • W3C standard
    • Aktuální verze 2 (http://www.w3.org/TR/2011/REC-CSS2-20110607/)
    • Verze 3
      • Modularizace - skládá se z modulů pro jmenné prostory, selectory, barvy, fragmentaci, rozložení textu, ….
      • Dokončena pouze část modulů (selektory, barvy, …)
      • Některé moduly jsou ve stadiu Candidate Recommendation (např. modul fragmentace, modul rozložení textu, …)
  • Nemá XML syntaxi

Syntaxe CSS

  • Skládá se z deklarací stylů pro:
    • daný typ elementu - pro daný element
    • danou třídu elementu - pro daný element s odpovídající hodnotou atributu class
    • jeden daný element - pro daný element s odpovídající hodnotou atributu id
  • Formát deklarace:
selector {
deklarace stylu;
}
  • Selector + daný typ elementu - <název elementu>
h1{
deklarace stylu;
}

Syntaxe CSS pokračování

  • Selector
    • daná třída elementu - <název_element>.<třída_elementu>
h1.menu{
deklarace stylu;
}
<h1 class="menu">Nadpis pro menu</h1>
  • element s daným id - [<název_elementu>]#<id_elementu>
div#menu{
deklarace stylu;
}

resp.

#menu{
 deklarace stylu;
}
<div id="menu">
  obsah elementu
</div>
  • deklarace stylu - <název atributu>: <hodnota>;
h1{
  backgound:blue;
}

CSS - vlastnosti

  • Stylování:
    • pozadí - background-color, background-image, …
    • text - color, text-align, text-shadow, …
    • písmo - font-family, font-style, font-size, …
    • odkazy - a:link, a:visited, a:hover, a:active
    • seznamy - list-style-type, list-style-image, list-style-position, list-style-type.
  • Okraje:
    • border-style
    • border-width
    • border-color
    • lze nastavovat i jednotlivé okraje (left, top, right, bottom)
    • margin
    • padding.
  • Pozicování.

Propojeni dokumentu a CSS

  • Interní styl:
<html>
 <head>
  <style type="text/css">
   h1{
     background:#00ccff;
   }
  </style>
  <title> ...</title>
 </head>
 <body>
 ...
 </body>
</html>
  • externí styl:
<head>
 <link rel="stylesheet" type="text/css" href="mujstyl.css"/>
 ...
</head>

Zdroje