Što ćete naučiti CSS. Internet općenito HTML CSS XML XHTML Javascript DOM DHTML

Size: px

Start display at page:

Download "Što ćete naučiti CSS. Internet općenito HTML CSS XML XHTML Javascript DOM DHTML"

Elizabeth McDonald
5 years ago
Views:

1 Što ćete naučiti Internet općenito HTML XML XHTML Javascript DOM DHTML AJAX jquery PHP ASP.NET Ruby On Rails MS Silverlight FLASH, SMIL, SVG...

2 Kaskadni stilovi Vladati izgledom Web stranica Dati svim Web stranicama slični izgled, te ga jednostavno mijenjati promjenom stilova. Upravljati načinima ispisa dokumenata Upravljati prelomom dokumenta (layout) Stvarno odvojiti sadržaj od načina prikazivanja 4

3 - Cascading Style Sheets Stilovi određuju kako ispisati HTML dokumenta Obično se pohranjuju u listove stila (style sheets) Dodani su HTML verziji Vanjski list stila može donijeti uštedu vremena Vanjski stil se pohranjuje u.css dokument Višestruke definicije stila kaskadno će se poredati u jedan stil 5 - povijest 1 Prvi službeni W3C prijedlog za standard je level 1, publiciran u prosincu Neke od mogućnosti:: Font - svojstva Boja teksta, pozadine, nekoliko drugih elemenata Atributi teksta kao npr. Razmak među riječima, slovima i linijama Pozicioniranje teksta, slika, tablica... Margine, okviri, padding, pozicioniranje večine lemenata Klase i identifikatori 2 level 2 razvijen u svibnju Nadogradnja na Nekoliko novih funkcionalnosti poput: absolutno, relativno, and fiksno pozicioniranje, dvosmjerni tekst, nova svojstva za fontove, popravlja greške u 2. Dugo u razvojnom stadiju 3 level 3 trenutno u razvojnom stadiju. W3C - 3 progress report se može pratiti razvoj. 6

4 Problem koji rješavaju stilovi HTML tagovi određuju način na koji će se tretirati pojedini elementi teksta Dodavanjem tagova koji manipuliraju izgledom stranice (font i color) teško je razlikovati sadržaj od forme W3C rješava ovaj problem dodavanjem stilova IE i NN podržavaju stilove 7 štedi trud i vrijeme Promijeniti boju fonta svim naslovima : HTML 3.2 promijeniti atribut color za svaki naslov HTML promijeniti vanjski dokument u kojem je definiran stil Primijeniti isti stil na više dokumenata Promjenom stila mijenja se izgled svih dokumenata 8

5 Umetanje Style Sheet-a Cascading Style Sheet može se umetnuti u HTML na 3 načina. INLINE - style elementi mogu se dodati direktno u HTML tag. INTERNAL - style sheet može biti dio HTML dokumenta, a to podrazumijeva direktno upisivanje u HTML dokument u <head> područje. EXTERNAL - odvojeni dokument koji će se pozivati pomoću web adrese (URL-a) svaki puta kad se HTML dokument bude učitavao. Link za odvojeni external style sheet također će se smjestiti u <head> element. 9 Inline Style Sheet <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN" " <html> <head> <title>document's title</title> </head> <body> <p style="style elements go here"> </p> </body> </html> 10

6 Internal Style Sheet <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN" " <html> <head> <title>document's title</title> <style type="text/css"> style elements go here </style> </head> <body> Content's goes here </body> </html> 11 External Style Sheet <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN" " <html> <head> <title>document's title</title> <link href="filename.css" rel="stylesheet" type="text/css"> </head> <body> Content's goes here </body> </html> 12

7 Zaglavlje Zaglavlje Zaglavlje doc 13 Pa koji ću onda način koristiti? Inline style nije naročito praktičan jer morate pisati za svaki tag. Ako imate samo nekoliko web stranica upotrijebite internal style sheet. Ako imate website sa mnogo stranica koje koriste style elemente iskoristite external file. U tom slučaju ako npr. želite promijeniti boju ili veličinu texta na svim vašim stranicama nećete morati mijenjati sve HTML dokumente nego samo onaj sa.css extenzijom! 14

8 Kaskadni stilovi U jednom dokumentu možemo koristiti više stilova Kaskadno će se poredati u jedan stil Prioritet stilova: Browser default External Style Sheet Internal Style Sheet (inside the <head> tag) Inline Style (inside HTML element) 15 Sintaksa -a selector { property: value } Obično html tag na koji će se primjenjivati stil Npr. body {color: black} Svojstvo, atribut koji želimo promijeniti Vrijednost na koju postavljamo atribut Za inline dodaje se atribut style style= property1: value1[; property2: value3 ] 16

