2 CSS PDF

Testiranje softvera
CSS
CSS
CSS je akronim za Cascading Style Sheets
• CSS je skup spe ifika ija pra ila koje o oguća aju kontrolu nad
prikazom elemenata web strane
• Pra ilo u utar stila je i struka ija za formatiranje ili pozicioniranje
CSS
Dodavanje CSS stilova na web stranu
• Postoji tri osnovna ači a dodavanja stilova web
strani:
1. Ubacivanje style sheet-a (formatiranje na nivou strane) tj. <style></style>
elementa unutar head dela web strane
2. Dodavanje linka na eksterni style sheet tzv. globalno formatiranje
3. Dodavanje inline stilova tj. formatiranje za konkretan HTML element
CSS
1. Ubacivanje stila (interni stylesheet)
<head runat="server">
<title> Interni stylesheet</title>
<style type="text/css">
h2 {
font-size: 24px;
}
.red {
color: red;
}
#alert {
background-color: red;
color: white;
}
</style>
</head>
CSS
2. Dodavanje linka na eksterni css fajl
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" />
</head>
CSS
3. Dodavanje inline stilova
Stil se pri e juje a određe i HTML ele e t
Naj eći prioritet i a i li e, zati for atira je a i ou stra e i a
kraju dolazi globalno formatiranje
<p style="border-style: solid; background-color: #FFFF00; color:#0000FF;">

