PB138 — CSS

(C) 2019 Masaryk University -- Tomáš Pitner, Luděk Bártek, Adam Rambousek

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, …​)

      • Podpora pro Responsive Web Design - přizpůsobení vzhledu stránky možnostem klientského zařízení.

        • Souvisí s přístupností (prodrobnosti a ukázky viz např. W3Schools)

    • Vyvíjí se verze 4

  • 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