CSS

Kaskádové styly (Cascading Style Sheets) umožňují formátovat (X)HTML či XML dokumenty.

Výhody

  1. umožňuje od sebe oddělit data (informace) a vzhled (formátování)
  2. vzhled celého webu je možné měnit na jednom místě

Ukázky možností CSS:

Kaskádové styly představují pravidla, kterými říkáme:

  1. Kde se mají použít – Selektor (identifikátor prvku)
    • blok vlastností je uzavřen do složených závorek {}
  2. Co mají ve výsledné stránce ovlivnit – Deklarace vlastnosti (definice stylu)
    • název vlastnosti
    • oddělovač :
    • jedna nebo více hodnot (hodnoty se od sebe oddělují mezerou  )
    • ukončení definice ;

Níže uvedené pravidlo se aplikuje na nadpis 1. úrovně, kterému nastaví modrou barvu.

Príklad pravidal kaskádového stylu

Předpokladem pro tvorbu kaskádových stylů je správně strukturovaný dokument (X)HTML či XML:

Výsledný dokument by měl být přehledný. Začínat nejdůležitějšími informacemi a postupovat k méně důležitým.

Přidělení stylů

Způsob jakým se stránka zobrazí na výstupním zařízení (počítač , tiskárna, hlasový výstup atd.) je možné definovat:

  • atributem style
    • vysoká priorita – přepíše všechny ostatní styly přiřazené témuž elementu jiným způsobem
  • elementem <style>
    • střední priorita – přepíše styly definované v externím souboru (případně styly připojené pravidlem @import)
  • připojením externího souboru elementem <link>
    • nízká priorita
  • import externího souboru pravidlem @import
    • nejnižší priorita – přepíší je všechny později deklarované styly

Atribut style

Slouží k definici stylu elementu ve kterém je definován.

Pokud se rozhodnete u elementů používat tyto atributy, je nutné v hlavičce dokumentu definovat typ stylového jazyka.

  ...
  <meta http-equiv="content-style-type" content="text/css" />
</head>
<body>
  ...
  <h2 style="color: red;">Červený nadpis</h2>
  <p style="color: blue;">Modrý text odstavce</p>
  ...

Poznámka: V případě HTML dokumentu element meta na konci lomítko nemá.

Element <style>

  • slouží k definici stylu dokumentu ve kterém je definován
  • může se vyskytovat pouze v hlavičce dokumentu <head>

HTML

Uzavřením stylu do komentáře znepřístupníme styly pro prohlížeče, které kaskádové styly (CSS) ještě neznají (CSS je podporováno až od HTML 3.2).

  ...
  <style type="text/css">
    <!--
      h2 {color: red;}
      p {color: blue;}
    -->
  </style>
</head>
<body>
  ...
  <h2>Červený nadpis</h2>
  <p>Modrý text odstavce</p>
  ...

XHTML

V samotném obsahu elementu nejsou rozeznávány znakové entity.

Uzavřením stylu mezi <![CDATA[ a ]]> zajistíte rozeznávání znakových entit. Protože se ale nejedná o prvky stylu je vhodné je uzavřít do komentářů daného stylového jazyka.

  ...
  <style type="text/css">
    /* <![CDATA[ */
      h2 {color: red;}
      p {color: blue;}
    /* ]]> */
  </style>
</head>
<body>
  ...
  <h2>Červený nadpis</h2>
  <p>Modrý text odstavce</p>
  ...

Element <link>

  • slouží k definování vztahů dokumentu s jinými dokumenty
    • připojení definice stylu dokumentu
    • navigace dokumentu
  • může se vyskytovat pouze v hlavičce dokumentu <head>
    • k popisu zdroje je možné využít atribut title
    • parametr rel určuje typ šablony
      • stylesheet – základní (výchozí) šablona
      • alternate – alternativní šablona (umožňuje uživateli nabídnou jiný vzhled)
    • vždy uvádějte atribut type
  ...
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  ...
  <h2>Červený nadpis</h2>
  <p>Modrý text odstavce</p>
  ...

Připojený soubor style.css obsahuje:

h2 {color: red;}
p {color: blue;}

Pravidlo @import

Pravidlo @import je doporučeno uvádět v CSS vždy jako první.

Hlavička dokumentu

HTML
  ...
  <style type="text/css">
    <!--
      @import url("style.css")
      h2 {color: red;}
      p {color: blue;}
    -->
  </style>
</head>
<body>
  ...
  <h2>Červený nadpis</h2>
  <p>Modrý text odstavce</p>
  ...
XHTML
  ...
  <style type="text/css">
    /* <![CDATA[ */
      @import url("style.css")
      h2 {color: red;}
      p {color: blue;}
    /* ]]> */
  </style>
</head>
<body>
  ...
  <h2>Červený nadpis</h2>
  <p>Modrý text odstavce</p>
  ...

Externí soubor

Příklad pravidla @import v externím CSS souboru:

@import url("style.css")
h2 {color: red;}
p {color: blue;}

 Doporučení:

  1. Používejte externí soubory se styly.
    • do stylu se mohou bez problémů zapisovat libovolné znaky (<, >, & atd.)
    • na styly uvedené v externím souboru je možné se odkazovat ze všech dokumentů webu
    • při úpravě vzhledu dokumentu stačí upravit pouze soubor se styly
    • styly se načtou pouze pro zařízení (média), která je podporují
    • prohlížeče si externí soubor uloží do cache paměti a nemusí je znovu stahovat
  2. Nepoužívejte "tabulkové" rozložení (layout) stránky.
  3. Nepoužívejte rámce:
    • vyhledávače mohou odkazovat pouze na hlavní rámec s obsahem (chybí navigace, hlavička stránky atd.);
    • problémy při tisku atd.
