1 / 13

I nedelja , dan III

I nedelja , dan III. 20.05.2011. Uvod u CSS. Uvod u CSS CSS sintaksa CSS id i class CSS stilizovanje CSS Box mode l Korisni linkovi: http://www.w3schools.com/ css /. Uvod u CSS. Stilovi se koriste za definisanje na čina prikaza HTML elemenata Dodati su u okviru HTML 4.0

danika
Télécharger la présentation

I nedelja , dan III

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. I nedelja, dan III 20.05.2011.

  2. Uvod u CSS • Uvod u CSS • CSS sintaksa • CSS id i class • CSS stilizovanje • CSS Box model Korisni linkovi: http://www.w3schools.com/css/

  3. Uvod u CSS • Stilovi se koristezadefinisanjenačina prikaza HTML elemenata • Dodati su u okviru HTML 4.0 • Stilovi se mogu naći u okviru HTML dokumenta ili u nezavisnom CSS dokumentu • U okviru dokumenta mogu se postaviti u okviru zaglavlja ili kao atribut u okviru nekog od HTML elementa

  4. Pozicije CSSa • U okviru eksternog dokumenta i pozivaju se komandom:<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head> • U okviru zaglavlja HTML dokumenta:<head><style type="text/css">hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head> • Kao atribut HTML elementa:<p style="color:sienna;margin-left:20px“>paragraph.</p>

  5. CSS Sintaksa • CSS pravilo ima 2 glavna dela: selektor i jedan ili više deklaracijah1{ color:blue; font-size:12px; }#header { color:blue; font-size:12px; }.paragraph { color:blue; font-size:12px; } • Selektor je HTML element čiji stil želimo da promenimo, odnosno ID ili klasa koji predstavljaju HTML element • Svaka deklaracija se sastoji od osobine i njene vrednosti

  6. CSS id i class • Kako bi zamenili originalni HTML element, CSS dozvoljava definisanje sopstvenih selektora koje nazivamo “id” i “class” • ID se koristi kako bi zamenio jedinstven HTML element. Definiše se sa # ispred naziva selektora#para1{text-align:center;color:red;} • CLASS se koristi kako bi zamenio grupu HTML elemenata. Definiše se sa . Ispred naziva selektora.center {text-align:center;} • Moguće je definisati da CLASS utiče na određeni HTML element:p.center {text-align:center;}

  7. CSS stilizovanje • Pozadina body {background-color:#b0c4de;} body{background-image:url('img_tree.png');background-repeat:no-repeat;background-position:right top;background-attachment:fixed;} body {background:#ffffffurl('img_tree.png') no-repeat right top;}

  8. CSS stilizovanje • Tekst body {color:blue;} h1 {text-align:center;} a {text-decoration:none;} p.title {text-transform:uppercase;} p {text-indent:50px;}

  9. CSS stilizovanje • Font p{font-family:"Times New Roman", Times, serif;} p.italic {font-style:italic;} h1 {font-size:30px;} h1 {font-size:1.875em;} /* 30px/16=1.875em */ p.small{font-variant:small-caps;} p.thick {font-weight:bold} p.ex{font:italic bold 12px/30px Georgia, serif;}

  10. CSS stilizovanje • Linkovi • Redosled mora biti kao što je navedeno • Dozvoljeno je nenavesti neki od statusa • Na linkove je moguće primeniti sve stilove vezane za pozadinu, tekst i font a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;}

  11. CSS stilizovanje • Liste • Postavljanje drugačijeg markera • Postavljanje slike kao marker • Mogućnost da se marker isključi ul {list-style-type: circle;} ol {list-style-type: upper-roman;} ul{list-style-image: url('sqpurple.gif');}

  12. CSS stilizovanje • Tabele • Okvir: table, th, td{border: 1px solid black;} • Skupljen okvirtable{border-collapse:collapse;} • Širina i visinatable{width:100%;}th{height:50px;} • Pozicioniranje teksta u ćelijitd{text-align:right;}td{height:50px;vertical-align:bottom;} • Unutrašnji razmak od ivicetd{padding:15px;} • Boja tabeleth{background-color:green;color:white;}

  13. CSS Box model div {margin: 5px 5px5px5px; padding: 5px 5px5px5px; border: 1px solid #0f0; } div {margin: 5px; padding: 5px; border: 1px solid #0f0; }

More Related