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ě 980px (grafický návrh by měl v tomto případě počítat s šířkou 960px)
    • <link rel="stylesheet" type="text/css" media="screen and (min-width: 960px), projection and (min-width: 960px)" href="screen-projection-960.css" />
      @media screen and (min-width: 960px),
projection and (min-width: 980px) { …STYLES… }
    • .info (Drupal)
    • stylesheets[screen and (min-width: 480px) and (max-width: 760px)][] = design/screen-480-760.css

stylesheets[screen and (min-width: 960px)][] = design/screen-960.css
  • 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

Nativní podpora: IE9+, Firefox 3.5+, Safari 3+, Chrome, Opera 7+, iOS Safari 3.2+, Opera Mini 5+, Opera Mobile 10+, Android Browser 2.1+

Přehled některých zařízení a prohlížečů
Device CSS px Actual px Device pixel ratio dpi
iPhone 2,3 320x480 320x480 1  
iPhone 4 320x480 640x960 2 192
iPhone 5 320x568 640x1136 2 192
iPad mini, 1, 2 768x1024 768x1024 1  
iPad 3, 4 768x1024 1536x2048 2 192
Android 2.3     1.5 144
Android 4.1     2 192
Windows 8 Phone        
Interenet Explorer on Windows Phone 8       96 ???
Opera Mini        
Firefox OS        
Firefox for Mobile (Fennec)        
Google Nexus 7     1.3 124.8
Playbook        

Příklad Media Queries pro Tablet:

@media
(min-width: 44em)  { /* ...STYLES... */}

Příklad Media Queries pro Tablet s Retina displejem:

@media
(min-width: 44em) and (-webkit-min-device-pixel-ratio: 1.25),
(min-width: 44em) and (min-resolution: 120dpi) { /* ...STYLES... */}
@media
(min-width: 44em) and (-webkit-min-device-pixel-ratio: 1.3),
(min-width: 44em) and (min-resolution: 124.8dpi) { /* ...STYLES... */}
@media
(min-width: 44em) and (-webkit-min-device-pixel-ratio: 1.5),
(min-width: 44em) and (min-resolution: 144dpi) { /* ...STYLES... */}
@media
(min-width: 44em) and (-webkit-min-device-pixel-ratio: 2),
(min-width: 44em) and (min-resolution: 192dpi) { /* ...STYLES... */}
Responsive web design layout
  Smartphone Tablet Desktop TV
Rozlišení zařízení (velikost okna aplikace) [px] 320x480 portrait 480x320 landscape 768x1024 portait 1024x768 landscape 1280x960(1024) 1680 3456
Bod zlomu (break point) 320 480 650, 700, 704, 740, 767, 768 979, 980, 1024 1025, 1120, 1200, 1220   3456
Maximální šířka objektu (při 10px okraji) 300 460 720 960 1200   3436
Šířka sloupce při gridu 12 (max. šířka/12) (320) (480) 60 80 100    
Téma Omega 3 global global >=740 (narrow)

740-840 (narrow landscape)

>=980 (normal)

=1024 (normal landscape)

 >=1220    
Téma Omega 4     >=44em
(16px * 44em ~ 704px)		   >=70em
(16px * 70em ~ 1120px)		    
Téma AdaptiveTheme <=320 321-480 481-768 796-1024 >=1025    
Bootstrap   <=480 <=767 768-979 >=1200    
Foundation              
templatemonster.com 320 480 768 980      

Podporu je možné rozšířit pomocí JavaScript knihovny css3-mediaqueries.js i na IE 5+, Firefox 1+ and Safari 2 (umožňuje navíc i podporu průhlednosti u PNG obrázků).

Tipy

Poznámky:

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

Responzivní webdesign

Pro rychlé vytvoření responzivního rozvržení je možné použít generátory nebo využít některého z frameworků např.:

  • responsify.it (grid – pružná šířka sloupce, less, scss)
  • getbootstrap.com (grid)
  • foundation.zurb.com (grid)

Mé požadavky:

  • samostatné sekce (hlavička, obsah, patička atd.) – zrychlení počátku vykreslování webu (Start Render)
  • (možnost fixní šířky sloupců – např. pro reklamní bloky)
    • v takto definovaných "úzkých" šířkách není vhodné uživateli povolovat zvětšování písma
  • HTML5
  • responzivní design

