<< 13.Webová prezentace | Témata WEB | 15.Design webu >>

14. Kaskádové styly

  • CSS - podstata, syntaxe, začlenění do HTML
  • Rozvržení obsahu - css box-model, bloky, stylování a pozicování
  • CSS 3 - nové možnosti využití CSS

CSS

  • Podstata
    • CSS - Cascading Style Sheets - kaskádové styly
    • systém pravidel pro úpravu designu webových stránek
    • pravidla lze seskupovat do tzv. kaskád
    • vývoj od roku 1996, verze CSS1, CSS2, CSS2.1, CSS3
  • Syntaxe
    • Pravidlo stylu - obecný zápis
      selektor { vlastnost01: hodnota; vlastnost02: hodnota; }
    • Selektor pravidla - udává jaký HTML element bude pravidlo formátovat
  • prvek

body { color: #ffffff; background: #336699; }

  • několik prvků

h1, h2, h3 { font-family: Arial; font-weight: bold; }

  • potomek prvku

ul li a { display: block; }

  • třída (class)

.popisek { font-size: small; font-style: italic; }

  • identifikátor (id)

#navigace { text-align: center; padding: 10px; }

  • Začlenění do HTML
    • CSS v externím souboru - připojení ke stránce pomocí tagu <link> v hlavičce
      <link href="styl.css" rel="stylesheet" type="text/css" />
    • CSS v hlavičce xHTML - tag <style> v hlavičce
      <style type="text/css"> css formátování.... </style>
    • inline zápis CSS - atribut style
      <span style="color: red;"> červený text </span>

Rozvržení obsahu

  • CSS Box model
  • Definice bloku
    • pomocí tagu <div>
  • Identifikace bloku
    • využití identifikátoru ID nebo třídy CLASS
    <div id = "selektor_pro_id">Cervena</div>
    <p class = "selektor_pro_class">Zelezy odstavec</p>
    • přiřazení pravidel pomocí selektoru s křížkem nebo s tečkou
    #selektor_pro_id {color: Red}
    .selektor_pro_class {color: Green;}
  • Pozicování bloků
    • Absolutní - od levého horního rohu
      • position : absolute; left: 20px; top: 50px
    • Relativní - od předchozího bloku
      • position : relative; left: 20px; top: 50px
    • Vrstvené bloky - z-index : pořadí
    • Plovoucí bloky - float : left | right

Nastavení layoutu

Zvětšit
 
<!DOCTYPE HTML>
<html>
  <head>
    <title>Layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Language" content="cs">
    <link type="text/css" rel="stylesheet" href="sablona.css">
  </head>
<body>
	<div id="wrapper">
		<div id="header">Hlavička</div>
		<div id="leftcolumn">Menu</div>
		<div id="content">Obsah</div>
		<div id="footer">Patička</div>
	</div>
</body>
</html>
*{padding:0; margin:0;}
body{font-family:Verdana,Arial,Helvetica,sans-serif; font-size:20px; color:#333; background:silver;}
p{padding:10px;}
#wrapper{margin:20px auto; width:600px;}
#content{float:right; background:#fff; height:250px;width:450px; display:inline;}
#header{color:#fff; height:75px; background:#6b6659;}
#footer{color:#fff; clear:both; background: #6b6659; height:35px;}
#leftcolumn{float:left; background:#ebe3cd; height:250px; width:150px;}

CSS 3 - nové možnosti využití CSS

  • Rámečky - oblé rohy border-radius
  • Stíny - rámečky, text - box-shadow, text-shadow
  • Pozadí - velikost obrázku, oříznutí, více obrázků na pozadí
  • Sloupce - textové sloupce - multi-column - šířka, počet, zalomení ...
  • Barevné přechody - linear-gradient
  • Webové fonty - vkládání fontů ze souboru
  • Průhlednost - vlastnost opacity a rgba zápis
  • Transformace - posun, natočení, měřítko ...
  • Animace - přechody, klíčové snímky ...
  • Implementace v prohlížečích
    • zpracování nových vlastností v různých prohlížečích se vyvíjí
    • pro zajištění kompatibility se využívají vendor prefixy prohlížečů
      • -ms- (IE), -moz- (FF), -webkit- (Chrome + Safari), -o- (Opera)

Školní stránky

RSS