• Lekce 4
  • Úlohy
  • Co jsme dnes dělali

Lekce 4

Úlohy

Opravář

Opravte web cestovní kanceláře, který naleznete zde. Zlobí jim tam nějaké styly, třeba odkazy nejdou vůbec vidět. Také se zdá, že kontaktní e-mail není správný...

Plusové body dostanete za to, pokud styly stránky "zkrášlíte" (představte si pod tím cokoli, co chcete).

Co jsme dnes dělali

Packety na internetu

• Koukli jsme se, jak to vypadá, když chceme vystopovat cestu mezi klientem a serverem
  • Diagnostický request "skáče" server po serveru, využívá k tomu protokol ICMP.
  • Můžete si to zkusit sami doma, stačí se kouknout na použití příkazu traceroute.

CSS

• Vlastnosti textu
  • color, font-size, font-weight, font-family, text-align, text-decoration
• Barvy
  • Hexadecimální zápis barvy
  • CSS funkce rgb a rgba
• Box model
  • Každý element má (nebo může mít) okolo sebe rámeček a prostor okolo sebe
  • width a height označují šířku a výšku elementu
    • Záleží na nastavení vlastnosti box-sizing!
  • padding je vzdálenost mezi textem (vnitřním obsahem) a rámečkem
  • border je rámeček
  • margin je minimální vzdálenost k nejbližšímu dalšímu rámečku
• Jednotky
  • px jsou pixely na obrazovce tak jak je známe
  • em je šířka písmene "velké M"
    • je relativní k velikosti písma v elementu
  • rem
    • je relativní k velikosti písma nastavené v html elementu
  • %
    • relativní k velikosti rodiče
  • ch
    • šířka písmene, používá se u monospace fontů
• Pseudotřídy
  • Slouží k dalšímu rozlišení prvků
  • Přiřazení k jednotlivým HTML tagům je na prohlížeči
  • Pro odkazy to jsou
    • a:link: prostý odkaz
    • a:visited: již navštívený odkaz
    • a:hover: odkaz, na který uživatel najel myší
    • a:active: odkaz, na který právě uživatel kliknul (viditelné, když kliknete a držíte tlačítko)
• Vendor prefixy
  • Označují nové vlastnosti, které nebyly dosud přidány do standardu
  • Jsou browser-specific
  • Co nás zachraňuje před manuálním psaním vendor prefixů? CSS preprocesory!
  • Web Can I use
• Media queries
  • Podle vlastnosti zařízení můžeme měnit styly
  • Používá se např. pro responzivní design
    • Responzivní jsou stránky, které se přizpůsobují velikosti obrazovky
  • Příklady
    • Styly v media query budou aplikovány, pokud má okno alespoň 800 pixelů

      @media screen and (min-width: 800px) {
        /* Pro prohlížeče, kde okno má alespoň 800px */
      }
      

    • Styly v této media query budou aplikovány, pokud tiskneme stránku

      @media print {
          ...
      }
      

  • Velké pozor! Přepisují styly nad sebou, ale styly, které jsou pod nimi, mohou naše media queries přepsat
    • Media queries je proto zvykem dávat na konec souboru