Způsoby přidělení stylů
Způsob Podpora prohlížečů Poznámka
<link> všechny prohlížeče  
<style>   IE 5.5 nerespektuje atribut media
@import url("ie4.css") dodatky pro IE4 odřízne NN4
@import "moderni_prohlizece.css" moderní prohlížeče (od IE5+, NN6/Moz, Opera) odřízne IE4

NN4 a IE4 z kaskádových stylů spolehlivě podporují pouze styl a barvu písma.

PřílohaVelikost
prideleni-stylu.zip1.04 KB

Média

CSS dokáží rozlišovat výstupní zařízení (médium).

Typy médií

  • all – všechny typy zařízení
  • screen – obrazovka počítače
  • projection – velkoplošné projektory, projekční jednotky a u prohlížečů režim zobrazení celá obrazovka (většinou klávesa F11)
  • print – tisk na tiskárně a zobrazení výstupu na monitoru před tiskem
  • tv – televizní obrazovka (nízké rozlišení, omezený počet barev, omezené možnosti posouvání obsahu atd.)
  • handheld – obrazovka kapesního zařízení (s malým displejem)
  • tty – neproporční znakový výstup (dálnopisy, terminály, zařízení s omezenou velikostí obrazovky atd.)
  • aural – zvukový výstup (CSS2)
  • speech – čtecí zařízení (CSS3)
  • braille – braillská dotyková (hmatová) zařízení
  • embossed – plastický tisk na braillské tiskárně (vícestránkové tiskárny)

 Možnosti deklarace

  • v hlavičce dokumentu
    • při deklaraci CSS
      • v elementu <style> 
        • <style type="text/css" media="screen, projection">
      • v pravidle @import 
        • @import url("style.css") screen, projection
      • pravidlem @media
    • v elementu <link> atributem media 
      • <link rel="stylesheet" type="text/css" href="style.css"
   media="screen, projection" />
  • v externím souboru CSS
    • v pravidle @import
    • pravidlem @media

Pravidlo @media

Je možné použít v jakémkoli typu zápisu (jak v atributu style, v elementu <style>, tak i v externím CSS souboru).

@media screen, projection {
  h2 {color: red;}
  p {color: blue;}
}

 

Media Queries

Vlastosti CSS3 Media Queries:

  • width – šířka cílové oblasti výstupního zobrazovacího zařízení (viewport) včetně případných posuvníků
    • obrazovka nebo projektor (u prohlížečů režim zobrazení Celá obrazovka) s výřezem o šířce minimálně 800px (grafický návrh by měl v tomto případě počítat s hodnotou 760px)
    • <link rel="stylesheet" media="screen and (min-width: 800px), projection and (min-width: 800px)" href="screen-800.css" />
      @media screen and (min-width: 800px),
projection and (min-width: 800px) { … }
  • height
  • device-width – šířka výstupního zobrazovacího zařízení (bez ohledu na velikost okna)
  • device-height
  • orientation – na výšku, na šířku
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

Podpora: IE9+, Firefox 3.6+, Safari 4+, Chrome 11+, Opera 10.6+, iOS Safari 3.2+, Opera Mini 5+, Opera Mobile 10+, Android Browser 3+

Poznámky:

  • otestovat, zda je nutné uvádět vlastnost projection

Selektory

Selektory určují prvky, pro které má definice platit.

Univerzální selektor

Vybírá libovolný element (všechny elementy v dané hierarchii).

Příklad CSS:

* {
  color: blue;
}

Typový selektor

Vybírá element podle typu.

Část zdrojového kódu:

<p>text odstavece</p>

Příklad CSS:

p {
  color: blue;
}

Selektor třídy

Vybere element označený definovanou třídou.

Část zdrojového kódu:

<p class="odstavec">text odstavece</p>
<p class="poznamka">text poznámky</p>
<div class="poznamka">text poznámky</div>

Příklad CSS:

.odstavec {
  color: blue;
}
.poznamka {
  color: red;
}
div.poznamka {
  border: 1px solid red;
  padding: 2px;
}

Na stránce může být libovolné množství prvků se stejnou třídou.

Selektor pseudotřídy

Vybere element (spolehlivě funguje pouze u odkazu) na základě uživatelem aktivované události.

Příklad použití CSS na všechny nenavštívené odkazy:

a:link {
  color: #039;
}

Příklad použití CSS na všechny navštívené odkazy:

a:visited {
  color: #930;
}

Příklad použití CSS při aktivaci odkazu (pomocí myši nebo klávesy Enter):

a:active {
  color: #f30;
  text-decoration: underline;
}

Příklad použití CSS aktivované ve chvíli, kdy uživatel na odkaz najede kurzorem myši:

a:hover {
  color: #f30;
  text-decoration: underline;
}

Selektor pseudoelementu

Vybere pouze část skutečného elementu.

Příklad použití CSS na první písmeno odstavce:

p:first-letter {
  font-size: 300%;
  font-weight: bold;
  float: left;
  margin-right: .1em;
}

Podobně vlastnosti p:first-child (IE7+), p:last-child (IE9+).

Selektor identifikátoru

Vybere element označený definovaným identifikátorem.

Část zdrojového kódu:

<div id="zahlavi">Záhlaví</div>

Příklad CSS:

#zahlavi {
  color: green;
}

V jednom dokumentu (stránce) je možné id přiřadit pouze jedinému prvku.

Selektor následníka

Vybere element následníka, jež je vnořen do elementu předka bez ohledu na hloubku vnoření.