Zajímavé zdroje informací:

Techniky vytváření vzhledu:

  • Mobile first – vzhled se začíná tvořit od mobilního, přes tablet, notebook, desktop až k TV
  • Desktop first – většinou při nedostatku času nebo při nutnosti podpory starších prohlížečů

CSS:

  1. Nejdříve pište "obyčejné" selektory – vzhled načtou i prohlížeče nepodporující Media Query
  2. Teprve poté pište selektory v Media Queries podmínkách – upřesňují vzhled pro moderní prohlížeče

Optimalizace:

  • pro cílové zařízení používejte konkrétní kvalitu médií (vzhled, obrázky, videa atd.)
  • využívejte asynchronní verze skriptů

Jak vytvořit responzivní webdesign?

enlightened Pro sjednocení vzhledu (vykreslení) všech prvků napříč moderními prohlížeči je vhodné použít normalize.css (pro zastaralé prohlížeče je nutné použít dnes již "zavržený" reset.css).

Normalize.css:

  • zachovává užitečné výchozí nastavení prvků
  • opravuje některé běžné chyby (HTML5 elementy, dědičnost písma ve formulářových prvcích, korekce velikosti písma, SVG přetečení v IE9, vzhled tlačítek v iOS atd.)
  • neznehodnocuje práci ve vývojových nástrojích a při ladění CSS atd.

enlightened Většina mobilní prohlížečů přizpůsobí stránku (pomocí změny měřítka "scale") tak, aby se celá vešla na obrazovku (=>téměř nečitelný text). Pro zamezení tohoto chování je tedy třeba do hlavičky vložit níže uvedený meta tag (umožňuje změnu šířky při natočení):

<meta name="viewport" content="width=device-width, initial-scale=1">

Více viz např. developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Tip: Alternativou k výše uvedeném tagu muže být CSS @viewport

enlightened Pružné (flexibilní) obrázky a multimédia:

img,
embed,
object,
video {
  display: block; /* IE (display: block; | width: auto; | width: 100%;) */
  max-width: 100%;
  height: auto;
  vertical-align: top; /* optional */
  -ms-interpolation-mode: bicubic;
}

Tip: Responsive images – how to prevent reflow

enlightened Responzivní tabulky

  • FooTable yes
    • Nastavení vlastních beakpointů
    • <script>
  $(function () {
    $('.footable').footable({
      breakpoints: {
        phone: 749,
        tablet: 969
      }
    });
  });
</script>
    • Nastavení + výpis beakpointů do logů (např. Chrome/Console)
    • <script>
  $(function () {
    $('.footable').footable({
      breakpoints: {
        phone: 749,
        tablet: 969
      }
    }).bind({
      'footable_breakpoint' : function(e) {
        console.log(e.breakpoint);     
      }
    });
  });
</script>
  • Simple Responsive Table – CSS
  • (Responsive Tables - CSS/JS)
  • (Responsive Data Tables - CSS)

enlightened U mobilních telefonů je možné zakázat funkci automatického zvětšení písma, ovšem sníží se tím čitelnost textu:

html {
  /*-webkit-text-size-adjust: none;*/
}

enlightened Dostatečná velikost aktivního prvku (položka navigace, tlačítko, formulářový prvek atd.):

  • průměr dotykové plošky prstu je přibližně 10 mm
  • doporučení: min. 7 x 7 mm (48 x 48 px) + min. 5 mm (32 px) rozestup mezi aktivními prvky

enlightened Základní HTML5 struktura (layout) stránky:

<!DOCTY​PE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML 5 dokument</title>
    <meta name="description" content="Základní šablona HTML 5 dokumentu" />
    <meta name="keywords" content="html,dokument,šablona" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <header id="header">
      <p>Site Name</p>
    </header>
    <nav>
      <ul id="main-nav">
        <li><a href="#">Home</a></li>
      </ul>
    </nav>
    <main>
      <h1>Page Title</h1>
      <section>
        <h2>Section Title
        <article class="post">
          <h3>Atricle Title
          ...
        </article>
      </section>
      <section>
        <h2>Section Title
        <article class="post">
          <h3>Atricle Title
          ...
        </article>
      </section>
    </main>
    <aside id="sidebar">
      <section class="block">
        ...
      </section>   
    </aside>
    <footer id="footer">
      ...
    </footer>
  </body>
