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