Professional Documents
Culture Documents
CSS Zadaci5417629722730817061 PDF
CSS Zadaci5417629722730817061 PDF
Uploaded by
AjlaCopyright:
Available Formats
You might also like
- CSS: Guida Completa allo Sviluppo di Fogli di Stile per Web Design e la Creazione di Siti Internet. Contiene Esempi di Codice ed Esercizi PraticiFrom EverandCSS: Guida Completa allo Sviluppo di Fogli di Stile per Web Design e la Creazione di Siti Internet. Contiene Esempi di Codice ed Esercizi PraticiNo ratings yet
CSS Zadaci5417629722730817061 PDF
CSS Zadaci5417629722730817061 PDF
Uploaded by
AjlaOriginal Title
Copyright
Available Formats
Share this document
Did you find this document useful?
Is this content inappropriate?
Report this DocumentCopyright:
Available Formats
CSS Zadaci5417629722730817061 PDF
CSS Zadaci5417629722730817061 PDF
Uploaded by
AjlaCopyright:
Available Formats
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>
<title>Zadatak 2</title>
<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;
padding: inherit;}
p {
background-color: white;
color: rgb(100,100,90);
padding: inherit;}
</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>
<title>Zadatak 3</title>
<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>
<title>Zadatak 6</title>
<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
You might also like
- CSS: Guida Completa allo Sviluppo di Fogli di Stile per Web Design e la Creazione di Siti Internet. Contiene Esempi di Codice ed Esercizi PraticiFrom EverandCSS: Guida Completa allo Sviluppo di Fogli di Stile per Web Design e la Creazione di Siti Internet. Contiene Esempi di Codice ed Esercizi PraticiNo ratings yet