<html>

Element main byl přidán až v HTML5.1:

  • prvek main nesmí být potomkem prvků header, nav, article, aside, footer
  • u IE9+ je zatím nutné definovat main jako blokový prvek 
    • main {display: block;}
  • u IE8- je navíc kromě CSS ještě nutné prvek v head skriptem definovat (případně použít html5shiv.js knihovnu) 
    • <script>document.createElement('main');</script>

V HTML5 je možné vynechat atribut type:

  • místo <style type="text/css"> je tedy možné psát jen <style>
  • místo <script type="text/javascript"> je tedy možné psát jen <script>

Tipy: Vyhněte se nejobvyklejším chybám v HTML5

Internet Explorer 8 a starší verze

Využijte výhod validních podmíněných komentářů (IE Conditional Stylesheets vs CSS Hacks) přímo pro element <html>:

<!--[if IEMobile 7]><html class="ie iem7"><![endif]-->
<!--[if lte IE 6]><html class="ie lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if (IE 7)&(!IEMobile)]><html class="ie lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="ie lt-ie9"><![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><html class="ie"><![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->

IE8- můžete nechat v jednosloupcovém "mobilním" vzhledu viz Leaving Old Internet Explorer Behind nebo podporu Media Queries zpřístupníte pomocí JavaScriptu.

enlightened X-UA-Compatible zpřístupňuje poslední dostupný Internet Explorer mód:

  • meta tag "X-UA-Compatible" by měl být vložen přímo za elementem <head> (v ideálním případě by mezi DOCTYPE, html, head a tímto meta tagem nemělo být nic tj. ani žádný podmíněný komentář no)
    • nejvhodnějším řešením by bylo např. detekovat hodnotu HTTP_USER_AGENT (viz např. Drupal modul Browser class) a na základě ní hlavičku dokumentu o níže uvedený meta tag automaticky doplnit
  • hodnota IE=edge není IE týmem doporučena a může v budoucnu způsobit neočekávané chování bližší info viz What's the difference if meta “X-UA-Compatible” exists or not?
  • hodnota chrome=1 "inicializuje" Google Chrome Frame (pokud je nainstalován)
    • podpora jen do ledna 2014 !!!
    • <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
<!--[if lte IE 9]>
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
<![endif]-->

enlightened Pro podporu media queries v IE8- je třeba použít media-queries.js (nabízí více možností ovšem na úkor výkonu) nebo respond.js:

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

enlightened Pro podporu nových HTML5 prvků (header, nav, article, aside, section, footer atd.) v IE8- je nutné k dokumentu připojit html5shiv (pouze pro IE8-) nebo Modernizr (nabízí více možností):

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->

 

Tipy:

  • Responsive Web Design
  • Mobile First
  • Sass
  • Compass
  • Singularity Grid System
  • Breakpoint
  • Base Theme
  • Drush

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 pseudo-třídy

Tip: An ultimate guide to CSS pseudo classes and pseudo elements yes

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í dynamického CSS aktivované ve chvíli, kdy uživatel na odkaz najede kurzorem myši (:hover používejte až za :link a :visited):

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

Příklad použití dynamického CSS aktivované prvku, který je připraven pro příjem vstupu ze vstupního zařízeni např. na který je právě kliknuto myší, stisknuta klávesa Enter nebo mezerník (:active používejte až za :link, :visited a :hover):

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

Příklad použití dynamického CSS při výběru odkazu, tlačítka, výběrovného seznamu a dalších formulářových prvnků uživatelem např. pomocí klávesnice:

a:focus {background: yellow;}
a:focus:hover {background: white;}

První podřízený prvek jiného prvku:

p:first-child {text-indent: 2em;}
p:first-child em {font-weight: bold;}

První, druhá, předposlední a poslední buňka tabulky:

td:first-child {width: 20%;}
td:nth-child(2) {width: 60%;}
td:nth-last-child(2) {width: 40%;}
td:last-child {width: 20%;}

Každá třetí řádek "counter" (3n) – pozor počátek je nula, proto je posun "offset" nastaven na jedničku (+1):

tr:nth-child(3n+1) {
    background-color: #eee;
}

Příklad různého nastavení dvojice uvozovek pro celý dokument a atribut prvku <cite> v jazyce čeština a angličtina:

:lang(cs) {quotes: '„' '“' "‚" "‘"}
:lang(en) {quotes: '“' '”' "‘" "’"}
cite[lang="cs"] {quotes: '„' '“' "‚" "‘"}
cite[lang="en"] {quotes: '“' '”' "‘" "’"}

Selektor pseudo-elementu

CSS3 od sebe označením odlišuje pseudo-třídy, které používají jednu dvojtečku :a pseudo-elementy u kterých se používá "dvojitá dvojtečka" ::(v CSS2 se u všech pseudo prvků používá dvojtečka jednoduchá).

IE8 podporuje pouze CSS2, od IE9+ je již plná podpora CSS3 pseudo prvků. enlightened

Příklad prvního řádku odstavce:

p:first-line {text-transform: uppercase;}

Příklad použití CSS na první písmeno odstavce (vybere pouze část skutečného elementu):

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

Vlastnost content

Vlastnost content umožňuje vkládat textový obsah a je možné ji používat ve spojení s pseudo-elementy :before a :after. Vlastnost content není možné aplikovat na "neobsahové" elementy jako je např. <input>, <select>, <img> atd. enlightened

Příklad uvozovek definovaných na úrovni odstavce a zároveň kolem něj vložených „prázdných“ uvozovek:

p {quotes: '„' '“' "‚" "‘"}
p:before {content: no-open-quote}
p:after {content: no-close-quote}
cite:before {content: open-quote}
cite:after {content: close-quote}

Příklad přidání nového obsahu "mezery a šipky" za prvek třídy .slideshow-next:

.slideshow-next {
  position: reletive
}
.slideshow-next:after {
  content: ' >';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: url('design.png') no-repeat -100px 6px;
}

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 aobsahující atribut titles hodnotou odkaz:

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

Příklad použití CSS pouze na elementy spanobsahují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 pobsahují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 pobsahují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 pobsahující atribut class, jehož hodnota končí řetězcem 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;
}

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, (dříve se používalo na Layout a Responsive design)
  • nevýhody:
    • uživatelé IE9- si nemohou přizpůsobit velikost textů; IE10 nabízí funkci zoom (funkce je již delší dobu běžná u konkurenčních prohlížečů), která umožňuje měnit velikost stránky jako celku
    • problém s "poloviční velikosti" u Retina displeje

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
  • body {font-size: 10px;}
h1 {font-size: 240%;} /* =24px */

Č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
  • nevýhody:
    • násobení velikosti u vnořených prvků viz např. How to size text using ems (seznam vnořený do seznamu již nemá velikost 14px ale 20px, další úroveň již má velikost 27px atd. – řešením může být deklarace vnořených prvků na 1em)
    • body {font-size: 10px; /* font-size: 62.5%; */}
h1 {font-size: 2.4em;} /* =24px */
p  {font-size: 1.4em;} /* =14px */
li {font-size: 1.4em;} /* =14px??? */
li li, li p /* etc */ {font-size: 1em;}

Poznámky:

  • prvky v jednotkách em do sebe pokud možno 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-
  • výchozí velikost text v prohlížečích bývá 16px
    • 16px * 0.625 (tj. 62.5%) = 10px
  • přepočet px na em
    • child pixels / parent pixels = child ems
      12px / 10px = 1.2em

Root em (rem)

  • CSS3 zavádí několik nových jednotek, mezi které patří i jednotka rem
  • relativní jednotka – rem jednotka je relativní vůči kořenu dokumentu nebo html elementu (umožňuje definovat jednu velikost a z ní odvozovat další požadované velikosti)
  • použití: texty
  • nevýhoda: rem jednotka není podporována v Media queries u prohlížeče Chrome (Media queries with rem units in Chrome) no
  • podpora: IE9+, Safari 5+, Chrome, Firefox 3.6+ (Opera ani ve verzi 11.10 zatím rem nepodporuje)
    • pro prohlížeče bez podpory rem je vhodné nejprve definovat velikost v jednotkách, které prohlížeč podporuje např. px nebo používat procenta enlightened
  • html {font-size: 10px; font-family: sans-serif; /* font-size: 62.5%; */}
body {
  font-size: 16px; /* IE8 */
  font-size: 1.6rem; /* =16px, =12pt */
}
h1 {
  font-size: 24px;
  font-size: 2.4rem; /* =24px */
}
  • poznámky
    • 768px = 60em (80% font-size sans-serif) ~ max-width page width resolution 800x600px
    • 30-80 znaků na řádek

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

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

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: 'Arial CE', 'Helvetica CE', Arial, Helvetica, clean, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, '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;
}

