Šiandien kalbėsime apie pagrindines funkcijas, susijusias su su pseudo klase :target ir kaip galite jį naudoti kurdami nuostabius efektus naudodami gryną CSS, sužinokite, kaip kurti skaidrių demonstracijas css pagalba ir daug daugiau.

Kas yra: tikslas?

h1 ( šriftas: paryškintas 30 piks./1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; ) h1: target ( šrifto dydis: 50 pikselių; teksto dekoravimas: pabrauktas; spalva: #37aee4; )

Pridėkime animaciją

Padidinkime savo efektą ir pridėkime animacijos, pavyzdžiui, gražų perėjimą, kad pakeistume spalvą. Pažiūrėkite, kaip tai veikia.

h1 ( šriftas: paryškintas 30 piks./1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; -webkit-transition: spalva 0,5s lengvas; -moz-transition: spalva 0,5s lengvas; -o-transition: spalva 0,5 s paprasta

Netikslinio objekto valdymas

Tarkime, kad norime pakeisti pastraipos, esančios po pasirinktos antraštės, stilius.

Tai labai lengva padaryti naudojant šį kodą. Žiūrėkite demonstracinę versiją.

h1: taikinys + p (fonas: #f7f7f7; užpildymas: 10 pikselių; )

Paprastos skaidrių demonstracijos kūrimas naudojant CSS

Kūrėjai sugalvojo daugybę programų naudodami pseudo klasę : tikslas. Šis pseudo parinkiklis gali būti naudingas kuriant skirtukus ar net skaidrių demonstraciją. Pažiūrėkime, kaip pastaroji gali būti įgyvendinta.

Sukurkime netvarkingą sąrašą. Kiekviename sąrašo elemente bus žymos prieraišas, nukreipiantis į fragmento ID, ir vaizdas su atitinkamu ID.

• Vienas
• Du
• Trys
• Keturi
• Penkios

Dabar pridėkime savo stilius:

* ( paraštė: 0 tšk.; užpildymas: 0 tšk.; ) # skaidrių demonstracija ( paraštė: 50 tšk. automat.; padėtis: santykinė; plotis: 400 piks.; ) ul ( sąrašo stilius: nėra; ) li ( plaukimas: kairėn; perpildymas: paslėptas; paraštė: 0 20px 0 0; ) li a (spalva: #222; teksto dekoravimas: nėra; šriftas: 15px/1 Helvetica, sans-serif; -webkit-transition: color 0.5s easy; -moz-transition: color 0.5s easy; -o-perėjimas: 0,5 s perėjimas: 0,5 s perėjimas: 0,5 s lengvas: -1 s perėjimas; ; li img:not(:target) ( neskaidrumas: 0; )

Pirmiausia pridėkime plūdė: kairėje visi elementai mūsų sąraše. Elementams naudojome absoliučią ir santykinę padėties nustatymą.

Toliau įdiegkime z indeksas: -1 visiems vaizdams ir tada nustatykite z indeksas: 1 tiksliniams vaizdams. Dėl to vaizdas pasikeis, kai spustelėsite sąrašo elementą. Kad perėjimas būtų sklandesnis, kitiems vaizdams nustatysime neskaidrumo reikšmę 0 .

Žiūrėkite gryno CSS skaidrių demonstravimo demonstraciją.

Suderinamumas tarp naršyklių

Pseudoklasė : tikslas yra trečio lygio CSS parinkiklis, o tai reiškia, kad jis palaikomas beveik visose naršyklėse, išskyrus (niekada neatspėsite) ... IE. Senas geras asilas palaiko tik 9 ir 10 versijų CSS3 selektorius.

Kaip ir bet kuri kita problema, susijusi su CSS3 parinktuvų rodymu IE, tai gana lengva išspręsti naudojant Selectivizr.

Dėl šio įskiepio ir tam tikros „voodoo“ magijos reikalingi CSS3 selektoriai bus palaikomi net IE6.

Išvada

Pseudoklasių naudojimas iš pradžių gali atrodyti sudėtingas, tačiau suprasite, kaip jie gali palengvinti jūsų darbą ir padaryti svetainę įdomesnę. Pseudo-selektorius

:target– geras to pavyzdys. Tiesiog įsitikinkite, kad nepersistenkite su stiliais.

Kitas įdomus naudojimo atvejis :target

Pseudo-class:target yra viena iš puikių CSS3 savybių. Jis atitinka elementą, kurį nurodo dokumento URI identifikatorius.

URI identifikatoriuje yra simbolis „#“, po kurio nurodomas atributo reikšmę atitinkančio identifikatoriaus pavadinimas id elementas dokumente.

Palaikymas

Kadangi kalbame apie CSS3, pseudo klasę palaiko visos šiuolaikinės naršyklės, išskyrus IE versijas nuo 6 iki 8. Įprastas nusivylimas neturėtų sutrukdyti apsispręsti naudoti:target. IE9 jau palaiko pseudo class:target .

Kaip naudoti:target?

Ši pseudo klasė gali turėti savo stilių, kaip ir pseudo klasės :užveskite pelės žymeklį, :aktyvus arba :fokusas nuorodoms. Tas pats, kaip ir minėtos pseudo klasės :target naudojami tam tikriems veiksmams su svetaine. Ypač naudojant tokį fragmento identifikatorių: http://example.com/index.html#lorem-ipsum.

Demonstracija

Demonstraciniame puslapyje pateikiamas labai aiškus pavyzdys, kaip ir kada naudoti :target. Pseudo klasė :target gali pagerinti jūsų išteklių naudojimą.

HTML žymėjimas

Žemiau yra pavyzdys iš demonstracinės versijos. Turime 4 nuorodas ir tiek pat blokų. Kiekviena grupė turi savo unikalų identifikatorių.

• 1 blokas
• 2 blokas
• 3 blokas
• 4 blokas

CSS

Šis CSS kodas leidžia pasiekti norimą efektą, kurio pagalba paryškinamas blokas su atitinkamu ID (aplink stačiakampį atsiranda šešėlis).

/* Pridėkite šiek tiek tarpo */ ul, div ( paraštė-apačia: 10 piks.; ) /* Numatytasis bloko stilius */ div ( užpildymas: 10 piks.; kraštinė: 1 piks. solid #eaeaea; -moz-border-radius: 5px; border- spindulys : 5px; ) /* Pakeiskite išvesties išvaizdą, kai suderinama #9c9c9c ; langelis-šešėlis: 0 0 4px #9c9c9c;

Žemiau pateikiamas kodo rezultatas. Jei spustelėsite nuorodą, atitinkamas blokas paryškinamas ir tampa aktyvus.

Sveiki, mieli tinklaraščio svetainės skaitytojai. Šiandienos publikaciją nusprendžiau skirti svarbiausiam žiniatinklio administravimo aspektui, kur pabandysiu išsamiai paaiškinti, kas yra hipersaitas, su kuriuo neatsiejamai susijęs, kuris, savo ruožtu, be perdėto, yra interneto pagrindas.

Tačiau norint teisingai sukurti hipersaitus ir įterpti juos į tinklalapių kodą (pavyzdžiui, savo svetainę), turite išstudijuoti atitinkamą hiperteksto žymėjimo kalbos sritį (), nes šie elementai formuojami naudojant HTML. žyma, kuri turi galimybę atnaujinti nuorodą į norimą rūšį.

Taigi, šiandien apžvelgsime, iš kokių dalių susideda hipersaitas, kaip naudojant tikslinį tuščią atributą galima atidaryti puslapį naujame lange (skirtuke), kaip bet kurią nuotrauką paversti nuoroda ir daug kitų svarbių detalių. Be kita ko, ši informacija padės jums mokytis HTML kalbos.

Kas yra hipersaitas ir ar jį galima pavadinti nuoroda?

Atsakydamas į pavadinime užduotą klausimą, pasakysiu, kad sąvoka „nuoroda“ turi platesnį semantinį spektrą (nuoroda į Sibirą, bankininkystė mokėtojui identifikuoti, tekstas knygoje ir kt.), apimantį ir sąvokai „nuoroda“ būdingą reikšmę. „hipersaitas“ , susietas tik su hipertekstu, leidžiančiu netiesiškai suvokti informaciją.

Taigi, hipersaitas yra ypatingas nuorodos atvejis, todėl visiškai įmanoma juos naudoti šiandienos temose vienodai. Būtent tai naudosiu savo pranašumui per visą šiandienos įrašą, naudodamas abu terminus, kad išvengčiau nereikalingo raktinių žodžių šlamšto.

Tačiau yra ir nematomų paslaugų, sukurtų naudojant ir esantis viduje, kurio užduotis yra siųsti daugybę signalų ir komandų naršyklėms atlikti tam tikrą funkciją.

Pavyzdžiui, naudojant paslaugų hipersaitus galima parodyti piktogramą. Jie gali būti matomi tik kaip HTML kodo dalis (norėdami tai padaryti, spustelėkite bet kurį naršyklėje atidarytą puslapį):

Kol kas palikime paslaugų nuorodas ramybėje ir apsvarstykime bendrą hipersaitų kūrimo modelį. Jie turi bendrą tai, kad jie visi turi būtinas atributas href, kurio reikšmė yra dokumento adresas (). HTML nuoroda gali nukreipti į vidinį svetainės puslapį arba į išorinį dokumentą.

Dar viena svarbi pastaba. Naudojant atributą href hipersaitus galima spustelėti, tai yra, naudotojai gali automatiškai patekti į atitinkamą svetainės puslapį juos spustelėjus.

Kaip sukurti hipersaitą HTML naudojant href

Taigi, jau žinome, kad norint sukurti nuorodą, reikalinga žyma ir href atributas, kurių parametrai gali būti įvairių tipų URL. Nes a tai, tada tarp angos ir uždarymas yra turinys, kuris bus rodomas tinklalapyje.

Tai turinys vadinamas inkaru ir gali būti pateiktas teksto arba vaizdo pavidalu (apie tai, kaip padaryti paveikslėlį, plačiau pakalbėsime žemiau esančia nuoroda). Kaip jau minėjau, inkarą bus galima spustelėti. Pažiūrėkime į hipersaito su tekstiniu turiniu pavyzdį. Štai kaip jo dizainas atrodys HTML kode:

šiek tiek apie inkarus

Be HTTP, galima naudoti saugų HTTPS protokolą. Nuoroda nebūtinai turi nukreipti į tinklalapį. Viskas priklauso nuo href reikšmės, kuri gali būti kelias į tam tikrą failą:

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

parsisiųsti

Tinklalapyje ši nuoroda bus tokios formos:

Naršyklė „supranta“, kad objektas su plėtiniu .zip gali būti skirtas tik atsisiuntimui, o tai vartotojas raginamas padaryti.

Beje, kelias į bet kurį failą kartais nurodomas per FTP(). Tada URL, kuris naudojamas kaip href atributo parametras, tiesiog turėtumėte pakeisti HTTP protokolą (HTTPS) FTP. Failo nuoroda atrodys taip:

parsisiųsti iš serverio

Bet tai dar ne viskas. Panašiu būdu pašto nuoroda sukuriama naudojant mailto pseudoprotokolą Norėdami greitai pasiekti laiškų rašymo įrankį:

Rašyti laiškus

Paspaudus tokią nuorodą, turėtų pasirodyti numatytosios el. pašto programos langas, kuriame galima susidėlioti laiško tekstą ir išsiųsti jį jau nurodytu adresu, paimtu, kaip tikriausiai atspėjote, iš href.

Praktiškai hipersaitus į paštą labai dažnai anksčiau naudojo žiniatinklio valdytojai ir didelių išteklių savininkai, kad būtų užtikrintas patogumas vartotojams ir klientams, kurie vienu paspaudimu galėjo pasiekti pašto formą.

Tačiau toks bendravimas žiniatinklio šaltiniuose nebėra toks populiarus (juolab, kad jį, pavyzdžiui, galima įdiegti), nes tokiu būdu atidarytus el. pašto adresus aktyviai perima programinė įranga ir naudoja įvairūs nepageidaujamo e. pašto siuntėjai.

Kaip pavyzdį pateikiau tik dažniausiai naudojamus protokolus, kurie yra URL dalis, o tai, savo ruožtu, yra atributo href parametras formuojant hipersaitą. Be HTTP (HTTPS), FTP ir mailto, yra ir kitų, skirtų labiau specializuotoms problemoms spręsti. Galbūt juos plačiau panagrinėsime kituose leidiniuose.

Hipersaitų tipai

Dabar pabandykime klasifikuoti nuorodas pagal tam tikrus kriterijus.

Pagal jų taikymo sritį:

1. Išorinis— nukreipti į puslapius, esančius už svetainės, kurioje jie paskelbti, ribų;

2. Buitiniai— sujungti tinklalapius, esančius tame pačiame žiniatinklio šaltinyje.

Pagal formatą:

2. Grafiškai e - šiuo atveju hipersaito inkaras yra vaizdas (įskaitant miniatiūrą), reklamjuostė, mygtukas ir kt.

Pagal URL tipą, naudojamą kaip href atributo vertė:

1. Absoliutus, kuriuose yra aiškiai nurodytas duomenų perdavimo protokolas (pavyzdžiui, HTTP) ir svetainės domeno pavadinimas (visame apie domenus).

Tokios nuorodos dažniausiai naudojamos nurodant išorinių išteklių puslapius. Tokiu atveju į href reikšmę bus įtrauktas visas kelias į norimą failą arba tinklalapį. Štai absoliutaus hipersaito pavyzdys:

Kontekstas – kas tai?

2. Giminaitis, viena iš kūrimo parinkčių, kuri bus nurodytas kelias, susijęs su svetainės šakniniu aplanku (taigi ir šio tipo hipersaito pavadinimas). Tokiu atveju protokolas (HTTP) ir svetainės domenas bus pašalinti iš URL:

Kontekstas – kas tai?

Santykinės hipersaitos tinklalapyje gali pateikti nuorodas į vidinius puslapius. Šioje formoje jie yra trumpesni, todėl HTML kodas yra lengvesnis. Žinoma, viskas nėra taip paprasta ir reikalauja platesnės aprėpties, kurią pamatysite paspaudę pateiktą nuorodą.

Žymės atributai

Dabar pažiūrėkime, kokie yra kiti atributai, be būtino href, ir kaip jie gali paveikti hipersaito kūrimą. Išsamiausius duomenis šiuo klausimu, taip sakant, „iš pirmų rankų“, galite rasti oficialioje Tarptautinio W3C konsorciumo svetainėje, kur naujausia informacija pasirodo greičiausiai.

Jie yra visiškai identiški ir inicijuoja tinklalapio atidarymą dabartiniame skirtuke. Jei norite, kad puslapiai atsidarytų naujame skirtuke spustelėjus nuorodas, kurdami nuorodą turėtumėte pridėti tikslinis atributas su tuščiu parametru:

Kontekstas – kas tai?

Nors kai kurie žiniatinklio valdytojai ir SEO specialistai mano, kad geriau, jei lankytojui būtų suteikta galimybė pasirinkti (t. y. nenurodyti tikslo tuščio), nes esant reikalui, puslapį galima atidaryti naujame skirtuke naudojant kontekstinį meniu (perkelti žymeklį ant nuorodos, dešiniuoju pelės mygtuku spustelėkite ir spustelėkite atitinkamą tašką):

Be to, kaip matote, tokiu atveju vartotojas turi pranašumą, kad tinklalapį galima atidaryti ne tik naujame skirtuke, bet ir naujame lange(ši parinktis negali būti įdiegta naudojant HTML, tik naudojant scenarijus).

Tačiau manau, kad ne visi pradedantieji vartotojai yra visiškai susipažinę su populiarių naršyklių galimybėmis ir nustatymais (). Labai tikėtina, kad skaitytojas, pasekęs išorinį hipersaitą ir pametęs šaltinio puslapį (vietoj jo pasirodys gavėjo dokumentas), nusivylęs tiesiog uždarys skirtuką.

Taigi žiniatinklio išteklių savininkas gali ne tik prarasti perspektyvų lankytoją, bet ir pabloginti elgesio veiksnius (), o tai lems puslapio pozicijos reitinge praradimą.

Be to, atidaryti puslapį gretimame skirtuke labai patogu naudojimo požiūriu (). Vartotojas seka hipersaitą į tinklalapį, gauna papildomos informacijos ir, lyg nieko nebūtų nutikę, toliau nagrinėja pagrindinę medžiagą.

Norint sukurti objektyvų vaizdą, reikėtų pridurti, kad „target="_blank" taikymas bet kokioms išorinėms nuorodoms gali būti susijęs su tam tikra saugumo rizika. Jei kas nors domisi, galite perskaityti, kur pateikiamos rekomendacijos, kaip išspręsti problemas naudojant tikslinį tuščią vietą, taip pat alternatyvios galimybės, kaip įgyvendinti užduotį atidaryti tinklalapį naujame skirtuke.

Atrodo, kad atkreipiau dėmesį į visus privalumus ir trūkumus naudojant tuščią reikšmę norint atidaryti hipersaitą naujame skirtuke. Jei skaitote straipsnius mano tinklaraštyje, tikriausiai jau atspėjote mano požiūrį į šį tikslinio atributo parametrą.

Šiuo metu jo privalumai man nusveria minusus, ir aš esu besąlygiškas rėmėjas. Remdamiesi aukščiau pateiktais faktais, galite susidaryti savo nuomonę šiuo klausimu. Nors...atsižvelgiant į naujų aplinkybių atsiradimą, gali pasikeisti.

Kaip sukurti maišos nuorodas, inkarus ir kam jie reikalingi?

Toliau norėčiau atkreipti jūsų dėmesį į kito tipo hipersaitus, kurie gali būti naudingi, jei tinklalapyje esanti medžiaga yra gana didelė ir turėtų būti struktūrizuota taip, kad pagerintų naršymą.

Pavyzdžio toli ieškoti nereikia, tiesiog pažiūrėkite į šio leidinio turinį pačioje pradžioje. Ar matote, kad yra straipsnio skyrių sąrašas? Hipersaitai į šiuos skyrius yra tik maišos nuorodos. Paspaudus bet kurį iš jų, naršyklė nuslinks puslapiu į vietą, kur prasideda atitinkama dalis.

Tokios nuorodos sukuriamos gana paprastai. Pirmiausia reikia sukurti inkarasįdėdami atitinkamą etiketę reikiamoje puslapio vietoje ID forma, kuri yra vienas iš visuotinių atributų, taikomų bet kuriai HTML žymai.

Dėl ID universalumo tokias inkaro žymas galima įdiegti beveik bet kurioje tinklalapio vietoje. Kadangi tekstas paprastai skirstomas į pastraipas, jos taip pat gali būti taikomos . Daugiausia išdėjau inkarus, su kuriais straipsniai skirstomi į logiškas dalis:

Taip pažymėję visas reikalingas vietas HTML kode, sukuriame į jas hipersaitus. Norėdami tai padaryti, pabaigoje po paskutinio pasvirojo brūkšnio „/“ URL (kuris, kaip jau žinote, yra atributo href reikšmė), paeiliui įrašome svaro ženklą „#“ ir etiketės pavadinimą (ID ):

Kaip suformuoti maišos nuorodas ir inkarus?

Be to, jei tokia prieraišo nuoroda įdedama tame pačiame puslapyje kaip ir prieraiščiai, dalis URL iki paskutinio pasvirojo brūkšnio prieš maišą gali būti praleista ir kaip href parametras bus naudojamas tik „#“ ir ID pavadinimas. (iš esmės tai yra viena iš santykinių nuorodų parinkčių):

Kaip suformuoti maišos nuorodas ir inkarus?

Tai reiškia, kad sudarydami vadovo turinį, skirtą optimizuoti HTML kodą, galite lengvai naudoti šią lengvą parinktį. Jei kaip URL įdėsite tik vieną maišos ženklą be identifikatoriaus pavadinimo, tada nuo tos vietos, kur yra tokia nuoroda, puslapis slinks iki galo:

Į viršų

Tiesą sakant, tai yra paprasčiausias variantas, kuris vėlgi yra papildomas pranašumas išteklių naudojimo patogumui, nes tai palengvina lankytojų gyvenimą. Norėdami sukurti mygtuką, galite naudoti patrauklų paveikslėlį kaip inkarą.

Kaip pašalinti pabraukimą ir pakeisti nuorodos spalvą

HTML kūrėjai apgalvojo beveik visus niuansus, kurie gali padėti optimizuoti tą ar kitą aspektą, tas pats pasakytina ir apie hipersaitus. Pavyzdžiui, sekdamas hipersaitą į kitą tinklalapį ir grįždamas atgal, vartotojas pamatys, kad hipersaito spalva pasikeitė.

Jei jam reikės pakartoti tokius veiksmus, jis galės greitai nustatyti, kurias nuorodas jis jau spustelėjo, o kurias ne. Ši parinktis yra beveik kiekvienoje naršyklėje. Nereikia aiškinti, kaip tai patogu ir kiek tai sutaupo laiko.

Numatytieji ir ne CSS hipersaitai paryškintas pabraukimu ir trimis spalvų variantais, kurių kiekvienas turi savo atributą:

• nuoroda – nustato tinklalapio hipersaito spalvą (pagal numatytuosius nustatymus mėlyna, kuri žymima #0000ff);
• alink — aktyvaus hipersaito spalva tam laikotarpiui, kol jį apdoroja interneto naršyklė (raudona #ff0000);
• vlink — vartotojo aplankytos nuorodos spalva (violetinė, #800080).

Kaip galite pakeisti nuorodų, kurias naršyklės rodo jūsų svetainėje, spalvas? Na, o paprastai HTML svetainei, kurioje puslapiai kuriami rankiniu būdu (ir manau, kad šiuolaikinėje realybėje praktiškai nėra visiškai veikiančių tokio pobūdžio išteklių, išskyrus galbūt paprastus dienoraščius ir nukreipimo puslapius), tereikia rasti pradinę žymą. ir nurodykite jam reikalingus parametrus (beje, galite naudoti jo pavadinimą spalvai nurodyti), pavyzdžiui:

Jei įdiegėte turinio valdymo sistemą (), kad administruotumėte savo žiniatinklio išteklius, tada, neatsižvelgiant į naudojamo variklio tipą, turite atidaryti failą, atsakingą už antraštės (antraštės), kuriame yra pradžios žyma, rodymą, kad galėtumėte redaguoti. .

Jei jūsų šaltinyje veikia „WordPress“, tai norėdami praktiškai įgyvendinti šią idėją, galite naudoti jį kaip įrankį automatiškai įterpti paveikslėlį į hipersaitą, kur pirmiausia pasirenkate iš bibliotekos arba atsisiunčiate norimą vaizdą ir įterpiate jį į tekstą:

Tada pasirinkite gautą vaizdo kodą ir paspauskite redaktoriaus mygtuką „nuoroda“, po kurio pasirodžiusiame lange įklijuokite norimą nukopijuotą hipersaitą:

Naudodami pseudoklasę:target galite lengvai rasti daug vadovėlių internete. Tačiau nesivadovaukime kažkieno kodu, o pabandykime jį suprasti ir suprasti, kaip jis veikia? Žinoma, neapsieisime be pavyzdžių.

Kas yra:target?

CSS:target tai yra pseudoklasė, leidžianti pasirinkti visą HTML dokumento „gabalėlį“, kuriame bus atliktas tam tikras veiksmas. Tai gali būti, pavyzdžiui, teksto pastraipa arba antraštė.

Pseudoklasių nereikėtų painioti su pseudoelementais, kurie gali pasirinkti tik tam tikrą elemento dalį, pvz., pirmąją raidę arba pirmąją pastraipos eilutę.

Pseudoklasės:

• a:nuoroda(spalva:#111)
• a:hover(spalva:#222)
• div:pirmas vaikas(spalva:#333)

Pseudo elementai:

• p::pirma raidė(spalva:#444)
• p::first-line(spalva:#555)

Manau, kad iš sintaksės aišku, ką daro ta ar kita pseudoklasė ar pseudoelementas. Populiariausia pseudoklasė yra :hover, su ja susiduria visi žiniatinklio valdytojai, nurodant elemento stilius. Tikslas veikia panašiai ir aprašo elemento stilius susidarius tam tikrai situacijai.

Fragmentų ID

Trumpai tariant, tai yra dalykas, prie kurio yra pririšta mūsų pseudoklasė. Tai žyma su grotelėmis su žodžiu ar fraze, dedama adreso pabaigoje. Tai atrodo taip:

Ši technika gali būti naudojama atliekant perėjimus straipsnyje. Pavyzdžiui, straipsnio pradžioje sukuriate nedidelį turinį, kurio elementą paspaudus asmuo nukreipiamas į skyrių, į kurį nukreipia nuoroda, reikia pridėti identifikatorių.

Jis veikia grynu HTML, nereikia jokių gudrybių. Maži identifikatoriai.

Paspaudimo valdymas naudojant:target

Dabar pabandykime įsitikinti, kad spustelėjus norimą skyrių iš mūsų improvizuoto meniu, pavadinimo stilius pasikeis, parodydamas, kuri pastraipa šiuo metu yra aktyvi.

H1 (šriftas: 30 piks. Arial sans-serif; ) h1:target (šrifto dydis: 50 pikselių; teksto dekoravimas: pabrauktas; spalva: #37aee4; )

Kodas labai paprastas – paspaudus antraštė keičia savo dydį, spalvą ir yra pabraukta. Galite pridėti gyvybės (Ruslanai, labas) ir sukurti animaciją, kad pakeistumėte pavadinimo spalvą:

H1 (šriftas: 30 piks. Arial sans-serif; -webkit-transition: color 0.5s easy; -moz-transition: color 0.5s easy; -o-transition: color 0.5s easy; -ms-transition: color 0.5s easy); perėjimas: spalva 0,5 s lengvumas)

Aktyvaus pavadinimo paryškinimas yra geras dalykas, bet ką daryti, jei reikia pakeisti po jo einančio teksto dizainą? CSS suteikia mums tokią galimybę. Tai atrodo taip:

H1:target + p (fonas: #eaeaea; užpildas: 10 pikselių; )

Šiuo atveju pliuso ženklas reiškia, kad stilius turėtų būti taikomas pastraipai po antraštės. Taigi, pasikeitus aktyviajai antraštei, keičiame ir skyriaus dizainą su tekstu, kuris jam „priklauso“.

Naršyklės palaikymas

Tikslinė pseudoklasė priklauso trečiajam CSS leidimui ir puikiai palaikoma visose naršyklėse, išskyrus IE, senesnę nei 9 versiją. Todėl neturėtumėte jos įdiegti, jei jūsų auditorija naudoja šią naršyklę. Nors yra išeitis - tai Selectvizr, JS biblioteka, su kuria galite priversti IE dirbti su CSS3. Tiesiog pridedame scenarijų ir viskas, viskas veikia.

Vienintelis dalykas yra tai, kad jei nenaudojate JQuery ar MooTools, turite jį prijungti, kad šis scenarijus veiktų. Oficialioje svetainėje yra lentelė, rodanti, kurios bibliotekos ką palaiko. Jei susidomėjote, perskaitykite. Šis .

Išvada

Pseudo klasių naudojimas gali atrodyti sudėtingas, tačiau supratę, kaip jos veikia, galite padaryti nuostabių dalykų naudodami tik CSS ir nieko daugiau. Pseudoklasė: taikinys– puikus to patvirtinimas. Su jo pagalba galite radikaliai pakeisti puslapio sąveiką su lankytoju. Aukščiau pateiktas pavyzdys yra paprasčiausias, tačiau jis suteikia puslapiui šiek tiek interaktyvumo. Bet tai tik kelios kodo eilutės.

Nepersistenkite su grožiu ir naršyklės palaikymu ir viskas bus gerai.

Geros dienos

Pagal numatytuosius nustatymus, kai spustelėsite nuorodą, dokumentas atidaromas esamame lange arba rėmelyje. Jei reikia, šią sąlygą gali pakeisti žymos tikslinis atributas . Šis atributas neleidžiamas XHTML.

Sintaksė

...

Reikalingas atributas

Vertybės

Reikšmė yra lango arba rėmo pavadinimas, nurodytas pavadinimo atributu. Jei nustatomas neegzistuojantis pavadinimas, bus atidarytas naujas langas. Šie pavadinimai naudojami kaip rezervuoti pavadinimai.

Tuščias Įkeliamas puslapis į naują naršyklės langą. _self Įkelia puslapį į dabartinį langą. _parent Įkelia puslapį į pirminį rėmelį, jei rėmelių nėra, ši reikšmė veikia kaip _self . _top Išmeta visus rėmelius ir įkelia puslapį į pilną naršyklės langą, jei rėmelių nėra, ši reikšmė veikia kaip _self .

Numatytoji reikšmė

Patvirtinimas

Šio atributo naudojimą smerkia HTML specifikacija, tinkamas kodas gaunamas tik naudojant perėjimą .

HTML5 IE Cr Op Sa Fx

Atidaryti naujame lange

Problemos