CSS

Kaskádové styly, CSS

CSS umožňuje definovat vizuální vzhled (barvy, ohraničení, odsazení, vertikální a horizontální mezery, písmo, řez, velikost, …) pro prvky HTML.

Pro vyzkoušení CSS budeme pracovat s dokumentem, který obsahuje téměř všechny HTML elementy.

Naživo si můžete vyzkoušet změnu CSS na stránkách W3C

Použití v HTML

  • vnořený (inline) zápis do HTML elementů pomocí style="xxx"
  • nedoporučuje se, jde proti trendu oddělení formy od obsahu
  • uvnitř elementu <style>
  • může být v HTML několikrát, nejlépe v hlavičce
  • načtením externího souboru v hlavičce
  • <link rel="stylesheet" type="text/css" href="mystyle.css">

CSS zápisy obsahují tzv. selektory, které definují pro jaké prvky stránky se styly aplikují a poté samotnou definici stylu ve tvaru atribut: hodnota;

CSS selektory

  • .class
  • #id
  • *
  • element
  • element1,element2
  • elem1 elem2
  • elem1 > elem2
  • elem1 + elem2
  • :hover
  • :first-child
  • :nth-child(n)
  • :nth-of-type(n)
  • [attribute]
  • [attribute="value"]

Atributy

Přehled

  • barvy: color, opacity
  • pozadí: background (-color, -image, -position, -repeat)
  • okraje: border (-radius, color, image, style, width, shadow
  • box: clear, display, float, height, margin, padding, overflow, padding, position, visibility, vertical-align, z-index
  • text: letter-spacing, text-align, text-indent, text-justify, white-space, word-spacing, word-wrap, text-decoration, text-shadow
  • font: font (-family, -size, -style, -weight)
  • seznamy: list (-style-type)
  • další: cursor, outline, …

Písma na webu

CSS rozměry / jednotky

  • absolutní: px, cm, mm, in, pt, pc
  • relativní pro písmo: em, ex, %
  • rozměry se dědí

CSS barvy

  • předdefinované
  • rgb: #AD8892, rgb(1, 100, 255)
  • rgba: rgba(1, 100, 255, 0.5)

Pozicování pomocí CSS

  • relativní (poloha vůči normální pozici) vs. absolutní (vyjme se z toku dokumentu) vs. fixní
  • vlastnosti display, float
  • osa z: z-index

Vytvoření jednoduché stránky

  • s hlavičkou,
  • patičkou,
  • hlavním obsahem a
  • jedním bočním menu.

Slajdy pomocí reveal.js

  • knihovna CSS + JavaScript
  • <section>
November 12, 2015 |