Více viz Font-Family.

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;}

 

Font-Family

Google Fonts

Tipy pro češtinu:

  • Zvolte: Latin Extended
  • Pro kontrolu využijte Pangram (z řečtiny „každé písmeno“): "Nechť již hříšné saxofony ďáblů rozzvučí síň úděsnými tóny waltzu, tanga a quickstepu. 1234567890"
  • Volte raději užší písmo (u moc širokého písma se vejde na řádek málo znaků)
  • Sekce "Quick Use" zobrazuje rychlost načítání písma enlightened

Font Squirrel

Font Squirrel umožňuje aplikovat zvolený font písma nezávisle na fontech uživatelského operačního systému.

Výhody:

Postup:

  1. Stáhnout si požadovaný TTF font písma:
  2. Pomocí Font Squirrel generátoru vygenerovat požadované soubory:
    • pro české fonty nastavit volby:
      • Expert
      • Subsetting: Custom Subsetting
        • Language: Czech
        • (Unicode Tables: Basic Latin, Latin Extended-A)
  3. Rozbalit webfontkit archiv, rozbalený adresář přejmenovat např. na fonts a umístit do svého tématu vzhledu.
  4. V html zdroji připojit CSS fonts/stylesheet.css (v Drupalu nejlépe pomocí .info souboru).
  5. Název fontu obsažený v souboru stylesheet.css je možné použít v libovolném CSS jako vlastnot font-family.
  6. Tipy:
    • Velikost fontu @font-face udávaná v jednotkách em někdy neodpovídá předpokladům, proto je vhodnější udávat velkost fontu v jednotkách px. enlightened
    • Ačkoli by přidání vyhlazení a průhledného stínu nemělo nic změnit – opak je pravdou. Přidáním níže uvedených vlastností se font najednou renderuje úplně jinak a to mnohem lépe:
    • .selector {
  -webkit-font-smoothing: antialiased;
  text-shadow: transparent 0px 1px 1px;
}

