1 / 14

Napredna upotreba CSS-a – pseudo klase i pseudo elementi

Napredna upotreba CSS-a – pseudo klase i pseudo elementi. Marija Štivić, 914 Ivona Vuić, 931. CSS. eng. Cascading Style Sheets stilski jezik za opis prezentacije dokumenta opći oblik: selector {property:value} Selector - HTML element kojega želimo definirati

horace
Download Presentation

Napredna upotreba CSS-a – pseudo klase i pseudo elementi

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. Napredna upotreba CSS-a – pseudoklase i pseudoelementi Marija Štivić, 914 Ivona Vuić, 931

  2. CSS • eng. Cascading Style Sheets • stilski jezik za opis prezentacije dokumenta • opći oblik: selector {property:value} • Selector - HTML element kojega želimo definirati • Property – atribut kojem želimo pridružiti vrijednost • Value - vrijednost koju dodjeljujemo atributu • za nekoliko različitih stilova istog selektora koristimo klase (skupine) selektora

  3. PSEUDOKLASE • dodavanje različitih efekata selektorima/dijelovima selektora • Sintaksa pseudoklasa: selector: pseudo-class {property:value} • CSS klase sa pseudoklasama: selector:class.pseudo-class {property:value}

  4. Link (sidra) pseudoklasa • pseudoklase koje pridjeljuju različita svojstva linkovima: • active - daje poseban stil izabranom (aktivnom) linku • hover - daje poseban stil linku na kojem se nalazi pokazivač • link - daje poseban stil neposjećenom linku • visited - daje poseban stil posjećenom linku

  5. Link (sidra) pseudoklasa • Pravila koja se trebaju poštovati pri upotrebi pseudoklasa linkova: • :hover mora biti iza a:link i a:visited u CSS definiciji • :active mora biti iza a:hover u CSS definiciji • imena pseudoklasa nisu osjetljiva na velika i mala slova • Primjer 1. Promjenu boje linka iz plave u crvenu, u slučaju kada pokazivač stavimo na link.

  6. First-child (prvo-dijete) pseudoklase • ako želimo prvi dio (“prvo dijete”) nekog elementa prikazati drugačije od ostalih dijelova • odgovara određenom elementu koji je prvo-dijete drugog elementa. • Primjer 2. Primjer u kojem će samo prvi paragraf u tijelu stranice imati crvenu boju, a svi ostali paragrafi će imati crnu boju

  7. Language (jezik) pseudoklase • dopušta specificirati jezik koji se koristi u dokumentu/unutar specifičnog elemenata • Primjer 3 Postavljena pravila određuju tip oznake navoda za HTML dokument koji je pisan norveškim jezikom.

  8. PSEUDO ELEMENTI • označavaju dio nekog selektora • koriste se za drukčiji prikaz dijela nekog selektora • Sintaksa pseudo elemenata: selector:pseudo-element { property: value }

  9. PSEUDO ELEMENT PRVE LINIJE • koristi se za dodavanje posebnog stila prvoj liniji • Primjer 4 Primjene psedo elementa prve linije • svojstva koja se primjenjuju na „first-line“ pseudo element: • font propertis • color propertis • background propertis

  10. PSEUDO ELEMENT PRVOG SLOVA • koristi se za dodavanje posebnog stila prvom slovu teksta • Primjer 5 Primjene pseudo elementa prvog slova. • svojstva koja se primjenjuju na „first-letter“ pseudo element: • font propertis • color propertis • background propertis • margin propertis

  11. PSEUDO ELEMENTI :before i :after • :before se koristi za umetanje nekog sadržaja ispred nekog elementa • :after koristi se za umetanje nekog sadržaja iza nekog elementa

  12. VIŠESTRUKI PSEUDO ELEMENTI • Više pseudo elemenata može se kombinirati • Primjer 6 Primjer kombinacije više pseudo elemenata.

  13. ZAKLJUČAK • pseudo klase i pseudo elementi - važne značajke CSS-a • važnost pseudo klasa očituje se u sažetosti dizajna • korištenje pseudo elemenata u CSS-u ima višestruku primjenu u dizajniranju HTML dokumenta

  14. LITERATURA [1] A. Budd, CSS Mastery : Standardizirana napredna Web rješenja , Zagreb : Dobar plan, 2007. [2] Stranice fakulteta elektronike i računarstva, http://web.zpr.fer.hr/ergonomija/2003/anic/pseudo-klase1.htm, 02.01.2013. [3] Elektronska baza znanstvenih radova, priručnika i knjiga iz područja znanosti, kulture, sporta i zabave, http://www.znanje.org/knjige/computer/css/03/html/dodatak14.html , 03.01.2013. [4] Wikipedia – CSS, http://hr.wikipedia.org/wiki/CSS, 02.01.2012.

More Related