HTML

Web o webu

Návrh stránky

Připojení CSS stylů

Pro návrh stránky, resp. pro styly jednotlivých prvků stránky, tedy i jednotlivých bloků, vytvoříme společný css soubor.

Tento soubor připojíme ke všem html stránkám webu. Připojení se provede pomocí značky link.

Ukázka připojení css souboru pomocí link

<!doctype html>
<html>
  <head>
    <title>Titulek webu</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="basic.css">
  </head>
<body>
</body>
</html>

Návod na připojení stylů v PSPadu

Vytvoříme a uložíme css soubor (uložíme jej do složky, v níž máme html soubory, případně do podsložky).

Před vytvořením propojení html a css musíme mít uložený i html soubor, aby PSPad mohl vytvořit relativní cestu od html souboru k css souboru.

V části head, např. za značkou title si vytvoříme nový řádek, stiskneme CTRL a mezerník a začneme psát název značky link. Vybereme link na externí css styl.

Link css souboru

V okně CSS href= klikneme na tlačítko se třemi tečkami a po otevření naší složky vybereme uložený css soubor.

Link css souboru

Stiskneme Otevřít a potrdíme OK.

Link css souboru

Vytvořenou značku link zkopírujeme a vložíme do všech html stránek daného webu.

Syntaxe CSS

Styl pro html značku vytvoříme tak, že v css souboru zapíšeme název značky bez špičatých závorek < a > a do složených závorek { } vložíme příslušné vlastnosti. Každá vlastnost je ukončena středníkem.

Ukázka

header {
  padding: 30px 20px;
  background-color: #660099;
  color: #FFFFFF;
  font-size: 2.5em;
}

Dědičnost CSS stylů

HTML značky jsou umístěny v jiných HTML značkách (např. header, nav, article a footer jsou uvnitř značky div a ta je uvnitř značky body). Vnitřní, dceřinné prvky, zdědí vlastnosti rodičovských elementů (pokud nemají danou vlastnost nastavenu ve své definici stylu).

Příklad dědičnosti

body {
  padding: 20px;
  background-color: #CCCCFF;
  font-family: Tahoma, Arial, sans-serif;
}
header {
  padding: 30px 20px;
  background-color: #660099;
  color: #FFFFFF;
  font-size: 2.5em;
  /* font-family zdědí od body */
}

Značka header leží uvnitř div a ten uvnitř body. Header je tedy potomkem body.

Header zdědí vlastnosti body, ale padding a background-color bude mít dle svého nastavení, zděděnou vlastností zůstane font-family.

Základní vlastnosti bloků jednoduchého návrhu

Pro vysvětlení najeďte myší na hodnoty v tabulce:

Vnitřní odsazení
padding padding: 30px 10px 20px 10px; padding: 30px 10px; padding: 20px;
Barva pozadí
background-color background-color: brown; background-color: #A52A2A; background-color: rgb(165,42,42);
Barva písma
color color: orange; color: #FFA500; color: rgb(255,165,0);
Druh písma
font-family font-family: Tahoma; font-family: Times New Roman, sherif; font-family: Tahoma, Calibri, sans-sherif;
Velikost písma
font-size font-size: 1.5em; font-size: 150%; font-size: 20px;
Tučné písmo
font-weight font-weight: bold; font-weight: normal;
Skloněné písmo
font-style font-style: italic; font-style: normal;
Zarovnání textu
text-align text-align: left; text-align: center; text-align: right;

CSS styly jednoduchého návrhu

Všem blokům nastavíme vnitřní odsazení (padding) a barvy pozadí (background-color).

Hlavičce (header) a patičce (footer) nastavíme vlastnosti písma, neboť zapíšeme jednoduchý text přímo do těchto bloků.

V navigačním bloku (nav) budou vloženy odkazy, budeme tedy později formátovat tyto odkazy. Článek (article) bude tvořen řadou dalších html značek, např. nadpisy, odstavce, obrázky apod., budeme tedy formátovat tyto jednotlivé značky.

Typ písma (font-family) je vhodné mít na celé stránce stejné, můžeme jej tedy nastavit hlavnímu bloku (div) a vnořené prvky jej zdědí, pokud sami nebudou mít nastaveno jiné písmo (např. header).


/* basic.css */
body {
  padding: 20px;
  background-color: #CCCCFF;
  font-family: Tahoma, Arial, sans-serif;
}
header {
  padding: 30px 20px;
  background-color: #660099;
  color: #FFFFFF;
  font-size: 2.5em;
  font-family: Times New Roman, serif;
  /* ostatní bloky zdědí font-family od body */
}
nav {
  padding: 5px 20px;
  background-color: #9966FF;
}
article {
  padding: 20px;
  background-color: white;
}
footer {
  padding: 5px 20px;
  background-color: #660099;
  color: #FFFFFF;
  text-align: center;
}