Target = "_blank" i druge vrijednosti ciljnog atributa. Click događaj na čistom CSS-u bez:target Blok nestaje s target css-om

Na Internetu možete lako pronaći mnoge upute koristeći pseudo-class:target. Ipak, nemojmo slijediti tuđi kod, nego ga pokušajmo razumjeti i razumjeti kako funkcionira? Naravno, ne možemo bez primjera.

Što je:target?

U CSS:target, ovo je pseudo-klasa koja vam omogućuje da odaberete cijeli "komad" vašeg HTML dokumenta na kojem će se izvršiti neka radnja. To može biti na primjer odlomak teksta ili naslov.

Pseudoklase ne treba brkati s pseudoelementima, koji mogu odabrati samo određeni dio elementa, kao što je prvo slovo ili prvi red odlomka.

Pseudo-klase:

  • a:link(boja:#111)
  • a:lebdjeti (boja:#222)
  • div:prvo dijete(boja:#333)

Pseudoelementi:
  • p::prvo-slovo(boja:#444)
  • p::prvi redak(boja:#555)

Mislim da je iz sintakse jasno što ova ili ona pseudo-klasa ili pseudo-element radi. Najpopularnija pseudoklasa je :hover, s kojom se susreću svi webmasteri; ona opisuje stilove elementa pri lebdenju. target radi slično i opisuje stilove elementa kada se dogodi određena situacija.

ID-ovi fragmenata

Ukratko, to je stvar za koju je vezana naša pseudoklasa. Ovo je hashtag s riječju ili frazom koja se nalazi na kraju adrese. Ovako izgleda:

Ova se tehnika može koristiti za prijelaze unutar članka. Na primjer, na početku članka stvorite malu tablicu sadržaja, kada kliknete na element od kojeg se osoba odvodi na odjeljak na koji vodi poveznica; odjeljak mora dodati identifikator.

Radi u čistom HTML-u, nisu potrebni nikakvi trikovi. Mali identifikatori.

Rukovanje klikom pomoću:target

Pokušajmo sada osigurati da se stil naslova mijenja kada kliknete na željeni odjeljak iz našeg improviziranog izbornika, pokazujući koji je odlomak trenutno aktivan.

H1 (font: 30px Arial sans-serif;) h1:target (veličina fonta: 50px; ukras teksta: podcrtano; boja: #37aee4;)

Kod je vrlo jednostavan - kada se klikne naslov mijenja veličinu, boju i podcrtava se. Možete dodati život (Ruslan, bok) i napraviti animaciju za promjenu boje naslova:

H1 ( font: 30px Arial sans-serif; -webkit-transition: boja 0,5s lakoća; -moz-transition: boja 0,5s lakoća; -o-prijelaz: boja 0,5s lakoća; -ms-prijelaz: boja 0,5s lakoća; prijelaz: boja 0,5 s lakoća; )

Isticanje aktivnog naslova je dobra stvar, ali što ako trebate promijeniti dizajn teksta koji ga slijedi? CSS nam daje ovu priliku. Ovako izgleda:

H1:target + p ( pozadina: #eaeaea; padding: 10px; )

U u ovom slučaju, plus znači da se stil treba primijeniti na odlomak koji slijedi nakon naslova. Tako, kada se promijeni aktivno zaglavlje, mijenjamo i dizajn odjeljka s tekstom koji mu “pripada”.

Podrška za preglednik

Ciljana pseudoklasa pripada trećem izdanju CSS-a i savršeno je podržavaju svi preglednici osim IE, starije od verzije 9. Stoga je ne biste trebali implementirati ako vaša publika koristi ovaj preglednik. Iako, postoji izlaz - ovo je Selectvizr, JS biblioteka s kojom možete natjerati IE da radi s CSS3. Samo dodamo skriptu i to je to, radi.

Jedina stvar je, ako ne koristite JQuery ili MooTools, morate ih povezati da bi ova skripta radila. Službena web stranica ima tablicu koja pokazuje koje knjižnice podržavaju što. Ako vas zanima, pročitajte. ovo .

Zaključak

Korištenje pseudo klasa može se činiti komplicirano, ali nakon što shvatite kako rade, možete raditi nevjerojatne stvari koristeći samo CSS i ništa drugo. Pseudo-klasa: cilj- izvrsna potvrda ovoga. Uz njegovu pomoć možete radikalno promijeniti interakciju stranice s posjetiteljem. Gornji primjer je najjednostavniji, ali ipak dodaje malo interaktivnosti stranici. Ali ovo je samo nekoliko redaka koda.

Ne pretjerujte s ljepotom i podrškom preglednika i sve će biti u redu.

ugodan dan

Prema zadanim postavkama, kada kliknete vezu, dokument se otvara u trenutnom prozoru ili okviru. Ako je potrebno, ovaj se uvjet može promijeniti ciljnim atributom oznake . Ovaj atribut nije dopušten u XHTML-u.

Sintaksa

...

Obavezan atribut

Vrijednosti

Vrijednost je naziv prozora ili okvira određenog 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 nadređeni okvir; ako nema okvira, ova vrijednost radi kao _self. _top Odbacuje sve okvire i učitava stranicu u punom prozoru preglednika; ako nema okvira, ova vrijednost funkcionira kao _self.

Zadana vrijednost

Validacija

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

HTML5 IE Cr Op Sa Fx

Oznaka A, <a href="https://fighters.ru/hr/giperssylka-chto-eto-takoe-kak-sdelat-ssylku-i-vstavit-v-html-kod/">ciljni atribut</a>

Otvori u novom prozoru



Pozdrav, dragi čitatelji bloga. Odlučio sam današnju publikaciju posvetiti najvažnijem aspektu webmasteringa, gdje ću pokušati detaljno objasniti što je hiperveza, koja je neraskidivo povezana s kojom je, pak, bez pretjerivanja, osnova interneta.

Ali kako biste ispravno stvorili hiperveze i umetnuli ih u kod web stranica (na primjer, vaše web stranice), morate proučiti odgovarajuće područje jezika za označavanje hiperteksta (), budući da su ti elementi oblikovani pomoću HTML-a tag, koji ima mogućnost nadogradnje veze na željenu jednu vrstu.

Dakle, danas ćemo pogledati od kojih se dijelova sastoji hiperveza, kako korištenje atributa target blank omogućuje otvaranje stranice u novom prozoru (kartici), kako bilo koju sliku učiniti vezom i mnoge druge važne detalje. Između ostalog, ove informacije će vas unaprijediti u učenju HTML jezika.

Što je hiperveza i može li se nazvati vezom?

Odgovarajući na pitanje postavljeno u naslovu, reći ću da pojam "veznica" ima širi semantički spektar (veznica sa Sibirom, bankarstvo za identifikaciju platitelja, tekst u knjizi itd.), uključujući značenje svojstveno konceptu “hiperlink” , koji je povezan samo s hipertekstom, što omogućuje nelinearno percipiranje informacija.

Tako, hiperveza je poseban slučaj veze, pa ih je sasvim moguće ravnopravno koristiti u današnjim temama. To je ono što ću koristiti u svoju korist tijekom današnjeg posta, koristeći oba pojma kako bih izbjegao nepotrebnu neželjenu poštu ključnih riječi.

Ali postoje i nevidljivi servisi, stvoreni korištenjem i smješten unutar, čija je zadaća slanje brojnih signala i naredbi preglednicima za obavljanje određene funkcije.

Na primjer, korištenjem servisnih hiperveza moguće je prikazati ikonu. Mogu se vidjeti samo kao dio HTML koda (za to kliknite bilo koju stranicu otvorenu u pregledniku):


Za sada ostavimo veze usluga na miru i razmotrimo opći obrazac stvaranja hiperveza. Zajedničko im je da svi imaju potreban href atribut, čija je vrijednost adresa dokumenta (). HTML veza može dovesti i do unutarnje stranice stranice i do vanjskog dokumenta.

Još važna nota. Korištenje atributa href čini hiperveze klikabilnim, odnosno omogućuje korisnicima da automatski odu na odgovarajuću stranicu web stranice kao rezultat klika na njih.

Kako napraviti hipervezu u HTML-u koristeći href

Dakle, već znamo da su za stvaranje veze potrebni a tag i href atribut, čiji parametri mogu biti URL-ovi različitih vrsta. Jer a ovo, zatim između otvora i zatvaranje sadrži sadržaj koji će biti prikazan na web stranici.

Ovaj sadržaj se naziva sidro i može se predstaviti u obliku teksta ili slike (više ćemo govoriti o tome kako napraviti sliku na poveznici u nastavku). Kao što sam već napomenuo, na sidro će se moći kliknuti. Pogledajmo primjer hiperveze s tekstualnim sadržajem. Ovako će njegov dizajn izgledati u HTML kodu:

malo o sidrima

Uz HTTP, siguran HTTPS protokol. Poveznica ne mora voditi na web stranicu. Sve ovisi o href vrijednosti, koja može biti put do neke datoteke:

//site/wp-content/uploads/2012/05/giperssylqi-v-html.jpg

preuzimanje datoteka

Na web stranici ova će poveznica imati sljedeći oblik:

Preglednik "razumije" da objekt s ekstenzijom .zip može biti namijenjen samo za preuzimanje, što je ono što se od korisnika traži.

Usput, put do bilo koje datoteke ponekad je naznačen putem FTP(). Zatim u URL-u koji se koristi kao parametar atributa href trebate jednostavno zamijeniti HTTP protokol (HTTPS) s FTP-om. Veza datoteke će izgledati ovako:

preuzeti sa servera

Ali to nije sve. Na sličan način stvara se poveznica za elektronička pošta koristeći mailto pseudo-protokol Za brzi pristup alatu za pisanje pisama:

pisati pisma

Nakon što kliknete na takvu vezu, trebao bi se pojaviti prozor s instaliranim zadanim postavkama mail klijent, u kojem možete sastaviti tekst poruke i poslati je na već navedenu adresu, preuzetu, kao što vjerojatno pogađate, iz href.

U praksi su hiperveze na poštu vrlo često ranije koristili webmasteri i vlasnici velikih resursa kako bi osigurali pogodnost korisnicima i klijentima koji su mogli pristupiti obrascu za poštu jednim klikom.

Ali ova vrsta komunikacije na web resursima više nije toliko popularna (pogotovo jer možete instalirati, na primjer), jer otvoriti na ovaj način poštanske adrese aktivno presreće softver i koristi ga razne vrste pošiljatelja neželjene pošte.

Dao sam kao primjer samo najčešće protokole koji su dio URL-a, koji je pak parametar atributa href prilikom formiranja hiperveze. Uz HTTP (HTTPS), FTP i mailto, postoje i drugi za rješavanje specijaliziranijih problema. Možda ćemo ih detaljnije pogledati u drugim publikacijama.

Vrste hiperveza

Pokušajmo sada klasificirati veze prema određenim kriterijima.

Prema svom opsegu:

1. Vanjski— vode do stranica koje se nalaze izvan stranice na kojoj su objavljeni;

2. Domaći— povezivanje web stranica koje se nalaze unutar istog web izvora.

Po formatu:

2. Grafički e - u ovom slučaju, sidro hiperveze je slika (uključujući minijaturu), banner, gumb itd.

Prema vrsti URL-a koji služi kao vrijednost atributa href:

1. Apsolutno, koji sadrže eksplicitnu naznaku protokola prijenosa podataka (na primjer, HTTP) i Naziv domene web stranica (sve o domenama).

Takve veze se najčešće koriste kada se upućuje na stranice vanjskih izvora. U ovom slučaju, href vrijednost će uključivati ​​punu stazu do željenu datoteku ili web stranice. Evo primjera apsolutne hiperveze:

Kontekst - što je to?

2. Relativni, čija će jedna od opcija za izradu biti staza navedena u odnosu na korijensku mapu web stranice (otuda i naziv ove vrste hiperveze). U tom će slučaju protokol (HTTP) i domena stranice biti uklonjeni iz URL-a:

Kontekst - što je to?

Relativne hiperveze na web stranici mogu pružiti poveznice na interne stranice. U ovom obliku su kraći, što olakšava HTML kod. Naravno, sve nije tako jednostavno, i zahtijeva širi obuhvat, u što se možete uvjeriti ako pratite navedeni link.

Atributi oznake a

Sada da vidimo koji drugi atributi postoje, osim potrebnog href, i kako oni mogu utjecati na stvaranje hiperveze. Najcjelovitije podatke o tome, da tako kažem, “iz prve ruke” možete pronaći na službenim stranicama Međunarodnog konzorcija W3C, gdje se najbrže pojavljuju ažurne informacije.

Potpuno su identični i pokreću otvaranje web stranice u trenutnoj kartici. Ako želite da se stranice otvaraju u novoj kartici kada slijedite veze, trebali biste dodati kada kreirate vezu ciljni atribut s praznim parametrom:

Kontekst - što je to?

Iako neki webmasteri i stručnjaci za SEO vjeruju da je bolje da se posjetitelju pruži mogućnost izbora (odnosno, ne navede ciljano prazno), jer ako je potrebno, stranica se može otvoriti u novoj kartici koristeći kontekstni izbornik(pomaknite pokazivač na poveznicu, kliknite desni klik mišem i kliknite na odgovarajuću stavku):


Štoviše, kao što vidite, u ovom slučaju korisnik ima prednost jer je moguće otvoriti web stranicu ne samo u novoj kartici, već i u novom prozoru(ova se opcija ne može implementirati putem HTML-a, samo pomoću skripti).

Ali vjerujem da nisu svi korisnici početnici u potpunosti upoznati s mogućnostima i postavkama popularnih preglednika (). Vrlo je vjerojatno da će čitatelj, nakon što je slijedio vanjsku hipervezu i izgubio iz vida izvornu stranicu (umjesto toga pojavit će se dokument primatelja), jednostavno frustrirano zatvoriti karticu.

Dakle, vlasnik web resursa može ne samo izgubiti obećavajućeg posjetitelja, već i dobiti pogoršanje čimbenika ponašanja (), što će dovesti do gubitka pozicije stranice u rangiranju.

Osim toga, otvaranje stranice u susjednoj kartici vrlo je zgodno s gledišta upotrebljivosti (). Korisnik slijedi hipervezu na web stranicu i prima Dodatne informacije i, kao da se ništa nije dogodilo, nastavlja proučavati glavno gradivo.

Za stvaranje objektivne slike, treba dodati da se ispostavlja da je primjena “target="_blank"” na sve vanjske poveznice prepuna određenih sigurnosnih rizika. Ako nekoga zanima, možete pročitati gdje su dane preporuke za rješavanje problema pri korištenju ciljne praznine, kao i alternativne opcije za provedbu zadatka otvaranja web stranice u novoj kartici.

Čini se da sam primijetio sve prednosti i nedostatke korištenja prazne vrijednosti za otvaranje hiperveze u novoj kartici. Ako ste čitali članke na mom blogu, vjerojatno ste već pogodili moj stav prema ovom parametru ciljnog atributa.

Na ovaj trenutak Za mene su njegove prednosti veće od mana i ja sam bezuvjetni pobornik. Na temelju gore navedenih činjenica možete stvoriti vlastito mišljenje o ovom pitanju. Iako... uzimajući u obzir pojavu novih okolnosti, to se može promijeniti.

Kako napraviti hash linkove, sidra i zašto su oni potrebni?

Sljedeće, želio bih vam skrenuti pozornost na drugu vrstu hiperveza, koja može biti korisna ako je materijal koji se nalazi na web stranici prilično opsežan i treba ga strukturirati tako da poboljša navigaciju.

Ne morate daleko tražiti primjer, samo pogledajte sadržaj ove publikacije na samom početku. Vidite li da postoji popis odjeljaka članka? Hiperveze na ove odjeljke samo su hash veze. Nakon klika na bilo koji od njih, preglednik će pomaknuti stranicu do mjesta gdje počinje odgovarajući dio.

Takve se veze stvaraju vrlo jednostavno. Prvo morate stvoriti sidro postavljanjem odgovarajuće oznake na traženo mjesto na stranici u obliku ID-a, koji je jedan od globalnih atributa koji se primjenjuje na bilo koju HTML oznaku.

Zahvaljujući univerzalnosti ID-a, takve sidrene oznake mogu se instalirati gotovo bilo gdje na web stranici. Budući da je tekst obično podijeljen na odlomke, oni se također mogu primijeniti na . Uglavnom stavljam sidra pomoću kojih su članci podijeljeni na logične dijelove:

Pošto je tako sve zabilježio prava mjesta u HTML kodu, zatim stvorite hiperveze na njih. Da bismo to učinili, na kraju, nakon posljednje kose crte “/” u URL-u (što je, kao što već znate, vrijednost atributa href), uzastopno pišemo znak “#” i naziv oznake (ID ):

Kako formirati hash veze i sidra?

Štoviše, ako je takva veza sidra postavljena na istu stranicu kao i sidra, tada se dio URL-a do i uključujući posljednju kosu crtu prije hash-a može izostaviti i samo "#" plus naziv ID-a koriste se kao parametar href (u biti, ovo je jedna od opcija za relativne veze):

Kako formirati hash veze i sidra?

Odnosno, prilikom sastavljanja sadržaja za priručnik HTML optimizacija koda, možete jednostavno koristiti ovu laganu opciju. Ako kao URL stavite samo jedan hash znak, bez imena identifikatora, tada će se od mjesta gdje se nalazi takva poveznica stranica pomicati skroz prema gore:

Vrh

Zapravo, ovo najjednostavnija opcija, što opet služi kao dodatna prednost za iskoristivost resursa, budući da svojim posjetiteljima olakšava život. Možete koristiti atraktivnu sliku kao sidro za izradu gumba.

Kako ukloniti podcrtavanje i promijeniti boju veze

HTML programeri su razmislili o gotovo svim nijansama koje mogu pomoći u optimizaciji ovog ili onog aspekta, isto vrijedi i za hiperveze. Na primjer, slijedeći hipervezu na drugu web stranicu i vraćajući se natrag, korisnik će vidjeti da je hiperveza promijenila boju.

Ako treba ponavljati takve radnje više puta, moći će brzo odrediti na koje je poveznice već kliknuo, a na koje nije. Ova opcija je uključena u gotovo svaki preglednik. Nema potrebe objašnjavati koliko je to praktično i koliko štedi vremena.

Zadane i ne-CSS hiperveze istaknuto podcrtavanjem i tri opcije boja, od kojih svaki ima svoj atribut za:

  • veza - postavlja boju hiperveze na web stranici (prema zadanoj postavci plava, koja je označena #0000ff);
  • alink — boja aktivne hiperveze za vrijeme dok je obrađuje web preglednik (crveno #ff0000);
  • vlink — boja poveznice koju je korisnik posjetio (ljubičasta, #800080).

Kako možete promijeniti boje poveznica koje preglednici prikazuju za vašu stranicu? Pa, za jednostavnu HTML stranicu na kojoj se stranice izrađuju ručno (a mislim da u suvremenoj stvarnosti praktički nema potpuno funkcionalnih resursa ove vrste, osim možda jednostavnih dnevnika i odredišnih stranica), samo trebate pronaći početnu oznaku i navedite potrebne parametre za njega (usput, možete koristiti njegovo ime za označavanje boje), na primjer:

Ako ste instalirali sustav za upravljanje sadržajem () za upravljanje svojim web resursom, tada, bez obzira na vrstu motora koji koristite, trebate otvoriti za uređivanje datoteke odgovorne za prikaz zaglavlja (zaglavlja), gdje postoji oznaka za otvaranje .

Ako vaš resurs pokreće WordPress, tada za praktičnu implementaciju ove ideje možete ga koristiti kao alat za automatsko umetanje slike unutar hiperveze, gdje prvo odaberete iz biblioteke ili preuzmete željenu sliku i umetnete je u tekst:

Zatim odaberite kod dobivene slike i pritisnite gumb "link" u uređivaču, nakon čega u prozor koji se pojavi zalijepite željenu kopiranu hipervezu:


Danas ćemo govoriti o glavnim funkcijama koje se odnose na s pseudo klasom :cilj i kako ga možete koristiti za stvaranje nevjerojatnih efekata s čistim CSS-om, naučite kako izraditi dijaprojekcije css pomoć i mnogo više.

Što je: meta?

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

Dodajmo animaciju

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

h1 ( font: bold 30px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; -webkit-transition: boja 0,5s lakoća; -moz-prijelaz: boja 0,5s lakoća; -o-prijelaz: boja 0,5 s ease; -ms-transition: color 0.5s ease; prijelaz: color 0.5s ease; ) h1:target (veličina fonta: 50px; text-decoration: underline; color: #37aee4; )

Upravljanje neciljanim objektima

Recimo da želimo promijeniti stil odlomka koji dolazi nakon odabranog naslova.

Ovo je vrlo jednostavno učiniti pomoću sljedećeg koda. Pogledajte demo.

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

Stvaranje jednostavnog dijaprojekcije pomoću CSS-a

Programeri su osmislili gomilu aplikacija koristeći pseudo klasu : cilj. Ovaj pseudo-selektor može biti koristan pri stvaranju kartica ili čak dijaprojekcija. Pogledajmo kako se potonje može implementirati.

Kreirajmo nesređeni popis. Svaka stavka popisa sadržavat će sidro oznake koje pokazuje na ID isječka i sliku s odgovarajućim ID-om.

  • Jedan
  • Dva
  • Tri
  • četiri
  • Pet

Dodajmo sada naše stilove:

* ( margina: 0px; padding: 0px; ) #slideshow ( margina: 50px auto; pozicija: relativna; širina: 400px; ) ul ( list-style: ništa; ) li ( float: lijevo; overflow: skriveno; margina: 0 20px 0 0; ) li a (boja: #222; dekoracija teksta: ništa; font: 15px/1 Helvetica, sans-serif; -webkit-prijelaz: lakoća boje 0,5s; -moz-prijelaz: lakoća boje 0,5s; -o-prijelaz: lakoća boje 0,5 s; -ms-prijelaz: lakoća boje 0,5 s; prijelaz: lakoća boje 0,5 s; ) li a: lebdjeti ( boja: #50b0df; ) li img ( pozicija: apsolutna; vrh: 50 px; lijevo: 0; z-indeks: -1; -webkit-prijelaz: neprozirnost 1s ease-in-out; -moz-prijelaz: neprozirnost 1s ease-in-out; -o-prijelaz: neprozirnost 1s ease-in-out; -ms-prijelaz: neprozirnost 1s lagano uvlačenje; prijelaz: neprozirnost 1s lagano uvlačenje; ) li img:target ( z-index: 1; ) li img:not(:target) ( neprozirnost: 0; )

Prvo dodajmo float:lijevo sve elemente na našem popisu. Za elemente smo koristili apsolutno i relativno pozicioniranje.

Zatim, idemo instalirati z-indeks: -1 za sve slike, a zatim postavite z-indeks: 1 za ciljane slike. To će uzrokovati promjenu slike kada kliknete na stavku popisa. Kako bi prijelaz bio glatkiji, postavit ćemo vrijednost neprozirnosti za ostale slike 0 .

Pogledajte prezentaciju čistog CSS-a.

Kompatibilnost s različitim preglednicima

Pseudoklasa : cilj je CSS selektor treće razine, što znači da je podržan u gotovo svim preglednicima osim (nikada nećete pogoditi) ... TJ. Dobri stari magarac podržava samo CSS3 selektore u verzijama 9 i 10.

Kao i svaki drugi problem s prikazom CSS3 selektora u IE-u, ovo je prilično jednostavno rješenje pomoću Selectivizra.

Zahvaljujući ovom dodatku i malo vudu magije, potrebni CSS3 selektori bit će podržani čak iu IE6.

Zaključak

Korištenje pseudo-klasa može se isprva činiti komplicirano, ali shvatit ćete kako vam one mogu olakšati rad i učiniti vašu stranicu zanimljivijom. Pseudo-selektor

:cilj- dobar primjer za to. Samo pazite da ne pretjerate sa stilovima.

Još jedan zanimljiv slučaj upotrebe :cilj

Da biste prešli na odabrani fragment dokumenta, u adresi se upisuje simbol # i navodi se naziv identifikatora. Na primjer, u adresi http://www.w3.org/TR/css3-selectors/#target-pseudo prijelaz se događa na element čiji je id atribut postavljen na target-pseudo. Ovaj unos adrese naziva se "ciljni element". Pseudoklasa :target primjenjuje se na ciljni element, drugim riječima, identifikator koji se pojavljuje u adresnoj traci preglednika.

Oznake

OpisPrimjer
<тип> Označava vrstu vrijednosti.<размер>
A & & BVrijednosti se moraju ispisati navedenim redoslijedom.<размер> && <цвет>
A | BOznačava da trebate odabrati samo jednu vrijednost od predloženih (A ili B).normalno | malim slovima
A || BSvaka se vrijednost može koristiti samostalno ili zajedno s drugima bilo kojim redoslijedom.širina || računati
Vrijednosti grupa.[ obrezivanje || križ ]
* Ponovite nula ili više puta.[,<время>]*
+ Ponovite jednom ili više puta.<число>+
? Navedena vrsta, riječ ili grupa nisu obavezni.umetak?
(A, B)Ponovite najmanje A, ali ne više od B puta.<радиус>{1,4}
# Ponovite jednom ili više puta odvojene zarezima.<время>#
×

Primjer

cilj

  • priča 1
  • Priča 2

priča 1

Priča o tome kako je trebalo napraviti grob, počeli su ga kopati, pa zakopati i što je od toga ispalo.

Priča 2

Priča o tome kako su se u blizini blagovaonice 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.

Bilješka

U pregledniku Safari prije verzije 3.0 pravila stila se ne primjenjuju kada korisnik koristi navigaciju preglednika (gumbi Natrag i Naprijed).

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobravanja.

  • Preporuka - Specifikaciju je odobrio W3C i preporučuje se kao standard.
  • Preporuka kandidata ( Moguća preporuka) - skupina odgovorna za standard je zadovoljna da on ispunjava svoje ciljeve, ali joj je potrebna pomoć razvojne zajednice za implementaciju standarda.
  • Predložena preporuka Predložena preporuka) - u ovoj fazi dokument se podnosi Savjetodavnom vijeću W3C na konačno odobrenje.
  • Radni nacrt - zrelija verzija nacrta o kojoj se raspravljalo i dopunjena radi pregleda zajednice.
  • Urednikov nacrt ( Urednički nacrt) - nacrt verzije standarda nakon izmjena koje su izvršili urednici projekta.
  • Nacrt ( Nacrt specifikacije) - prva verzija nacrta standarda.
×

Preglednici

U tablici preglednika koriste se sljedeće oznake.