Skripta OVI

CSS a Selektory

CSS je jazyk, který používáme ke stylování vzhledu HTML dokumentu.
Zkratka CSS znamená Cascading Style Sheets neboli česky Kaskádové styly.

Kam se píší?

  • inline CSS
    Stylování přímo v atributu style jednotlivých objektech. Platí jen pro ten jeden element – nejméně efektivní způsob použití CSS.
  • interní CSS
    Umístění do elementu <style></style> v headu html stránky.
    Používá se pro stylování jedné stránky.
  • externí CSS
    Samostatný soubor s koncovkou .css, který se v <head> stránky připojí přes element <link rel="stylesheet" href="style.css">
    Ideální pro použití stejných stylů na více stránkách.

Jak se píší CSS?

selektor {
vlastnost: hodnota;
vlastnost: hodnota;
}
  • selektor – označuje, který element chceme upravovat (např. p, #id, .trida).
  • vlastnost – typ úprav, které chceme vytvářet (např. color, font-size).
  • hodnota – to, co chceme nastavit. Typ/jednotky hodnoty se mění podle vlastnosti (např. red, 16px).

Jednomu nastavení vlastnosti a hodnoty říkáme deklarace. Styl může obsahovat více deklarací oddělených středníkem.

Poznámky v CSS

Pokud chceme do textu napsat poznámky, musíme je oddělit lomítkem s hvězdičkou
/* Toto je poznámka v CSS */

CSS Selektory

Dokáží najít objekt, který chceme upravovat. Selektory mohou objekty označovat podle typu elementu, vlastností, obsahu aj.

Rozdělení selektorů:

Selektory můžeme rozdělovat na:

  • jednoduché selektory
  • kombinátory
  • peudo-třídy
  • pseudo-elementy
  • selektory vlastností

Jednoduché selektory

Označují objekty podle elementu, třídy nebo id.

Selektor elementu

Před názvem elementu není žádný znak. Vybere všechny elementy tohoto typu.

  • body označí tělo dokumentu
  • p označí všechny odstavce
  • img označí všechny obrázky
Selektor identifikátoru ID

Před názvem selektoru se píše hashtag #. Protože ID pro každný objekt by mělo být unikátní, vybere jen JEDEN objekt s tímto ID.

#image3
#ilustrace

Uvnitř elementu nastavujeme vlastnost id jako:
<img id="ilustrace" src="obrazek.jpg">

Selektor třídy

Před názvem selektoru se píše tečka. Vybere všechny objekty, které mají přiřazenou tuto třídu. Tyto objekty mohou být různého typu elementu. Také mohou obsahovat několik tříd současně.

.nahledy
.zvyrazneni

Uvnitř elementu nastavujeme vlastnost class jako:
<img class="nahledy" src="obrazek.jpg">

Univerzální selektor

Všechny elementy na stránce můžeme vybrat pomocí hvězdičky

* všechny objekty na stránce

Seskupování selektorů

Pokud chceme více selektorům napsat stejné vlastnosti, nemusíme jejich psaní opakovat, ale můžeme tyto selektory seskupit tak, že mezi ně napíšeme čárku

p, h1, .titulek, #podnadpis3

Kombinátory

Kombinují vztahy mezi elementy.

Máme tyto čtyři typy kombinátorů:

  • Mezera (potomci)
    výběr (všech) potomků daného typu. Vybere všechny vnořené objekty na všech úrovních. Mezi selektory napíšeme mezeru.
    div p
  • Přímý potomek (>)
    Vybere pouze elementy na nejbližší úrovni.
    div > p
  • Následující sourozenec (+)
    Vybere první element na stejné úrovni následující po zvoleném selektoru.
    h1 + p
  • Všichni sourozenci (~)
    Vybere všechny elementy na stejné úrovni.
    h1 ~ p

    Příklady:
 body section { 
	/* Vybere všechny sekce body včetně sekcí, které jsou uvnitř těchto sekcí */ 
	}
	
	 body > section {
	  /* vybere všechny odstavce v sekci. 
	  Pokud tyto sekce obsahují nějaké další sekce, ty vnitřní nebudou vybrané. */
	  }

	h1 + p {
	/* První odstavec za nadpisem */
	}

	h1 ~ p {
	/* Všechny odstavce za nadpisem */
	}

Pseudo-třídy

Jsou selektory, které označují stav elementu.
Např. objekt nad který najela myš, nebo navštívený odkaz.
Pseudotřída se vždy vztahuje k předcházejícímu selektoru – pseudotřídu píšeme za dvojtečku za název selektoru.

selektor:pseudo-třída {  
vlastnost: hodnota;
}

Časté pseudo-třídy:

  • :hover Najetí myši nad objekt.
  • :link Nenavštívený odkaz
  • :visited Navštívený odkaz.
  • :target Cíl odkazu
  • :focus – Aktivní objekt (např. textové pole).
  • :first-child – První potomek rodiče.
  • :last-child – Poslední potomek rodiče.

a další viz: https://www.w3schools.com/css/css_pseudo_classes.asp

Pseudo-elementy

Jsou selektory označující konkrétní část elementu.
Např. první písmeno, první řádek, obsah před nebo za.
Pseudo elementy se také vždy vztahují k předcházejícímu selektoru – za název selektoru píšeme dvě dvojtečky.


selektor::pseudo-element {  
vlastnost: hodnota;
}

Mezi pseudo-elementy patří:

  • ::first-line První řádek elementu.
  • ::first-letter První písmeno elementu.
  • ::before Vložení obsahu před element. Využívá vlastnost content.
  • ::after Vložení obsahu za element. Využívá vlastnost content.
  • ::selection Část elementu, kterou uživatel vybral myší.

Selektory vlastností

Výběr elementů podle atributů.
Vybírají elementy s určitými vlastnostmi. Např. Odkazy, které mají jako cíl odeslání mailu. Obrázky, které mají učitý název. Elementy, které mají určitou třídu.

selektor[vlastnost] {  
vlastnost: hodnota;
}

Tyto vlastnosti mohou mít různé variace.

  • selektor[vlastnost] Selektor, který má tuto vlastnost (nezáleží na její hodnotě).
  • selektor[vlastnost="hodnota"] Selektor, který má tuto vlastnost s konkrétní hodnotou.

A další variace: https://www.w3schools.com/css/css_attribute_selectors.asp

admin

, , ,