15. HTML – Kaskádové styly. Typy oddílů. Tvorba vícesloupcového layoutu HTML stránky.
CSS – značka pro kaskádové styly
píší se do headu stránky nebo do externího souboru
v headu stránky se umisťují do tagu <style></style>
v externím souboru není potřeba styly nijak uvádět, můžeme rovnou psát
externí soubor css připojíme přes:
<link rel="stylesheet" type="text/css" href="styl.css">
Pomocí CSS měníme vlastnosti jednotlivých tagů
např.
header {
color:blue;
}
měníme jednotlivé třídy, ty se přiřazují uvnitř tagu pomocí class=“jméno třídy“
např. <div class="kontejner">
Třídy měníme přes
.kontejner { }
Zásady psaní vlastností:
vlastnost: hodnota; (nutné napsat středtník, jinak nefunguje)
hodnoty se udávají slovně – přesně dané termíny
nebo číselně – např. 200px – musí se uvést jednotky a mezi nimi a číslem nesmí být mezera
vlastnosti u kterých se určují jednotlivé hrany objektu (objekty jsou vždy obdélníkové) se zapisují
pokud má vlastnost platit pro všechny hrany:
vlastnost: 10px; např. magin: 10px;
pokud má vlastnost platit jen pro horní a dolní hranu:
vlastnost: 10px 20px; (horní hrana, dolní hrana);
pokud má vlastnost platit pro všechny čtyři hrany:
vlastnost: 10px 10px 20px 10px; (horní, pravá, dolní, levá hrana);
pokud má vlastnost platit jen pro levou a pravou hranu:
vlastnost: 0px 10px 0px 10px;
Některé vlastnosti můžeme rovnou určit pro určitou hranu:
např. margin-top: 10px; border-left-type: solid;
<!-- poznámka v html --> /* poznámka v css */
Selektory – značky, které slouží k výběru upravovaného objektu
. - třída nic - tag # - id
* - všechny objekty
p, span - všechny p a všechny span (sčítání) .obsah p - všechny odstavce uvnitř třídy obsah (specifikujeme obsah uvnitř) div > p - všechny odstavce uvnitř jakéhokoliv divu h1 + p - všechny odstavce, které ihned následují za nadpisem h1 (ovlivní jen první odstavec, další ignoruje) h1 ~ p - všechny odstavce, které následují za nadpisem h1 (ovlivní všechny do konce sekce)
Selektory podle vlastností
[vlastnost] - všechny objekty, které mají tuto vlastnost [target=_blank] - všechny objekty s vlastností nastavenou na tuto hodnotu [href^="http"] - všechny objekty, jejichž vlastnost začíná těmito znaky [href$=".pfd"] - všechny objekty, jejichž vlastnost končí těmito znaky a[href^="http"] - všechny odkazy, které začínají těmito znaky div[width=600] - všechny divy, které mají šířku 600
Selektory podle událostí
:active - aktivní objekt např a:active - odkaz, který je právě aktivní ::after - všechny objekty za vybraným elementem h1::after - všechno co je za nadpisem h1 ::before - všechny objekty před vybraným elementem :empty - objekt, který je prázdný (není v něm ani text) div:empty - všechny divy, které jsou prázdné ::first-letter - první písmeno elementu ::first-line - první řádek elementu :hover - objekt, nad kterým je myš :link - nenavštívené odkazy :visited - navštívený odkaz ::selection - objekt vybraný myší div:not(.menu) - vybere všechny divy, které nemají třídu menu :not(h1) - vybere všechny elementy, které nejsou nadpis h1
Objekty s ID měníme přes
#nazev { }