Font Awesome

  • fortawesome.github.io/Font-Awesome – ikony zdarma i pro komerční účely. yes

Glyphicons

Zdarma pouze obárzky ve formátu PNG. no

Porovnání rychlosti načítání stránek s "online" a "offline" fontem:

Porovnání rychlosti načítání stránek s "online" a "offline" fontem

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
  • background-size
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.

Velikost pozadí na pozadí – background-size

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

Průhlednost – opacity

Vlastnost průhlednosti nastavená na 30 % je definovaná pro IE, FireFox a ostatní moderní prohlížeče (černá barva pozadí je nepovinná).

img {
  background-color: black;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /* IE8+ */
  filter: alpha(opacity=30); /* IE5+ (order 1. "-ms-filter", 2. "filter" work in IE8′s emulating IE7 mode too) */
  opacity: 0.3;
}

Přechody – gradienty

Dokumentace viz W3C gradients.

Generátory gradientů vám mohou ušetřit mnoho času (podpora prohlížečů). Některé generátory umožňují např. i převádět obrázky gradientů na CSS. enlightened

Lineární přechod – linear gradient

Podpora: FF3.6+, Chrome, Safari4+, Opera11.1

  • horizontální nebo vertikální přechod dvou barev: IE6+
  • přechod dvou barev o libovolném úhlu: IE9+
  • přechod tří a více barev o libovolném úhlu: IE10+

Příklad vertikálního přechodu dvou barev:

