CSS, psevdo-razred, psevdo-element: lebdenje, otrok, cilj

Če združite HTML in CSS, lahko popolnoma upravljate vse elemente spletne strani. S pomočjo stilov lahko enostavno spremenite videz katerega koli bloka ali vrstice. Pogosto mora kodir izvajati zahtevnejšo nalogo - spremeniti videz ne samega elementa, temveč njegovega posameznega dela ali določenega stanja. V tem primeru psevdo-razredi CSS pridejo v reševanje.

Pseudo-razredi delujejo na enak način kot redni razredi v oznaki, vendar niso fizično prisotni na strani. Z njihovo pomočjo lahko izberete predmete na podlagi informacij, ki niso v dokumentu, ki jih z običajnim izbirnikom ni mogoče izbrati. Tukaj je preprost primer: imate rdeč gumb in želite, da se ob premikanju zasveti modro. Teoretično se lahko izvaja v jаvascript, vendar zakaj takšna zapletenost? To je veliko bolj priročno za uporabo : premakni CSS. Z njeno pomočjo lahko podate bloke vse parametre, ki bodo delovali le, ko miško miškin kazalnik premaknete.

Seznam pseudo-razredov CSS se redno posodablja. Morda med branjem tega gradiva se bo pojavilo nekaj novih. Najprej si oglejmo tiste, ki so se pojavili v specifikaciji CSS3.

: nth-of-type

Recimo, da imate seznam, v katerem želite uporabiti menjavanje barv, to pomeni, da bo prva vrstica napisana na primer v rdeči barvi, druga vrstica pa modra, tretja rdeča, četrta pa modra. Pred tem ste morali ustvariti nove razrede za to. Pretekli izdelki so dodali vsak element seznama v razred in nato spremenili svoj videz v slogovnem listu. To ni bilo zelo priročno in onesnaženo postavitev.

Zdaj je vse lažje. Uporabite CSS pseudo-razred: nth-of-type. To bo dalo priložnost, da dobite potrebne vizualne učinke, ne da bi spremenili ničesar v oznaki. Načelo delovanja je preprosto: določite selektor in v oklepajih po njegovem imenu napišete formulo ali ključno besedo, v kateri boste našli potrebne elemente. Na primer: nth-of-type (celo) bo našel vse ravne elemente, in: nth-of-type (nepar) - čudno. Obstaja veliko število formul, ki se uporabljajo za najbolj natančno kontrolo. V oklepajih lahko določite številko - v tem primeru se bodo slogi uporabili za element, katerega indeks je enak tej številki.

: n-otrok

Ta psevdo-razred CSS je podoben prejšnjem, vendar za razliko od tega deluje izključno z otroki izbranega elementa. Na primer, če jo želite uporabiti za prilagoditev videza oznak

Za natančno kontrolo lahko uporabimo formule. Za začetnika je precej težavno, vendar je vredno malo kopati v sintakso, kako stvari postanejo preprostejše. Formule so videti takole: an + b, kjer je a množitelj, in b je odmik. Če na primer navedete n v oklepajih, bo pseudo-razred izbral vse otroke (ker v dodatku a in b ni določenih dodatnih pogojev). Če podate n + 2, se izberejo vsi elementi, razen prvega (ker je odmik dva). Najbolje je, da to točko preučite v praksi. Poskusite z otroškimi komponentami in različnimi formulami.

: zadnji otrok

Vse je preprosto. Otroški psevdo-razredi CSS se uporabljajo za izbiro enega določenega elementa. S tem se izbere zadnji otrok staršev. Uporablja se precej pogosto, na primer, da označite zadnjo vrstico tabele ali odstranite odreza iz zadnjega bloka, da preprečite njegov prenos v naslednjo vrstico.

: nth-last-child

Po načelu dejanja je podobno prej omenjenemu nth-otroku, vendar deluje v nasprotni smeri, to je, ko se bodo elementi premikali od spodaj navzgor. To je uporabno, če želite najti zadnjih nekaj elementov.

Morda mislite, da ti pseudo-razredi in CSS pseudo-elementi so neuporabni, ker lahko dosežete cilj tudi s pomočjo navadnih razredov. Ni tako. : nth-child,: nth-last-child in njihovi analogi so zelo koristni pri delu na velikih projektih - na primer v primerih, ko ima blok veliko število otrok. Ročno nastavljanje razredov je dolga in težka.

Pseudo-razredi državnega upravljanja

Kaj, če morate spremeniti videz elementa v določenem stanju? V tem primeru so podani psevdo-razredi pritiska, vodenja in drugih dejanj. Razmislimo jih podrobneje.

: povezava