Část zdrojového kódu:

<div>
  <img src="logo.gif" alt="Logo" />
  <p>
    Podrobnosti viz <a href="#">statistika přístupnosti
     <img src="stat.gif" alt="Statistika" /></a>.
  </p>
</div>

Příklad CSS:

div img {
  border: none;
}

Selektor potomka

Vybere element potomka, jež je vnořen přímo do elementu rodiče.

Část zdrojového kódu:

<div>
  <img src="logo.gif" alt="Logo" />
  <p>
    Podrobnosti viz <a href="#">statistika přístupnosti
     <img src="stat.gif" alt="Statistika" /></a>.
  </p>
</div>

Příklad CSS:

div > img {
  border: none;
}

Poznámky:

  • mezera mezi elementy a ostrou závorkou je nepovinná
  • nepoporuje IE6-

Selektor obecného sourozence

Vybere druhý definovaný element, který je  sourozencem prvně definovaného elementu. Oba sourozenci musí mít stejného rodiče, musí ležet na stejné úrovni v hierarchii dokumentu, ale nemusí ležet bezprostředně za sebou.

Část zdrojového kódu:

<body>
  <h1>Nadpis</h1>
  <p>První odstavec</p>
  <p>Druhý odstavec</p>
  <h2>Nadpis 2. úrovně</h2>
  <p>Druhý odstavec</p>
  <p>Druhý odstavec</p>
  <h3>Nadpis 3. úrovně</h3>
  <p>Druhý odstavec</p>
  <p>Druhý odstavec</p>
</body>

Příklad CSS:

h2 ~ p {
  color: blue;
}

V tomto příkladě se deklarovaná vlastnost odstavce nepoužije dříve, než u nadpisu 2. úrovně.

Poznámky:

  • mezera mezi elementy a znakem tilda je nepovinná
  • nepoporuje IE6-

 

Selektor sousedícího sourozence

Vybere druhý definovaný element, který je  sourozencem prvně definovaného elementu. Oba sourozenci musí mít stejného rodiče, musí ležet na stejné úrovni v hierarchii dokumentu a musí ležet bezprostředně za sebou.

Část zdrojového kódu:

<body>
  <h1>Nadpis</h1>
  <p>První odstavec</p>
  <p>Druhý odstavec</p>
  <h2>Nadpis 2. úrovně</h2>
  <p>Druhý odstavec</p>
  <p>Druhý odstavec</p>
  <h3>Nadpis 3. úrovně</h3>
  <p>Druhý odstavec</p>
  <p>Druhý odstavec</p>
</body>

Příklad CSS:

h2 + p {
  color: blue;
}

Poznámky:

  • mezera mezi elementy a znakem plus je nepovinná
  • nepoporuje IE6-

Selektory atributů (parametrů)

Vybere element, obsahující definovaný atribut, hodnotu atributu, nebo jeho část.

Příklad použití CSS pouze na elementy a obsahující atribut title s hodnotou odkaz:

a[title="odkaz"] {
  color: blue;
}

Příklad použití CSS pouze na elementy span obsahující atribut lang, jehož hodnoty začínají řetězcem en (en-us, en-uk):

span[lang|="en"] {
  color: blue;
}

Příklad použití CSS pouze na elementy p obsahující atribut class, jehož hodnota obsahuje řetězec nadpis (nadpis1, nadpis2, ale i podnadpis):

p[class*="nadpis"] {
  color: blue;
}

Příklad použití CSS pouze na elementy p obsahující atribut class, jehož hodnota začíná řetězcem nadpis (nadpis1, nadpis2):

p[class^="nadpis"] {
  color: blue;
}

Příklad použití CSS pouze na elementy p obsahující atribut class, jehož hodnota obsahuje řetězec pis (nadpis, podnadpis):

p[class$="pis"] {
  color: blue;
}

Poznámky:

  • IE7 vyžaduje striktní režim
  • nepoporuje IE6-

 

Deklarace

Jednoduchá

Jednoduchá deklarace přiřazuje vlastnosti jednomu selektoru.

h1 {
  color: blue;
}

Vícenásobná

Vícenásobná deklarace přiřazuje vlastnosti více selektorům odděleným čárkou.

h1, h2, h3, h4, h5, h6 {
  color: blue;
}

Komentáře

Prohlížeče komentáře ignorují. Komentáře slouží pouze autorovi k zapsání poznámek např. k lepší orientaci v kódu.

/* odstavec */ 
p {
  color: blue; /* modra barva */
  font-size: 90%; /* velikost textu */ 
}

Poznámka:
Komentáře je vhodné psát bez diakritiky.

Jednotky

  • zapisují se ihned za číslo určující množství jednotek
  • jako oddělovač desetinných míst se používá tečka
  • jednotku není nutné uvádět u hodnoty nula
  • hodnota může být jak kladná, tak i záporná
  • absolutní jednotka udává přesnou míru
  • relativní jednotka se vztahuje k jiné velikosti

Příklad CSS:

div {
  margin: 1.5em 5% -10px 0;
}

Čtverčík (em)

  • šířka velkého písmena M
  • hodnota se mění v závislosti na velikosti písma
  • relativní jednotka – aktuální velikost může být ovlivněna velikostí nadřazeného prvku a volbou uživatele
  • použití: rozvržení (layout) dokumentu a box model

Poznámka: prvky v jednotkách em do sebe nevnořujte, protože aktuální velikost může být ovlivněna velikostí nadřazeného prvku, volbou uživatele a z důvodu implementační chyby IE6-

