6. HTML Pokračování

Stylování textu

Velikost textu

  • font-size - vlastnost pro změnu velikosti textu
  • základní hodnoty v pixelech
<!DOCTYPE html>
<html>
<head>
	<style>
		p {
			font-size: 20px;
		}
	</style>
</head>
<body>
	<p>Ahoj Honzo</p>
</body>
</html>

Změna fontu

  • font-family - vlastnost pro změnu fontu
  • název fontu, který je uložen v počítači
<!DOCTYPE html>
<html>
<head>
	<style>
		p {
			font-family: Arial;
		}
	</style>
</head>
<body>
	<p>Ahoj Honzo</p>
</body>
</html>

Tloušťka textu

  • font-weight - vlastnost pro změnu tloušťky textu
  • hodnoty od 100 do 900 a bold, normal 
<!DOCTYPE html>
<html>
<head>
	<style>
		p {
			font-weight: bold;
		}
	</style>
</head>
<body>
	<p>Ahoj Honzo</p>
</body>
</html>

Styl textu

  • font-style - vlastnost pro změnu stylu textu
  • hodnoty italic, normal 
<!DOCTYPE html>
<html>
<head>
	<style>
		p {
			font-style: italic;
		}
	</style>
</head>
<body>
	<p>Ahoj Honzo</p>
</body>
</html>

Dekorace textu

  • text-decoration - vlastnost pro dekoraci textu
  • hodnoty underline, line-through, overline 
<!DOCTYPE html>
<html>
<head>
	<style>
		p {
			text-decoration: underline;
		}
	</style>
</head>
<body>
	<p>Ahoj Honzo</p>
</body>
</html>

Zarovnání textu

  • text-align - vlastnost pro zarovnání textu
  • hodnoty left, right, center, justify 
<!DOCTYPE html>
<html>
<head>
	<style>
		p {
			text-align: center;
		}
	</style>
</head>
<body>
	<p>Ahoj Honzo</p>
</body>
</html>

Transformace textu

  • text-transform - vlastnost pro transformaci textu
  • hodnoty uppercase, lowercase, capitalize 
<!DOCTYPE html>
<html>
<head>
	<style>
		p {
			text-transform: uppercase;
		}
	</style>
</head>
<body>
	<p>Ahoj Honzo</p>
</body>
</html>

Úkol s textem

Barvy

Zadávání barev

  • několik způsobů

Anglické názvy

  • jednoduchý, ale ne tolik přizpůsobivý
  • např. red, blue, green 
    • p {
	color: red;
}

Hexadecimální kód

  • nejpřesnější způsob - #RRGGBB
  • např. #ff0000, #00ff00, #0000ff 
    • p {
	color: #ff0000;
}

RGB

  • červená, zelená, modrá
  • hodnoty od 0 do 255
  • např. rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255) 
    • p {
	color: rgb(255, 0, 0);
}

RGBA

  • červená, zelená, modrá, průhlednost
  • hodnoty od 0 do 255 a 0 až 1
  • např. rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5), rgba(0, 0, 255, 0.5) 
    • p {
	color: rgba(255, 0, 0, 0.5);
}

Barva pozadí

  • vlastnost background-color
<!DOCTYPE html>
<html>
<head>
	<style>
		body{
			background-color: red;
		}
	</style>
</head>
<body>
	<p>Ahoj Honzo</p>
</body>
</html>
ColorZilla

Dědičnost

Co je to dědičnost?

  • vlastnosti se dědí od rodičovského prvku
  • pokud není v potomkovi definována vlastnost, použije se vlastnost z rodiče

Ukázka

<!DOCTYPE html>
<html>
<head>
	<style>
		div {
			color: red;
		}
	</style>
</head>
<body>
	<p>Ahoj Honzo</p>
	<div>
		<p>Ahoj Honzo</p>
	</div>
</body>
</html>

Další příklad dědičnosti

<!DOCTYPE html>
<html>
<head>
	<style>
		body {
			font-family: Arial;
			font-size: 18px;
		}
		.container {
			color: blue;
		}
	</style>
</head>
<body>
	<div class="container">
		<h2>Nadpis</h2>
		<p>Tento text zdědí font a velikost z body a barvu z containeru</p>
		<span>I tento span má stejné vlastnosti</span>
	</div>
</body>
</html>

Přepsání dědičnosti

<!DOCTYPE html>
<html>
<head>
	<style>
		.rodic {
			color: green;
			font-size: 20px;
			font-weight: bold;
		}
		.potomek {
			color: orange;
			/* font-size a font-weight se zdědí */
		}
	</style>
</head>
<body>
	<div class="rodic">
		<p>Rodičovský text - zelený</p>
		<p class="potomek">Potomek - oranžový, ale velký a tučný</p>
	</div>
</body>
</html>

Dědičnost s více úrovněmi

<!DOCTYPE html>
<html>
<head>
	<style>
		.pradedecek {
			font-family: Arial;
			color: darkblue;
		}
		.dedecek {
			font-size: 16px;
		}
		.rodic {
			font-weight: bold;
		}
		/* potomek nedefinuje žádné styly */
	</style>
</head>
<body>
	<div class="pradedecek">
		<div class="dedecek">
			<div class="rodic">
				<p class="potomek">Zdědil: Arial, modrou, 16px, tučné</p>
			</div>
		</div>
	</div>
</body>
</html>

HTML tagy

div

  • blokový element
  • nemá žádný význam (nic nedělá)
  • používá se pro seskupení dalších elementů
<!DOCTYPE html>
<html>
<head>
<style>
div {
	padding: 5px;
	background-color: cadetblue;
	width: 100px;
	height: 100px;
	border-radius: 3px;
}
div p{
	color: white;
}
</style>
</head>
<body>
	<div>
		<p>Toto je div</p>
	</div>
</body>
</html>

span

  • řádkový element
  • nemá žádný význam (nic nedělá)
  • používá se pro změnu stylu textu
<!DOCTYPE html>
<html>
<head>
<style>
span {
	color: cadetblue;
	font-weight: bold;
}
</style>
</head>
<body>
	<p><span>Ahoj</span>, já jsem <span>span</span>.</p>
</body>
</html>

Kotva

  • používá se pro odkázání na danou část stránky
  • pomocí id se k ní můžeme dostat
<!DOCTYPE html>
<html>
<head>
	<style>
		a {
			color: cadetblue;
			font-weight: bold;
		}
		h1{
			margin-top: 500px;
		}
	</style>
</head>
<body>
	<a href="#kotva">Klikni zde</a>
	<h1 id="kotva">Vítej na kotvě!</h1>
</body>
</html>

Úkol