Jak Začít?

Máš v počítači zápisky z přednášek
nebo jiné materiály ze školy?

Nahraj je na studentino.cz a získej
4 Kč za každý materiál
a 50 Kč za registraci!




CSS – Kaskádní styly

PDF
Stáhnout kompletní materiál zdarma (13.5 MB)

Níže je uveden pouze náhled materiálu. Kliknutím na tlačítko 'Stáhnout soubor' stáhnete kompletní formátovaný materiál ve formátu PDF.

 vlastnost  clear

– left– right– both– none

 hladina  z-index

– auto– <hladina>

směr textu  direction

– ltr (left to right)
– rtl (right to left)

Vizuální formátování III

width, min-width, max-width

height, min-height, max-height

line-height, text-indent, text-align

text-decoration, letter-spacing, word-
spacing

vertical-align (baseline, middle, sub, super, text-
top, text-bottom, top, bottom)

overflow (visible, hidden, scroll, auto)

clip (auto, rectl(T,R,L,B))

visibility (visible, hidden, collapse)

Generování obsahu

Použití pseudoelementů :before :after

content

– normal
– <řetězec>
– <uri>
– counter
– open-quote, close-quote
– no-open-quote, no-close-quote
– attr(X)

quotes

– none
– [ <string1> <string2> ]+

Generování obsahu II – Čítače a seznamy

counter-reset

counter-increment

Čítače je možné do sebe vnořovat (seznamy)

– counters

Použití:

– counter(name)
– counter(name, style)

• style: (disc, circle, square, none, upper-latin, upper-roman, hebrew)

list-style-type

• (disc, circle, square, decimal, decimal-leading-zero, lower/upper-roman, 

georgian, armenian, lower/upper-latin, lower/upper-alpha, lower-greek)

list-style-image

list-style-position

• (outside, inside)

Média

CSS jsou nezávislé na platformě/cílovém zařízení, 
umí ale definovat různé styly pro různé cíle

definice pomocí bloku @media { } nebo @import

– @import url(˝screen.css˝) screen;
– @media print {  ...  }

• all, braile, embossed, handheld, print, projection, screen, speech, tty, tv

definice stránkovaného média pomocí @page

– @page:left, @page:right, @page:first

Zlom stránek pomocí

– page-break-before/after/inside

• auto, always, avoid, left, right

– orphans
– widows

User Interface

Specifikace kurzoru pomocí  cursor

– auto, crosshair, default, pointer, move, e/ne/nw/n/...-resize, text, wait, 

progress, help, <url>

Použití barev uživatelského rozhraní

– odkaz na barvy UI pomocí jména

(např. ButtonFace, ButtonText, Menu, Scrollbar, Window, ...)

Co se jinam nevešlo – Tabulky

Tabulky

– table-layout (auto, fixed)
– border-collapse (collapse, separate)
– border-spacing (<délka> <délka>)
– empty-cells (show, hide)
– vertical-align (baseline, top, bottom, middle, sub, super, text-top, text-

Témata, do kterých materiál patří