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

• velké množství, různé skupiny, různá podpora
• přehled atributů (anglicky)
• přehled podpory CSS prvků v prohlížečích CanIUse

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

• font-family: fam1, fam2, generic;
• bezpečné fonty
• Google Fonts

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>