Pridobite več moči nad svojimi spletnimi dizajni s temi naprednimi izbirniki CSS.

CSS podpira različne izbirnike za prepoznavanje elementov za oblikovanje, od katerih ima vsak svoj niz pravil. Medtem ko je večina izbirnih metod enostavnih, psevdo-razredi in psevdo-elementi zagotavljajo večjo prilagodljivost. Omogočajo vam izbiro elementov na podlagi njihovega stanja ali položaja v strukturi ali izbiro določenih delov vsebine.

Te izbirnike je lahko težavno uporabljati in psevdo-razrede je enostavno pomešati s psevdo-elementi, kako torej med njimi razlikovati?

Razumevanje psevdorazredov CSS

Psevdorazred CSS je kot posebna ključna beseda, ki jo lahko uporabite z izbirniki za oblikovanje elementov na različne načine. Te ključne besede vam pomagajo ciljati na elemente, ko se zgodijo določene stvari, na primer ko uporabnik premakne miško nad element, ga klikne ali vnese nekaj v vnosno polje.

Psevdo-razredi naredijo vašo spletno stran bolj interaktivno in odzivno s spreminjanjem videza ali obnašanja elementov glede na dejanja uporabnika. Ko ti

instagram viewer
uporabite jih z drugimi izbirniki CSS, zagotavljajo natančen nadzor nad slogom in interaktivnostjo.

Sintaksa in uporaba psevdorazreda CSS

Sintaksa za psevdorazred CSS je sestavljena iz dvopičja (:), ki mu sledi ime psevdorazreda. Tukaj je osnovna sintaksa:

selector:pseudo-class {
/* styles */
}

V tej sintaksi:

  • selektor se nanaša na element ali elemente, ki jih želite izbrati in zanje uporabiti sloge. Lahko je element HTML, razred, ID ali bolj zapleten izbirnik, kot je kombinacija. Izbirnik ni obvezen, vendar ga boste običajno uporabili; brez tega bo vaš psevdorazred ciljal na vse elemente, na katere se lahko nanaša.
  • psevdorazred je ključna beseda, ki predstavlja določeno stanje ali stanje, na katerega želite ciljati.

CSS kategorizira psevdo-razrede v več skupin glede na njihovo funkcionalnost in pogoje, na katere ciljajo. Tu so glavne kategorije in nekaj primerov:

Interakcija uporabnika

:lebdi

Izbere element, ko se kazalec miške pomakne nad njim.

:aktivno

Izbere element, ko ga uporabnik aktivira, običajno s klikom.

: obiskal

Izbere povezave, ki jih je uporabnik obiskal.

Strukturni

:prvi otrok

Izbere prvi podrejeni element nadrejenega.

:zadnji-otrok

Izbere zadnji podrejeni element nadrejenega.

:nth-child (n)

Izbere elemente glede na njihov položaj v nadrejenem elementu, kar vam omogoča ciljanje na določene otroke.

Povezano z obrazcem

:onemogočeno

Izbere onemogočene elemente obrazca.

:preverjeno

Izbere označene izbirne gumbe ali potrditvena polja.

Stanje elementa uporabniškega vmesnika

:neveljavno

Izbere neveljavne elemente obrazca.

:obvezno

Izbere zahtevana polja elementov obrazca.

:neobvezno

Izbere elemente obrazca, ki so neobvezna polja.

Povezano s povezavo

: povezava

Izbere neobiskane povezave.

Na podlagi jezika

:lang()

Izbere elemente na podlagi jezika, določenega v njihovem atributu »lang«.

Poskusite lahko s pogostim primerom uporaba učinkov :hover na slike v galeriji. Tipični slogi vključujejo povečanje ali bledenje teh slik, ko se nekdo premakne nadnje.

Raziskovanje psevdoelementov CSS

