CSS Zadaci

Tema CSS
CSS zadaci
dr Nebojša Bačanin Džakula

nbacanin@singidunum.ac.rs
Fakultet za informatiku i računarstvo, Univerzitet Singidunum
Veb platforme
2019/20
ZADATAK 1
 Napraviti CSS style sa selektorima body, h1 , h2, p. U selektoru

body navesti da razmak teksta od ivica sekcija kao I razmak
između sekcija na stranici bude 20px, 3 tipa familije font -a
Arial, Verdana, sans -serif. Boja teksta h1 treba da bude
DarkCyan, hex kod boja teksta za h2 #ee3e80 i definisati sivu
boju teksta za p sa rgb vrednostima. Testirati style sa
navedenim selektorima.
REŠENJE ZADATAK 1
 <html>
 <head>
 <title>Zadatak 1</title>
 <style>
 body {
 padding: 20px;
 fo n t - f a m i l y : A r i a l , Ve r d a n a , s a n s - s e r i f ; }
 /* color name */
 h1 {
 c o l o r : D a r k C ya n ; }
 /* hex code */
 h2 {
 color: #ee3e80;}
 /* rgb value */
 p {
 c o l o r : r g b ( 10 0 , 1 0 0 , 1 0 0 ) ; }
 </style>
 </head>
 <body>
 < h 1 > H 1 n a s l ov < / h 1 >
 < h 2 > H 2 n a s l ov < / h 2 >
 < p > Te k s t u p a r a g r a f u < / p >
 </body>
 </html>
REŠENJE ZADATAK 1
ZADATAK 2
 Napraviti CSS style sa selektorima body, h1 , h2, p. U body

selektoru navesti da boja pozadine stranice bude siva
(definisana sa rgb), boja fonta bela, razmak teksta od ivica
sekcija kao I razmak između sekcija na stranici bude 20px,
familija fontova Arial, Verdana, sans -serif. Za selektore
h1 ,h2,p treba da se razlikuje boja pozadine. H1 boja
DarkCyan, h2 hex kod #ee3e80, p boja svetlija nijansa sive.
Za svaki selektor treba primeniti opciju nasleđivanja razmaka
sekcija. Testirati style sa navedenim selektorima.
REŠENJE ZADATAK 2
 <html>
 <head>
 <style>
 body {
 background-color: rgb(200,200,200);
 color: white;
 padding: 20px;
 font-family: Arial, Verdana, sans -serif;}
 h1 {
 background-color: DarkCyan;
 padding: inherit;}
 h2 {
 background-color: #ee3e80;
 p {
 background-color: white;
 color: rgb(100,100,90);
 </style>
 </head>
 <body>
 <h1>Naslov 1</h1>
 <h2>Naslov 2</h2>
 <p>Tekst u paragrafu</p>
 </body>
 </html>
REŠENJE ZADATAK 2
ZADATAK 3
 Napraviti CSS style

sa selektorima body,
div i p kao na Slici.
 Širina i visina div
tag-a 300x300px, p
tag-a 200x200px.
REŠENJE ZADATKA 3
 <html>
 <head>
 <style>
 body {
 font: sans-serif;
 font-size: 20;
 color: black;
 background-color:green;}
 div {
 width: 300px;
 height: 300px;
 background-color: red;}
 p {
 height: 200px;
 width: 200px;
 background-color: grey;}
 </style>
 </head>
 <body>
 <div>
 <p>Div tag se koristi da definise sekcije u html
 dokumentu i da grupise blok elemente formatirajuci ih sa CSS-om.</p>

 </div>
 </body>
 </html>
ZADATAK 4
• Napraviti html stranicu kao na

slici koristeći border-style atribut.
REŠENJE ZADATKA 4
 <html>  <body>
 <head>  <p class="one">Wurlitzer
 <style> Electric Piano</p>
 body {font-family: Arial, Verdana, sans-serif;  <p class="two">Wurlitzer
 color: black;} Electric Piano</p>
 p {width: 250px;  <p class="three">Wurlitzer
 border-width: 3px;} Electric Piano</p>
 p.one {border-style: solid;}  <p class="four">Wurlitzer
Electric Piano</p>
 p.two {border-style: dotted;}
 <p class="five">Wurlitzer
 p.three {border-style: dashed;} Electric Piano</p>
 p.four {border-style: double;}  <p class="six">Wurlitzer
p.five {border-style: groove;} Electric Piano</p>
 p.six {border-style: ridge;}  <p class="seven">Wurlitzer
 p.seven {border-style: inset;} Electric Piano</p>
 p.eight {border-style: outset;}  <p class="eight">Wurlitzer
 </style> Electric Piano</p>
 </head> </body>
 </html>
ZADATAK 5
 Ivica polja 2px, solid,

crvena boja; razmak između
polja 1 i 3, 2 i 4 15px;
razmak između 1 i 2, 3 i 4
5px; razmak u polju od ivice
15px
 Ivica polja 2px, solid,
crvena boja, razmak u polju
od ivice 15px
REŠENJE ZADATKA 5
 <body>
 <html>  <table class="one">
 <tr>
 <head> 
<td>1</td>
 < t i t le > Z a d a t a k 5 < / t i t l e > 
<td>2</td>
 <style>  </tr>
 <tr>
 td { 
<td>3</td>
 
b a c k g r o un d - c o l o r : b l u e; <td>4</td>
 </tr>
  </table>

padding: 15px;  <table class="two">
 <tr>
 
border: 2px solid red;} 
<td>1</td>
<td>2</td>
 t a b l e .o n e {  </tr>
  <tr>

border-spacing: 5px 15px;} <td>3</td>

 t a b l e .t wo { <td>4</td>
 </tr>
 c o l o r : w h i te }  </table>
 </body>
 </style>  </html>
 </head>
ZADATAK 6
REŠENJE ZADATKA 6
 <html>
 <head>
 <style>
 img.large {
 width: 500px;
 height: 500px;}
 img.medium {
 width: 250px;
 height: 250px;}
 img.small {
 w i d t h : 10 0 p x ;
 h e i g h t : 10 0 p x ; }
 </style>
 </head>
 <body>
 <img src="images/magnolia -large.jpg" class="large" alt="Magnolia" />
 <img src="images/magnolia-medium.jpg" class="medium"
alt="Magnolia" />
 <img src="images/magnolia -small.jpg" class="small" alt="Magnolia" />
 </body>
 </html>
Tema CSS
CSS zadaci
HVALA NA PAŽNJI
dr Nebojša Bačanin Džakula
nbacanin@singidunum.ac.rs
Fakultet za informatiku i računarstvo, Univerzitet Singidunum
Veb platforme
2019/20

CSS Zadaci

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

CSS Zadaci

Caricato da

Copyright:

Formati disponibili

Tema CSS

dr Nebojša Bačanin Džakula

 Napraviti CSS style sa selektorima body, h1 , h2, p. U selektoru

 Napraviti CSS style sa selektorima body, h1 , h2, p. U body

 Napraviti CSS style

 dokumentu i da grupise blok elemente formatirajuci ih sa CSS-om.</p>

• Napraviti html stranicu kao na

 Ivica polja 2px, solid,

Potrebbero piacerti anche