LAB04 - nvbach91/4IZ268-2022-2023-ZS GitHub Wiki

Základy tvorby webových stránek v HTML5 + CSS

Obsah

  • GitHub usernames
  • Doplnění cv03
  • CSS - kaskádové styly
  • Syntaxe CSS pravidel
  • Jak aplikovat styly do HTML dokumentu
  • Selektory
  • Kaskádovost a priorita stylů
  • Vlastnosti pro aplikování barev
  • Barvy
  • Jednotky měření
  • CSS vlastnosti - písmo, text, pozadí
  • CSS vnitřní okraj, ohraničení a vnější okraj
  • CSS Box model
  • Zobrazení, pozicování
  • Pseudo třídy a pseudo elementy
  • Domácí úkol

CSS - kaskádové styly

  • jazyk pro definování vzhledu webové stránky,
    • tj. jak se které elementy na jakém zařízení mají zobrazit (nebo tisknout)
  • cílem CSS je efektivní design vzhledu stránky
  • možnost animace prvků

Syntaxe CSS pravidel

  • V CSS souboru se nacházejí pravidla
  • Pravidlo se skládá z
    • selektoru - tj. co, kde, který, jaký
    • deklarace stylů - tj. jak, čím
    • syntaxe:
selektor { 
  vlastnost-1: hodnota-1; 
  vlastnost-2: hodnota-2; 
  ...
}
  • anatomie CSS pravidla image

Jak aplikovat styly do HTML dokumentu

image

  • inline - přímo v atributu style nějakého elementu - !! nepoužívat !!
  • internal - v <head> pomocí tagu <style> - !! nepoužívat !!
  • external - pomocí odkazu na styly v samostatném .css souboru pomocí <link>
  • cílem je oddělit veškeré styly od HTML obsahu

Selektory

  • typy selektorů https://www.w3schools.com/cssref/css_selectors.asp
    • tag selektor - např. div
    • class selektor - např. .post
    • id selektor - např. #menu
    • attribute selektor - např. [type="button"]
    • pseudo selektor - např. button:hover
    • selektor potomka - např. div p
    • selektor dítěte - např. div > p
    • selektor sourozence - např. div + p a div ~ p
    • kombinace selektorů - např. div.post > p
    • skupina selektorů - např. div, p > a, img:hover, .post + #menu

Kaskádovost a priorita stylů

  • styly se přepisují u shodných vlastností - viz Developer Tools
  • inline > internal > external > browser-default
  • podle pořadí zápisu
  • podle specifičnosti

Vlastnosti pro aplikování barev

  • barva textu - vlastnost color např. p { color: red; }
  • barva pozadí - vlastnost background-color např. div { background-color: green; }
  • barva ohraničení - vlastnost border-color např. div { border-color: blue; }

Barvy

  • pojmenované - black, white, red, green, blue, violet, orange, ...
  • hexadecimální:
    • #000000,
    • #ffffff,
    • #ff0000,
    • #00ff00,
    • #0000ff,
    • #abcdef, ...
  • RGB:
    • rgb(0, 0, 0),
    • rgb(255, 255, 255),
    • rgb(255, 0, 0),
    • rgb(0, 255 ,0), ...
  • RGBa:
    • rgba(0, 0, 0, 0.5),
    • rgba(255, 255, 255, 0.6),
    • rgba(255, 0, 0, 0.7), ...
  • HSL:
    • hsl(0, 0, 0),
    • hsl(100%, 100%, 100%),
    • hsl(100%, 0, 0), ...
  • HSLa:
    • hsla(0, 0, 0, 0.5),
    • hsla(100%, 100%, 100%, 0.6), ...

Jednotky měření

image

  • je jich ještě víc

CSS reference

CSS vlastnosti - písmo, text, pozadí

image

CSS vnitřní okraj, ohraničení a vnější okraj

image

CSS Box model

image

Zobrazení, pozicování

image

Pseudo třídy a pseudo elementy

Cvičení

  • Vyzkoušejte uvedené CSS vlastnosti na následujícím HTML dokumentu
    • https://github.com/nvbach91/4IZ268-2022-2023-ZS/blob/master/www/nguv03/cv04x/pokemons/index.html
    • Barva textu (color)
    • Typ a velikost písma (font-family, font-weight, font-style, font-size, ...)
    • Odřádkování (line-height)
    • Zarovnání (text-align)
    • Pozadí (background-color, background-image, background-size, background-repeat, background-position)
    • Vnitřní okraje (padding, ...)
    • Ohraničení (border, ...)
    • Vnější okraje (margin, ...)
    • Pozicování (position: absolute, relative, fixed, ...)
    • Stavy elementů: visited, hover, focus, ...

Domácí úkol

  • Termín odevzdání příští Čt 23:59:59
  • používejte pouze HTML5 a externí CSS, bez JS!

Zadání domácího úkolu

Pokračování příště:

  • transition,
  • transformation,
  • pseudo classes,
  • pseudo elements,
  • layout
  • @media,
  • responzivní design,
  • flexbox,
⚠️ **GitHub.com Fallback** ⚠️