USTÍKOVY POZNÁMKY

Řádkové a blokové elementy

Řádkové elementy se skládají (zobrazují) za sebe na jeden řádek. Chovají se jako slova v textu.

Blokové elementy se chovají jako odstavec. V textu ukončíme odstavec klávesou Enter a další odstavec začíná na novém řádku. Stejně tak začíná každý blok na novém řádku.

Přehled řádkových a blokových elementů.

Rozdíl mezi zobrazením řádkovým, řádek-blokovým a blokovým.

"Obalovací" elementy

Abychom mohli např. z více řádkových elementů udělat jeden blok, umístíme je do "obalovacího" elementu. Obalíme je blokovým elementem <div>, </div>.

Obalit můžeme i třeba jediné slovo uvnitř věty (abychom ho mohli později např. zvýraznit červeně). V tomto případě se jedná o řádkový obalovací element <span>, </span>.

Zápis: <p>Býka dráždí<span>červená</span>barva</p>

Div a span jsou elementy bez významu.

Jak použít CSS

Kód pro CSS můžeme použít třemi způsoby:

uvnitř HTML elementu (řádkový zápis)
v hlavičce HTML
v samostatném souboru

Hierarchie - co má přednost?

První varianta přepíše druhou variantu a druhá přepíše třetí.

CSS uvnitř HTML elementu

V tomto případě je CSS "zabudované" do HTML atributu style. Použijeme příkaz text-align a jeho variantu zarovnání: na střed.

<h1 style="text-align: center">Nadpis</h1>

CSS v hlavičce HTML

Do hlavičky HTML vložíme párový element <style>,</style>. Mezi jeho značky píšeme CSS kód.

<head>
  - - - 
  <style>
    h1 {text-align: center}
  </style>
</head>
<body>
  <h1>Nadpis</h1>
</body>

Nejdříve napíšeme, co (jaký element) budeme upravovat a do složených závorek jakým způsobem.

CSS v samostatném souboru

Do hlavičky v HTML místo elementu style vložíme odkaz na soubor se styly.

<link rel="stylesheet" href="/mujstyl.css">

Způsob zápisu CSS

selektor {
  vlastnost: hodnota;
  vlastnost: hodnota;
}

Selektor říká, co budeme upravovat, jaký element.

Dále zadáme jakou vlastnost elementu chceme měnit, např: zarovnání textu, změna barvy pozadí, velikost okraje, ... Vlastnosti oddělujeme středníkem.

A nakonec vložíme hodnotu. U velikosti to bude např.: 25 px (pixelů), nebo 5 %.

Identifikátory

Z pozice selektoru nevoláme jen název elementu (h1), použít můžeme také identifikátory id a class.

<head>
  - - - 
  <style>
    #nadpis {text-align: center}
  </style>
</head>
<body>
  <h1 id="nadpis">Nadpis</h1>
</body>

Identifikátor id s určitým jménem můžeme použít vždy jen pro jeden element. Při jeho volání píšeme před název znak #.

Budeme-li chtít pojmenovat více elementů (skupinu elementů) použijeme třídu class.

Před název píšeme tečku: .mesto {text-align: center}

<p class="stat">Španělsko</p>
<p class="mesto">Madrid</p>
<p class="stat">Řecko</p>
<p class="mesto">Athény</p>

Pozice

Při rozmísťování prvků na stránce je nutné si uvědomit vztah rodič - potomek.

<div>
  <p>Text</p>
</div>

V tomto případě je rodič element div a potomkem je do něho vložený textový odstavec p.

Nastavení pozice pomocí CSS:

Ukázkové příklady jednotlivých nastavení.

Static

Výchozí nastavení. Pozice zachovává přirozené řazení elementů na stránce. Nedá se změnit umístění pomocí CSS vlastností top, bottom, left a right. Neslouží jako "kotva" od které směřuje svou pozici potomek s absolutním umístěním.

Relative

Pozice zachovává přirozené řazení elementů na stránce - zde stále zabírá své místo. Obsah ale můžeme zobrazit, posunout jinam pomocí CSS vlastností top, bottom, left a right. Slouží jako "kotva" od které směřuje svou pozici potomek s absolutním umístěním.

Absolute

Nezachovává přirozené řazení elementů na stránce - umísťuje se do absolutní pozice, která se směřuje od nejbližšího rodiče (ten nesmí být Static). Elementy se tedy chovají jako vrstvy, které se mohou i překrývat. Také slouží jako "kotva" od které směřuje svou pozici potomek s absolutním umístěním.

Fixed

Podobné jako Absolute, ale svou pozici směřuje od okna obrazovky - při rolování zůstává stále na svém místě.

Fload

Pro rozmístění prvků na stránce se často také používá CSS vlastnost float.

Možnosti NONE, LEFT, RIGHT vyzkoušej zde.