Ovo je prvi paragraph
</p>
CSS
• CSS sintaksa
CSS o ez eđuje standardni ači koji opisuje kako će browser prikazati
sadržaj na web strani
Po oću css selektora se defi iše element ili grupa elemenata na koje se
primenjuje pravilo
• Svako css pravilo ima istu osnovnu sintaksu:
selector {
property1:value;
property2:value;
...
propertyN:value;
}
CSS
• Vrste selektora
• Selektori elemenata
• Npr h2{} selektor raća s e h2 ele e te a stra i
• Selektori klase
• Selektor . ojaKlasa{} raća s e ele e te čiji je atri ut class postavljen na
vrednost mojaKlasa
• Selektor klase ože vratiti elemente različitog tipa
• ID selektori
• ID selektor #trazeniID{} raća element na strani čiji je atribut ID jednak
vrednosti trazeniID
CSS
<head>
<title></title>
<meta charset="utf-8" />
<style>
/*formatiranje h1 naslova*/
h1 {
font-size: 42px;
color:green;
font-family:'Segoe UI'
}
/* Naglaseni tekst je iskoseni tekst na plavoj pozadini */
em {
background-color:royalblue;
font-style: italic;
}
</style>
</head>
<body>
<h1>CSS formatiranje</h1>
<em>css selektori</em>
</body>
CSS
h2 {
background-color: silver;
color:red;
}
h3 {
color: silver;
}
</style>
CSS
• Selektori klase
Selektor klase .kl selektuje sve elemente na strani sa atrubutom class
jed aki kl
Može se spe ifi irati da će se klasa pri e iti sa o a određe e ht l
elemente
p.kl selektor se odnosi na sve paragrafe sa klasom kl
Ele e t ože refere irati iše od jed e klase
CSS
<head>
<style>
.kl1 {
background-color:lightgreen;
}
p.kl2{
color:red;
}
</style>
</head>
<body>
<p class="kl1">
Prvi paragraf
</p>
<p class="kl2">
Drugi paragraf
</p>
<p class="kl1 kl2">
Treci paragraf
</p>
</body>
CSS
• ID selektori
Selector #glavni selektuje element sa atributom id jednakim vrednosti glavni.
<head>
<style>
#glavni {
color: red;
}
</style>
</head>
<body>
<div id="glavni">
Ovo je glavni odeljak strane
</div>
</body>
CSS
• Grupisanje selektora
h1 { h1,h2,p{
color:green; color:green;
}
}
h2 {
color:green;
}
p {
color:green;
}
CSS
• Selektovanje potomaka
<html>
<head>
<style>
div p {
background-color: lightgreen;
}
</style>
</head>
<body>
<div>
<p>Paragraf 1 u divu</p>
<div>
</div>
</div>
<p>Paragraf 4 van diva</p>
</body>
</html>
CSS
• Selektovanje direktnog potomaka
<html>
<head>
<style>
div.d1 > p {
}
</style>
</head>
<body>
<div class="d1">
<div>
</div>
</div>
</body>
</html>
CSS
• Selektovanje susednog brata
h1+p {
color:red;
}
/*selektovanje svakog paragrafa koji sledi neposredno
nakon h1 taga, h1 i p moraju imati istog roditelja*/
<body>
<div>
<h1>prvi h1</h1>
<p>prvi paragraf</p>
<p>drugi paragraf</p>
<h1>drugi h1</h1>
<p>treci paragraf</p>
</div>
</body>
CSS
• Selektor bilo kog brata
<head>
<style>
/*sva braca h1 elementa*/
h1 ~ p {
color: red;
}
</style>
</head>
<body>
<div>
<h1>prvi h1</h1>
<p>prvi paragraf</p>
<p>drugi paragraf</p>
<h1>drugi h1</h1>
<p>treci paragraf</p>
</div>
</body>
CSS
• Univerzalni selector
<head>
<style>
div * {
}
</style>
</head>
<body>
<div>
<p>Prvi paragraf</p>
<span>Prvi span</span>
</div>
</body>
CSS
Selektori atributa
• Selektor input[type] selektuje sve elemente koji imaju type atribut
nezavisno od njegove vrdnosti
• Selektor input[type="text"] selektuje tekst polja
• Selektor i put[type="pass ord"] – selektuje password polja
• Selektor i put[type=" u er"] – selektuje u erička polka
CSS
• Selektovanje text polja
<style>
label{
display:block;
}
input[type=text] {
width: 100%;
padding: 5px;
margin: 10px 0;
box-sizing: border-box;
}
</style>
CSS
• Forma
<body>
<form>
<fieldset>
<legend>Podaci o korisniku</legend>
<label for="TextIme">Unesite ime</label>
<input id="TextIme" type="text" name="Ime" /><br />
<label for="TextPrezime">Unesite prezime</label>
<input id="TextPrezime" type="text" name="Prezime" /> <br />
<input id="Submit1" type="submit" value="Posalji" />
</fieldset>
</form>
</body>
CSS
• Stilizovanje text polja
<style>
input[type=text] {
border: 2px solid blue;
border-radius: 4px;
width: 100%;
margin: 10px 0;
padding: 10px;
background-color: #bdb9b9;
color: white;
}
input[type=text]:focus {
background-color: lightblue;
}
</style>
CSS
• Formatiranje teksta
Familije fontova
• Sans-serif (uglavnom za naslove)
– Arial, Helvetica, Verdana
• Serif fo t koriste se za velike paragrafe)
– Times, Times New Roman, Georgia
• Mo ospa ed fo t za prikaz kompjuterskog koda)
– Courier New, Lucida Console
CSS
• Svojstvo font-family
<style>
.f1{
font-family:Arial, Helvetica, sans-serif;
}
.f2{
font-family:'Times New Roman', Times, serif;
}
.f3{
font-family:Courier New, Courier, monospace;
}
</style>
CSS
• Prikaz fontova
<body>
<p class="f1">Arial je sans-serif
font koji se siroko koristi.</p>
<p class="f2">
Times New Roman je serif font.
On je podrazumevani font vecine browsera.
</p>
<p class="f3">Courier New font se koristi za primere koda.</p>
<p>Podrazumevani font</p>
</body>
CSS
• Primer upotrebe Google fontova
<head>
<title></title>
<meta charset="utf-8" />
<link href='https://fonts.googleapis.com/css?family=EB+Garamond&subset=latin,latin-ext'
rel='stylesheet' type='text/css'>
<style>
p{
font-size:30px;
}
.p1 {
font-family: 'EB Garamond';
}
</style>
</head>
<body>
<p class="p1">
google fontovi
</p>
<p>google fontovi</p>
</body>
CSS
• Svojstvo font-size
.fs1 {
font-size:16px;
}
.fs2 {
font-size:150%;/*Velicina fonta parent elementa * 150 % */
}
.fs3 {
font-size:1em; /*Osnovna velicina fonta strane obicno 16px*/
}
CSS
• Prikaz fontova
<body>
<p class="fs1">Prvi paragraf 16 px</p>
<p class="fs2">Drugi paragraf 150 %</p>
<p class="fs3">Treci paragraf 1em</p>
<p>Podrazumevana velicina fonta</p>
</body>
CSS
• font-style svojstvo
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Font-Style</title>
p.n {
font-style: normal;
}
p.i {
font-style: italic;
}
</style>
</head>
<body>
<p class="n">Ovo je normalan tekst</p>
<p class="i">Ovo je iskoseni tekst</p>
</body>
</html>
CSS
• font-weight svojtsvo
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
p.normal {
font-weight:normal;
}
p.bold {
font-weight:bold;
}
</style>
</head>
<body>
<p class="normal">Normalni tekst</p>
<p class="bold"> Boldovani tekst</p>
</body>
</html>
CSS
• Heksadecimalna predstava boja
<style>
<body>
.crvena {
<h2>HEX Color </h2>
background-color: #ff0000; <h2 class="crvena">
} #FF0000
.zelena { </h2>
background-color: #00ff00; <h2 class="zelena">
} #00FF00
.plava { </h2>
background-color: #0000ff; <h2 class="plava">
#0000FF
}
</h2>
</style> </body>
CSS
• Korišće je validnih imena boja
<style>
.crvena{
background-color:red;
}
.zelena {
background-color:green;
}
.plava {
background-color:blue;
}
</style>
CSS
• Definisanje prozrač osti teksta
• opacity:1; /*neprozračan tekst*/
• opacity:0; /*nevidljiv tekst*/
• opacity:0.5; /*srednje proziranan tekst*/
<style>
.p1{
color:red;
opacity:0.5;
}
.p2{
color:red;
opacity:0;
}
</style>
CSS
• Defi isa je raz aka iz eđu slova i iz eđu reči
<head>
<title>Letter spacing</title>
.p1 {
letter-spacing: 10px;
}
.p2 {
word-spacing: 2em;
}
</style>
</head>
<body>
<p class="p1">Prosiren je razmak izmedju slova</p>
<p class="p2">Prosiren je razmak izmedju reci</p>
</body>
CSS
• Definisanje razmaka iz eđu linija
p.visina1 {
line-height: 2em;
}
</style>
CSS
• Uvlače je teksta
.p1 {
text-indent: 2em;
}
</style>
CSS
• Ravnjanje teksta
.levo {
text-align: left;
}
.centrirano {
text-align: center;
}
.desno {
text-align: right;
}
</style>
CSS
Css pozicioniranje
CSS Box model
• Box model tretira html elemenat kao kolekciju od 4 ko e trič a
pravougaonika koji prdstavljaju: sadržaj, padding, granice i margine
elementa
CSS
• CSS Box model
Svojstva height i width defi išu visinu i širi u sadržaja elementa u
pikselima
• Širi a i visina padding pravougonika defi išu se svojstvom padding
• Border pravougaonik defi iše se svojstvom border kojim se setuje
širi a pravougaonika, boja i stil
• S ojst a paddi g i order su slože a s ojst a
CSS
Svojstvo padding
.pad {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
Svojstvo border
• Svojstva border-width, border-style i border-color su takođe slože a svojstva i koriste se kada su sve 4 vrednosti odgo arajućeg
pravougaonika jednake
.bor{
border-width: 2px;
border-style: dotted;
border-color: blue;
}
.b1 {
border-left-style: dotted;
border-left-width: 2px;
}
CSS
Definisanje box-a
<style>
body{
background-color:#808080;
margin-top:0px;
}
.c1 {
background-color:red;
height: 100px;
width: 500px;
padding: 10px;
border: 2px solid blue;
margin: 50px 10px 25px 20px; /* gornja desna donja leva */
}
</style>
CSS
Zauzet prostor od strane elementa
<style>
.p1 {
width: 250px;
padding: 10px;
border: 5px solid #455D9C;
margin: 10px;
}
</style>
250px (sirina)
+ 20px (levi i desni padding)
+ 10px (levi i desni border)
+ 20px (leva i desna margin)
= 300px
CSS
Svojstvo position
Elementi su pozicionirani na strani korišće je normalnog toka
(normal flow)
• Blok elementi se pozicioniraju odozgo na dole, a inline elementi s leva na
des o jer o i e poči ju u o oj li iji
• Svojstvo position ože imati sledeće vrednosti:
– static - isto kao i normalni tok
– relative - offset u odnosu na normal flow
– absolute - pozicioniranje u odnosu na gornji levi ugao kontejnerskog elementa
– fixed - pozicioniranje u odnosu na gornji levi ugao browsera, ne menja
se pozicija pri skrolovanju
CSS
Normalni tok
<style>
p {
border: 2px solid black;
padding: 5px;
width: 200px;
height: 100px;
background-color: #5F90DA;
}
</style>
<body>
<p>Drugi paragraf</p>
<p>Treci paragraf</p>
</body>
CSS
Relativno pozicioniranje
p.relativno {
position: relative;
left: 60px; /*60 px na desno*/
top: 30px; /*30 px na dole */
}
<body>
<p class="relativno">Drugi paragraf</p>
</body>
CSS
Apslolutno pozicioniranje
#main {
position: absolute;
left: 50px;
top: 100px;
padding: 20px;
}
<body>
<div id="main">
<p class="relativno">Drugi paragraf</p>
</div>
</body>
CSS
Fiksno pozicioniranje
<head>
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #0094ff;
background-color:aqua;
}
</style>
</head>
<body>
<p>Lipsum..</p>
<div class="fixed">
Ovo je fiksirani odeljak
</div>
</body>
CSS
Svojstvo float
• Svojstvo float "vadi" element iz normalnog toka i s ešta ga le o ili des o u od osu a ko tej erski ele e t ukoliko je oguće
<style>
p { <body>
width: 200px; <p class="red">Ovo je prvi paragraf</p>
height: 100px; <p class="blue">Ovo je drugi paragraf</p>
float: left; </body>
padding: 10px;
margin-right: 5px;
}
p.red {
}
p.blue {
background-color: blue;
}
</style>
CSS
Svojstvo clear
Svojstvo clear ože imati vrednosti:
– left, elemenat sa svojstvom clear:left; ne ože imati floating elemente sa
svoje leve strane
– right, elemenat sa svojstvom clear:right; ne ože imati floating elemente sa
svoje desne strane
– both, elemenat sa svojstvom clear:both; ne ože imati floating elemente niti
sa leve niti sa svoje desne strane
– none, dozvoljava se floating
CSS
Svojstvo clear
p.green {
background-color: green;
clear: left;
}
<body>
<p class="red">Ovo je prvi paragraf</p>
<p class="blue">Ovo je drugi paragraf</p>
<p class="green">Ovo je treci paragraf</p>
</body>
CSS
Odnos teksta i slike
<body>
<p>Lipsum...</p>
<img width="120" src="Slike/jabuka.jpg" />
<p>Lipsum...</p>
</body>
CSS
float left
<head>
<style>
.slika {
float: left;
width: 110px;
height: 90px;
margin: 5px;
}
</style>
</head>
<body>
<p></p>
<img class="slika"
src="Slike/jabuka.jpg" />
<p></p>
</body>
CSS
float:right
<head>
<style>
.slika {
float: right;
width: 110px;
height: 90px;
margin: 5px;
}
p{
text-align:justify;
}
</style>
</head>
CSS
clear svojstvo
<style>
.slika {
float: right;
width: 110px;
height: 90px;
margin: 5px;
}
p{
clear:right;
}
</style>
CSS
• ZADATAK 1
• Koristeći CSS
apra iti statički
website
CSS
CSS
CSS

2 CSS PDF

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

2 CSS PDF

Uploaded by

Copyright:

Available Formats

Testiranje softvera

<p style="border-style: solid; background-color: #FFFF00; color:#0000FF;">

You might also like