.gradient {
  background-color: #bada55; /* background color if gradients are not supported */
  background-image:    -moz-linear-gradient(top, #bada55 0%, #2a562c 100%); /* FF(3.6 to 15) */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bada55), color-stop(100%,#2a562c)); /* Chrome, Safari4+ */
  background-image: -webkit-linear-gradient(top, #bada55 0%, #2a562c 100%); /* Chrome10+ and Safari5.1+ */
  background-image:      -o-linear-gradient(top, #bada55 0%, #2a562c 100%); /* Opera(11.1 to 12.0) */
  background-image:     -ms-linear-gradient(top, #bada55 0%, #2a562c 100%); /* pre-releases of IE10 */
  background-image:   linear-gradient(to bottom, #bada55 0%, #2a562c 100%); /* W3C standard, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bada55', endColorstr='#2a562c',GradientType=0); /* IE(6 to 9) */
}

Příklad přechodu dvou barev v úhlu 135°:

  • Pro úplnou podporu multi-stop (více barev) gradientu v IE9 (pomocí SVG) je nutné pomocí podmíněného komentáře "zakázat" filtr.
<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->
.gradient {
  background-color: #1e5799; /* background color if gradients are not supported */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMWU1Nzk5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background-image: -moz-linear-gradient(-45deg, #1e5799 0%, #7db9e8 100%); /* FF(3.6 to 15) */
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #1e5799), color-stop(100%, #7db9e8)); /* Chrome, Safari4+ */
  background-image: -webkit-linear-gradient(-45deg, #1e5799 0%, #7db9e8 100%); /* Chrome10+,Safari5.1+ */
  background-image: -o-linear-gradient(-45deg, #1e5799 0%, #7db9e8 100%); /* Opera(11.1 to 12.0) */
  background-image: -ms-linear-gradient(-45deg, #1e5799 0%, #7db9e8 100%); /* pre-releases of IE10 */
  background-image: linear-gradient(135deg, #1e5799 0%, #7db9e8 100%); /* W3C standard, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=1); /* IE(6 to 8) fallback on horizontal gradient ONLY */
}

Filtry - filter

Příklad odbarvení obrázku na pozadí:

.gray {
  background: url('../images/pozadi.jpg') no-repeat 0 0;
  -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
  filter: gray; /* IE5+ */
  filter: grayscale(100%);
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.gray:hover { 
  -webkit-filter: grayscale(0);
  filter: none;
}

...

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 {
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  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-

Stín bloku – box-shadow

box-shadow: [horizontální posun] [vertikální posun] (rozostření) (roztažení) [barva] (pozice), (...další stíny...)

.box-shadow {
  -moz-box-shadow: 0 20px 20px -20px rgba(0, 0, 0, .7) inset,
                   0 -20px 20px 20px rgba(0, 0, 0, .7); /* FF(3.5-3.6) */
  -webkit-box-shadow: 0 20px 20px -20px rgba(0, 0, 0, .7) inset,
                      0 -20px 20px 20px rgba(0, 0, 0, .7); /* Chrome(4-9), Safari(3.1-4), iOS(3.2-4.3), Android(2.1-3) */
  box-shadow: 0 20px 20px -20px rgba(0, 0, 0, .7) inset,
              0 -20px 20px 20px rgba(0, 0, 0, .7); /* Opera10.5+, IE9+ */
}

Praktický příklad použití stínů je vidět např. u loga Microsoft.

 

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;}

Příklad stylování prvku blockquote

<blockquote>
  <p>Text text text text...</p>
  <div>Autor: <cite>Jan Werich</cite></div>
</blockquote>
blockquote {
  position: relative;
  text-align: justify;
}
blockquote p:before,
blockquote p:after {
  position: relative;
  display: block;
  height: 40px;
  width: 40px;
  content: '„';
  font-size: 60px;
  color: #eee;
}
blockquote p:before {
  float: left;
  margin: -46px 0 0 -45px;
}
blockquote p:after {
  float: right;
  margin: -18px -50px 0 0;
  content: '“';
}

Sloupce

Rozdělení obsahu (např. nečíslovaného seznamu) na definovaný počet sloupců

ul.columns3 {
  -moz-column-count:3; /* Firefox */
  -webkit-column-count:3; /* Safari and Chrome */
  column-count:3;

  -moz-column-gap:40px; /* Firefox */
  -webkit-column-gap:40px; /* Safari and Chrome */
  column-gap:40px;

  -moz-column-rule:4px outset #f00; /* Firefox */
  -webkit-column-rule:4px outset #f00; /* Safari and Chrome */
  column-rule:4px outset #f00;
}

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);}

Tipy:

Animace

CSS3 přechody

Original Hover Effects with CSS3 Transitions and Animations

Syntaxe:

transition:
  (hlidane_vlastnosti)
  trvani_animace
  (funkce_prubehu)
  (zpozdeni)
  (, dalsi_prechody);

CSS3 transformace

Rotace, zvětšení a změna průhlednosti při najetí myší:

.thumbs {
  opacity: 0;
  transform: rotateY(180deg) scale(0.5, 0.5);
  transition: all 450ms ease-out 0s;
}
.thumbs:hover {
  opacity: 1;
  transform: rotateY(0deg) scale(1, 1);
}

CSS3 animace

Změna průhlednosti obrázku po najetí myši

/* css3 hover opacity */
img {
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  -ms-opacity: 0.5;
  -o-opacity: 0.5;
  opacity: 0.5;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
img:hover {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  opacity: 1;
}

Změna průhlednosti (prolnutí) obsahové části při načtení stránky

/* css3 transition fade-in effect on page load */
/* Chrome and Safari, Firefox, IE, Opera, CSS3 browser */
@-webkit-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-moz-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-ms-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-o-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
#section-content {
  /* use animattion ease-in and repeat it only 1 time */
  -webkit-animation: fadein 2s;
  -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}

Postupná změna průhlednosti odstavců po načtení stránky

/* css3 transition fade-in effect on page load */
/* Chrome and Safari, Firefox, IE, Opera, CSS3 browser */
@-webkit-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-moz-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-ms-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@-o-keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
@keyframes fadein {from {opacity: 0;} to {opacity: 1;}}
p {
  /* make invisible upon start */
  opacity: 0;
  /* use animattion ease-in and repeat it only 1 time */
  -webkit-animation: fadein ease-in 1;
  -moz-animation: fadein ease-in 1;
  -ms-animation: fadein ease-in 1;
  -o-animation: fadein ease-in 1;
  animation: fadein ease-in 1;
  /* tafter animation is done we remain at the last keyframe value (opacity: 1) */
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  /* duration */
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  /* delay */
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -ms-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}
p.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  -ms-animation-delay: 0.7s;
  -o-animation-delay: 0.7s;
  animation-delay: 0.7s;
}
p.two {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay:1.2s;
  -ms-animation-delay:1.2s;
  -o-animation-delay:1.2s;
  animation-delay: 1.2s;
}
p.three {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  -ms-animation-delay: 1.6s;
  -o-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

 

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

Metodika

Každý CSS kodér by si měl vytovřit svůj vlastní "FrontEnd Style Guide", obsahující koncepci "jak stylovat".

Vhodná metodika zajistí jednotný vzhled a správnou funkčnost (dynamické chování).

Doporučení:

  • stylujte "bloky" (celky, objekty, komponenty) ne elementy – rozdělte projekt na znovupoužitelné části volně vázaných nezáviských prvků
    • bloky jsou nezávislé na umístění a počtu a obsahují elementy (elementy jsou závislé na kontextu tj. mají smysl v rámci bloku do kterého patří) např.
      • článek (produkt)
        • nadpis + obrázek + text + kategorie + přílohy
      • vyhledávání
        • vstupní pole + odesílací tlačítko
      • přihlašovací blok
        • uživatelské jméno + heslo + odesílací tlačítko
      • navigace
        • nadpis + strukturované pložky navigace
      • atd.
  • využívejte nezávislost na umístění a počtu – nevytvářet styly závislé na umístění
    • nepoužívejte ID
      • pro každou komponentu vytvářejte raději jedinečné třídy
      • některé CMS systémy generují chybně více ID na jedné stránce
    • používejte konkrétnější třídy (class) – např. .menu__item(oddělovačem bloku a elementu jsou dvě podtržítka)
    • v selektorech nepoužívejte HTML elementy (
      • vše by mělo být nezávislé na systému např. element <input> se může změnit na <a> nebo <span> atd.)
    • používejte modifikátory – umožňují vytvářet komponenty s podobným vzhledem nebo chováním
      • modifikátor vyjadřuje vlastnost (vzhled, chování) pomocí názvu a hodnoty např. .menu__item--size-xl
      • u jednoho prvku může být používáno i více modifikátorů současně
  • netvořte "dlouhé selektory" tj. snažte se o co nejméně zanoření (kaskád)
    • ideálně ​max. dvě třídy v selektoru (kaskádě)
  • vyhýbejte se kaskádě bloků
  • využívejte komprimace CSS do jednoho souboru
    • snížení počtu požadavku na server (zvýšení rychlosti)
    • (IE umožňuje načíst max. 31 CSS souborů)

Další zdroje informací:

  • ​BEM (Block Element Modifier) – snaží se o co nejméně zanoření (kaskád) => konktrétnější popis tříd
    • např.: .menu__item--size-xl
  • OOCSS – objektově orientované CSS (komponenty)
    • sémantické pojmenování
      • např. .alert--positiv, .alert--error (ne: .alert--green, .alert--mk35)
      • je možné např. využítvat velikostí oblečení (S, M, L, XL, XXL)
    • např.  Twitter Bootstrap Components Library – skvělý příklad modulárního CSS
  • SMACSS (Scalable and Modular Architecture for CSS) – univerzální použití pro malé, tak i pro velké projekty
    • ​prefix X
  • SASS
    • CSS3
    • proměnné
  • bruskodu.cz/epizoda/5/ (obsahuje všechny zmiňované odkazy)
  • vzhurudolu.cz/prirucka/oocss
  • creativebloq.com/css3/create-modular-and-scalable-css-9134351

Procesory CSS

Preprocesory

Preprocesor CSS je nástroj, který ze zdrojového kódu zapsaného pomocí vlastní syntaxe vygeneruje výsledný klasický kaskádový styl (CSS). Oproti klasickému CSS nabízí funkce, proměnné a předdefinované sady tzv. mixiny.

Nevýhodou je nutnost kompilace do výsledného CSS.

CSS preprocesor:

  • umožňuje používat "klasické" CSS
  • do výsledného "zkompilovaného" CSS nepřidává žádné nové funkce
  • zjednodušuje a zpřehledňuje zápis kaskádových stylů
  • je možné používat proměnné, které umožňují měnit údaje na více místech najednou
    • ​vnořené lokální proměnné mají přednost před globálními
  • usnadňuje správu více CSS souborů
  • podporuje vnořené definice
  • matematické operace usnadňují výpočty rozměrů a barev
  • umožňuje definovat opakovaně využitelné tzv. mixins funkce
  • nabízí podmíněné funkce
  • definované sady funkcí je možné pojmenovat a využít tak tzv. jmenné prostory
  • umožňuje využívat jak zobrazované, tak i skryté komentáře
  • umožňuje "skrýt" vývojové postupy před zákazníkem

Nejznámější preprocesory CSS:

  • LESS (Leaner CSS – štíhlejší CSS)
  • SASS
    • youtube.com/watch?v=Q4UCtuvMDTI (česky)
    • peteschuster.com/2012/05/replacing-respond-js-with-sass/
  • Stylus
  SASS/SCSS Stylus LESS
Zpracování server server server i klient
Jazyk Ruby Ruby JavaScript
Syntaxe bez {} a ;
i
klasické CSS
(vyžaduje nejvíce psaní)		 bez {}, : a ;
i
klasické CSS
(vyžaduje nejméně psaní)		 klasické CSS
Hlášení chyb nejpřesnější občas chybné určení řádku nejhorší
Možnosti zřejmě největší velké drobná omezení
Mixins Compass CSS3 mixins NIB LESS Elements
Bootstrap LESS mixins

Postprocesory

Modulární nástroje provádějící následnou transformaci CSS.

  • Prefix free - vyžaduje v prohlížeči povolený JavaScript (6 kB)
    • Desktop: IE9+, Opera 10+, Firefox 3.5+, Safari 4+ a Chrome
    • Mobile: Mobile Safari, Android browser, Chrome a Opera Mobile
  • PostCSS – vyžaduje v prohlížeči povolený JavaScript
    • Autoprefixer (1 MB) – analýza CSS a následné doplnění pouze těch prefixových pravidel, která jsou nutná pro správnou funkčnost konkrétního prohlížeče. CSS je tedy možné psát dle aktuálních W3C standardů.
    • RTLCSS a další rozšíření

Tipy

Odkazy:

Hacks:

  • /* IE6 */
#element { _color: blue }

/* IE6, IE7 */
#element { *color: blue; or #color: blue}

/* Everything but IE6 */
#element { color/**/: blue }

/* IE6, IE7, IE8 */
#element { color: blue\9; }

/* IE7, IE8 */
#element { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#element { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#element {color: blue/;} /* must go at the END of all rules */

Upoutávka v rohu stránky:

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

#corner {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
  padding: 10px 40px;
  background: #ffb321;
  color: #7f3300;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  writing-mode: lr-tb;
}