Psevdoelement CSS je kot posebna ključna beseda, ki jo lahko uporabite z izbirniki za oblikovanje določenih delov vsebine elementa ali za vstavljanje dodatne vsebine. Te ključne besede vam omogočajo ciljanje in oblikovanje elementov glede na njihovo strukturo vsebine.

Psevdoelementi izboljšajte obliko in postavitev vaše spletne strani s tem, da vam omogoča stiliziranje elementov na načine, ki so bili tradicionalno mogoči samo s pravimi elementi HTML.

Sintaksa in implementacija psevdoelementov CSS

Psevdoelementi v CSS imajo posebno sintakso, ki vključuje uporabo dveh dvopičji (::), ki mu sledi ime psevdoelementa. Tukaj je osnovna sintaksa:

selector::pseudo-element {
/* styles */
}

V tej sintaksi:

  • selektor cilja na element, za katerega želite uporabiti psevdoelement. Lahko je kateri koli veljaven izbirnik CSS, vključno z nobenim.
  • psevdoelement je ime psevdoelementa, na katerega želite ciljati. V izbirniku lahko uporabite samo en psevdoelement, saj v resnici nimata smisla v kombinaciji.

Tukaj je nekaj psevdoelementov:

::prej

Vstavi vsebino pred vsebino izbranega elementa.

::po

Vstavi vsebino za vsebino izbranega elementa.

::prva-črka

Oblikuje prvo črko besedila v elementu.

::izbor

Oblikuje del besedila, ki ga je uporabnik izbral s kazalcem.

::marker

Oblikuje polje označevalca elementa seznama (npr. točke ali številke na seznamu).

:: iztočnica

Uporablja sloge za iztočnice v medijskih elementih, kot je

The ::pred in ::za psevdo elementi je lahko še posebej težko razumeti, zato boste z njihovo vadbo lažje obvladali ostalo.

Podobnosti in razlike

Tukaj so podobnosti in razlike med psevdo-razredi in psevdo-elementi CSS:

Psevdo-razredi

Psevdoelementi

Sintaksa

Predpona z enim dvopičjem (:).

Predpono z dvema dvopičjema (::).

Uporaba

Izberite in oblikujte elemente glede na njihovo stanje, položaj ali interakcijo uporabnika.

Oblikujte določene dele vsebine elementa ali ustvarite virtualne elemente.

Selektorji

Lahko se pojavi na kateri koli točki znotraj kompleksnega ali sestavljenega izbirnika.

Biti mora zadnja komponenta izbirnika in se lahko pojavi samo enkrat.

Vstavljanje vsebine

Ne vstavlja vsebine, predvsem za oblikovanje na podlagi stanja.

Lahko vstavi vsebino ali virtualne elemente pred ali za vsebino izbranega elementa.

Tipografsko oblikovanje

Običajno se ne uporablja za tipografsko oblikovanje.

Uporablja se za besedilo in tipografsko oblikovanje (npr. ::prva vrstica, ::prva črka).

Ciljni deli

Cilja na celotne elemente.

Cilja na določene dele vsebine elementa.

Podpora za brskalnik

Na splošno dobro podprt.

Na splošno dobro podprt, vendar imajo nekateri starejši brskalniki morda omejeno podporo.

Psevdo-razredi in psevdo-elementi so v CSS pomembni za ustvarjanje različnih stilov in interaktivnih funkcij. Čeprav imata nekaj podobnosti, ima vsak svojo edinstveno vlogo v spletnem oblikovanju in razvoju.

Psevdo-razredi in psevdo-elementi v akciji

Lahko vadite uporabo psevdorazredov in psevdoelementov CSS v različnih projektih, da ocenite svoje razumevanje. Primeri enostavnih projektov, ki jih lahko naredite, med drugim vključujejo kartice s profili, navigacijske menije in oblikovanje seznamov. Ti projekti zagotavljajo praktične izkušnje za izboljšanje vaših veščin CSS, hkrati pa vključujejo interaktivnost in slog v vaše spletne dizajne.