CSS

Technológie internetu 2






O slovo sa prihlásil Mgr. Ondrej Dúcky
©2022 


Technológie internetu 2

Pravidlá tvorby webových stránok

  • Webovej stránke nastavte informácie o kódovaní ( ).utf-8
  • Pri obrázkoch nezabudnúť použiť atribút alt= "popis obrázku"
  • Obrázok by mal obsahovať atribút šírku (šírka), prehliadač si tak môže nastaviť priestor pre načítanie obrázku.
  • Vhodný výber farieb je základom peknej a úspešnej stránky. Nepoužívať príliš farebné pozadie na stránke.
  • iba príponu  , ktorá je štandardnou, príponou   je servermi hľadaná ako alternatíva..html.htm
  • Názov hlavnej stránky by mal byť index.html.
  • Obrázky umiestňujte do spoločného adresára.
  • Po každej zmene si stránky prehliadnite vo viacerých prehliadačoch. 
  • Stránky zálohujte pre prípad serveru a následnej stav dát
  • Pri tvorbe layoutu (rozmiestnenie) webu používať CSS
  • Webové stránky by mali mať responzívny dizajn

Kaskádové štýly 

  • umožňujú oddeliť štruktúru stránok od jej vzhľadu
  • vzhľad stránky bez zásahu do jej obsahu a štruktúry 

Definovanie css:


  •  v priečinku našej stránky nový súbor,ktorý uložíme s koncovkov .css 
  • do html pridajte do hlavičky <head> spojovací odkaz na tento súbor:

Komentár v CSS == /* Komentár */ 


CSS 3 - Text/Pozadie

Jednotky

FONT, ŠTYLIZÁCIA PÍSMA

  •   font-family  : n ázov písma;  (verdana ;) 
    • viacslovný  , napr. kuriér nový, je potrebné dať  do úvodzoviek
 
Prehliadač potom použije:
    • serif  - pätkové písmo
    • bezpätkové - bezpätkové písmo 
    • monospace  - písmo s rovnako-širokými znakmi 

  • veľkosť písma -  veľkosť písma   napr.pt, px, %

  • kurzivá  - font-style normal  alebo italic .      

  • tučný text-  font-weight normal alebo bold     

  • farba písma - farba  : 

    farba: modrá  - slovné označenie farieb
     farba: rgb(0, 0, 255) -  farba modelu RGB
     : #0000FF  - hexadecimálny zápis     



Selektory

*{ //vyberie všetky prvky na stránke 
}
p { //vyberie všetky elementy typu <p>
}
nav a { //všetky elementy <a>, ktoré sú vo vnútri elementu <nav>
}
a:hover { //všetky prvky <a>, na ktorých používateľ ukazuje myšou 
}
.nazov_triedy { //vy berie element s danou triedou (class="...")
}
#nazov_ID { //vyberie prvok s daným ID (id="...")
}






Krabicový model

Typy selektorov:

  • Selektor prvkov
    • h1{
    }
  • Triedny selektor / ID selektor (#odkaz)
    • .trieda {
     }
  • Kontextový selektor
    • rodič potomok {
    }
. fotogaléria img{
    šírka: 32,3 %; }

Do html pridaj triedy: foto_omne, foto_sprievodca, foto_kontakt








    Zarovnanie - Padding a Margin


    Menu Nav - Starý spôsob

    .Ponuka {
        border-top: 2px solid #9c8175;
        poloha: lepkavá; hore: 0;
    /*.menu ul*/  /*.menu {*/
        okraj: 0; výplň: 0;
        text-align: center; farba pozadia: #282425;
    }
    .menu li {
        displej: inline-block;
    }
    .menu a {
        farba: biela;  text-dekorácia: žiadna;
        displej: inline-block; padding: 20px 30px;
    }
    .menu a:hover, .menu a:focus, .menu a:active {
        farba pozadia: #756158;

    Menu Nav – FlexBox 2022

    .Ponuka {
        displej: flex;
        justify-content: center;
        align-items: center;
        poloha: lepkavá;
        hore: 0;
        farba pozadia: #282425;
    }
    .menu a {
        farba: biela;
        text-dekorácia: žiadna;
        výplň: 20px 30px;
    }
    .menu a:hover, .menu a:focus, .menu a:active {
        farba pozadia: #756158;
    }

    Flex

    html {
        veľkosť písma: 100 %;
    }
    *{
    box-sizing: border-box;
    }
    telo {
            veľkosť písma: 1,5rem;
        výška riadku: 1,5;
        okraj:0;
        výplň:0;
    }

    Responzivita 

    @media (max-width: 700px) {
      .menu {
        position: absolute;
    kurzor: ukazovateľ;
        hore: 0;
        smer ohybu: stĺpec;
        šírka: 100 %;
        justify-content: center;
        align-items: center;
      } }

    Flex box














    FlexBox












    Made with Slides.com