CSS pozicování, pseudotřídy, selektory

7. hodina MVOP WBF

Matěj Cajthaml — SSPŠ

©

Opakování

K čemu slouží vykreslovací jádro?
Jaké tagy využívá moderní struktura stránek?
K čemu slouží vlastnost flex-basis?
Jaký je rozdíl mezi inline a block?
Jak poznáme hlavní a vedlejší osu ve flexu?
Co je to doména?

Pozicování

  • vlastnost position
  • statické, relativní, absolutní, fixované, "lepivé"
  • vlastnosti top, bottom, left, right

Statické pozicování

  • static
  • klasické pozicování, které známe
  • podle místa na stránce
  • nefungují: top, bottom, left, right

Relativní pozicování

  • relative
  • velmi podobné statickému pozicování
  • prvek je umístěn na stejném místě jako při statickém
  • fungují vlastnosti top, bottom, left, right

Fixované pozicování

  • fixed
  • prvek se při pohybu na stránce nehýbe - je vázán na velikost obrazovky
  • prvek se umisťuje nad ostatní prvky - neovlivnuje jiné prvky
  • fungují vlastnosti top, bottom, left, right

Absolutní pozicování

  • absolute
  • prvek se zachytí na nejbližší prvek, na kterém je nějaké pozicování přesně nastavené (relative, absolute, ...)
  • popř. na body
  • jiná vrstva

"Lepící" pozicování

  • sticky
  • mění se mezi stavy relative a fixed
  • podle skrolování na stránce - dokud nenalezne dané odsazení
  • potom se přilepí a hýbe se během skrolování

Vrstva

  • vlastnost z-index
  • číslo určující vrstvu
  • čím vyšší číslo, tím bude vykresleno "navrch"
  • i záporné hodnoty

Pseudotřídy

Pseudotřída

  • speciální selektor
  • ukazuje na stav tagu
  • můžeme měnit vlastnosti
  • např. při najetí myši, zda je n-tý prvek, ...
  • zapisujeme pomoci :
  • můžeme navazovat

Navigační pseudotřídy

  • selektování tagů na základě jejich položení v HTML

  • :nth-child(4)
  • :nth-child(2n)
  • :first-child
  • :only-child
  • :first-of-type

Aktivovatelné pseudotřídy

  • aktivace pomocí uživatelských aktivit

  • :hover
  • :active
  • :focus

Negace

  • zneguje daný selektor
  • :not

  • :not(.sad)
  • :not(:first-child)

Seznam

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Pseudoelementy

Pseudoelement

  • selektor
  • umožní stylovat speciální část tagu
  • např. první písmeno, první řádek, ...
  • používáme ::
  • můžeme navazovat

  • ::selection
  • ::first-line
  • ::first-letter
  • ::after a ::before

Seznam

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Další selektory

Vedlejší potomci

Vedlejší přímí potomci

Selektování dle atributů

  • [attr]
  • [attr="value"]
  • [attr*="ssps"]
  • [attr^="https://"]
  • [attr$=".org"]
  • [attr~="link"] (separator mezera)

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Priorita stylování

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/