8. CSS Reset

Opakování

  • Jak zarovnat text na střed?
  • K čemu je flexbox?
  • Jaké máme typy selektorů?
  • Pomocí jaké vlastnosti lze změnit barvu pozadí?
  • Jak se nazývá vlastnost, která umožňuje zaoblit okraje?

Zopakování HTML a CSS struktury

Zopakování odsazení

Reset.css

  • Reset.css je CSS soubor, který vymaže všechny defaultní styly, které prohlížeč nastavuje
  • Reset.css je vhodné použít na začátku každého projektu
https://meyerweb.com/eric/tools/css/reset/

Jak změnit velikost obrázku?

  • použití vlastnosti width a height

Jak zachovat poměr stran obrázku?

  • width: 200px;
  • height: auto;

Opacity

  • opacity - průhlednost
  • hodnoty od 0 do 1 včetně desetinných čísel 
<!DOCTYPE html>
<html>
<head>
	<style>
		img{
			width: 200px;
			height: auto;
			opacity: 0.5;
		}
	</style>
</head>
<body>
	<img src="https://via.placeholder.com/150">
</body>
</html>

Box-shadow

  • box-shadow - stín
  • určujeme horizontální a vertikální posunutí, rozmazání a barvu 
<!DOCTYPE html>
<html>
<head>
	<style>
		.box {
			width: 100px;
			height: 100px;
			background-color: red;
			box-shadow: 10px 10px 10px black;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

Přidání fontu do projektu

  • pomocí tagu link do hlavičky HTML

Google fonts

Pozicování

  • static - defaultní pozice
  • relative - posunutí od původní pozice
  • absolute - posunutí od rodiče
  • fixed - posunutí od okna

Top, bottom, right, left

  • top - horní okraj
  • bottom - dolní okraj
  • right - pravý okraj
  • left - levý okraj

Úkol

Moderní HTML5 tagy

  • sémantický význam
  • lepší čitelnost kódu
  • lepší pro vyhledávače
  • header - hlavička
  • footer - patička
  • nav - navigace
  • section - sekce
  • article - článek
  • aside - vedlejší obsah
  • main - hlavní obsah