Scribd
Upload
63 views11 pages

Css Vezbe

Uploaded by

Snežana Vujić
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
63 views11 pages

Css Vezbe

Uploaded by

Snežana Vujić
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 11

CSS

Sintaksa p
{
selector {property: value}
text-align: center;
body {color: black}
/* This is another comment */
p {font-family: "sans serif"}
color: black;
p {text-align:center;color:red}
font-family: arial
p
{ primer3.css
text-align: center; p.right
color: black; {
font-family: arial text-align: right;
} font-variant: small-caps
}
Grupisanje p.center
h1,h2,h3,h4,h5,h6 {
{
color: green
text-align: center;
} font-style: italic /*normal, oblique*/
}
Class Selector .left {
p.right {text-align: right} text-align: left;
p.center {text-align: center} letter-spacing: -3px /*0.5cm*/
}
<p class="right">
This paragraph will be right-aligned. primer3.html
</p>
<p class="center">
<html>
This paragraph will be center-aligned. <head>
</p> <link rel="stylesheet" type="text/css"
href="primer3.css" />
<p class="right" class="center"> </head>
This is a paragraph. <body>
</p>
<p class="right">
.center {text-align: center}
This paragraph will be right-aligned.
</p>
<h1 class="center"> <p class="center">
This heading will be center-aligned This paragraph will be center-aligned.
</h1> </p>
<p class="center"> <h1 class="left">
This paragraph will also be center-aligned.
This heading will be left-aligned
</p>
</h1>
Komentari </body>
</html>
/* This is a comment */
Box model

Primeri

primer4.htm
<html>
<head>
<link rel="stylesheet" type="text/css" href="primer4.css">
</head>
<body>
<!-this is my document wrapper here I set the width of my web page and other things -->
<div id="wrapper">
<!--this is the section on how I found billie -->
<div class="column">
<h1>How it Started</h1>
<p>It was a warm sunny spring day in Pedro Ohio when a colleague and I
went to a local farm to ask if we could do some surveys on the <em>'crick'</em> that ran
through the back of their property. </p>
<p>The farmer who owned the land approached us with a jocular, gap-toothed
smile and asked us "do y'all like puppies?". I responded with a tentative "yyeeesss -why?"
"Well..." he said, "my girlfriend found this puppy out in the back forty, and I'm a gonna
have-ti shoot it... that is... unless you want it." I responded immediately with "don't shoot
the little puppy; I will come back for it at the end of the day."</p>
<p>This is the story of how I found Billie-Mae. When I went back to pick her
up she was a tiny five week old puppy, bloated with worms, covered in lice, ticks and
fleas, starving, with a puncture hole through one eyeball.</p>
</div>
<!-- this is the section on how she turned out -->
<div class="column" style="margin-left: 16px;">
<h1>How it Turned Out</h1>
<p>With time and care and a lot of flea baths, Billie's hair grew back in the
soft velour of most puppies. The local vet told me that she was a very special dog because
of her genetic history. The story in that area is one of dog over-population due to a
general lack of spaying and neutering. </p>
<p>Dogs run wild <em>-literally</em>. According to the vet, Billie-Mae is
about a sixth generation wild dog. After this period of interbreeding and feral living she
has become just like many other dogs in the world that are feral. They develop common
characteristics such as medium height, stocky chest, pointy ears and curly tail. I like to
call her my "Yankee Dingo"</p>
<p>Apart from a few allergies she has turned out to be quite healthy and
vivacious despite her rough start.</p>
</div>
</div>
</body>
</html>

primer4.css

#wrapper {width: 770px; font: 12px arial, sans-serif; margin: auto;}


.column { width: 355px; height: 400px; padding: 10px; border: 1px solid #000000; float:
left;}
.column p { font: 12px arial, sans-serif;}
.column h1 { width: 355px; font: bold 16px arial, sans-serif; color: #af0b1c; border-
bottom: 1px solid #af0b1c}
primer5.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test page</title>
<meta name="keywords" content="test, dummy, tutorial">
<meta name="description" content ="Some dummy content">
<meta name="author" content ="M&M">
<meta name="copyright" content ="Copyright © 2006 M&M">
<link rel="stylesheet" type="text/css" href="primer5.css">
</head>
<body>
<!-this is my document wrapper here I set the width of my web page and other things
-->
<div id="wrapper">

<div id="header">
<h1>Lorem Ipsum </h1>
</div>
<div id="quicknav">
<div id="quicklinks">
<ul>
<li><a href="www.slashdot.org">news</a>
<li><a href="www.slashdot.org">archive</a>
<li><a href="www.slashdot.org">contact</a>

</ul>
</div>
<div id="search">
<form action="" method="GET" cellpadding="0"
id="searchform">
<input type="text" size="12" />
<input class="button" type="submit" name="Searchbutton"
value="Find"/>
</form>
</div>

</div>

<div id="navigation">
<div class="navigationblock">
<h1>Menu</h1>
<ul>
<li><a href="#post1">Neque porro ...</a>
<li><a href="#post2">Morbi eros mauris</a>
<li><a href="#post3">Lacinia vitae</a>
</ul>
</div>
<div class="navigationblock">
<ul>
<li>First
<li>Second
<li>Third
</ul>
</div>
</div>
<!-- this is the section on how she turned out -->
<div id="main" >
<div id="post1" class="article" >
<h1>Neque porro quisquam </h1>
<p>
<img alt="Hotel Moskva" src="./images/hotel_moskva.jpg" width="132"
height="89" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam lacinia
mauris sed nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Phasellus auctor, pede eu rutrum lobortis, elit metus scelerisque
ipsum, a varius nulla nisi at diam. Sed at mauris nec mauris semper imperdiet. Phasellus
eu felis. Nullam aliquet dui vel tellus. Aliquam vestibulum posuere nisi. Morbi urna
sapien, consectetuer non, auctor at, imperdiet nec, libero. Suspendisse vitae tortor. Integer
quis mi a turpis molestie vulputate. Proin pulvinar sodales nunc. Aenean orci lacus,
iaculis vitae, rutrum eu, dignissim et, nulla.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam lacinia
mauris sed nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Phasellus auctor, pede eu rutrum lobortis, elit metus scelerisque
ipsum, a varius nulla nisi at diam. Sed at mauris nec mauris semper imperdiet. Phasellus
eu felis. Nullam aliquet dui vel tellus. Aliquam vestibulum posuere nisi. Morbi urna
sapien, consectetuer non, auctor at, imperdiet nec, libero. Suspendisse vitae tortor. Integer
quis mi a turpis molestie vulputate. Proin pulvinar sodales nunc. Aenean orci lacus,
iaculis vitae, rutrum eu, dignissim et, nulla.

</p>
<p class="articlefooter">
Marija | 15-04-06 | 10:35
</p>
</div>
<div id="post2" class="article">
<h1>Morbi eros mauris </h1>
<p>
<img alt="Confluence" src="./images/confluence.jpg" width="132"
height="89" />
Nulla quis quam facilisis sem lobortis congue. Suspendisse adipiscing elit
et diam. Maecenas gravida est nec ligula. Aenean sit amet nisi quis ligula consequat
mollis. Morbi eros mauris, lacinia vitae, volutpat sit amet, faucibus ut, quam. Etiam id
justo. Etiam mauris sem, vulputate sed, porttitor at, scelerisque ac, quam. Vivamus
fringilla. Sed sed neque. Sed pede justo, condimentum sed, rhoncus in, tempor eget, dui.
Sed felis. Etiam et erat at sem eleifend dictum. Praesent sem orci, egestas non, suscipit
quis, blandit a, neque. Maecenas scelerisque nunc at purus. Nam vitae leo at purus ornare
euismod. Nam nisl. Nam nec eros.
</p>
<p>
Nulla quis quam facilisis sem lobortis congue. Suspendisse adipiscing elit
et diam. Maecenas gravida est nec ligula. Aenean sit amet nisi quis ligula consequat
mollis. Morbi eros mauris, lacinia vitae, volutpat sit amet, faucibus ut, quam. Etiam id
justo. Etiam mauris sem, vulputate sed, porttitor at, scelerisque ac, quam. Vivamus
fringilla. Sed sed neque. Sed pede justo, condimentum sed, rhoncus in, tempor eget, dui.
Sed felis. Etiam et erat at sem eleifend dictum. Praesent sem orci, egestas non, suscipit
quis, blandit a, neque. Maecenas scelerisque nunc at purus. Nam vitae leo at purus ornare
euismod. Nam nisl. Nam nec eros.
</p>
<p class="articlefooter">
Martijn | 13-04-06 | 14:34
</p>
</div>
<div id="post3" class="article">
<h1>Lacinia vitae </h1>
<p>
<img alt="Belgrade" src="./images/belgrade.jpg" width="132"
height="89" />
Fusce massa. Nam libero. Vestibulum pellentesque quam ac risus. Nulla
tincidunt hendrerit metus. Donec vitae augue eu est aliquam fringilla. Aenean cursus pede
vel leo. Phasellus lobortis erat ullamcorper velit. Vestibulum fermentum, tortor vitae
iaculis pharetra, ligula augue adipiscing ligula, sit amet volutpat metus eros lacinia pede.
Praesent diam. Maecenas tristique sapien ac turpis. Nunc tristique, velit sit amet lobortis
semper, velit nisl porta massa, in ultricies magna massa non nulla.
</p>
<p>
Fusce massa. Nam libero. Vestibulum pellentesque quam ac risus.
Nulla tincidunt hendrerit metus. Donec vitae augue eu est aliquam fringilla. Aenean
cursus pede vel leo. Phasellus lobortis erat ullamcorper velit. Vestibulum fermentum,
tortor vitae iaculis pharetra, ligula augue adipiscing ligula, sit amet volutpat metus eros
lacinia pede. Praesent diam. Maecenas tristique sapien ac turpis. Nunc tristique, velit sit
amet lobortis semper, velit nisl porta massa, in ultricies magna massa non nulla.

</p>
<p class="articlefooter">
Martijn | 11-04-06 | 9:10
</p>
</div>
<div id="copyright">
Copyright 2006 (c) M&M - Last updated 15/4/2006
</div>

</div>
</div>

</body>
</html>

primer5.css

/*
Komentar
*/

body {
font-family: verdana, sans-serif ;
background-color: #BBBBBB;
color: #777777;
padding: 0px;
margin: 0px;
font-size: 0.8em;
background-image: url(images17.jpg);
}

a{
color: #333333;
font-weight: bold;
}

a:hover {
background-color: #777777;
color: #BBBBBB;
}

form {
margin: 0px;
padding: 0px;
}
input {
font-size: 8pt;
font-family: Verdana,Arial,Helvetica,Sans-Serif;
background-color:#BBBBBB;
}
input.button {
border: #333333 1px solid;
font-weight: bold;
font-size: 12px;
cursor: hand; /*auto,crosshair,default, pointer, move, e-resize,wait,help*/
color: #333333;
}
h1 {
font-size: 1.3em;
}

#wrapper {
width: 779px;
margin: auto;
}

#header {
background-image : url(header_boat.png);
width: 772px;
height: 163px;
float: top;
color: #444444;
text-align: left;
padding-left: 5px;
}