9 Sintaksa -a Ukoliko se vrijednost svojstva sastoji od više riječi pišemo je unutar navodnih znakova p {font-family: "sans serif } Za isti element možemo postaviti više svojstava međusobno odvojene s ; p {text-align:center;color:red} Što će biti čitljivije ukoliko napišemo : p { text-align: center; color: black; font-family: arial } 17 Grupiranje svojstava Ukoliko želimo ista svojstva postaviti za više elemenata, selektore ćemo međusobno odvojiti zarezom: h1,h2,h3,h4,h5,h6 { color: green } Svi naslovi biti će ispisani zelenim tekstom 18

10 HTML dohvat -om Element Selektori <p> - p {color: red; } Class Selektori <p class= code"> - p.code {color: cyan; font-family: courier } or.code {color: #F0F; font-family: courier } ID Selektori <p id="sig"> - p#sig {color: cyan; } or #sig {color: #F0F; } Selektor klase Možemo definirati različite stilove za istu vrstu HTML elementa Npr dvije vrste paragrafa: p.right {text-align: right} p.center {text-align: center} Zatim u HTML dokumentu pisati: <p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be centeraligned. </p>note 20

11 Klase Jedan element može pripadati samo jednoj klasi Klasa ne mora biti specificirana za pojedini tag Možemo izostaviti ime taga. center {text-align: center} Tekst unutar bilo kojeg elementa sa atributom class= center biti će centriran 21 Selektor id Id selektor razlikuje se od klase Stil definiran sa id selektorom primjenjuje se samo na jedan element koji ima jedinstveni identifikacijski atribut id p#para1 { text-align: center; color: red } Ovaj stil primijenit će se na sljedeći paragraf <p id= para1 > tekst paragrafa1 </p> Moguće je izostaviti ime taga #wer345 {color: green} Ovaj stil primijenit će se na prvi element s atributom id= wer345 22

12 Nasljeđivanje Svi elementi koji su ugniježđeni nasljeđuju svojstva koja su pridjeljena vanjskom elementu. Npr. Color definiran za BODY također se odnosi na boju teksta unutar paragrafa. Iznimke postoje Npr. Margin-top se ne nasljeđuje Nema smisla da paragraf nasljedi margine tablice u kojoj se nalazi Komentari unutar -a /* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial } 24

13 pozadine Svojstva pozadine omogućavaju: Postavljanje boje pozadine Postavljenje pozadinske slike Ponavljanje pozadinske slike, vertikalno i horizontalno Pozicioniranje slike na stranici 25 Text Svojstva teksta dozvoljavaju nam da upravljamo izgledom teksta Možemo Promijeniti boju teksta Povećati ili smanjiti razmak među pojedinim slovima Poravnati tekst Ukrasiti tekst Uvući prvu liniju teksta 26

14 Property Description Possible Values N N IE W3C color Sets the color of a text color 3.0 direction Sets the text direction ltr rtl 2 letter-spacing Increase or decrease the space between characters normal text-align Aligns the text in an element left right center justify text-decoration Adds decoration to text none underline overline line-through blink text-indent Indents the first line of text in an element 27 text-shadow none color text-transform Controls the letters in an element none capitalize uppercase lowercase unicode-bidi normal embed bidi-override white-space Sets how white space inside an element is handled normal pre nowrap 5.5 word-spacing Increase or decrease the space between words normal 28

15 29

16 fontovi Svojstva fonta dopuštaju mijenjanje vrste fonta, debljine, veličine i stila teksta Fontovi su definirani imenima standardom. Ukoliko browser nema instaliran specificirani font, koristit će defaultni Dvije su vrste fontova: family-name: "times", "courier", "arial", etc. generic-family: "serif", "sans-serif", "cursive", "fantasy", "monospace". 31 Proper ty font Description A shorthand property for setting all of the properties for a font in one declaration Values font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar NN IE W3C fontfamily A prioritized list of font family names and/or generic family names for an element family-name generic-family 3.0 font-size Sets the size of a font xx-small x-small small medium large x-large xx-large smaller larger 3.0 font-sizeadjust Specifies an aspect value for an element that will preserve the x-height of the first-choice font none number 2 32

17 fontstretch Condenses or expands the current font-family normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded 2 font-style Sets the style of the font normal italic oblique 0 fontvariant Displays text in a small-caps font or a normal font normal small-caps 0 font-weight Sets the weight of a font normal bold bolder lighter

18 Borders Svojstva rubova omogućavaju nam da specificiramo stil, boju i debljinu rubova elemenata U HTML-u koristimo tablice da bi kreirali okvir oko elementa Pomoću -a možemo kreirati okvire s raznim efektima 35 Property border Description A shorthand property for setting all of the properties for the four borders in one declaration Values border-width border-style border-color NN IE 0 W3 C 1 borderbottom A shorthand property for setting all of the properties for the bottom border in one declaration border-bottom-width border-style border-color 0 1 borderbottom-color Sets the color of the bottom border border-color 0 2 borderbottom-style Sets the style of the bottom border border-style 0 2 borderbottomwidth Sets the width of the bottom border thin medium thick

19 border-color Sets the color of the four borders, can have from one to four colors color border-left A shorthand property for setting all of the properties for the left border in one declaration border-left-width border-style border-color border-leftcolor Sets the color of the left border border-color 2 border-leftstyle Sets the style of the left border border-style 2 border-leftwidth Sets the width of the left border thin medium thick 37 border-right A shorthand property for setting all of the properties for the right border in one declaration border-right-width border-style border-color 1 border-rightcolor Sets the color of the right border border-color 2 border-rightstyle Sets the style of the right border border-style 2 border-rightwidth Sets the width of the right border thin medium thick 1 border-style Sets the style of the four borders, can have from one to four styles none hidden dotted dashed solid double groove ridge inset outset 1 38

20 border-top A shorthand property for setting all of the properties for the top border in one declaration border-top-width border-style border-color 0 border-topcolor Sets the color of the top border border-color 0 2 border-topstyle Sets the style of the top border border-style 0 2 border-topwidth Sets the width of the top border thin medium thick 0 border-width A shorthand property for setting the width of the four borders in one declaration, can have from one to four values thin medium thick 0 39

21 Box Model Margine Margine se koriste za definiranje prostora oko elemenata Mogu biti i negativne za preklapanje elemenata Možemo mijenjati odvojeno 4 margine : top, right, bottom, and left Možemo koristiti margin svojstvo za mijenjanje svih margina istovremeno 42

22 Property Description Values NN IE W3C margin A shorthand property for setting the margin properties in one declaration margin-top margin-right margin-bottom margin-left margin-bottom Sets the bottom margin of an element auto margin-left Sets the left margin of an element auto 3.0 margin-right Sets the right margin of an element auto 3.0 margin-top Sets the top margin of an element auto Padding Padding svojstva definiraju udaljenost između ruba elementa i sadržaja elementa Nisu dopuštene negativne vrijednosti Možemo odvojeno definirati top, right, bottom i left padding Možemo odjednom definirati više svojstava koristeći padding svojstvo. 44

23 Property Description Values NN IE W3C padding A shorthand property for setting all of the padding properties in one declaration padding-top padding-right padding-bottom padding-left padding-bottom Sets the bottom padding of an element padding-left Sets the left padding of an element padding-right Sets the right padding of an element padding-top Sets the top padding of an element 45 Liste Property Description Values NN IE W3C list-style A shorthand property for setting all of the properties for a list in one declaration list-style-type list-style-position list-style-image 0 1 list-style-image Sets an image as the list-item marker None url

24 Dimenzioniranje blokova Svojstva dimenzioniranja omogućavaju podešavanje širine i visine elemenata Također omogućavaju mijenjanje razmaka među linijama

25 Property Description Values NN IE W3C height Sets the height of an element auto line-height Sets the distance between lines normal number max-height max-width min-height min-width Sets the maximum height of an element Sets the maximum width of an element Sets the minimum height of an element Sets the minimum width of an element none none width Sets the width of an element auto Mjerne jedinice Postotak veličine elementa u kojem se nalazi in cm mm em ex pt pc px inch centimetar millimetar Jedan em je veličina (visina) slova trenutnog fonta Jedan ex je širina jednog slova trenutnog fonta, obično polovica em-a Point je 1/72 incha Jedan pica je 12 pointa (1/6 incha) pixels (točka ekrana, ovisan o rezoluciji)

CSS

CSS http://www.csszengarden.com/ CSS CSS CSS - Cascading Style Sheets Stilovi određuju kako ispisati HTML dokumenta Obično se pohranjuju u listove stila (style sheets) Dodani su HTML verziji 4.0 Vanjski list