Postoji li način za rukovanje događajima klikova u CSS-u bez koristeći JavaScript. Metodu možete koristiti sa :target. Ali šta ako se ne može koristiti? Postoji još jedan metod.
Pogledajte demo. U potpunosti je napravljen u CSS-u, ni u jednoj liniji JavaScript kod. Zasnovan je na izvornoj upotrebi selektora:active i:hover.
Opis
Prvo morate kreirati kontejner koji će sadržavati dugme i blokove koji se prikazuju kada se pritisne miš. Struktura označavanja će biti otprilike ovako:
Moramo učiniti .content nevidljivim dok se ne pritisne tipka miša na .wrapper . Da biste riješili problem, postavite prikaz svojstva .content: none . Zatim, kada se pritisne dugme miša na .wrapper-u, uključićemo svojstvo display: block za .content. Zašto postaviti svojstvo .wrapper:active .content display: block . U ovom stanju, .content će biti vidljiv samo kada se pritisne tipka miša. Ako ga otpustite, .content će ponovo nestati. Da bismo ovo popravili, uvjerimo se da kada je kursor miša iznad .content, elementu je dodijeljeno svojstvo display: block. To jest, postavili smo display: block svojstvo za .content:hover. CSS kod će izgledati ovako:
Sadržaj (prikaz: nema; ) .wrapper:aktivan .sadržaj (prikaz: blok; ) .content:hover (prikaz: blok; )
Ostaje samo da ga "počešljate" izgled i neka bude jasnije:
Omot (pozicija: relativna; ) .button (pozadina: žuta; visina: 20px; širina: 150px; ) .content (pozicija: apsolutna; padding-top: 20px; ) .content li (pozadina: crvena; )
Tekst dugmeta u gornjem kodu će imati žutu pozadinu, a informacije prikazane kada se pritisne dugme miša imaće crvenu pozadinu.
Za prelazak na odabrani fragment dokumenta, u adresi se upisuje simbol # i označava se naziv identifikatora. Na primjer, u adresi http://www.w3.org/TR/css3-selectors/#target-pseudo dolazi do prijelaza na element čiji je id atribut postavljen na target-pseudo . Ovaj unos adrese naziva se "ciljni element". Pseudo-klasa :target se primjenjuje na ciljni element, drugim riječima, identifikator koji je naveden u adresna traka pretraživač.
Oznake
| Opis | Primjer | |
|---|---|---|
| <тип> | Označava tip vrijednosti. | <размер> |
| A && B | Vrijednosti se moraju ispisati navedenim redoslijedom. | <размер> && <цвет> |
| A | B | Označava da trebate odabrati samo jednu vrijednost od predloženih (A ili B). | normalno | small-caps |
| A || B | Svaka vrijednost se može koristiti samostalno ili zajedno s drugima bilo kojim redoslijedom. | širina || count |
| Grupne vrijednosti. | [ usev || krst ] | |
| * | Ponovite nula ili više puta. | [,<время>]* |
| + | Ponovite jedan ili više puta. | <число>+ |
| ? | Navedeni tip, riječ ili grupa su opcioni. | umetnuti? |
| (A, B) | Ponovite najmanje A, ali ne više od B puta. | <радиус>{1,4} |
| # | Ponovite jednom ili više puta odvojeno zarezima. | <время># |
Primjer
- Priča 1
- Priča 2
Priča 1
Priča o tome kako je trebalo napraviti grob, počeli da ga kopaju, pa zatrpaju i šta je od toga ispalo.
Priča 2
Priča o tome kako su se u blizini kafeterije pojavili misteriozni ružičasti otisci stopala sa šest prstiju i zašto se to dogodilo.
U ovom primjeru, ciljni element je istaknut bojom pozadine.
Napomena
U Safariju prije verzije 3.0, pravila stila se ne primjenjuju kada korisnik koristi navigaciju u pretraživaču (dugmad Nazad i Naprijed).
Specifikacija
Svaka specifikacija prolazi kroz nekoliko faza odobrenja.
- Preporuka - specifikaciju je odobrio W3C i preporučuje se kao standard.
- Preporuka kandidata ( Moguća preporuka ) - grupa odgovorna za standard je zadovoljna da ispunjava svoje ciljeve, ali joj je potrebna pomoć razvojne zajednice da implementira standard.
- Predložena preporuka Predložena preporuka) - u ovoj fazi dokument se dostavlja Savjetodavnom vijeću W3C na konačno odobrenje.
- Radni nacrt – zrelija verzija nacrta o kojoj se raspravljalo i dopunjeno za pregled zajednice.
- Nacrt urednika ( Urednički nacrt) - nacrt standarda nakon izmjena koje su izvršili urednici projekta.
- Nacrt ( Nacrt specifikacije) - prva verzija standarda.
Pregledači
Sljedeće oznake se koriste u tabeli pretraživača.
Pseudo class:target je jedna od sjajnih karakteristika CSS3. Odgovara elementu na koji ukazuje identifikator u URI-ju dokumenta.
Identifikator u URI-u sadrži znak “#” iza kojeg slijedi ime identifikatora koji odgovara vrijednosti atributa id element u dokumentu.
Podrška
Pošto govorimo o CSS3, pseudo klasu podržavaju svi moderni pretraživači osim IE verzija od 6 do 8. Uobičajeno razočaranje ne bi trebalo da vas spreči da odlučite da koristite:target. IE9 već podržava pseudo class:target.
Kako koristiti:target?
Ova pseudo klasa može imati svoju sopstveni stil, kao i pseudo klase :hover, :active ili :focus za linkove. Isto kao i pomenute pseudo klase :target koristi se za određene radnje na web stranici. Naročito kada koristite identifikator fragmenta poput ovog: http://example.com/index.html#lorem-ipsum.
Demonstracija
Demo stranica pruža vrlo jasan primjer kako i kada koristiti :target. Pseudo klasa :target može poboljšati upotrebljivost vašeg resursa.
HTML markup
Ispod je primjer iz demo. Imamo 4 linka i isti broj blokova. Svaka grupa ima svoj jedinstveni identifikator.
- Blok 1
- Blok 2
- Blok 3
- Blok 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, felis at varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in.
Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Aenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, id accumsan turpis metus ac ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Pellentesque quis tortor vitae elit cursus vulputate et vel dui. Nunc commodo pretium arcu in ultricies. Nunc vel velit enim, et tincidunt leo. Klasa aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Quisque eget tempor sapien. Cras convallis tempor orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue sit amet id diam. Sed in lectus ut ague euismod porta. Quisque non lacus odio. Nunc ornare adipiscing egestas.
CSS
Sljedeći CSS kod omogućava postizanje željenog efekta, uz pomoć kojeg se ističe blok s odgovarajućim ID-om (sjena se pojavljuje oko pravokutnika).
/* Dodajte malo razmaka */ ul, div ( margin-bottom: 10px; ) /* Zadani stil bloka */ div ( padding: 10px; granica: 1px solid #eaeaea; -moz-border-radius: 5px; border- radius : 5px ) /* Promjena izgleda izlaza kada se podudara */ div:target ( border-color: #9c9c9c; -moz-box-shadow: 0 0 4px #9c9c9c; -webkit-box-shadow: 0 0 4px; #9c9c9c ; box-shadow: 0 0 4px #9c9c9c ;
Ispod je rezultat koda. Ako kliknete na vezu, odgovarajući blok je označen i postaje aktivan.
Danas ćemo govoriti o glavnim funkcijama koje se odnose na sa pseudo klasom :target i kako možete da ga koristite za kreiranje neverovatnih efekata sa čistim CSS-om, naučite kako da kreirate slajdove sa njim css pomoć i još mnogo toga.
Šta je: cilj?
h1 ( font: bold 30px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; ) h1: cilj (font-size: 50px; text-decoration: underline; color: #37aee4; )
Dodajmo animaciju
Začinimo naš efekat i dodamo malo animacije, poput lijepog malog prijelaza za promjenu boje. Pogledajte kako to radi.
h1 ( font: bold 30px/1.5 "Helvetica Neue", Arial, Helvetica, Ženeva, sans-serif; -webkit-transition: boja 0.5s lakoća; -moz-transition: boja 0.5s lakoća; -o-prijelaz: boja 0.5s s lakoća: boja 0,5s lakoća: boja 0,5s lakoća (font-size: 50px; text-decoration: underline; color: #37aee4;)
Upravljanje neciljanim objektima
Recimo da želimo promijeniti stilove pasusa koji dolazi iza odabranog naslova.
Ovo je vrlo lako učiniti koristeći sljedeći kod. Pogledajte demo.
h1: target + p (pozadina: #f7f7f7; padding: 10px; )
Kreiranje jednostavne prezentacije pomoću CSS-a
Programeri su smislili tone aplikacija koristeći pseudo klasu : cilj. Ovaj pseudo-selektor može biti koristan pri kreiranju kartica ili čak projekcija slajdova. Pogledajmo kako se ovo drugo može implementirati.
Kreirajmo neuređenu listu. Svaka stavka liste će sadržavati sidro oznake koje ukazuje na ID isječka i sliku s odgovarajućim ID-om.
- Jedan
- Dva
- Tri
- Četiri
- Pet
Sada dodajmo naše stilove:
* ( margina: 0px; padding: 0px; ) #slideshow ( margin: 50px auto; pozicija: relativna; širina: 400px; ) ul ( stil liste: nijedan; ) li ( float: lijevo; overflow: skriveno; margina: 0 20px 0 0; ) li a (boja: #222; text-decoration: none; font: 15px/1 Helvetica, sans-serif; -webkit-transition: boja 0,5s lakoća; -moz-transition: boja 0,5s lakoća; -o-prijelaz: boja 0,5s lakoća: 0,5s lakoća: -1s; -moz-transition: opacity 1s ease-in-out: neprozirnost 1s ease-in-out ) li img:target (z-indeks); li img:not(:target) (prozirnost: 0; )
Prvo da dodamo float: lijevo svi elementi na našoj listi. Koristili smo apsolutno i relativno pozicioniranje za elemente.
Dalje, idemo na instalaciju z-indeks: -1 za sve slike i zatim postavite z-indeks: 1 za ciljne slike. Ovo će uzrokovati promjenu slike kada kliknete na stavku liste. Da bi prijelaz bio glatkiji, postavit ćemo vrijednost neprozirnosti za ostale slike 0 .
Pogledajte čist CSS demonstraciju slajdova.
Kompatibilnost među pretraživačima
Pseudo-klasa : cilj je CSS selektor trećeg nivoa, što znači da je podržan u skoro svakom pretraživaču osim (nikada nećete pogoditi) ... IE. Dobri stari magarac podržava samo CSS3 selektore u verzijama 9 i 10.
Kao i svaki drugi problem s prikazivanjem CSS3 selektora u IE, ovo je prilično lako rješenje pomoću Selectivizr-a.
Zahvaljujući ovom dodatku i malo vudu magije, potrebni CSS3 selektori će biti podržani čak i u IE6.
Zaključak
Korištenje pseudo-klasa u početku može izgledati komplikovano, ali ćete shvatiti kako vam one mogu olakšati rad i učiniti vašu web stranicu zanimljivijom. Pseudo-selektor
:target- dobar primjer ovoga. Samo pazite da ne pretjerate sa stilovima.
Još jedan zanimljiv slučaj upotrebe :target
target="_blank se koristi za pravljenje oznake otvorio link u novom prozoru. Ali šta je ciljni HTML? Zašto bi trebalo biti prazno? A najzanimljivije je, zašto je na početku donja crta? Pogledajmo bliže ovaj kod i shvatimo šta on radi.
ciljni atribut
Ciljne vrijednosti
Četiri najčešće vrijednosti za ciljni atribut su:
_self
Jedina situacija u kojoj se to može dogoditi je ako se oznaka koristi u HTML-u
_blank
Otvara vezu u novoj kartici ili prozoru. Ovo je određeno korisničkim lokalnim postavkama, u većini pretraživača ovo je stranica nove kartice. Možda mislite da pomoću ove vrijednosti možete implementirati iskačuće oglasne jedinice. Ali to nije istina. Najčešće se za ovo koristi JavaScript umjesto HTML.
Ovu vrijednost ciljnog HTML atributa najbolje je koristiti za otvaranje veza ka vanjskim stranicama ili PDF datotekama u novoj kartici. Zahvaljujući tome, nakon zatvaranja ovih kartica, korisnik se vraća na vašu stranicu. Ali ovo ne treba zloupotrebljavati, jer će korisniku biti prilično teško navigirati ako se svaki link otvori u novoj kartici.
_parent
Vrijednost _parent otvara vezu u nadređenom okviru za okvir u kojem se nalazite. Ovo nije popularna vrijednost, budući da su oznake za kreiranje okvira