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

Tvorba webových stránek v HTML5 + CSS

Obsah

  • debugování CSS stylů
  • priorita stylu
  • kombinace CSS pravidel
  • CSS display, position, z-index
  • CSS vícesloupcový layout pomocí float
  • Cvičení - Firemní stránka
  • @media (media queries)
  • responzivní design
  • Domácí úkol

debugování CSS stylů

  • v konzoli si zapněte záložku Elements
  • zde si můžete vybírat libovolné elementy a vedle vpravo uvidíte CSS styly
  • lze libovolně měnit a mazat CSS pravidla
  • uvidíte i místo v kódu, odkud pochází dané pravidlo
  • je zde krásně vidět kaskáda stylů

priorita stylu

kombinace CSS pravidel

  • do atributu class můžeme psát více názvů tříd
  • vlastnosti těchto tříd se sloučí dohromady
  • shodné vlastnosti se přepíšou postupně a platí pouze ta s nejvyšší prioritou

CSS display, position, z-index

img img

CSS flexbox layout

image

CSS vícesloupcový layout pomocí flexbox

img

<header></header>
<div class="container">
  <aside></aside>
  <main><main>
<div>
<footer></footer>
.container {
  display: flex;
}
aside {
  width: 30%;
}
main {
  width: 70%;
}

Cvičení - Firemní stránka

@media (media queries)

@media screen and (min-width: 1024px) {
      /* style declarations here */
}

@media print {
     /* style declarations here */
}

Tisk

  • požadavek v semestrálce
  • stránka musí být rozumnou tisknutelnou podobu
  • nebudeme plýtvat inkoust ani papír zbytečnými prázdnými mezerami, velkými obrázky, tlustými čárami, stínem, apod...
  • postup
    • na konci CSS souboru nadefinujeme @media print nebo si vytvoříme samostatný soubor a připojíme ho přes <link rel="stylesheet" media="print" href="print.css">
    • tam postupně nadeklarujeme styly tak, aby se schovaly některé nepotřebné elementy
    • případně zmenšíme font, marginy, paddingy, bordery, zrušíme barevné pozadí!
    • nastylujeme dokument tak, aby byl dobře čitelný, podobně tak jak byste to naformátovaly ve Wordu

Responzivní design

  • Stránky reagují na různé velikosti okna
  • Desktop, tablet, mobil
  • Běžná rozlišení obrazovek v px:
    • width: 1920, 1440, 1366, 1280, 1024, 800, 720, 640, 480, 320
  • Přístup Desktop-first
    • začít se styly pro větší obrazovky a postupně zmenšovat pomocí media query
.box { width: 20% }
@media screen and (max-width: 1366px) {
   .box { width: 25% }                
}
@media screen and (max-width: 1024px) {
   .box { width: calc(100% / 3) }     
}
@media screen and (max-width: 800px)  {
   .box { width: 50% }                
}
@media screen and (max-width: 480px)  {
   .box { width: 100% }               
}
...
  • Přístup Mobile-first (doporučeno)
    • začít se styly pro menší obrazovky a postupně je zvětšovat pomocí media query
.box { width: 100% }
@media screen and (min-width: 480px)  {
   .box { width: 50% }                
}
@media screen and (min-width: 800px)  {
   .box { width: calc(100% / 3) }     
}
@media screen and (min-width: 1024px) {
   .box { width: 25% }                
}
@media screen and (min-width: 1366px) {
   .box { width: 20% }                
}
...
  • media query se skládá z klíčového slova @media a podmínek, za které má platit CSS pravidla, které se v něm nachází. Např. podmínky jsou screen - na obrazovce, a (min-width: 1024px) - minimální šířka okna je 1024px, tak všechny pravidla, která se v tomto media query nachází, platí pouze když je uživatel na obrazovce s šírkou okna 1024px a více.
  • pomocí pravidel v media query a kaskádovosti CSS lze postupně přepisovat styly pro určité rozměry okna.
  • často použité CSS vlastnosti
    • float + clear | flexbox | grid
    • media query
    • %
    • calc()
    • min-, max-
    • contain, cover (background)

Domácí úkol

Zadání SP1

⚠️ **GitHub.com Fallback** ⚠️