Ex (ex)

  • výška malého písmena x
  • hodnota se mění v závislosti na velikosti písma
  • relativní jednotka – aktuální velikost může být ovlivněna velikostí nadřazeného prvku a volbou uživatele

Procenta (%)

  • hodnota se počítá z velikosti rodičovského prvku (v nejvyšší úrovni je jím okno prohlížeče)
  • relativní jednotka (často zděděná od rodiče)
  • použití: texty

Pixel (px)

  • obrazovkový bod (každá obrazovka má jinou velikost obrazového bodu) – nejčastěji 96 px na palec
  • relativní jednotka
  • použití: grafika

Typografický bod (pt)

  • hodnota je odvozena od anglického palce
  • 1 pt = 72 in (často se používá 300 pt na palec)
  • absolutní jednotka
  • použití: tisk

Centimetr (cm)

  • 1 cm = 10 mm
  • absolutní jednotka

Poznámka: vzhledem k různým rozlišením obrazovky funguje spolehlivě snad jen při tisku.

Milimetr (mm)

  • 1 mm = 3.78 px
  • absolutní jednotka

Poznámka: vzhledem k různým rozlišením obrazovky funguje spolehlivě snad jen při tisku.

Palec (in)

  • 1 in = 2,54 cm, 1 in = 96 px
  • absolutní jednotka

Poznámka: vzhledem k různým rozlišením obrazovky funguje spolehlivě snad jen při tisku.

Pica nebo též cicero (pc)

  • 1 pc = 12 pt, 1 pc = 1/6 in, 1 pc = 16 px
  • absolutní jednotka

Poznámka: vzhledem k různým rozlišením obrazovky funguje spolehlivě snad jen při tisku.

 

Barvy

Klíčové slovo

Definuje barvu pomocí klíčového slova:

  • aqua – modrozelená
  • black – černá
  • blue – modrá
  • fuchsia – purpurová
  • gray – šedá
  • green – zelená
  • lime – neonově zelená
  • maroon – kaštanová
  • navy – tmavě modrá
  • olive – olivová
  • purple – fialová
  • red – červená
  • silver – stříbrná
  • teal – tmavě modrozelená
  • white – bílá
  • yellow – žlutá

Příklad CSS: p {color: blue;}

RGB syntaxe

Definuje barvu pomocí odstínu červené, zelené a modré tzv. RGB (Red Green Blue) syntaxe.

Příklad CSS (různé zápisy barvy blue):

