Css E28093 Kaskadni Stilovi

CSS – kaskadni
stilovi
Milena Kostadinović
CSS
• Kada se kreira sajt treba se pridržavati dobre prakse
da se dizajn odvoji od sadržaja.
• HTML opisuje logičku strukturu, a CSS opisuje dizajn

tj. vizuelnu prezentaciju elemenata.
• Nezavisnost sadržaja od dizajna dovodi do lakšeg

kreiranja, menjanja i održavanja dizajna.
CSS
• Npr. ako želimo da svaki naslov na nekoj stranici
bude centriran, to će zahtevati da na svakom
mestu gde imamo naslov dodamo još po otvoren i
zatvoren tag. Lakši način je korišćenje CSS-a:
• Napravimo stil za svaki naslov tipa h1:

h1 {
text-align: center;
}
Deklaracija
• Kaskadnu listu stilova (CSS – Cascading Style Sheets)
čine pravila na osnovu kojih web-browser zna kako
da prikaže elemente HTML dokumenta kao što su
naslovi, paragrafi, liste itd.
• Svako pravilo je u vidu jedne ili više deklaracija.
Deklaracijomse svojstvu daje vrednost. Npr. sledi
deklaracija kojom se definiše boja pozadine bela:
background-color: white;
• Sve deklaracije koje se odnose na određeni HTML
element se navode između vitičastih zagrada i
razdvojene su tačka-zarezom.
Deklaracija
• Sledeće pravilo u sebi ima dve deklaracije –
podešavanje boje pozadine i boje slova, a odnosi
se na element BODY, tj. na telo HTML dokumenta:
body {
background-color: #C5FC5F;
}
o Ista grupa deklaracija može da se odnosi na više
elemenata:
h1,h2,h3 {
text-align: right;
}
Primer deklaracije
• Za element možete da navedete koliko god je
podešavanja potrebno:
p{
font-family: “Times New Roman”;
font-size: 14px;
border: 1px solid red; - puna takna crvena linija
outline: green dotted thick; - debela zelena isprekidana
}
Spisak primera nekih od pravila:
Spisak primera nekih od pravila:
HTML dokumenti i
kaskadna lista stilova
• Iako CSS pravila mogu da se navedu unutar HTML
dokumenta, u tagovima <style>, dobra praksa je da
se izdvoje u zaseban fajl koji se kreira uz pomoć tekst
editora i ima ekstenziju .css.
• Kada želimo da koristimo .css fajl u .html fajlu, treba
da ga uvezemo pomoću sledećeg taga:
<link href=”dizajn.css” rel=”stylesheet” type=”text/css”>
Element link se dodaje u zaglavlje HTML dokumenta na

koji želimo da se primene ova pravila prikazivanja
sadržaja.
CSS i element DIV
• Za raspored elemenata na web stranici može da se
koristi element DIV sa CSS pravilima prikaza.
• DIV elementima različitih klasa može se označiti šta
će i kako biti prikazano u gornjoj ili donjoj margini, u
centralnom, levom ili desnom delu stranice.
• Sledi primer u kom se koristi DIV element.

Primer upotrebe DIV
elementa
• Fajl u kom je stil:
div.levo {
width:150px;
float:left;
}
div.desno {
margin-left:150px;
float:left:
}
Primer upotrebe DIV
elementa
• HTML fajl:
<html>
<head>
<title>
Studenica
</title>
<link href="stil.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="levo">
<ol>
<li> Bogorodicina crkva
<li> Kraljeva crkva
<li>Crkva Sv. Nikole
</ol>
</div>
<div class="desno">
<iframe width="560" height="315" src="https://www.youtube.com/embed/baGPYqg8AVY"
frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
</body>

Css E28093 Kaskadni Stilovi

Uploaded by

Copyright:

Available Formats

You might also like

Css E28093 Kaskadni Stilovi

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css E28093 Kaskadni Stilovi

Uploaded by

Copyright:

Available Formats

CSS – kaskadni

• HTML opisuje logičku strukturu, a CSS opisuje dizajn

• Nezavisnost sadržaja od dizajna dovodi do lakšeg

• Napravimo stil za svaki naslov tipa h1:

<link href=”dizajn.css” rel=”stylesheet” type=”text/css”>

Element link se dodaje u zaglavlje HTML dokumenta na

• Sledi primer u kom se koristi DIV element.

You might also like