<< Rozvržení obsahu | HTML stránky | HTML Formuláře >>

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 CSS

  • Pravidlo stylu - obecný zápis
    selektor { vlastnost01: hodnota; vlastnost02: hodnota; }
  • Selektor pravidla - udává jaký HTML element bude pravidlo formátovat

Selektory CSS

  • prvek (element)

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

  • třída prvku (class)

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

  • identifikátor prvku (id)

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

  • pseudotřída

img:hover {opacity: 0.8; filter:alpha (opacity=80);}

  • pseudoelement

p:first-letter {font-size: 200%; font-weight: bold;}

Kombinace selektorů
  • skupina prvků

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

  • potomek prvku

ul a { display: block; }

  • dítě prvku

div > p {font-weight: bold;}

  • soused prvku

h2 + p {font-weight: bold;}

  • následník prvku

h2 ~ p {font-weight: bold;}

Začlenění css 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

Obsahové bloky

  • Definice bloku
    • pomocí tagu <div>

Identifikace bloku

  • využití identifikátoru ID nebo třídy CLASS
    • identifikátor ID je možno použít pro jediný blokový prvek dokumentu
    • třídu CLASS je možné aplikovat na několik různých blokových prvků dokumentu
<div id = "navigace">Blok pro hlavni navigaci</div>
<p class = "zeleny_text">Odstavec se zeleným textem</p>
  • přiřazení pravidel pomocí selektoru s křížkem nebo s tečkou
#navigace {height: 50px; padding: 10px; color: red}
.zeleny_text {color: Green;}

Vlastnosti bloků - CSS Box model

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)

Odkazy

Školní stránky

RSS