1 / 28

Kaskadni opisi stilova

Kaskadni opisi stilova. Vežba VII. Upravljanje kursorom. CSS svojstvo cursor ukazuje čitaču koji oblik pokazivača miša da upotrebi Promenom podrazumevanog kursora, posetiocima se daje do znanja da su tekst ili slika ispod njega po nečemu posebni Primer:

rich
Download Presentation

Kaskadni opisi stilova

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. Kaskadni opisi stilova Vežba VII

  2. Upravljanje kursorom • CSS svojstvo cursor ukazuje čitaču koji oblik pokazivača miša da upotrebi • Promenom podrazumevanog kursora, posetiocima se daje do znanja da su tekst ili slika ispod njega po nečemu posebni • Primer: • abbr, acronym, .help {border-bottom:1px dotted black; cursor:help} • Kursor dobija oblik znaka pitanja kad god posetilac pređe mišem preko elementa <acronym>,<abbr> ili elementa klase help • Atribut title može se postaviti u HTML oznake da bi ukazao na pomoćni tekst koji će čitač pokazati kada se pokazivač miša nalazi iznad elementa čija oznaka sadrži atribut

  3. Primer 16. tables, forms, CSS, ASP, Graphics <html> <head> <title> Web stranica s pomoćnim tekstom </title> <style type="text/css"> abbr, acronym, .help {border-bottom:1px dotted black; cursor:help} </style> </head> <body> <acronym title=“HTML & Web Design Tips and Techniques”> HTWDTT </acronym> provides great tips you can use to exploit <span class=“help” title=“tables, forms, CSS, ASP, Graphics”> Web technologies </span> </body> </html> Snimite dokument pod nazivom Primer16.html na D disk (D:\Grupa I\CSS\Primer16.html)

  4. Akronimi i abrevijacije • Akronim • Svakidašnje skraćenice: sms, cm, kg, www. • Abrevijacija • Označava skraćenicu koja se izgovara kao reč. Abrevijacije su akronimi na putu da postanu regularne opšteprihvaćene reči. Takva je na primer nato, a svojevremeno bile su i laser, radar. • U nekim Web čitačima abbr i acronym elementi sudefaultno stilizovani podvlačenjem skraćene reči sa tankom tačkastom linijom, kako bi dali korisniku do znanja da taj deo teksta nije običan tekst, nego krije nešto više—samim tim i poziva na prvu logičnu akciju.

  5. Tipovi kursora u CSS-u

  6. Oznaka <span> • <span> je osnova savremenog pristupa organizaciji Web stranica, koji se zasniva na kombinaciji jezika HTML verzije 4.01 i kaskadnih opisa stilova (CSS). • Oznaka <span>može stajati uz bilo koji objekat, jer ga ona samo obeležava za promenu. • Ako se bilo koji objekat nađe između oznaka <span> i </span> ništa se neće promeniti, a neće se pojaviti ni greška.

  7. Oznaka <span> - Web homonim • Oznaka <span> prepoznaje i klase stilova. • Na primer, može se napraviti klasa: <style type="text/css“>.novitekst {font-size:18pt; color:#ff0000; font-family:arial}</style> • a kasnije se ona može iskoristiti unutar oznaka <span> na sledeći način: <span class="novitekst“> Prikaz pomoću klase </span>

  8. Ivice • Ivice se koriste za razdvajanje slika od teksta koji ih okružuje, da bi se označili naslovi ili istakli posebni pasusi, i slično. • HTML tabele sa atributom border podešenim na debljinu željenih ivica pikselima sa definisanom bojom i stilom ivica – malo čitača omogućava • CSS svojstvo border omogućava nezavisno upravljanje debljinom, stilom i bojom svake ivice oko objekta

  9. Ivice • Pomoću CSS svojstva mogu se nacrtati ivice oko svakog objekta ili elementa na Web stranici • Na primer, ivice oko naslova prvog nivoa mogu se definisati CSS pravilom: h1 {border:solid 3px red} • Čitač će sve ivice nacrtati isto • border-style - stil ivice - solid • border-width – debljina ivice – 3px • border-color – boja ivice - red

  10. Ivice • Izgled svake ivice može se zadati zasebno. Pravilo za ivice iz prethodnog primera izgledalo bi: h1 {border-top-style:solid; border-left-style:solid; border-right-style:solid; border-bottom-style:solid; border-top-width:3px; border-left-width:3px; border-right-width:3px; border-bottom-width:3px; border-top-color:red; border-left-color:red; border-right-color:red; border-bottom-color:red;

  11. Ivice • CSS dopušta kombinovanje eksplicitnih i implicitnih (skraćenih) deklaracija svojstva border: • Na primer – puna zlatna ivica: h1 {border-style:solid; border-color:#ffd700; border-width:2px} • Dupla plava linija od 0,5 inča: h1 {border-style:double; border-color:blue: border-width:.5in}

  12. Boja i širina ivica • Boja se u CSS stilovima može definisati imenom ili heksadecimalnim zapisom • Debljina ivice može se definisati bilo kojom CSS jedinicom mere: in, cm, pt, px, itd.

  13. CSS stilovi ivica • CSS stilovi ivice, koji se naznačavaju u okviru svojstva border-style mogu biti: • none • dotted • dashed • ridge • double • groove • solid • inset • outset

  14. Primer 17. • Uz pomoć definicije klasa za različite CSS stilove ivica, realizovati sledeći primer, koji sadrži pet naslova prvog nivoa uokvirenih zelenom ivicom, širine 5px i navedenog stila. Snimite dokument pod nazivom Primer17.html na D disk (D:\Grupa I\CSS\Primer17.html)

  15. Primer 17. <html> <head><title> Inline Styles </title> <style> .dotted {border-style:dotted; border-color:green; border-width:5px} .dashed {border-style:dashed; border-color:green; border-width:5px} .double {border-style:double; border-color:green; border-width:5px} .groove {border-style:groove; border-color:green; border-width:5px} .inset {border-style:inset; border-color:green; border-width:5px} </style></head> <body> <h1 class="dotted"> Stil ivica:dotted </h1> <h1 class="dashed"> Stil ivica:dashed </h1> <h1 class="double"> Stil ivica:double </h1> <h1 class="groove"> Stil ivica:groove </h1> <h1 class="inset"> Stil ivica:inset </h1> </body></html>

  16. Prilagođavanje izgleda hiperveze • Ako se za sidro (tj. hipervezu) ne definišu osobine u HTML kodu, čitači Weba podvlače tekst hiperveze i koriste jednu boju (najčešće plavu) za prikazivanje hiperveza neposećenih, a drugu (najčešće ljubičastu) za prikazivanje hiperveza posećenih lokacija • CSS pravila omogućavaju: • Promenu boje teksta hiperlinka • Dodavanje boje pozadine • Uklanjanje linije kojima se tekst hiperveze podvlači • Prikazivanje različitih hiperveza različitim stilom u okviru jedne stranice

  17. Prilagođavanje izgleda hiperveze • Svojstva font-family; font-style; font-size, color definišu izgled teksta hiperveze • Podešavanjem svojstva background-color ističe se pozadina teksta hiperveze • Podešavanjem svojstva text-decoration na none ukida se podvlačenje hipertkesta

  18. Prilagođavanje izgleda hiperveze • Za podešavanje izgleda hiperveza mogu se koristiti sledeće 4 pseudoklase:

  19. Primer 18. • Pozadina teksta: svetlo žuta • Tekst nije podvučen • Neposećene stranice: boja teksta zelena • Posećene stranice: boja teksta magenta • Pokazivač miša iznad hiperveze: • pozadina: cyan, tekst: magenta, italic, veličine 1,5em Kliknite za prelazak na Primer 1.

  20. Primer 18. • Neposećene stranice: zelena • Posećene stranice: magenta • Pozadina teksta: svetlo žuta • Tekst nije podvučen • Pokazivač miša iznad hiperveze: • Pozadina: cyan, tekst: magenta, italic, veličine 1.5em Kliknite za prelazak na Primer 1.

  21. Primer 18. <html><head> <title> Hipertekstualne veze </title> <style> a{text-decoration:none; background-color:lightyellow} a:link{color:green} a:visited{color:magenta} a:hover {font-size:1.5em; font-style:italic; color:magenta;background-color:cyan} </style></head> <body> <a href="D:\Grupa I\CSS\Primer 1">Kliknite za prelazak na primer 1.</a> <br> <a href="D:\Grupa I\CSS\Primer 2">Kliknite za prelazak na primer 2.</a> </body> </html> Snimite dokument pod nazivom Primer18.html na D disk (D:\Grupa I\CSS\Primer18.html)

  22. Plutajuće slike i tekst • Kada se CSS svojstvo float primeni na neki element, elemenat se izvlači iz uobičajenog rasporeda i pomera levo ili desno od elementa koji ga prate u HTML kodu stranice • Na primer: kôd stranice sadrži oznaku <img> iza koje sledi tekst pasusa: • pri uobičajenom rasporedu, čitač će sliku staviti na stranicu i pomeriti se do leve margine reda ispod slike da bi tu prikazao tekst • da bi čitač pomerio sliku levo od pasusa dodaje se svojstvo float oznaci <img> <img style=“float:left” border=“0” src=“C:/ ...Sunset.jpg” width=“146” height=“148”>

  23. Primer 19. <img style=“float:left” border=“0” src=“C:/ ...Sunset.jpg” width=“146” height=“148”> <html> <head> <title> Dodavanje slike </title> </head> <body> <h1 style="float:left;background:blue; color:white"> Naslov prvog nivoa </h1> <p>Tekst pasusa postavljen je desno od naslova prvog nivoa.</p> <br><hr> <img style="float:right" border="0" src="C:/Documents and Settings/AllUsers/Documents/My Pictures/Sample Pictures/Sunset.jpg" width=“200" height="75"> <p>Kada se CSS svojstvo float primeni na neki element, elemenat se izvlači iz uobičajenog rasporeda i pomera levo ili desno od elementa koji ga prate u HTML kodustranice. </p> </body></html> Snimite dokument pod nazivom Primer19.html na D disk (D:\Grupa I\CSS\Primer19.html)

  24. Poravnanje natpisa s elementima obrasca i dodavanje boje na obrasce • Formatiranje celog obrasca moguće je postavljanjem elemenata obrasca unutar odeljka između oznaka <div></div> <div style=“width:475px; background-color:#ffffe0; border:limegreen 1px solid; padding:5px”> <form> ... Elementi obrasca... </form> </div> • Izbegavati opsežno formatiranja polja obrasca HTML-om ili kaskadnim stilovima • Polja obrasca uglavnom treba ređati odozgo nadole • Koristiti tabele umesto kaskadnih stilova prilikom rasporeda polja obrazaca

  25. Primer 20. • Postavite obrazac iz Primera 45. koji se nalazi na D disku (D:\Grupa I\HTML 1\Primer 45.) unutar oznaka <div></div> definisanih u nastavku: <div style=“width:475px; background-color:#ffffe0; border:limegreen 1px solid; padding:5px”> <form> ... Elementi obrasca... </form> </div> Snimite dokument pod nazivom Primer20.html na D disk (D:\Grupa I\CSS\Primer20.html)

  26. Primer 21. • U opisu stila definišite tri klase: div.row {clear:both; padding-top:12px} span.label {float:left; width:110px; text-align:right} span.element {float:right; width:350px; text-align:left} Potom upotrebite definisane klase za kreiranje obrasca prikazanog na slici. div div div element label div div

  27. Primer 21. <html><head><title>CSS i obrasci </title> <style> div.row {clear:both; padding-top:12px} span.label {float:left; width:110px; text-align:right} span.element {float:right; width:350px; text-align:left}</style></head> <body> <div style="width:475px; background-color:#ffffe0 :#ffffe0; border:limegreen 1px solid; padding:5px"> <form> <div class="row"> <span class="label"> First Name: </span> <span class="element"> <input type="text" size="30"> </span> </div> <div class="row"> <span class="label"> Last Name: </span> <span class="element"> <input type="text" size="30"> </span> </div> <div class="row"> <span class="label"> eMail Address: </span> <span class="element"> <input type="text" size="30"> </span> </div> <div class="row"> <span class="label"> Comments: </span> <span class="element"> <textarea style="background-color:magenta" cols="40" rows="10"> </textarea></span><p>&nbsp;</p></div> <div class="row" <br>&nbsp;<input type="submit" value="Submit"> &nbsp;<input type="reset" value="Reset"><br>&nbsp; </div> </form> </div></body></html> Snimite dokument pod nazivom Primer21.html na D disk (D:\Grupa I\CSS\Primer21.html)

  28. Kaskadni opisi stilova Vežba VII

More Related