Obrázky

11. hodina WBA


Matěj Cajthaml — SSPŠ

©

Opakování

Jaké známe typy zobrazování? Jak se liší?
Co jsou to speciální odkazy? Jaké známe? Co dělají?
K čemu slouží meta tag?
K čemu slouží vlastnost letter-spacing?
Co je to seskupovací selektor, co dělá? K čemu ho používáme?

Resetování stylů

Resetování stylů

  • zrušení základní stylů
  • prohlížeče si implementují základní styly
  • liší se dle prohlížeče, operačního systému, ...
  • např. barvy, odsazení, ...
  • používáme tzv. reset

Reset

  • zaručuje smazání těchto stylů
  • vše si poté musíme stylovat sami
  • různé implementace a styly
  • nejznámější reset.css
  • budeme používat vlastní reset

https://api-ssps.cajthaml.eu/file/global/css/reset_ld9mrCCm.css

Reset budeme používat na každé stránce bez výjimky.

Náš reset naleznete na webovém portálu v sekci studijní materiály v záložce připravené soubory.

Obrázky

Obrázky

  • známe vektor, rastr a animované obrázky
  • dobrý způsob pro oživení webové stránky
  • v HTML tvoříme pomocí nepárové tagu img
  • nutný atribut src - lokace
  • lokace může být z aktuální i jiné webové stránky

PNG vs. JPG vs. GIF vs. SVG

Ukázka v HTML

Atribut alt

  • atribut určuje text, který se zobrazí když se obrázek nenačte
  • píšeme stručně a jednoznačně
  • např. i pro čtečky

Načítání

  • při načtení stránky se prohlížeč zeptá na obrázek
  • existuje-li, začne ho prohlížeč stahovat
  • obrázek se postupně ukazuje
  • obrázky obsahují spoustu informací a jsou objemné
  • velmi pomalé

Redukce doby načítání

  • vždy zmenšujeme obrázky na správnou velikost, která je používána
  • komprese
  • softlimit cca. 15 obrázku na jedné webové stránce

Obrázky a odkazy

Obrázky a odkazy

  • do odkazů můžeme vkládat různý obsah
  • např. i obrázky
  • potom při kliknutí na odkaz se stane akce odkazu

Ukázka v HTML

Obrázkové pozadí

Obrázkové pozadí

  • na prvky můžeme nastavit pozadí, které bude obrázek
  • již umíme nastavit pozadí pomocí barvy
  • spoustu vlastností k nastavení

background-image

background-repeat

  • hodnoty no-repeat, repat, repeat-x, repeat-y

background-position

  • X a Y souřadnice, center, left, ...

background-size

  • velikost šířka a výška nebo speciální hodnoty: cover a contain

Průhlednost

Kurzor

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#values

Obrys

  • podobný border, nelze zaoblit, nemění velikost prvku
  • vždy bere velikost prvku na který se používá

Zaplnění místa obrázkem

  • na obrázky můžeme používat šířku na 100%
  • poté výšku můžeme nastavit na hodnotu auto
  • obrázek se roztáhne ale podíl šířka vs. výška zůstane stejný

Vyrovnání do prostřed

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/