Skripta OVI

CSS Vlastnosti

Přehled vlastností CSS:
Pro ucelený přehled vlastností CSS navštivte:

Zásady psaní vlastností:

Vlastnosti se vždy píší jako deklarace k danému selektoru:

selektor {
vlastnost: hodnota;
}

Středník je povinný:
Po každé vlastnosti je nutné napsat středník (;). Bez něj CSS nebude správně fungovat.

Hodnoty vlastností:

Každá vlastnost má různou sadu hodnot, která jí může být přiřazená.

Konkrétní (slovní) hodnoty:

Některé vlastnosti mohou mít hodnoty vyjádřené přesnými slovy. Pak je vždy nutné napsat hodnotu tak, jak je zapsaná v referencích.
Příklady :

  • border-style: solid, dashed, dotted
  • display: block, inline, flex, grid
  • object-fit: cover, contain, none
Číselné hodnoty

U číselných hodnot se musí uvést jednotky a mezi nimi a číslem nesmí být mezera.
např.: px, %, em, vw, vh.

Vyjímkou jsou hodnoty transformací a filtrů, kde základní hodnota je 1 (znamená 100%). U nich se jednotky nepíší.

Obvyklé jednotky už číselných hodnot:

  • px obrazové body
  • pt typografické body
  • % procenta rodičovského objektu
  • vw procenta šířky okna
  • vh procenta výšky okna
  • em relativní k velikosti fontu
Hodnoty objektů s vícehranami

Vlastnosti u kterých se určují jednotlivé hrany objektu (objekty jsou vždy obdélníkové) se zapisují různými způsoby, podle toho, kolik hran má mít totožné nastavení

  • Všechny hrany najednou
    Vlastnosti se dá jen jedno číslo. Nastaví stejnou hodnotu pro všechny hrany.
vlastnost: 10px;
  • Vertikální a horizontální hrany zvlášť
    Vlastnosti se dají dvě čísla. Nastaví první hodnotu pro vertikální hrany (horní a dolní) a druhou pro horizontální (levou a pravou).
vlastnost: 10px 20px; (vertikální, horizontální);
  • Všechny čtyři hrany zvlášť
    Vlastnosti se dají čtyři čísla. Nastaví hodnoty v pořadí: horní, pravá, dolní, levá.
vlastnost: 10px 10px 20px 10px; (horní, pravá, dolní, levá hrana);
  • Jedna konkrétní hrana
    K názvu vlastnosti se dopíše směr hrany a napíše se jedno číslo.
vlastnost-top:  10px;
vlastnost-bottom:  10px;
vlastnost-left:  10px;
vlastnost-right:  10px;

Vybrané vlastnosti CSS

  • margin: Nastavuje vnější odsazení. Určuje vzdálenost objektu od okolních prvků.
  • padding: Nastavuje vnitřní odsazení. Určuje vzdálenost vnitřního obsahu od okraje objektu.
  • border: Nastavuje rámeček. Definuje styl (solid, dotted), šířku a barvu.
  • background: Určuje pozadí objektu, např. barvu nebo obrázek.
  • display: Řídí způsob zobrazení objektu (block, inline, flex, grid).
  • font-family: Nastavuje typ písma, např. Arial, Times New Roman.
  • transform: Aplikuje transformace, např. otáčení (rotate), škálování (scale).
  • z-index: Určuje pořadí vrstvy objektu (větší hodnota = blíže k divákovi).

admin

, , ,