LAB03 - nvbach91/4IZ268-2024-2025-ZS GitHub Wiki

Tvorba webových stránek

Kaskádovost a priorita CSS stylů

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

CSS flexbox layout

image

CSS vícesloupcový layout pomocí flexbox

img

<body>
  <header></header>
  <div class="container">
    <aside></aside>
    <main></main>
  </div>
  <footer></footer>
</body>
.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

Termín odevzdání

  • 23:59:59 před dalším cvičením

Způsob odevzdání

Zadání SP1

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