Vzorová stránka - aneb co nastylovat

K čemu to bude dobré?

Je to taková pomůcka pro mně a pro tz kterým se to bude líbít. Vzniklo to proto, že vždy když tvořím web tak si nejdřív nastyluju vše co budu potom potřebovat a pak to jen použiji. Vždy při každém webu jsem si psal novou vzorovou stránku a styloval ji ale teď už mně to přestalo bavit, proto tento projekt. Je to vorová stránka na které je vše co vždy potřebuji.

Co zde najdete?

Nečíslovaný seznam (to co právě čtete)
Nadpisy h1, h2, h3
Odstavce
Tabulku
Kód
Odkazy

Odstavce textu

Na této vzorové stránce jsem použil 4 druhy odstavců odlišené vždy jiným atributem class.
Jsou to:

Odstavec zarovnaný na levo. class="levo"
Odstavec zarovnaný na pravo. class="pravo"
Odstavec zarovnaný do bloku. class="blok"
Odstavec zarovnaný na stre. class="stred"

Ale v podstatě je jedno jak si odstavec pojmenujete a nastylujete, třeba odsazený

Tabulky

U tabulek jsem si nastyloval tag <table> jako obecný styl tabulky. Tag <th> jako záhlaví. Tag <td> jako buňku. Takto jsem docílil jednotného vzhledu tabulek. A pomocí atributu class pak už určím jen šířku. Přikladem je class="siroka" a v css jen nastavim .siroka {width: 400px;}
Příklad:

Zahlavi 1	Zahlavi 2	Zahlavi 3
Bunka 1	Bunka 2	Bunka 3
Bunka 4	Bunka 5	Bunka 6

Zahlavi 1	Zahlavi 2	Zahlavi 3
Bunka 1	Bunka 2	Bunka 3
Bunka 4	Bunka 5	Bunka 6

Zahlavi 1	Zahlavi 2	Zahlavi 3
Bunka 1	Bunka 2	Bunka 3
Bunka 4	Bunka 5	Bunka 6

Odkazy

Takhle jsem si zde nastyloval odkazy

Tato stránka bez stylu
Tato stránka se stylem
Můj blog

Kód

A nakonec vám zde dávám css které jsem použil. Styl pro kód je tvořen tagy <pre> a <code>.

Pro lepší přehlednost si to zkopirujte do nejakeho editoru .... treba PSPad


/*nastaveni nuloveho vnitrniho okraje a nulovaho vnejsiho okraje*/
* {              
	margin: 0;
	padding: 0;
}

/******styl layoutu *******/

/*styl tagu body - obrazek na pozadi - opakovani po x,y - nastaveni pisma pro cely web -
  - horni okraj - dolni okraj - zarovnani texu na stred */
body {
	background-image: url(images/bg.gif);
	background-repeat: repeat;
	text-align: center;
	font-family: 'Verdana CE', 'Arial CE', 'Lucida Grande CE', 'Helvetica CE', Verdana, Arial, lucida, sans-serif;
	padding-top: 10px;
	padding-bottom: 25px;
}

/*styl divu s id="hlavni" - jeho sirka pro IE s potrzitkovym hackem 
  - okraje divu - vystredeni (margin-left-right: auto;) - relativni pozice
	- vnitrni okraje horni 0 levy 10 dolni 0 pravy 10 - pretekani(skryt)  */
#hlavni {
	width: 750px;
	_width: 770px;
	background-color: #ffffff;
	border-left: 2px solid #c3c3c3;
	border-right: 2px solid #c3c3c3;
	border-bottom: 2px solid #c3c3c3;
	border-top: 2px solid #c3c3c3;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	position: relative;
	text-align: justify;
	overflow: hidden;
	padding: 0 10px 0px 10px;
}
/*styl divu pata - zruseni obtekani (clear:both) - zarovnani pisma - velikost pis. - 
  - vnitrni okraje (pro ie s podtrzitkem) - barva pozadi - 
	- zaporne venkovni okraje ( pro zruseni vnitrnich okraju divu halvni)*/
#pata {
	clear: both;
	text-align: center;
	font-size: 8pt;
	border-top: 2px solid #c3c3c3;
	padding-top: 3px;
	padding-bottom: 3px;
	_padding-top: 1px;
	_padding-bottom: 3px;
	margin-left: -10px;
	margin-right: -10px;
	background-color: #DAE5AA;
}
/*styl hlavniho divu s id main - nastaveni sirky (width), zarovnani(float), velikosti pisma
  , spodniho venkovniho okraje*/