To je pseudo-razred povezav CSS, ne samo nobenega, temveč samo tiste, ki še niso bili obiskani. V njej lahko določite sloge za te elemente , na katerem uporabnik še ni preklopil.

: obiskali

Analog prejšnje različice, ki upravlja le že obiskane povezave. S kombiniranjem teh dveh psevdo-razredov lahko prilagodite videz oznak ravno tako, kot ga potrebujete. Vendar pa upoštevajte, da so države izračunane za določene brskalnike in ponastavljene po čiščenju zgodovine.

Pseudo-razred: ciljni CSS

Eden izmed najzanimivejših psevdo-razredov, ki s pravilno uporabo v določeni meri nadomešča uporabo jаvascripta. Omogoča upravljanje elementa, katerega identifikator je podan v naslovni vrstici strani. Da, prvič je težko razumeti. Poskusimo si predstaviti primer.

Recimo, da imamo 3 strani na strani z določenimi id: id1, id2, id3. Imamo tudi tri povezave z ustreznimi vrednostmi href: # id1, # ​​id2, # id3. Ko kliknete prvo povezavo v naslovni vrstici strani, bo po povezavi s stranjo prikazan ustrezni ID.

V CSS so za vse div bloke prikazani prikaz: none property, to je po privzetku, niso prikazani. Uporabite cilj: div in nastavite svoj prikaz: blok lastnosti. Zdaj, ko kliknete povezave z določenimi href, bodo bloki z ustreznim idom dodeljeni prikaz: blok, kar pomeni, da se bodo začele pojavljati na strani! Ko kliknete povezavo s href = "# id1" se pojavi blok z id1 in tako naprej.

Še vedno nič ni jasno? Poskusite poskusiti. Ustvarite stran z zgornjo oznako in sloge. V nekaj minutah boste v redu.

Pseudo-razredi, ki se lahko uporabljajo za kateri koli element

Večina zgoraj opisanih psevdoklonov je zahtevala sklicevanja na delo. Vendar pa vsi ne potrebujejo elementov . Na vsak del strani lahko uporabite več možnosti.

• : aktiven je namenjen elementom stylinga, na katerih je uporabnik kliknil levi gumb miške -
• : hover - CSS za elemente, na katere uporabnik lovi kazalec-
• : focus - za tiste dele strani, ki so trenutno v fokusu. Ta psevdo-razred se pogosto uporablja za delo z oblikami. Če na primer želite poudariti vhodni niz za uporabniško ime, ko obiskovalec vnese kurzor vanj in začne pisati znake.

Ne pozabite, da je aktivno aktivno samo, ko ga pritisnete. Takoj po tem, ko levi gumb miške neha delovati, bodo dodeljeni slogi izginili in element bo prikazan, ker je bil privzeto prikazan. V večini primerov se ta psevdo-razred uporablja za delo s tipkami. Lahko jih nastavite na veliko držav. Na primer, privzeto bo gumb modro, ko se vrti - zelena, ko pritisnete - rdeča in tako naprej.

Seveda pa pseudo-razredi v celoti podpirajo samo moderni brskalniki. Na primer, v IE6 in 7 ne morete uporabljati fokusa in se v IE6 pomikajte in aktivno delajte samo za reference. Upajmo, da vam ni treba delati s takšnimi brskalniki, in če želite, potem uporabite pogojne pripombe.

Dodatni psevdo-razredi

Seznam, naveden zgoraj, ni omejen na seznam. Zahvaljujoč sodobnemu CSS lahko izberete samo vključene elemente (: omogočeno) ali samo onemogočeno (: onemogočeno), samo označite potrditvena polja in radio (: označeno). Na kratko opišite nekaj dodatnih možnosti, ki jih lahko uporabite za bolj natančno kontrolo videza vsebine.

• : samo-otrok - sposobnost uporabe sloga za element, ki je edini element za otroke -
• : lang - delati z elementi, ki imajo jezik, ki je nastavljen z lang-
• : root - se uporablja za izbiro korenskega elementa. Skladno s tem je v oznaki HTML to oznaka -
• : ne je zelo močno orodje. Omogoča omejitev uporabe slogov na določene selektorje. Tukaj je primer: .blue-color: not (span). Ta izbirnik uporablja sloge za vse elemente z modrim barvnim razredom, če niso .

Popoln seznam psevdo-razredov se lahko razteza za več kot eno stran. Večina pisalnikov uporablja le nekatere od njih v praksi, raje upravljajo države z uporabo jаvascripta. Ja, priročno je, vendar obstajajo številne točke, kjer je lažje doseči učinkovitejše rezultate z uporabo ustreznega psevdovalnega razreda.