Cascading Style Sheets CSS Cascading Style Sheets

CSS - kaskadni stilovi Jednostavan mehanizam za dodavanje stilova - fontova, boja itd. web stranicama izvor: https://lms.carnet.hr

Prednosti: Odvajanje dizajna od sadržaja HTML kôd postaje čitkiji i manji jednostavnom promjenom nekoliko parametara moguće je promijeniti izgled tisućama stranica CSS je donio čitav niz načina za uređivanje prikaza podataka koji do tada nisu postojali u HTML-u izvor: https://lms.carnet.hr

Alati za izradu CSS-a http://www.w3.org/Style/CSS/#editors TopStyle http://www.newsgator.com/Individuals/TopStyle izvor: https://lms.carnet.hr

Mjerne jedinice Boje: Dužine: #rrggbb Point [pt] - tipografska jedinica koja dužinu od jednog inča definira sa 72 pointa. em [em] - relativna jedinica za definiranje veličine fonta. Po definiciji je ekvivalentna vrijednosti "font-size" za dani element. Piksel [px] izvor: https://lms.carnet.hr

Primjer CSS-a p { font-family:"Courier New", Courier, mono; } .stil { color:#CC0000; font-size:24px; font-weight:bold; } izvor: https://lms.carnet.hr

Sastavnice CSS-a selektori - p, .stil svojstva - color, fontsize... identificiraju pojedine elemente na HTML stranici; svojstva - color, fontsize... ključne riječi za opis pojedinog elementa stranice; vrijednosti - #CC0000, 24px... vrijednost koju može poprimiti pojedino svojstvo; Komentari tekst napisan između znakova /* i */. izvor: https://lms.carnet.hr

selektori pojedini stil definira se kao: selektor {svojstvo:vrijednost;} Jedan selektor može sadržavati i više svojstava Svojstva se odvajaju znakom ; Svojstvo može imati više vrijednosti Vrijednosti se odvajaju zarezom Uz vrijednost svojstva može stajati i jedinica (npr. pt) Između vrijednosti i jedinice ne smije biti razmaka Selektor identificira element ili dio HTML stranice na koji se primjenjuje navedeni stil izvor: https://lms.carnet.hr

Tipovi selektora: jednostavni selektori klasni selektori ID selektori kontekstni selektori pseudoklase izvor: https://lms.carnet.hr

Struktura html dokumenta izvor: https://lms.carnet.hr

Jednostavni selektori Najjednostavniji Odgovaraju imenu html oznake primjenjuju se na svaku istovrsnu oznaku u dokumentu izvor: https://lms.carnet.hr

Primjer: p {   font-family:Verdana, Helvetica, sans-serif; } h1 {   color:#CC0000;   font-size:24px;   font-weight:bold; } sugerira web pregledniku da tekst u svim paragrafima na stranici prikaže ispisan prvim raspoloživim od navedenih fontova te da sav tekst unutar <h1> oznaka u dokumentu prikaže podebljan, crvene boje i veličine 24px. izvor: https://lms.carnet.hr

Grupiranje selektora Kada nekoliko selektora dijeli određena svojstva, postoji mogućnost njihova grupiranja u popis odvojen zarezima. izvor: https://lms.carnet.hr

Primjer: Umjesto: h1 {   font-family:sans-serif;   font-size:16px; } h2 {   font-family:sans-serif;   font-size:14px; } h3 {   font-family:sans-serif;   font-size:12px; } izvor: https://lms.carnet.hr

h1, h2, h3 {   font-family:sans-serif; } h1 {   font-size:16px; } h2 {   font-size:14px; } h3 {   font-size:12px; } izvor: https://lms.carnet.hr

Klasni selektori Koriste se kada sve oznake istog tipa NE želimo jednako formatirati Npr: paragrafe sa objašnjenjima i primjerima Klasni selektori označavaju se . ispred imena definiraju se na dva načina: .naziv ili oznaka.naziv izvor: https://lms.carnet.hr

primjer .primjer{ font-family: "Courier New", Courier; font-size: 10pt; text-align: left; padding-left: 3%; } p.vazno { font: bold 11pt; font-family: Verdana, Tahoma, Calibri, fantasy; text-align: justify; color: #483D8B; izvor: https://lms.carnet.hr

Povezivanje s dokumentom: <oznaka class=“naziv”> npr. <p class=“primjer”> <p class=“vazno”> izvor: https://lms.carnet.hr

id selektori koriste se za elemente koji trebaju biti JEDINSTVENI na stranici (npr. naslove) definira se slično kao klasni selektor umjesto . koristi se znak # umjesto atributa class koristi se atribut id izvor: https://lms.carnet.hr

primjer #naslov{ font-family: Verdana, Geneva, Arial; font-size: larger; font-style: italic; font-variant: small-caps; font-weight: bold; text-align: center; color: #483D8B; } izvor: https://lms.carnet.hr

CSS elementi Elemente u CSS-u možemo podijeliti na tri grupe: blok elementi (eng. block level elements) linijski elementi (eng. inline elements) popisi (eng. lists). izvor: https://lms.carnet.hr

blok elementi elementi koji su u dokumentu odvojeni od ostalih elemenata što ih okružuju Predefinirano se ponašaju tako da sljedeći element započinje u novoj liniji Tipičan primjer ovog tipa elemenata su <p> i <h1>, izvor: https://lms.carnet.hr

linijski elementi dolaze u nizu, jedan za drugim primjer: elementi <a> i <img> izvor: https://lms.carnet.hr

popisi blok elementi koji imaju i grafičku ili brojčanu oznaku ispred teksta izvor: https://lms.carnet.hr

oznaka span Tipičan primjer <span> kontejnera je formatiranje nekolicine riječi u tekstu izvor: https://lms.carnet.hr

oznaka div Element <div> najčešće služi za obuhvaćanje više blok ili linijskih elemenata unutar jedne strukture koja dijeli zajedničko formatiranje Primjer: uređivanje koda (font je jednak za sve dijelove, ali boju i uvlačenje možemo urediti span elementima) izvor: https://lms.carnet.hr

Kako povezati CSS s HTML dokumentom? povezivanjem na vanjski dokument uvoženjem vanjskog dokumenta umetanjem u zaglavlje dokumenta dodavanjem u liniji atributom style izvor: https://lms.carnet.hr

Povezivanjem na vanjski dokument <head> ... <link rel="stylesheet"       type="text/css" href="stil.css"> ... </head> izvor: https://lms.carnet.hr

uvoženjem vanjskog dokumenta izvor: https://lms.carnet.hr

umetanjem u zaglavlje dokumenta u oznaci <style> uz uporabu atributa type=”text/css” izvor: https://lms.carnet.hr

primjer <head> ... <style type="text/css"> body { font-family: Verdana, Helvetica, sans-serif; font-size:12px; color: #72006D } </style> ... </head> izvor: https://lms.carnet.hr

zadatak Očistite HTML kod stranice index.html od svih stilova Dodajte kod iz prethodnog primjera Spremite promjene i provjerite rezultat Očistite HTML kod na svim stranicama izvor: https://lms.carnet.hr

Zadatak: Napravite css kod koji će: Pozadinu vaše stranice pobojati u boju “silver” Linkove prikazati u boji “olive” Odlomke poravnati obostrano Font u odlomcima i tablicama neka bude Verdana ili Tahoma veličine 10 pt Font naslova (h1) i podnaslova (h2): Tahoma boje “maroon”, veličine 14 pt, tekst naslova centriran Tablice neka imaju tanak okvir u boji “gray” izvor: https://lms.carnet.hr

dodavanjem u liniji atributom style Stilovi za pojedinačnu HTML oznaku u dokumentu mogu biti definirani atributom style Ovaj atribut može se definirati za gotovo sve HTML oznake - izuzetak su oznake <script>, <basefont> i još neke <p style="font-size:10px">...tekst...</p> Ovako definiran stil vrijedi samo za oznaku unutar koje je definiran izvor: https://lms.carnet.hr

CSS Svojstva Svojstva se po svom djelovanju mogu grupirati u cjeline svojstva fonta svojstva teksta svojstva boja i pozadina svojstva CSS kutije svojstva popisa pozicioniranje (smještanje). izvor: https://lms.carnet.hr

Svojstva fonta font-family CSS definira pet generičkih porodica fontova serif, sans-serif, cursive, monospace i fantasy. izvor: https://lms.carnet.hr

Svojstva fonta font-weight definira debljinu znakova normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 Bolder, lighter i brojčane definicije debljine fonta nisu sigurne za korištenje jer ih preglednici različito prikazuju izvor: https://lms.carnet.hr

Svojstva fonta font-size Definira veličinu fonta Može poprimiti bilo koju definiranu vrijednost veličine (12px, 10pt, 2em...) ili neku od ključnih riječi (xx-small, x-small, small, medium, large, x-large, xx-large) Budući da se svojstvo nasljeđuje, možemo pisati sljedeće: body {   font-size:10pt; } p {   font-size:150%; } izvor: https://lms.carnet.hr

Svojstva fonta font-style Sugerira pregledniku da prikaže tekst kao normal ili kao italic. Postoji još i vrijednost oblique, ali nju preglednici prikazuju isto kao italic. izvor: https://lms.carnet.hr

Svojstva fonta font-variant Može poprimiti vrijednosti normal ili small- caps. Korištenjem small-caps dobije se efekt teksta pisanog velikim slovima, ali fontovima različitih veličina izvor: https://lms.carnet.hr

Svojstva fonta Skraćeni selektor (font) p {   font:italic small-caps 12px Verdana,         Helvetica, sans-serif; } izvor: https://lms.carnet.hr

Svojstva teksta definiraju razmještaj teksta u dokumentu letter-spacing definira razmak između pojedinih znakova u tekstu. line-height Definira razmak između dvije crte teksta text-decoration Opisuje dekoracije koje se dodaju tekstu vrijednosti: none, underline, overline, line- through i blink često se koristi kod definiranja efekata na linkovima izvor: https://lms.carnet.hr

text-transform Pretvara slova iz koda u velika ili mala Moguće vrijednosti su Capitalize - postavlja početno slovo u svakoj riječi u veliko slovo), Uppercase - postavlja sva slova u velika Lowercase - postavlja sva slova u mala, bez obzira na izvorno slovo u kodu. izvor: https://lms.carnet.hr

text-align text-indent Vodoravno poravnanje teksta moguće vrijednosti su: left, right, center i justify text-indent Određuje veličinu uvlake za prvi redak izvor: https://lms.carnet.hr

Svojstva boja i pozadina Color Postavlja boju teksta u zadanom elementu background-color Definira boju pozadine za zadani element background-image Postavlja pozadinsku sliku u element izvor: https://lms.carnet.hr

background-attachment background-repeat Ponavljanje pozadinske slike Može poprimiti sljedeće vrijednosti: repeat - ponavlja sliku; no-repeat - ne ponavlja sliku; repeat-x - ponavlja sliku po vodoravnoj osi; repeat-y - ponavlja sliku po okomitoj osi. background-attachment definira pomiče li se pozadinska slika s elementom ili ne Može poprimiti vrijednost scroll - pomiče se, ili fixed - ne pomiče se. izvor: https://lms.carnet.hr

background-position Pozadinska slika predefinirano se postavlja u gornji lijevi kut dokumenta. Background-position je svojstvo koje omogućava postavljanje početnog položaja od kojeg će se postaviti slika. Može poprimiti vrijednosti top, center, bottom, right, center, left ili postotke, odnosno udaljenost od gornjeg lijevog kuta. izvor: https://lms.carnet.hr

Skraćeno svojstvo background Moguće je navesti sva navedena svojstva bez obzira na redoslijed navođenja: body {   background:url("css.gif") no-repeat fixed; } izvor: https://lms.carnet.hr

Definiranje popisa linkova Popisi se zbog svojih CSS svojstava redovito koriste za kreiranje izbornika <td valign="top" width="22%"> <ul> <li><a href="index.html">Početna</a></li> <li><a href="selektori.html">Selektori</a></li> <li><a href="svojstva.html">Svojstva</a></li> <li><a href="povezivanje.html">Povezivanje s HTML dokumentom</a></li> </ul> izvor: https://lms.carnet.hr

Zadatak Unutar izbornika selektori dodajte podizbornike: Jednostavni selektori Klasni selektori ID selektori Kontekstni selektori Pseudoklase Napravite dokumente: jednostavni.html, klasni.html, id.html, kontekstni.html, pseudoklase.html izvor: https://lms.carnet.hr

Rješenje: <li><a href="selektori.html">Selektori</a> <ul> <li> <a href="jednostavni.html">Jednostavni selektori</a> </li> <a href="klasni.html">Klasni selektori</a> <a href="id.html">ID selektori </a> <a href="kontekstni.html">kontekstni selektori</a> <a href="pseudoklase.html"> Pseudoklase </a> </ul> izvor: https://lms.carnet.hr

Formatiranje popisa linkova Unutar CSS dokumenta Jednostavnim i kontekstnim selektorima Na oba popisa postavljamo sljedeća svojstva: display:block - prikaz linkova jedan ispod drugog text-decoration - skidamo podcrtane linkove margin - marginom razdvajamo linkove padding - udaljavamo linkove width - definira širinu linka. izvor: https://lms.carnet.hr

ul, li { list-style:none; /. skida grafičku oznaku ul, li { list-style:none; /* skida grafičku oznaku */ margin:0px; padding: 0px; } ul li a, ul li a:visited {/*izbornik*/ display:block; text-decoration:none; margin:1px; padding:2px 0px 2px 5px; width:180px; ul ul li a, ul ul li a:visited {/*podizbornik*/ margin:1px 1px 1px 15px; width:150px; izvor: https://lms.carnet.hr

Dodavanje boje i ukrasa popis obojiti proizvoljnom bojom znakove podebljati kao ukras i podlogu za dinamički efekt koristit ćemo lijevu granicu linka debljine od 6 piksela za linkove glavnog izbornika 4 piksela za linkove podizbornika definirati liniju (vrijednost solid) postaviti joj boju koju smo dodijelili slovima. izvor: https://lms.carnet.hr

primjer color: #483D8B; border-left: 6px solid #483D8B; izvor: https://lms.carnet.hr

Dodavanje dinamičkog efekta Dinamičke efekte postižemo dodavanjem pseudoklasa u stil Upotrijebit ćemo pseudoklasu hover, a mijenjat ćemo boju lijeve granice elementa. Izbornik: ul li a:hover { text-decoration: none; margin: 1px; border-left: 6px solid #6898EE; } izvor: https://lms.carnet.hr

text-decoration: none; margin: 1px 0px 0px 10px; Podizbornik: ul ul li a:hover { text-decoration: none; margin: 1px 0px 0px 10px; border-left: 4px solid #7B68EE; } izvor: https://lms.carnet.hr

Horizontalni izbornici #horizontalni li {   display:inline; /*postavlja popis u redak*/ } izvor: https://lms.carnet.hr