p {color: #00f;} /* #00F */
p {color: #0000ff;} /* #0000FF #0000fF #0000Ff */
p {color: rgb(0, 0, 255);}
p {color: rgb(0, 0, 100%);}

 

Pořadí stylů

Při definování stylů může dojít k situaci, kdy jeden element může mít definovanou vlastnost různými způsoby, nebo na více místech. V tomto případě je třeba rozhodnout, kterou deklaraci, styl nebo zdroj stylů použít.

Priority definic:

  1. Kaskáda
  2. Dědičnost
  3. Vypočítaná hodnota
  4. Výchozí hodnota

Kaskáda

Při existenci více zdrojů stylů stejné důležitosti rozhoduje o tom který styl se použije kaskáda.

  1. Atribut style ve zdrojovém kódu (nejsilnější)
    <p style="color: blue;">
  2. Styl v hlavičce dokumentu
      ...
  <style type="text/css">
        <!--
          p {color: blue;}
        -->
      </style>    
</head>
<body>
  ...
  3. Externí styl
      ...
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  ...
  4. Pravidlo @import
  5. Uživatelský styl definovaný v nastavení webového prohlížeče
  6. Výchozí styl webového prohlížeče (nejslabší)

Specifičnost selektoru

Určuje váhu selektoru. Selektor s vyšší váhou (silnější) přepíše deklarace stejných vlastností u selektoru s nižší váhou (slabší).

  1. Specifičnost: 1000 (nejsilnější)
    • atribut style ve zdrojovém kódu <p style="color: blue;">
  2. Specifičnost: 0100
    • identifikátor #header {color: blue;} /* zahlavi */
  3. Specifičnost: 0010
    • třída, pseudotřída nebo selektor atributu (parametru)
      .note {font-size: 80%;} /* poznamka */
a:hover {text-decoration: underline;}
a[href]:after {content: " [" attr(href) "] ";}
  4. Specifičnost: 0001
    • typový selektor nebo pseudoelement
      p {color: blue;}
p:first-letter {font-weight: bold; font-size: 130%;}
  5. Specifičnost: 0000 (nejslabší)
    • univerzální selektor nebo jeho kombinace * {color: blue;}

Jednotlivé úrovně specifičnosti se sčítají a vyhrává ten nejsilnější.

Příklad výpočtu:

Selektor #header ul li.note p:first-letter a:hover {color: red;} má specifičnost: 0125.

Pořadí selektoru

V případě shody pravidel vyhrává to, které je uvedeno později.

Pravidlo !important

Umožňuje upřednostnit deklaraci v případě konfliktu s jinými deklaracemi bez tohoto pravidla.

V případě střetu pravidla !important v uživatelské šabloně a pravidla !important ve stylu dokumentu, vyhraje uživatelská šablona.

a {
  text-decoration: underline; !important 
}

Jedná se o poslední možné řešení, běžné CSS se bez tohoto pravidla většinou obejdou.

Dědičnost

Elementy jsou v dokumentu uspořádány ve stromové struktuře. Elementy mohou dědit hodnoty vlastností od svého nadřazeného elementu a to i po více generací. V (X)HTML je nejvyšší element html, do něj jsou vnořeny elementy head a body, do body je vnořen element h1 atd. Jedná se o pojmy následník a předchůdce. V případě přímého příbuzenství o pojmy rodič a potomek.

V CSS má každá vlastnost určeno, zda je dědičná nebo ne. U vnořeného elementu je možné zdědění vlastnosti vynutit hodnotou inherit.

Příklad:

body {
  color: teal; /* vlastnost je dedicna */
  border: 5px solid silver; /* vlastnost neni dedicna */
}
h1 {
  border: inherit; /* vynuceni dedicnosti */
}

Poznámky:

  • IE7- podporuje hodnotu inherit pouze u vlastností direction and visibility

Vypočítaná hodnota

U relativních jednotek (em, % atd.) a klíčových slov (large, small atd.) je třeba vypočítat jejich skutečnou hodnotu. Skutečné hodnoty se ještě dále upravují podle možností výstupních zařízení (násobky bodu obrazovky, barevné spektrum, možnosti tiskárny atd.).

Výchozí hodnota

Každá vlastnost má CSS specifikací určenu výchozí hodnotu, která se použije v případě, pokud není stanoveno jinak. U některých vlastností může výchozí hodnotu upřesnit prohlížeč.

Základní vlastnosti

Základní vlastnosti kaskádových stylů:

Text a písmo

Sdružená definice písma – font

Umožňuje zkrácený zápis všech vlastností písma:

  • font-size
  • line-height
  • font-variant
  • font-weight
  • font-style
  • font-family
p {font: small-caps bold italic Arial 120%/1.5;}

Při použití sdružené definice jsou u neuvedených vlastností nastaveny výchozí hodnoty.

p {font: 90% bold;}

Typ písma – font-family

  • Proporcionální písmo – různé znaky mají různou šířku, která obsahuje prázdný prostor před a za písmenem
    • Bezpatkové (rodina sans-serif)
    • Patkové (rodina serif)
    • Ozdobné písmo (rodina fantasy, cursive)
  • Neproporcionální písmo (rodina monospace) – všechny znaky písma jsou stejně široké (napodobení psacího stroje nebo dálnopisu)
body, table {
  font-family: 'Trebuchet MS', 'Verdana CE', 'Arial CE', 'Helvetica CE', Verdana, Arial, Helvetica, clean, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Times New Roman CE', 'Times New CE', 'Times CE', 'Times New Roman', Times, serif;
}
pre, code {
  font-family: Profont, 'lucida console', 'Courier New CE',
   'Courier CE', 'Courier New', Courier, Monaco, monospace;
}

Velikost písma – font-size

h2 {font-size: 185%;}

Výška řádku – line-height

p {line-height: 1.5;}

Varianta písma – font-variant

abbr {font-variant: small-caps;}

Tučnost písma – font-weight

p {font-weight: normal;}
strong {font-weight: bold;}

Styl písma – font-style

em {font-style: italic;}

Barva textu – color

body, table {color: purple;}

Velikost mezer mezi slovy – word-spacing

h1 {word-spacing: 1em;}

Nepodporuje IE5.5

Velikost mezer mezi písmeny – letter-spacing

h1 {letter-spacing: .3em;}

Bílé znaky – white-space

Určuje způsob zacházení s mezerami, tabulátory a konci řádků.

  • normal – výchozí hodnota
  • nowrap – zakáže automatické zalamování řádků
  • pre – zobrazuje bílé znaky přesně tak, jako v kódu dokumentu
  • pre-wrap – zobrazuje bílé znaky přesně tak, jako v kódu dokumentu, ale je povoleno automatické zalamování řádků (nepodporuje IE7-, FireFox 2.0-, Opera 7.5- a Safari 2.0-)
  • pre-line – zobrazuje zlomy řádků tak, jako v kódu dokumentu (nepodporuje IE7-, FireFox 3.0-, Opera 9.2- a Safari 2.0-)
th {white-space: nowrap;}

Horizontální zarovnání obsahu – text-align

h1 {text-align: center;} /* na stred */
p {text-align: justify;} /* do bloku */
cite {text-align: right;} /* vpravo */

Vertikální zarovnání – vertical-align

Používá se pro vertikální zarovnání např. malého obrázku na vyšším řádku nebo v tabulkách.

.horni-index {vertical-align: super;} /* v tabulce jako baseline */
.dolni-index {vertical-align: sub;} /* v tabulce jako baseline */
.co-nejvyse {vertical-align: top;}
.s-hornim-okrajem-textu {vertical-align: text-top;} /* v tabulce
 jako baseline */
.doprostred {vertical-align: middle;}
.s-dolnim-okrajem-textu {vertical-align: text-bottom;} /* v tabulce
 jako baseline */
.co-nejnize {vertical-align: bottom;}

IE5- podporuje pouze hodnoty baseline, sub a super.

Dekorace textu – text-decoration

a:hover {text-decoration: underline;} /* podtrzeno */
.ne {text-decoration: line-through;} /* preskrtnuto */
.reklama {text-decoration: blink;} /* blikajici */

IE7 nezná hodnotu blink.

Odsazení prvního řádku – text-indent

p {text-indent: 2em;}

Převod textu – text-transform

.kapitalky {text-transform: capitalize;}
.mala {text-transform: lowercase;}
.velka {text-transform: uppercase;}

Stín textu – text-shadow

.stin {text-shadow: 3px 3px 1px #999;}
.embossed {text-shadow: 0 -1px 1px rgba(0,0,0,0.5);}
h1 {
  color: #502a2d;
  letter-spacing: 0.75em;
  text-shadow:
    2px 2px 0 #bab0a6,
    2px -2px 0 #bab0a6,
    -2px 2px 0 #bab0a6,
    -2px -2px 0 #bab0a6,
    9px 9px 0 #a63e3b;
  font-effect: outline;
}

Podpora: Firefox 3.5, Gecko 1.9.1, Opera 9.5 Safari 1.1, WebKit 100, Konqueror 3.4, Chromium 2.0.158.0

Nepodporuje IE8-, (IE5.5 podporuje pouze filtry Shadow a DropShadow)

Směr psaní textu – direction

p {direction: rtl;}

Orientace toku textu – unicode-bidi

p {unicode-bidi: bidi-override; direction: rtl;}

 

Pozadí

Sdružená definice pozadí – background

Umožňuje zkrácený zápis všech vlastností pozadí:

  • background-color
  • background-image
  • background-position
  • background-repeat
  • background-attachement
body {background: #cf3 url(../images/pozadi.jpg) top left repeat-x;}

Při použití sdružené definice jsou u neuvedených vlastností nastaveny výchozí hodnoty.

Barva pozadí – background-color

p {background-color: #cf3;}
#header p {background-color: transparent;}

Obrázek na pozadí – background-image

body {background-image: url(../images/pozadi.jpg);}
.zadny-obrazek {background-image: none;}

Pozice obrázku na pozadí – background-position

body {
  background: url(../images/pozadi.jpg) no-repeat;
  background-position: center bottom; /* osa x a osa y */
}

Ekvivalentní zápisy:

  • left top ~ 0% 0% ~ 0 0
  • right bottom ~ 100% 100%

Pokud uvedete pouze jednu hodnotu, druhá se automaticky nastaví na střed:

  • 0 ~ left ~ left center ~ 50% 50%
  • 50% ~ center ~ center center ~ 50% 50%
  • 100% ~ right ~ right center ~ 100% 50%
  • top ~ center top ~ 50% 0% ~ 50% 0
  • bottom ~ center bottom ~ 50% 100%

V jedné deklaraci nepoužívejte současně textové a číselné hodnoty.

Opakování obrázku na pozadí – background-repeat

body {
  background-image: url(../images/pozadi.jpg);
  background-repeat: repeat-x; /* repeat-y, no-repeat, repeat */
}

Posouvání obrázku na pozadí – background-attachment

body {
  background-image: url(../images/pozadi.jpg);
  background-attachment: fixed;
}

IE6- umožňuje použít hodnotu fixed pouze pro element body.

Rámeček, okraje a rozměry

Zápis hodnot vlastností, u kterých je možné nastavovat všechny čtyři strany je možné zkrátit.

Příklad nastavení vnitřního okraje
Definice Horní Pravý Dolní Levý
padding: 1px 2px 3px 4px; 1 2 3 4
padding: 1px 2px 3px; 1 2 3 2
padding: 1px 2px; 1 2 1 2
padding: 1px; 1 1 1 1

Sdružená definice rámečku – border

Umožňuje zkrácený zápis všech vlastností rámečku:

  • border-width
  • border-style
  • border-color
h1 {border: 4px groove green;}
p {border: 4px ridge green;}

Při použití sdružené definice jsou u neuvedených vlastností nastaveny výchozí hodnoty.

Samostatně lze zadávat i jednotlivé strany:

body {
  border-top: 10px solid lime;
  border-right: 10px double green;
  border-bottom: 10px dotted purple;
  border-left: 10px dashed blue;
}

Šířka rámečku – border-width

body {
  border: solid green;
  border-width: 1px 2px 3px 4px;
}

Samostatně lze zadávat i jednotlivé strany:

body {
  border: solid green;
  border-top-width: 5px;
  border-right-width: 10px;
  border-bottom-width: 15px;
  border-left-width: 20px;
}

Šířka vykreslování klíčových slov (thin, medium, thick) se v jednotlivých prohlížečích liší.

Styl rámečku – border-style

  • solid – spojitý
  • double – dvojitý
  • groove – příkop
  • ridge – val
  • inset – vmáčknutý
  • outset – vystouplý
  • dotted – tečkovaný
  • dashed – čárkovaný
  • none – žádný
body {
  border: 10px green;
  border-style: solid;
}

Samostatně lze zadávat i jednotlivé strany:

body {
  border: 10px green;
  border-top-style: double;
  border-right-style: dotted;
  border-bottom-style: dashed;
  border-left-style: none;
}

IE6- vykresluje tečkovaný rámeček o šířce 1px čárkovaně.

IE5- vykresluje tečkovaný a čárkovaný rámeček jako spojitý.

Barva rámečku – border-color

body {
  border: 10px solid;
  border-color: red black blue green;
}

Samostatně lze zadávat i jednotlivé strany:

body {
  border: 10px solid;
  border-top-color: red;
  border-right-color: black;
  border-bottom-color: blue;
  border-left-color: transparent;
}

Zaoblení rámečku – border-radius

.radius {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  position: relative;
  behavior: url('sites/all/themes/legadino/design/pie.htc');
}

V současné době nepodporují prohlížeče IE a Opera. Pro prohlížeče Mozilla Firefox, Google Chrome a Safari je možné již dnes používat zkušební vlastnosti -moz-border-radius a -webkit-border-radius.

Omezení:

  • zaoblit rohy elementu <img> není možné, ale můžete použít obrázek v pozadí elementu <div>
  • pro prohlížeč Opera musí být styl pro kulaté rožky uveden ve zdrojovém kódu stránky (na odstranění tohoto omezení se pracuje)

Vnější okraj – margin

p {margin: 1em 0 .5em;}

Samostatně lze zadávat i jednotlivé strany:

p {
  margin-top: 1em;
  margin-right: 0;
  margin-bottom: .5em;
  margin-left: 0;
}

Vnitřní okraj – padding

th, td {padding: 0.1em .3em 0;}

Samostatně lze zadávat i jednotlivé strany:

th, td {
  padding-top: .1em;
  padding-right: .3em;
  padding-bottom: 0;
  padding-left: .3em;
}

Výška – height

  • pouze pro blokové elementy (pro řádkové je možné použít vlastnost line-height)
  • hodnota vyjádřená procenty se vztahuje k zadané výšce nadřazeného elementu
  • je-li obsah elementu menší než zadaná výška, vytvoří se pod obsahem prázdné místo
  • přetečení obsahu řeší vlastnost overflow
#header {height: 100px;}

 Maximální výška – max-height

div {max-height: 100px;}

Nepodporuje IE6-

Minimální výška – min-height

div {min-height: 100px;}

Nepodporuje IE6-

Šířka – width

  • pouze pro blokové elementy
  • hodnota vyjádřená procenty se vztahuje k zadané šířce nadřazeného elementu
  • je-li obsah elementu menší než zadaná šířka, vytvoří se vedle obsahu prázdné místo
  • přetečení obsahu řeší vlastnost overflow
#header, #content, #footer {width: 760px;}

Maximální šířka – max-width

div {max-width: 100px;}

Nepodporuje IE6-

 Minimální šířka – min-width

div {min-width: 100px;}

Nepodporuje IE6-

 

Zobrazení, pozice a obtékání

Způsob zobrazení – display

Skrytý element na stránce nezabírá žádné místo.

h1 {display: inline;} /* zobrazi se jako radkovy element */
#menu a {display: block;} /* zobrazi se jako blokovy element */
.hidden {display: none;} /* nezobrazi se */

Viditelnost – visibility

Skrytý element na stránce stále zabírá své místo.

.skryt {visibility: hidden;}
.zobrazit {visibility: visible;}

Přetečení – overflow

Určuje jakým způsobem zacházet s obsahem, který se do elementu nevejde:

  • visible – přetékající obsah se zobrazí
  • hidden – přetékající obsah se nezobrazí
  • scroll – posuvníky se zobrazí vždy
  • auto – posuvníky se zobrazí pouze v případě nutnosti
pre {
  width: 556px;
  font-size: 13px;
  overflow: auto;
}

Samostatně lze zadávat i jednotlivé směry:

p {
  width: 100px;
  height: 100px;
  overflow-y: auto;
  overflow-x: scroll;
}

Pozice – position

Umístění každého elementu v rámci dokumentu může být statické (výchozí), relativní, absolutní nebo fixní. Umístění se vztahuje vždy k obsahovému bloku elementu.

Statické pozicování – static:

  1. Obsahovým blokem je nejbližší nadřazený blokový element.
  2. Blok elementu je umístěn v rámci běžného toku dokumentu (dle zdrojového kódu).

Relativní pozicování – relative:

  1. Obsahovým blokem je nejbližší nadřazený blokový element.
  2. Blok elementu je posunut z původního umístění jedním nebo více směry.
  3. Původní prostor po elementu zůstane zachován.
  4. Nová pozice elementu neovlivní pozici jiného elementu.

Absolutní pozicování – absolute:

  1. Obsahovým blokem je nejbližší nadřazený pozicovaný element v jiném než statickém umístění.
  2. Blok elementu je vyjmut z běžného toku dokumentu, kde uvolní místo následujícím elementům a přesune se na určenou pozici vzhledem ke svému obsahovému bloku.
  3. V nové pozici blok nijak neovlivňuje jiné elementy.

Fixní pozicování – fixed:

  1. Obsahovým blokem je zobrazovací obslat prohlížeče.
  2. Blok elementu je vyjmut z běžného toku dokumentu, kde uvolní místo následujícím elementům a přesune se na určenou pozici vzhledem ke svému obsahovému bloku.
  3. Blok zůstane v nové pozici i při posunu obsahu prohlížeče.

IE6- vyhodnocuje fixní umístění jako absolutní. 

img {
  position: absolute;
  bottom: 0;
  left: 50%; /* levy roh se umisti na stred nadrazeneho elementu */
}

Horní vzdálenost – top

Vzdálenost horního vnějšího okraje relativně či absolutně pozicovaného elementu od horního vnitřního okraje nadřazeného elementu.

#links {
  position: absolute;
  top: 0;
}

Pravá vzdálenost – right

Vzdálenost pravého vnějšího okraje relativně či absolutně pozicovaného elementu od pravého vnitřního okraje nadřazeného elementu.

#menu {
  position: absolute;
  right: 0;
}

Spodní vzdálenost – bottom

Vzdálenost spodního vnějšího okraje relativně či absolutně pozicovaného elementu od spodního vnitřního okraje nadřazeného elementu.

#footer {
  position: absolute;
  bottom: 0;
}

Levá vzdálenost – left

Vzdálenost levého vnějšího okraje relativně či absolutně pozicovaného elementu od levého vnitřního okraje nadřazeného elementu.

#menu {
  position: absolute;
  left: 10px;
}

Vrstva – z-index

Umístění absolutně pozicovaného elementu do vzdálenější (nižší číslo) nebo bližší vrstvy (vyšší číslo).

h1 img {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
#links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

Ořez – clip

Ořízne absolutně pozicovaný element.

img {
  position: absolute;
  clip: rect(10px auto auto auto); /* souradnice z leveho horniho
   rohu */
}

IE6- neumí oříznout pozadí, ale pouze obsah elementu

Plovoucí pozice – float

  1. Obsahovým blokem je nejbližší nadřazený blokový element.
  2. Blok elementu je možné umístit vlevo nebo vpravo v rámci obsahového bloku.
  3. Následujícímu obsahu je umožněno, aby element v plovoucím umístění obtékal zprava nebo zleva.
  4. Plovoucí blok elementu se snaží umístit co možná nejvýše v rámci svého obsahového bloku.
  5. V nové pozici plovoucí blok ovlivňuje pozice následujících elementů v normálním toku dokumentu.
  6. Původní pozice je uvolněna pro další elementy.

Hodnoty:

  • left – umístí element vlevo a umožní dalšímu obsahu, aby jej obtékal zprava
  • right – umístí element vpravo a umožní dalšímu obsahu, aby jej obtékal zleva
  • none – běžný tok dokumentu (zrušení plovoucí pozice)
img {  
  width: 100px; /* definovana sirka je nutnou podminkou */
  float: right;
}

Ukončení obtékání – clear

Určuje stranu, ze které se ukončí obtékání.

.clear {clear: both;}
.clear-left {clear: left;}
.clear-right {clear: right;}

 

Tabulka

Vertikální zarovnání obsahu buněk tabulky – vertical-align

Hodnoty:

  • baseline – účaří prvního řádku všech buněk na řádku (různé velikosti písma, vložený objekt)
  • top – horní okraj
  • middle – střed
  • bottom – spodní okraj
th {vertical-align: bottom;}
td {vertical-align: top;}

Splynutí rámečku sousedních buněk a tabulky – border-collapse

table {
  border: 1px dotted blue;
  border-collapse: collapse;
}
table.dvojramecek {
  border: 1px solid green;
  border-collapse: separate; /* oddelene bunky a ramecek tabulky */
}

Velikost mezer mezi rámečky – border-spacing

table {
  border: 1px dotted blue;
  border-spacing: 10px;
}

Nepodporuje IE7-

Umístění titulku – caption-side

Hodnoty:

  • top – nad tabulkou
  • bottom – pod tabulkou
  • left – vlevo
  • right – vpravo
table {
  caption-side: bottom;
}

Nepodporuje IE7-

Opera zná pouze hodnoty top a bottom

Rámeček kolem prázdných buněk – empty-cells

table {
  border: 1px dotted blue;
  empty-cells: hide;
}
table.zobrazit {
  border: 1px solid green;
  empty-cells: show;
}

Nepodporuje IE7-

 

Seznamy

Sdružená definice seznamů – list-style

Umožňuje zkrácený zápis všech vlastností seznamů:

  • list-style-type
  • list-style-position
  • list-style-image
ul li {list-style: square outside none;}
ol li {list-style: upper-latin outside url(images/menu.gif);}

Typ označení položky seznamu – list-style-type

ul, ol {list-style-type: none;} /* bez oznaceni */
ul.kolecko {list-style-type: disc;}
ul.kruh {list-style-type: circle;}
ul.ctverec {list-style-type: square;}
ol.cislo {list-style-type: decimal;}
ol.velke-pismeno {list-style-type: upper-latin;}
ol.male-pismeno {list-style-type: lower-latin;}
ol.velke-rimske {list-style-type: upper-roman;}
ol.male-rimske {list-style-type: lower-roman;}
ol.velke-pismeno {list-style-type: upper-alpha;}
ol.male-pismeno {list-style-type: lower-alpha;}
ol.recke-pismeno {list-style-type: lower-greek;} /* nefunguje v IE */
ol.s-pocatecni-nulou {list-style-type: decimal-leading-zero;}
 /* nefunguje v IE */
ol.armenske-cislo {list-style-type: armenian;} /* nefunguje
 v IE a Opeře */
ol.hebrejske-cislo {list-style-type: georgian;} /* nefunguje
 asi nikde */

Pozice označení položky seznamu -list-style-position

ul {list-style-position: outside;}
ol {list-style-position: inside;}

Obrázek označení položky seznamu – list-style-image

Definovaný obrázek přepíše vlastnost list-style-type.

ul {list-style-image: url(images/menu.gif);}

 

Cvičení 5

Pomocí přiložených dat upravte vzhled fotogalerie ze cvičení 4.

  1. Nastavte pozadí fotogalerie.
  2. Vytvořte rámeček kolem hlavní fotografie.
  3. Upravte orámování a umístění náhledů.
  4. Nastavte tiskový výstup tak, aby se netiskly náhledy fotografií.
PřílohaVelikost
data-fotogalerie-css.zip154.93 KB
bg.png2.86 KB

Cvičení 6

Pomocí přiložených dat upravte vzhled webového dokumentu ze cvičení 2.

PřílohaVelikost
data-cviceni-6.zip552.75 KB
data-cviceni-6-easy.zip208.12 KB

Poznámky

Odkazy:

Při ukládání webové stránky se neuloží (prohlížeč uloží pouze data přístupná přímo ze zdroje webové stránky):

  • obrázky vložené pomocí css stylů
  • css styly připojené pomocí @import

CSS Framework:

overflow: Přetečený obsah zvětší v Exploreru výšku prvku

Tipy

Animace obrázku pomocí CSS3.

Upoutávka v rohu stránky:

<div id="corner">CSS3</div>

#corner {
  -moz-transform: translateX(85px) translateY(-30px) rotate(45deg);
  -moz-transform-origin: left top;
  background: -moz-linear-gradient(center top , #FFB321, #FFA600) repeat scroll 0 0 transparent;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  color: #7F3300;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 40px;
  position: absolute;
  right: 0;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  top: 0;
  z-index: 9999;
}