Close Menu
    Novinky
    Programovanie a vývoj softvéru

    Nauč sa HTML od základov – 8. diel: Základy CSS pre HTML

    4 minúty čítania298 Zobrazení

    V poslednom dieli nášho seriálu sa pozrieme na základy CSS (Cascading Style Sheets), čo je nástroj, ktorý sa používa na štýlovanie a formátovanie HTML stránok. CSS umožňuje oddeliť obsah (HTML) od dizajnu (CSS) a poskytuje vám väčšiu kontrolu nad vzhľadom vašej stránky, ako je farba, rozloženie, veľkosť písma, umiestnenie prvkov a mnoho ďalšieho.

    Čo je CSS?

    CSS je jazyk, ktorý definuje štýly pre HTML prvky. Zatiaľ čo HTML určuje štruktúru a obsah stránky, CSS určuje, ako budú tieto prvky zobrazené. Pomocou CSS môžete meniť farby, písma, medzery medzi prvkami, veľkosti obrázkov a usporiadanie jednotlivých prvkov na stránke.

    Existujú tri spôsoby, ako pridať CSS na HTML stránku:

    1. Interné CSS (v rámci HTML dokumentu)
    2. Externé CSS (v samostatnom súbore)
    3. Inline CSS (priamo v HTML tagu)

    Interné CSS

    Interné CSS sa pridáva priamo do HTML súboru v rámci značky <style>, ktorá sa nachádza v sekcii <head>.

    Príklad interného CSS:

    <!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: navy;
      text-align: center;
    }
    p {
      font-family: Arial, sans-serif;
      font-size: 20px;
    }
  </style>
</head>
<body>

  <h1>Vitajte na mojej stránke!</h1>
  <p>Toto je odsek s aplikovaným CSS štýlom.</p>

</body>
</html>

    V tomto príklade:

    • body: Značí, že celé telo stránky bude mať svetlomodré pozadie.
    • h1: Hlavný nadpis bude mať tmavomodrú farbu a bude zarovnaný na stred.
    • p: Text odstavca bude zobrazený s písmom Arial a veľkosťou 20 pixelov.

    Externé CSS

    Externé CSS sa pridáva pomocou samostatného súboru, ktorý je prepojený s HTML dokumentom. Tento spôsob je ideálny, ak chcete použiť rovnaké štýly na viacerých stránkach.

    Vytvorenie externého CSS súboru:

    1. Vytvorte nový súbor s názvom style.css a vložte doň CSS kód:
    body {
  background-color: lightblue;
}
h1 {
  color: navy;
  text-align: center;
}
p {
  font-family: Arial, sans-serif;
  font-size: 20px;
}
    1. Prepojte CSS súbor s HTML dokumentom pomocou značky <link> v sekcii <head>:
    <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Vitajte na mojej stránke!</h1>
  <p>Toto je odsek s aplikovaným externým CSS štýlom.</p>

</body>
</html>

    Tento prístup má výhodu v tom, že môžete rovnaký súbor CSS použiť na viacerých stránkach, čo uľahčuje správu štýlov.

    Inline CSS

    Inline CSS sa používa priamo v HTML prvkoch pomocou atribútu style. Tento spôsob sa používa zriedkavo, pretože nie je efektívny, ak chcete použiť rovnaký štýl na viacerých prvkoch.

    Príklad inline CSS:

    <h1 style="color: red; text-align: center;">Toto je nadpis s inline CSS</h1>

    Základy syntaxe CSS

    CSS sa skladá z selektorov, ktoré určujú, ktoré HTML prvky sa majú štýlovať, a deklarácií, ktoré špecifikujú štýl.

    Príklad:

    p {
  color: blue;
  font-size: 16px;
}
    • Selektor (p): Určuje, že štýly sa aplikujú na všetky HTML odseky (<p>).
    • Deklarácie: Každá deklarácia obsahuje vlastnosť (color, font-size) a jej hodnotu (blue, 16px), ktorá definuje konkrétny štýl.

    Styling textu a farieb

    CSS umožňuje formátovať text rôznymi spôsobmi, napríklad meniť farbu, veľkosť písma, zarovnanie, štýl písma a ďalšie vlastnosti.

    Príklady štýlovania textu:

    h1 {
  color: green;
  text-align: left;
  font-family: Verdana, sans-serif;
}
p {
  font-size: 18px;
  line-height: 1.5;
  color: #333333;
}
    • color: Určuje farbu textu.
    • font-family: Definuje typ písma, pričom môžete zadať viacero písiem, oddelených čiarkou, aby prehliadač použil alternatívne písmo, ak prvé nie je dostupné.
    • font-size: Určuje veľkosť textu.
    • line-height: Nastavuje výšku riadku, čo pomáha s čitateľnosťou textu.

    Styling rozloženia (margin, padding, border)

    CSS vám tiež umožňuje nastaviť rozloženie prvkov na stránke pomocou vlastností ako margin, padding a border.

    Príklady rozloženia:

    div {
  margin: 20px;
  padding: 10px;
  border: 1px solid black;
}
    • margin: Určuje vonkajší priestor okolo prvku.
    • padding: Určuje vnútorný priestor medzi obsahom prvku a jeho okrajmi.
    • border: Definuje rámček okolo prvku.

    Farby a pozadia

    CSS podporuje rôzne formáty farieb, ako sú hexadecimálne kódy (#FF0000), RGB (rgb(255, 0, 0)) a názvy farieb (red).

    Príklad farieb a pozadí:

    body {
  background-color: #f0f0f0;
}
h1 {
  color: #4CAF50;
}

    Úloha pre vás

    Vytvorte HTML stránku, ktorá obsahuje:

    • Základné štýly pre nadpisy a odseky.
    • Rozloženie prvkov pomocou marginu a paddingu.
    • Pozadie s použitím CSS farieb.

    Záver 8. časti

    Týmto posledným dielom ste sa naučili základné základy CSS, ktoré vám umožnia vylepšiť vzhľad vašich HTML stránok. Teraz viete, ako používať CSS na ovplyvňovanie farieb, textov, rozložení a celkového dizajnu webovej stránky. Pokračujte v experimentovaní s CSS a zistíte, aký silný nástroj máte na vytváranie krásnych a funkčných webových stránok.

    Zdieľať

    Podobné témy