Sign in / Register
04 CSS 2

CSS pokračování

Cílem následujícího cvičení je vyzkoušet si způsoby zobrazení elementů a jejich pozicování. Součástí cvičení je také určení vzhledu pro různá média a vztah web-designu a print-designu. Použijte verzi XHTML1.1, pro účely předmětu používejte validátor konzorcia W3 - https://jigsaw.w3.org/css-validator/.

Pro interaktivní práci si stáhněte repozitář na svůj lokální počítač a soubory upravujte na něm. Na konci své práce výsledek nahrajte zpět do repozitáře.

Stažení:

git clone https://gitlab.wr.cz/bi-zwu/css-2.git bi-zwu-css-2

Nahrání zpět:

cd bi-zwu-css-2
git add .
git commit -m 'Update task'
git push origin main

Způsoby zobrazení

Pro položky neseřazeného seznamu (ul > li) vyzkoušejte různé hodnoty vlastnosti display:

  • block
  • inline
  • inline-block
  • list-item
  • none
  • table/table-cell

Box model

Položkám neseřazeného seznamu (ul > li) nastavte:

  1. orámování (border) na tenkou červenou čáru,
  2. různé nastavení šířky (width) a výšky (height)
    • při display: block,
    • při display: inline,
    • při display: inline-block - nakonec ponechte,
  3. různé nastavení vertikálního zarovnání (vertical-align) při display: inline-block*
  4. různé nastavení odstupu (margin)
    • pro všechny směry najednou,
    • ve vertikální a horizontálním směru zvlášť,
    • pro první a poslední položku bez odstupu - nakonec ponechte.
  5. Zjistěte margin a padding u elementu ul.
  6. Nastavte margin a padding u elementu ul tak, aby první položka seznamu ul byla zarovnaná s ostatmími položkami seznamu ol.

Generování obsahu

Pouze pomocí CSS změňte zobrazení položek vnořeného seznamu tak, aby prvky:

  1. byly obdélníky 8em x 3em bez ohledu na velikost obsahu (overflow: hidden),
  2. byly světle modré s tmavě modrým orámováním a text nebyl vidět,
  3. místo textu bylo vidět automaticky číslované pořadí prvku (1, 2, 3),
  4. text byl zarovnaný doprostřed prvku.

Counter

Pozicování

  1. Nastavte pozicování vnořeného seznamu (ul) tak, aby:
    1. byl zarovnaný vlevo s textem nadřazeného seznamu (position: relative),
    2. byl zarovnaný vpravo ke hraně stránky (position: absolute),
    3. byl zarovnaný vpravo nahoře vůči obrazovce (position: fixed),
      • nastavte výšku stránky na 200 % výšky obrazovky, aby bylo vidět chování při scrollování (zůstal na místě),
    4. byl zarovnaný vpravo nahoře vůči stránce (pohyboval se spolu se stránkou).
  2. Nastavte zároveň nadřazenému seznamu (ol) relativní pozicování a sledujte, jak se změní poloha vnořeného seznamu, který je pozicovaný absolutně.
  3. Nastavte pozicování vloženého číslování vnořených položek seznamu tak, aby byl text vertikálně uprostřed prvku.

Counter

Plovoucí prvky

  1. Nastavte kódování CSS na UTF-8.

  2. Použjte následující styl:

    ul li {
   display: block;
   width: 12em;
   margin: 1em 0;
   padding-left: 0;
}

ul li:before {
   content: "᰽";
   border: thin solid;
   border-radius: 100%;
   padding: 0.2em 0.2em;
}
  3. Nastavte vlastnosti pro ul li:before tak, aby:
    1. znak ᰽ byl v kruhu,
    2. byl uprostřed kruhu,
    3. byl vpravo nahoře (vůči textu položky),
    4. měl od textu odstup 1em.

float

Média

Vytvořte různé styly pro různá média (např. obrazovka a tisk) pomocí:

  • @media
  • @import
  1. Vyzkoušejte různé styly pro různé šířky obrazovky (vztažené k množství textu, který se na obrazovku vejde).
  2. Pro největší šířku obrazovky nastavte maximální šířku stránky.
  3. Některé prvky při tisku odstraňte.
  4. Při tisku vypište adresu odkazu a odkaz vypište běžnou barvou a bez podtržení.

Tvorba vzhledu podle tiskové předlohy

Článek

  1. Vytvořte styly pro článek o olihni podle zadaného obrázku (předešlé cvičení).
    • Zaměřte se na rozmístění prvků, typografii, barvy a další vizuální prvky.
    • Minimalizujte zásahy do HTML kódu stránky; případné zásahy diskutujte.
    • Soubor se stylem propojte se souborem HTML externě (pomocí elementu LINK).
  2. Tvorba vzhledu webovým způsobem
    • Vytvořte webový vzhled článku
    • Zaměřte se na rozdíly mezi tiskovým designem a webovým designem
    • Minimalizujte zásahy do HTML kódu stránky; případné zásahy diskutujte.
    • Integrujte soubor se stylem do HTML stránky jako alternativní zobrazení.
  3. Tvorba vzhledu pro účely tisku
    • Vytvořte vzhled článku pro účely tisku
    • Tiskový vzhled vhodně integrujte do stránky

HTML

CSS

Webová adresa stránky je https://bi-zwu.pages.wr.cz/css-2