zxz 13.02.2015 13:55
Predmet:CSS Primjeri

Ovdje ce biti prestavljeni prosti primjeri kako se nesto odradjuje pomocu css.

Sve mozete isprobati ako iskopirate kod u napr. Notepad i date mu ime napr. proba.html. ili mojcss.htm i pokrenete ga poslije u svobe Browseru.

zxz 13.02.2015 14:04
Predmet:Boja i poravnanje teksta

PreuzmiIzvorni kôd (HTML):
  4. p {
  5.     text-align: center;
  6.     color: red;
  7. }
  9. <TITLE>Boja i poravnanje teksta</TITLE>
  10. </HEAD>
  12.  <p>Posto je klasa oznacena sa p u ovom se vidi efekat</p>
  13. Ovo je tekst bez stila
  14. </BODY>
  15. </HTML>

zxz 13.02.2015 14:09
Predmet:Boja pozadine

Primjer odredjivanja boje pozadine.
PreuzmiIzvorni kôd (HTML):
  4. body {
  5.     background-color: C0C0C0;
  6. }
  8. <TITLE>Boja pozadine</TITLE>
  9. </HEAD>
  11.  <h1>Ovo je promijenjena boja pozadine</h1>
  12. </BODY>
  13. </HTML>

zxz 13.02.2015 14:22
Predmet:Boja teksta

PreuzmiIzvorni kôd (HTML):
  4. body {
  5.     color: red; //Boja teksta bez taga
  6. }
  7. h1 {
  8.     color: #00ff00;//Boja teksta sqa tagom h1
  9. }
  11. <TITLE>Boja teksta</TITLE>
  12. </HEAD>
  14.  <h1>Boja teksta sa ha tagom</h1>
  15. Boja teksta bez taga
  16. </BODY>
  17. </HTML>

zxz 13.02.2015 14:35
Predmet:Boja pozadine teksta

Ovo je primjer kako se moze odrediti boja pozadine samog teksta.
U predhodna dva slucaja je odredjivana boja teksta i boja pozadine stranice.
PreuzmiIzvorni kôd (HTML):
  4. h1 {
  5.     background-color: #FFFF00;
  6. }
  7.  
  8. p {
  9.     background-color: #C0DCC0;
  10. }
  11.  
  12. div {
  13.     background-color: #FAAFFF;
  14. }
  16. <TITLE>Boja teksta</TITLE>
  17. </HEAD>
  19.  <h1>Boja teksta sa ha tagom h1</h1>
  20. <div>
  21. <p>Boja teksta sa tagom p</p>
  22. E ovo je sa div znaci sve od p pa na dalje</div>
  23. <br>
  24. <div>ovo je div samo za ovaj tekst</>
  25. </BODY>
  26. </HTML>

zxz 15.02.2015 10:45
Predmet:Vrste i oblici slova

Ovo je primjer kako se mogu mijenjati oblici slova fontova.
Vise o fonts-family mozete naci na ovoj strnici.
PreuzmiIzvorni kôd (HTML):
  5. p.prvifont {
  6.     font-family:  "Gill Sans Extrabold", Helvetica, sans-serif;
  7. }
  8.  
  9. p.drugifont {
  10.     font-family: Courier, "Lucida Console", monospace;
  11. }
  13. </head>
  15.  
  16. <p class="prvifont">Ovo je prvi font Gill Sans Extrabold", Helvetica, sans-serif</p>
  17. <p class="drugifont">Ovo je drugi font  Courier, "Lucida Console", monospace</p>
  18. </BODY>
  19. </HTML>

zxz 15.02.2015 10:58
Predmet:Link na stranicu

PreuzmiIzvorni kôd (HTML):
  5. /* Kada nije psjeceno */
  6. a:link {
  7.     color: #000000;
  8. }
  9.  
  10. /* Kada je posjeceno */
  11. a:visited {
  12.     color: #808080;
  13. }
  14.  
  15. /* kada se predje misem */
  16. a:hover {
  17.     color: #0000FF;
  18. }
  19.  
  20. /* kada pritisnete misa */
  21. a:active {
  22.     color: #C0DCC0;
  23. }
  25. </head>
  27. <a href="http://www.icentar.ba/" target="_blank">Ovo je moj link</a>
  28. </BODY>
  29. </HTML>

zxz 15.02.2015 11:20
Predmet:Link pozadina teksta

Jos jedan primjer za link sa izmjenom pozadine teksta.
PreuzmiIzvorni kôd (Visual Basic):
  1. <HTML>
  2. <head>
  3. <style>
  4. a:link {
  5.     background-color: #C0DCC0;
  6. }
  7.  
  8. a:visited {
  9.     background-color: #ECE9D8;
  10. }
  11.  
  12. a:hover {
  13.     background-color: #FFFF00;
  14. }
  15.  
  16. a:active {
  17.     background-color: #A6CAF0;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <a href="http://www.icentar.ba/" target="_blank">Ovo je moj link</a>
  23. </BODY>
  24. </HTML>

zxz 16.02.2015 10:38
Predmet:Tipovi listanja

PreuzmiIzvorni kôd (HTML):
  4. ul.a {
  5.     list-style-type: circle;
  6. }
  7.  
  8. ul.b {
  9.     list-style-type: square;
  10. }
  11.  
  12. ul.c {
  13.     list-style-type: upper-roman;
  14. }
  15.  
  16. ul.d {
  17.     list-style-type: lower-alpha;
  18. }
  20. </head>
  21. <TITLE>List</TITLE>
  22. </HEAD>
  24. <p>Nacin listanja sa ul</p>
  25. <ul class="a">
  26.   <li>Ulje</li>
  27.   <li>Caj</li>
  28.   <li>Kafa</li>
  29.   <li>Secer</li>
  30. </ul>
  31.  
  32. <ul class="b">
  33.   <li>Kafa</li>
  34.   <li>Caj</li>
  35.   <li>Secer</li>
  36.   <li>Ulje</li>
  37.  </ul>
  38. <ul class="c">
  39.   <li>Mlijeko</li>
  40.   <li>Sir</li>
  41.   <li>Kajmak</li>
  42.  </ul>
  43. <ul class="d">
  44.   <li>Mlijeko</li>
  45.   <li>Caj</li>
  46.   <li>Ulje</li>
  47. </ul>
  48. </BODY>
  49. </HTML>

zxz 17.02.2015 11:03
Predmet:Tabela primjer

PreuzmiIzvorni kôd (HTML):
  4. table, th, td {
  5.     border: 1px solid reed;
  6. }
  8. <TITLE>Tabela</TITLE>
  9. </HEAD>
  11.  <table>
  12.   <tr>
  13.     <th>Naziv</th>
  14.     <th>Kolicina</th>
  15.     <th>Cijena</th>
  16.   </tr>
  17.   <tr>
  18.     <td>Luk bijeli</td>
  19.     <td>12</td>
  20.     <td>125</td>
  21.   </tr>
  22.   <tr>
  23.     <td>Maslac</td>
  24.     <td>25</td>
  25.     <td>225</td>
  26.   </tr>
  28. </BODY>
  29. </HTML>