#main {
	float: right;
	width: 99%;
	font-size: 10pt;
	margin-bottom: 10px;
}

 /*********** styl hlavnich textovych prvku stranky (vzorove stranky) **************/
 /** vse je podmonozinou v divu main**/


/*NADPISY*/
/* styl hlavniho nadpisu - horni, spodni vnitrni okraj*/
#main h1 {
	padding-top: 20px;
	padding-bottom: 10px;
	color: #798638;
}

/*styl podnadpisu - velikost pisma - sirka - barva - okraje*/
#main h2 {
	font-size: 14pt;
	width: 100%;
	font-weight: bolder;
	margin-top: 20px;
	margin-bottom: 15px;
	color: #798638;
	text-align: left;
}

/*styl 3 podnadpisu - to same co h2 + levy 5pixelovy okraj*/
#main h3 {
	font-size: 11pt;
	width: 100%;
	margin-top: 15px;
	margin-bottom: 15px;
	padding-left: 5px;
	margin-left: 5px;
	color: #798638;
	border-left: 5px solid #798638;
}

/*NECISLOVANY SEZNAM*/
/*styl necislovaneho seznamu - velikost, rez pisma - mezery mezi znaky - 
  - obrazkova odrazka - venkovni okraje*/
#main ul {
	font-size: 10pt;
	font-weight: bold;
	letter-spacing: .02px;
	list-style-image: url(images/list.gif);
	margin-left: 30px;
	margin-top: 15px;
	margin-bottom: 10px;
}


/*ODSTAVCE*/

/*uvodni odstavec - je kurzivou (italic) - zuzeny (95%)*/
#main p.uvodnik {
	font-style: italic;
	width: 95%;
}
/*odstavec zarovnany na stred*/
#main p.stred {
	text-align: center;
}
/*odstavec zarovnany na pravo*/
#main p.pravo {
	text-align: right;
}
/*odstavec zarovnany na levo*/
#main p.levo {
	text-align: left;
}
/*odstavec zarovnany do bloku*/
#main p.blok {
	text-align: justify;
}
/*odsazeny odstavec (o 20 px z leva)*/
#main p.odsaz {
	margin-left: 20px;
}


/*****TABULKA****/

/*zakladni styl tabulky - nastaveni teknk0ho ohraniceni - bravy ohraniceni 
  - vnitrni okraje - velikost pisma - venkovni okraje*/
#main table {
	border-collapse: collapse;
	border: 2px solid #c3c3c3;
	padding: 2px;
	font-size: 10pt;
	margin-bottom: 15px;
	margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
}
/*podtrida table - urcuje sirku (400 x 200 x 80)*/
#main table.siroka {
	width: 400px;
	
}
#main table.stredni {
	width: 200px;

}
#main table.uzka {
	width: 80px;

}

/*styl zahlavi tabulky - okraje - pismo - barva pozadi*/
#main th {
	background-color: #DAE5AA;
	padding: 3px;
	color: #798638;
	text-align: center;
	font-size: 11pt;
	font-weight: bold;
	border: 2px solid #c3c3c3;
}
/*styl bunky -  vnitrni okraje - ohraniceni*/
#main td {
	padding: 2px;
	border: 1px solid #c3c3c3;
}

/*ZDROJOVY COD*/
/*styl pre a code - sirka - okraje - pozaddi - velikost pisma - pretekani*/
#main pre, code {
	margin: auto;
	width: 97%;
	background: #F8FFDF;
	font-size: 100% !important;
	font-size: 90%;
	owerflow: scroll;
}
/* styl pro pre smotnou - okraje - vnitrni okraje */
#main pre {
	padding: 5px;
	border: 1px solid #c3c3c3;
}

/*ODKAZ*/
/*styl odkazu - barva pisma - podtrzeni - barva pozadi*/
#main a {
	color: #798638;
	text-decoration: underline;
	background-color: #F8FFDF;
}
/*styl odkazu pri najeti mysi*/
#main a:hover {
	color: #798638;
  text-decoration: none;
	background-color: #F8FFDF;
}



/*PRI nejasnosti nejake syntaxe se podivejte na http://www.jakpsatweb.cz/css/*/

Závěr

Tato stranka je navrhnuta tak aby ji bzlo možno lehce přestylovat a připravit tak svůj css kod na vše co ho může potkat :].