5. Úvod do CSS

Opakování

  • Jaký je rozdíl mezi HTTP a HTTPS?
  • Co je to IDE?
  • Jaké dva nejzákladnější protokoly používá internet?
  • Z čeho se skládá základní struktura HTML?
  • Co je to protokol?
  • Jaké platí pravidlo o headings a proč?

CSS

CSS

  • Cascading Style Sheets (Kaskádové styly)
  • jazyk pomocí kterého můžeme stylovat HTML tagy
  • velikosti, barvy, font, odsazení

Syntaxe

selektor {
	vlastnost: hodnota;
}

rozepsané vlastnosti vždy ukončovat pomocí ;

Jak CSS používat?

Varianta č. 1

Inline

  • píšeme do HTML tagu
  • ve větších projektech nepřehledné

Ahoj Honzo

Varianta č. 2

Interní

  • píšeme do hlavičky HTML
  • styly se použijí na celý dokument
<!DOCTYPE html>
<html>
<head>
	<style>
		p {
			color: red;
		}
	</style>
</head>
<body>
	<p>Ahoj Honzo</p>
</body>
</html>

Varianta č. 3

Externí

  • píšeme do samostatného .css souboru
  • je potřeba css soubor připojit do HTML pomocí tagu link
  • připojuje se v HEAD
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<p>Ahoj Honzo</p>
</body>
</html>

Nastavení barvy textu

  • pomocí vlastnosti color
  • prozatím budeme používat anglické slovní názvy barev
<!DOCTYPE html>
<html>
<head>
	<style>
		p {
			color: red;
		}
	</style>
</head>
<body>
	<p>Ahoj Honzo</p>
</body>
</html>

Selektory

Elementový selektor

  • všechny HTML tagy
  • p {
    	color: red;
    }

ID selektor

  • #id - identifikátor
  • jedinečný identifikátor
  • často používaný v kombinaci s javascriptem
  • #id {
    	color: red;
    }

Třídový selektor

  • .class - třída
  • více tagů může mít stejnou třídu
  • Doporučuji
.class {
	color: red;
}

Jednotky

  • px - pixely
  • % - procenta
  • cm - centimetry

Komentáře

  • /* komentář */
/* komentář */
p {
	color: red;
}