CSS - kaskádové styly

CSS je zkratka pro Cascading Style Sheet, tedy česky Kaskádové styly. Pomocí stylování můžete jednoduše definovat určité vlastnosti pro celý web, stejně efektivně jakov běžném textovém souboru. Používání stylů je velice výhodné a moderní web se bez CSS opravdu neobejde. Pomocí údajů v jednom souboru umožňuje ovládat vzhled celého webu. Nejdříve je potřeba se naučit alespoň základy HTML.

Použití

CSS se zapisují buď přímo do HTML stránky pomocí atributu style:

• pro celou stránku: <style type="text/css"> styly určené CSS </style>
• nebo pro určitý element; např.: <p style="color:green; border:1px blue solid;">Odstavec bude mít zelený text a modrý okraj</p>

nebo do externího souboru s koncovkou .css, který potom do stránky načtete přidáním následujícího zápisu do hlavičky dokumentu <link rel="Stylesheet" type="text/css" href="styly.css">

CSS základy

Zápis CSS stylů má 2 části - 1. selektor definující objekt a 2. deklaraci s příkazy. selektor {
vlastnost:hodnota;
} např.: p {
color: red;
border: 2px solid blue; } Deklaraci následující po selektoru ohraničují {tyto složené závorky - na klávesnici Alt Gr + 9, 0} přičemž v nich definované vlastnosti se od hodnoty oddělují dvojtečkou (color:red). Jednotlivé vlastnosti se od sebe oddělují středníkem (color:red; border:2px;).

Lze také určit stejné vlastnosti několika selektorům najednou pokud je oddělíme čárkami:

h1, h2, h3 {
color:blue;
border-bottom:1px;
}

Třídy a identifikátory

Každému HTML elementu můžete přiřadit třídu (class) nebo id, pomocí kterých můžete elementu načítat styly. Takže v HTML si nadefinujeme například všem odstavcům s články třídu "clanky", které v CSS stylech přiřadíme určité vlastnosti:
toto je samozřejmě v HTML dokumentu: <p class="clanky"> </p> a toto už je CSS zápis .clanky {color:blue;} Stejně můžeme nadefinovat i jedinečné id. Rozdíl mezi class a id je ten, že id se může na stránce vyskytovat pouze jednou. <p id="novinka"> </p> #novinka {background-color:red; border: 1px solid orange;}

Ukázkový příklad CSS

Ukázkový příklad zdrojového kódu styly.css

body {
	font-family: Arial, Tahoma, sans-serif;
	color: auto;
	font-size: auto;
	background-color: #ADD8E6;
	background-image:url(images/pozadi.png);
	background-repeat: repeat-x;
}
/* tato značka slouží pro zakomentování */

.celek {
	width: 650px;
	text-align: left;
	border-top: solid 1px;
	border-bottom: solid 1px;
	border-left: solid 1px;
	border-right: solid 1px;
	border: 0px solid #546AA6;
	margin-left: 20px;
}
.hlavicka {
	clear: both;
	border-bottom: solid 3px blue;
}
.paticka {	
	clear: both;
	text-align: right;
	font-size: 11px;
	padding-left: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
	background-color: blue;
	border-top: 1px solid #DCE2EC;
}

a {text-decoration:underline; color:green;}
a:hover {text-decoration:underline; color:red;}

h1 {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size:3em;
	color: #718F88;
	letter-spacing:0.2em;
		border-bottom:1px solid #565CB6;  
}
h2, h3 {
	color:#5662B6;
	padding-top:2em;
	border-bottom:1px solid #565CB6; 
}
hr {background-color:red; height:2px; color:red;} /* horizontální čára */

img {border: none;} /* všechny obrázky budou bez okrajů */

Pokračujete na vlastnosti CSS
CSS - kaskádové styly