#header h1 {
font-size: 2em;

#quicknav {
width: 777px;
height: 30px;
background-color: #444444;
color: #111111;
border: 1px solid #222222;
}

#quicklinks {
width: 500px;
float: left;
padding: 4px;
text-align: center
}
#quicklinks a {
color: #DDDDDD;
}

#quicklinks a:hover {
background-color: #DDDDDD;
color: #BBBBBB;
}
#quicklinks ul {
padding: 0px;
margin: 0px;

}
#quicklinks li {
display: inline;
}

#search {
width: 170px;
padding: 4px;
float : right;
}

#navigation {
width: 225px;
float: right;

#main {

width: 535px;

float: left;
background-color: #dddddd;

border-bottom: #999999 1px solid;


border-left: #999999 1px solid;
border-right: #999999 1px solid;
border-top: #999999 0px solid;

padding: 5px;

#copyright {
text-align: center;
color: #999999;
font-size: 0.8em;
}
.article {
margin-bottom: 10px;
background-color: #ffffff;
border: #999999 1px solid;
padding: 15px;
text-align: justify;
text-indent: 0.5cm
}

.article img{
float: right;
margin-left: 5px;
border: 1px solid #000000;

.articlefooter{
font-size: 0.9em;
font-weight: bold;
}

.navigationblock {
margin-bottom: 3px;
border: #999999 1px dashed;
padding: 10px;
text-align: justify;
background-color: #ffffff;
border-bottom: #999999 1px solid;
border-left: #999999 1px solid;
border-right: #999999 1px solid;
border-top: #999999 1px solid;

You might also like