Što je cilj u css-u. Čisti CSS događaj klika bez: cilja. Kako napraviti hipervezu u HTML-u koristeći href

Danas ćemo govoriti o glavnim funkcijama povezanim s pseudo klasom : cilj i kako ga možete koristiti za stvaranje zadivljujućih čistih CSS efekata, naučiti kako stvoriti dijaprojekcije pomoću css-a i još mnogo toga.

Što je: cilj?

h1 (font: bold 30px / 1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;) h1: cilj (veličina fonta: 50px; dekoracija teksta: podcrtana; boja: # 37aee4;)

Dodajte animaciju

Začinimo naš efekt i dodajmo malo animacije, poput lijepog malog prijelaza za promjenu boje. Pogledajte kako to radi.

h1 (font: bold 30px / 1,5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; -webkit-transition: boja 0,5 s lakoća; -moz-prijelaz: boja 0,5 s lakoća; -o-prijelaz: boja 0,5 s lakoća; -ms-prijelaz: boja 0,5 s lakoća; prijelaz: boja 0,5 s lakoća;) h1: cilj (veličina fonta: 50px; ukras teksta: podcrtavanje; boja: # 37aee4;)

Upravljanje neciljanim objektima

Recimo da želimo promijeniti stilove odlomka koji slijedi iza odabranog naslova.

Vrlo je lako to učiniti sa sljedećim kodom. Pogledajte demo.

h1: cilj + p (pozadina: # f7f7f7; padding: 10px;)

Izrada jednostavne prezentacije s CSS-om

Programeri su smislili mnoštvo aplikacija koristeći pseudo-klasu : cilj... Ovaj pseudo selektor može biti zgodan prilikom izrade kartica ili čak dijaprojekcija. Pogledajmo kako možete implementirati potonje.

Za kreirajmo neuređeni popis. Svaka stavka na popisu sadržavat će oznaku sidra koja pokazuje 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 (margina: 50px auto; položaj: relativna; širina: 400px;) ul (list-style: none;) li (float: lijevo; preljev: skriveno; margina: 0 20px 0 0;) li a (boja: # 222; dekoracija teksta: nema; font: 15px / 1 Helvetica, sans-serif; -webkit-transition: boja 0,5 s lakoća; -moz-prijelaz: lakoća boja 0,5 s; -o-prijelaz: boja 0,5s lakoća; -ms-prijelaz: boja 0,5s lakoća; prijelaz: boja 0,5s lakoća;) li a: lebdjeti (boja: # 50b0df;) li img (položaj: apsolutna; vrh: 50px; lijevo: 0; z-indeks: -1; -webkit-prijelaz: neprozirnost 1s jednostavno ulazak; -moz-prijelaz: neprozirnost 1s jednostavno ulazak; -o-prijelaz: neprozirnost 1s lakoća ulaska; -ms-prijelaz: neprozirnost 1s jednostavno ulazak; prijelaz: neprozirnost 1s lakoća-izlaz;) li img: cilj (z-indeks: 1;) li img: nije (: cilj) (prozirnost: 0;)

Prvo dodajmo plutati: lijevo sve elemente našeg popisa. Koristili smo apsolutno i relativno pozicioniranje za elemente.

Zatim, instalirajte z-indeks: -1 za sve slike i zatim postavite z-indeks: 1 za ciljane slike. To će uzrokovati promjenu slike kada kliknete na stavku popisa. Kako bismo prijelaz učinili glatkijim, postavit ćemo vrijednost neprozirnosti za druge slike. 0 .

Pogledajte čisti CSS demonstraciju slajdova.

Kompatibilnost s više preglednika

Pseudo-klasa : cilj je CSS selektor razine 3, što znači da je podržan u gotovo svakom pregledniku osim (nećete pogoditi) ... IE. Stari dobri magarac podržava samo CSS3 selektore u verzijama 9 i 10.

Kao i kod bilo kojeg problema s renderiranjem CSS3 selektora u IE-u, to je prilično lako popraviti s Selectivizrom.

Zahvaljujući ovom dodatku i magiji vudua, potrebni CSS3 selektori bit će podržani čak i u IE6.

Zaključak

Korištenje pseudo-klasa se u početku može činiti zastrašujućim, ali zašto razumijete kako vam one mogu olakšati rad i učiniti vašu stranicu zanimljivijom. Pseudo selektor

: cilj je dobar primjer. Samo pazite da ne pretjerujete sa stilovima.

Još jedan zanimljiv slučaj korištenja : cilj

Prema zadanim postavkama, kada kliknete na vezu, dokument se otvara u trenutnom prozoru ili okviru. Ako je potrebno, ovaj se uvjet može promijeniti ciljnim atributom oznake. ... XHTML ne koristi ovaj atribut.

Sintaksa

...

Obavezni atribut

Vrijednosti

Vrijednost je ime prozora ili okvira navedenog atributom name. Ako je postavljeno nepostojeće ime, otvorit će se novi prozor. Sljedeća imena se koriste kao rezervirana imena.

Prazno Učitava stranicu u novi prozor preglednika. _self Učitava stranicu u trenutni prozor. _parent Učitava stranicu u roditeljski okvir, ako nema okvira, tada ova vrijednost radi kao _self. _top Poništava sve okvire i učitava stranicu u cijelom prozoru preglednika, ako nema okvira onda ova vrijednost radi kao _self.

Zadana vrijednost

Validacija

Upotreba ovog atributa zastarjela je HTML specifikacijom; valjani se kod dobiva samo korištenjem prijelaznog .

HTML5 IE Cr Op Sa Fx

Otvori u novom prozoru

Pseudo klasa: target jedna je od sjajnih značajki CSS3. Odgovara elementu na koji ukazuje identifikator u URI-ju dokumenta.

Identifikator u URI-u sadrži znak "#" nakon kojeg slijedi naziv identifikatora koji odgovara vrijednosti atributa iskaznica element u dokumentu.

Podrška

Budući da govorimo o CSS3, pseudo-klasu podržavaju svi moderni preglednici osim IE 6 do 8. Uobičajena frustracija ne bi vas trebala spriječiti da odlučite koristiti: target. IE9 već podržava: ciljnu pseudo klasu.

Kako se koristi: cilj?

Ova pseudo klasa može imati svoj stil, baš kao i pseudo klase. : lebdjeti, : aktivan ili : usredotočenost za poveznice. Kao i spomenute pseudo klase : cilj koristi se u određenim radnjama na web stranici. Pogotovo 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 : cilj... Pseudo klasa : cilj može poboljšati upotrebljivost vašeg resursa.

HTML oznaka

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

CSS

Sljedeći CSS kod omogućuje postizanje željenog efekta, uz pomoć kojeg se odabire blok s odgovarajućim ID-om (oko pravokutnika se pojavljuje sjena).

/ * Dodajte malo prostora * / ul, div (margin-bottom: 10px;) / * Zadani stil bloka * / div (padding: 10px; granica: 1px solid #eaeaea; -moz-border-radius: 5px; border- radius : 5px;) / * Promijenite prikaz izlaza ako odgovara * / 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 akcije koda. Ako kliknete na vezu, odgovarajući blok je označen i postaje aktivan.

Postoji li način za rukovanje događajima klikova na CSS-u bez upotrebe JavaScripta. Metodu možete koristiti sa : cilj... Ali što ako se ne može koristiti? Postoji još jedna metoda.

Pogledajte demo. Potpuno je urađeno u CSS-u, a ne u jednom retku JavaScripta. Temelji se na izvornoj upotrebi birača: aktivno i: lebdeći.

Opis

Prvo morate stvoriti spremnik koji će sadržavati gumb i blokove koji se prikazuju klikom miša. Struktura označavanja bit će otprilike ovako:

Morate učiniti .sadržaj nevidljivim sve dok se tipka miša ne pritisne na .omatu. Da biste riješili problem, postavite svojstvo display: none za .content. Zatim, kada kliknemo na .wrapper, omogućit ćemo svojstvo display: block za .content. Da biste to učinili, postavite svojstvo display: block za .wrapper: active .content. U ovom stanju, .content će biti vidljiv samo kada se pritisne tipka miša. Ako ga pustite, .content ponovno nestaje. Radi popravljanja, napravit ćemo tako da kada je pokazivač miša iznad .content, svojstvo display: block bude dodijeljeno elementu. To jest, postavili smo svojstvo display: block za .content: hover. CSS kod će izgledati ovako:

Sadržaj (zaslon: nema;) .wrapper: aktivan .sadržaj (prikaz: blok;) .sadržaj: lebdenje (prikaz: blok;)

Ostaje samo "češljati" izgled i dati mu jasnoću:

Omot (pozicija: relativna;) .gumb (pozadina: žuta; visina: 20px; širina: 150px;) .sadržaj (položaj: apsolutna; padding-top: 20px;) .sadržaj li (pozadina: crvena;)

Tekst gumba u gornjem kodu imat će žutu pozadinu, a informacije prikazane kada se pritisne tipka miša imat će crvenu pozadinu.

Pseudo-klasa: target odabire element u dokumentu na koji upućuje fragment URL-a. Na primjer, ovaj dio teksta omotan je elementom s ID # ciljnim testom. Ako slijedite vezu, taj element postaje cilj i stilovi: target pseudo-klase stupaju na snagu.

Prošle godine sam pisao o: ciljnoj pseudo-klasi u 5 nedovoljno korištenih CSS selektora (i njihovih aplikacija). Prvi primjer je bio korištenje: ciljne pseudo-klase za isticanje odjeljka stranice na koji se kretalo. To može biti, na primjer, dodavanje boje pozadine ili obruba, kao u primjeru s.

Ali nedavno sam došao do zaključka da možemo bolje koristiti: target pseudo-klasu stvaranjem interaktivnih elemenata na stranici bez JavaScripta.

Primjer 1: skrivanje i prikazivanje sadržaja

Jednostavan primjer korištenja: target pseudo-klase bio bi skrivanje i prikazivanje sadržaja koji ciljamo. U blogu tako možemo prikazati odjeljak s komentarima nakon što korisnik klikne. To se radi jednostavnim skrivanjem elementa dok se ne podudara s: target.

Prikaži komentare #komentari: ne (: cilj) (prikaz: nema;) #komentari: cilj (prikaz: blok;)

Primjer br. 2: izvucite navigaciju

Sljedeći primjer je stvaranje klizne navigacijske trake. Postavljamo navigacijsku traku fiksno u odnosu na opseg kako bismo osigurali da nema skoka nakon što korisnik klikne.

#nav (položaj: fiksni; vrh: 0; visina: 100%; širina: 80%; maksimalna širina: 400px;) #nav: nije (: cilj) (desno: -100%; prijelaz: desno 1,5 s;) #nav: cilj (desno: 0; prijelaz: desno 1s;)

Primjer 3: skočni modalni

Uzimajući ovu ideju dalje, možemo stvoriti modal koji ispunjava cijelu stranicu.

# modalni spremnik (položaj: fiksni; vrh: 0; lijevo: 0; širina: 100%; visina: 100%; pozadina: rgba (0,0,0,0,8); prikaz: flex; justify-content: centar; align-items: center;) .modal (širina: 70%; pozadina: #fff; padding: 20px; text-align: center;) # modal-container: nije (: cilj) (prozirnost: 0; vidljivost: skriveno; prijelaz: neprozirnost 1s, vidljivost 1s;) # modalni spremnik: cilj (prozirnost: 1; vidljivost: vidljiva; prijelaz: neprozirnost 1s, vidljivost 1s;)

Primjer #4: promjena globalnih stilova

Posljednji primjer se ne može nazvati ispravnim u smislu semantike, to je primjena: ciljne pseudo-klase na element s naknadnom zamjenom stilova ili izgleda stranice.

#tijelo: nije (: cilj) (glavni (širina: 60%;) sa strane (širina: 30%;) .show-sidebar-link (prikaz: nema;)) #body: cilj (glavni (širina: 100%; ) u stranu (prikaz: nema;) .hide-sidebar-link (prikaz: nema;))

Što je sa semantikom i dostupnošću?

Kao što sam spomenuo u članku "Veze ili gumbi", kada koristite element preglednik očekuje navigaciju na drugu stranicu ili drugi dio stranice. U mojim se primjerima (osim posljednjeg) upravo to događa. Jedini trik je da je u normalnom stanju stilizirani element skriven, dinamički se pojavljuje samo u ciljanom stanju.

Koliko ja mogu reći, ova metoda ima dva potencijalna nedostatka:

1. URL se mijenja, što utječe na povijest preglednika. To znači da kada korisnik krene unatrag, može nehotice navigirati do ciljnog elementa.
2. Da bi zatvorio ciljni element, korisnik treba prijeći na drugi element ili samo na #. Posljednja opcija (koju koristim u svojim primjerima) nije semantička i može preusmjeriti korisnika na početak članka, za što korisnik možda nije spreman.

Međutim, ako se pravilno koristi, ova se metoda može koristiti kao minimum kao rezervni za korisnike s onemogućenim JavaScriptom. U nekim slučajevima, kao u prvom primjeru, može čak biti poželjnije i jednostavnije od korištenja JavaScripta. Kao i uvijek, ovisi o svakom konkretnom slučaju.