Datoteka css.htm: (<-> scroll n00b) 
  1. <html>
  2. <head>
  3. 	<title>Vaja s CSS</title>
  4. 	<link rel="stylesheet" href="vaja.css" type="text/css">
  5. </head>
  6. <body>
  7. 	<h1>SLOGI - CSS (Cascading Style Sheets)</h1>
  8. 		<div class="nepar">
  9. 			<p>
  10. 				<ul>
  11. 					<li>Poznamo jih iz programov za oblikovanje besedil.</li>
  12. 					<li>Tudi v spletu niso novost - na zaeetku so bili doloeeni enkrat za vedno, danes pa jih lahko doloeamo po svoje.</li>
  13. 					<li>Oznaeevalni jezik HTML je že od zaeetka dobro strukturiran - oznake za glavni naslov, podnaslove, naštevanja…</li>
  14. 					<li>S prihodom npr. oznake &lt;FONT&gt; pa je bila struktura besedila, oznaeena v HTML, podrta.</li>
  15. 					<li>Problem: pri uporabi iskalnikov, ki vraeajo kupe smeti.</li>
  16. 					<li>Pomembna je loeitev oblikovanja od vsebine.</li>
  17. 					<li>Definirajo, kako se prikazujejo HTML elementi.</li>
  18. 					<li>Primeri na strani: <a href="http://www.w3schools.com/css/demo_default.htm">http://www.w3schools.com/css/demo_default.htm</a></li>
  19. 				</ul>
  20. 			</p>
  21. 		</div>
  22. 		<div class="par">
  23. 			<p>
  24. 				<h2>Prednosti slogov</h2>
  25. 				<ul>
  26. 					<li>jasno loeevanje vsebine od oblike in s tem vrnjena struktura dokumentom, kar bo olajšalo njihovo preiskovanje;</li>
  27. 					<li>enostavnejše prilagajanje oblike - celotno predstavitev je mogoee preoblikovati do nerazpoznavnosti v nekaj minutah;</li>
  28. 					<li>manjše datoteke z besedilom in s tem izboljšana hitrost prenosa ter s tem tudi prikaza; precej novih možnosti pri postavitvi strani;</li>
  29. 					<li>možnost razlienega oblikovanja za razliene izhodne naprave, npr. barvni zaslon, zaslon mobilnega telefona, tiskalnik;</li>
  30. 				</ul>
  31. 			</p>
  32. 		</div>
  33. 		<div class="nepar">
  34. 			<p>
  35. 				<h2>Sintaksa</h2>
  36. 				<b>selektor</b> - element/znaeka, ki jo želiš definirati<br />
  37. 				<b>lastnost</b> - atribut, ki ga želiš spremeniti<br />
  38. 				<b>vrednost</b><br />
  39. 			</p>
  40. 		</div>
  41. 		<div class="par">
  42. 			<p>selektor {<br>
  43. 			&nbsp;&nbsp;&nbsp;&nbsp;lastnost: vrednost<br>
  44. 			}</p>
  45. 		</div>
  46. </body>
  47. </html>

Datoteka vaja.css: 
  1. body {
  2. 	background-color: #CCCCCC; /* zakaj mormo podajat barvo ozadja, ee moramo vstaviti sliko za ozadje */
  3. 	background-image: url('paper.gif');
  4. }
  5.  
  6. h1 {
  7. 	font-size: 40pt;
  8. 	color: blue;
  9. }
  10.  
  11. h2 {
  12. 	font-size: 16pt;
  13. 	color: green;
  14. }
  15.  
  16. div {
  17. 	background-color: yellow;
  18. 	padding-left: 50px; /* za celotno znaeko margin-left: 50px; */
  19. 	border: 1px solid #000000;
  20. 	margin-bottom: 10px;
  21. 	/*font-size: 10pt;
  22. 	font-family: courier;*/
  23. }
  24.  
  25. ul {
  26. 	list-style: square;
  27. }
  28.  
  29. a:link {
  30. 	color: red;
  31. }
  32.  
  33. a:hover {
  34. 	color: blue;
  35. }
  36.  
  37. div.par {
  38. 	font-size: 15pt;
  39. 	font-family: arial;
  40. 	background-color: #CCCCCC;
  41. }
  42.  
  43. div.nepar {
  44. 	font-size: 10pt;
  45. 	font-family: courier;
  46. 	background-color: #00FFFF;
  47. }

Datoteka paper.gif: