Sign in / Register
03 CSS

CSS základy

Cílem následujícího cvičení je vyzkoušet si propojení HTML a CSS a základní selektory a vlastnosti. 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.git bi-zwu-css

Nahrání zpět:

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

Stylesheet je sada pravidel. Tato pravidla určují vlastnosti (vzhled a chování) jednotlivých elementů v dokumentu. To, kterých elementů se pravidlo týká určuje selektor. V deklaraci pravidla (uzavřené do { }) je pak jedena nebo více dvojic: vlastnost:hodnota. Tyto dvojice se oddělují znakem ;. Jednotlivá pravidla se obvykle píší na samostatné řádky.

Pravidla CSS

Propojení HTML a CSS

CSS je možné propojit s HTML několika způsoby:

  1. Odkázat se v hlavičce HTML na CSS soubor - doporučené 
    <link rel="stylesheet" type="text/css" href="style.css" title="cool">
  2. Vložit CSS do hlavičky HTML souboru (s odkazem na CSS nebo přímo) 
    <style type="text/css">
 @import url("http://style.com/basic");
 h1 { color: blue }
</style>
  3. Zapsat jako atribut konkrétního elementu 
    <p style="color: red">Summary paragraph ...</p>

Linkování CSS z dokumentů (link)

  1. V hlavičce souboru index.html nalinkujte soubor style.css jako kaskádový styl.
  2. V souboru style.css vytvořte 3 pravidla, která nastaví:
    • barvu (color) nadpisu na modrou,
    • zarovnání (text-align) odstavců do bloku,
    • velikost písma (font-size) položek seznamů na 75 %.

Řešení
index.html:
<head>
  ...
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
style.css:
h1 { color: blue; }
p { text-align: justify; }
li { font-size: 75%; }

Zahrnutí CSS do dokumentů (embed)

  1. Do hlavičky souboru index.html přidejte element typu style.
  2. V zahrnutém stylu nastavte:
    • barvu (color) nadpisu na červenou,
    • barvu (color) položek seznamů na šedou.
  3. Vyzkoušejte vliv pořadí elementů link a style na výsledek.

Řešení
index.html:
<head>
  ...
  <style type="text/css">
    h1 { color: red; }
    li { color: gray; }
  ...
</head>

Vložení CSS do elementů (inline)

  1. Do těla souboru index.html přidejte k jednotlivým elementům atribut typu style.
  2. Ve vložených atributech stylu nastavte:
    • váhu písma (font-weight) prvního odstavce na tučný styl,
    • styl písma (font-style) prvního odstavce na kurzívu,
    • barvu písma (color) první položky seznamů na modrou.
  3. Analyzujte vliv vloženého stylu na výsledný vzhled.

Řešení
index.html:
<body>
  ...
  <p style="font-weight: bold; font-style: italic">První odstavec ...</p>
  ...
  <li style="color: blue">První položka ...</li>
  ...
</body>

Selektory CSS

V těchto úlohách se zaměříme pouze na základní CSS selektory pouze pro vyzkoušení základů.

Syntaxe Popis
* Univerzální
E Typ elementu
E F Potomek (libovolné úrovně)
E > F Přímý potomek
E + F Přímý sourozenec
E:first-child První potomek svého rodiče
E:link (Nenavštívený) odkaz (dynamicky)
E:hover Najetí kurzoru na element (dynamicky)
E:lang(x) Jazyk elementu
E[atr="val"] Hodnota atributu ( = ~= \|= )
E.class Třída (class atribut)
E#id ID (id atribut)

Pseudo-třídy

  • Strukturální: :first-child
  • Odkazů: :link, :visited
  • Dynamické: :hover, :active, :focus
  • Jazykové: :lang

Pseudo-elementy

  • Obsahu: :first-line, :first-letter
  • Pozice: :before, :after

V dalších úlohách nastavujte styly pouze v externím CSS souboru style.css.

Dědění vlastností do potomků

  1. V souboru style.css nastavte:
    • velikost písma (font-size) celého dokumentu na 70 %,
    • velikost písma (font-size) všecho položek seznamů na 150 %.
  2. Zanalyzujte velikost písma jednotlivých elementů, především (vnořených) položek.

Řešení
style.css:
body { font-size: 0.7em; }
h1 { color: blue; }
p { text-align: justify; }
li { font-size: 150%; }
"Dědičnost"

Relativní hodnota se odvozuje od vypočítané hodnoty rodiče.

Selektor potomků a třídy

V souboru style.css nastavte velikost písma (font-size) všech položek seznamů tak, aby byly velikosti vzájemně stejné a to ve velikosti 150 % velikosti písma dokumentu.

  1. Použijte selektor (přímého) potomka pro nastavení požadovaných vlastností.
  2. V souboru index.html přidejte položkám seznamu první úrovně atribut třídy (class="...") a ve stylu pak použijte selektor třídy.
  3. Vyzkoušejte definovat velikost písma v jednotkách rem.

Selektor prvního potomka a sourozence

Pomocí selektoru potomka a přímého sourozence nastavte vzhled položek seznamu tak, aby vypadaly jako v tabulce a měly nad/pod sebou horizontální čáru. Např. první položka by měla čáru nad i pod sebou, ostatní pouze pod sebou. Využijte přitom vlastnosti border-top a border-bottom s hodnotou thin solid silver, případně none.

ukázka orámování

  1. Použijte selektor prvního potomka svého rodiče a všech potomků.
  2. Použijte selektor přímého sourozence a všech potomků rodiče.

Dynamický selektor pseudo-třídy

Nastavte vzhled toho prvku seznamu, nad kterým se nachází ukazatel myši.

  1. Nastavte barvu textu color na tmavě červenou.
  2. Nastavte pozadí background-color na světle červenou.
  3. Nastavte levé orámování border-left na silnou červenou plnou čáru.
  4. Zkuste položky seznamu nastylovat tak, aby se při najetí myši nehýbaly.

HTML

CSS

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