Pred CSS - original, priročen, praktičen

Pseudo-elementi in CSS pseudo-razredi:

Psevdo priročno, večnamenski, imajo velike in različne lastnosti izbiro za enostavne in kompleksne ponve avtorskih pravic: kako izvirno pritegnejo pozornost, neopazno pojasnijo ukrepe, potrebne, da bi namig na pravem mestu.

Velike perspektive se odprejo, ko je url () določen v vsebini pseudo-elementa. Dejansko ta možnost odpira nova obzorja, tako v smislu prenosa na stran spletnega mesta kot tudi pri morebitnem aktiviranju nečesa

Posebna značilnost psevdoelementov

Pseudo-elementi (:: pred CSS, :: po) se razlikujejo od elementov, selektorjev in psevdo-razredov, saj v drevesu dokumentov prvotno ne obstajajo. Morda v praksi to ni posebej pomembno, vendar, če upoštevamo vprašanje postavitve vsebine na strani spletnega mesta, potem zaupanje v lastnost vsebine, kar je smiselno iskalniku, ni smiselno.

Pseudo-element :: pred CSS vam omogoča, da dodate vsebino pred elementom, in :: pozneje. Vsebina se lahko razlikuje od enostavnega besedila do zapletenega oblikovanja v smislu lastnosti CSS, ne pa HTML oznak. Pseudo-element se lahko popolnoma pozicionira znotraj elementa, na katerega je pritrjen, zato je pred in po pomenu relativna in mobilna. Ne morete samo določiti položaja, ampak tudi dimenzije, barve, ozadje, pisave in druge lastnosti CSS.

Kot psevdo-razredi CSS pred in po predhodnem simbolu ":", vendar je v skladu s standardom CSS3 priporočeno "::". Preizkušanje določene uporabe na strani nikoli ne bo odveč: nekateri brskalniki ali njihove različice morda ne bodo opazili tega ali tega pseudo-elementa.

Splošni pogoji uporabe

Z dajanjem, na primer, elementa div z opisom class = `scElement` in vsebino `Element` na stran, ki določa opis CSS na slogovnem listu:

.scElement {
POSITION ...-
z-indeks ...-
...

},

lahko uporabite za to pseudo-razred ": lebdenje" in psevdo-element ":: pred" CSS:

.scElement: hover :: pred {vsebina: `predpona` - barva ...- barva ozadja ...-}.

Nato, ko miško premikate nad besedo »Element«, se prikaže beseda »predpono«, ki bo spremenila barvo črk in ozadja.

Spremembe vsebine psevdo-elementov

Če niste določili lastnosti v psevdo-elementu, bodo ostali enaki kot glavni element - scElement. Določite lahko URL in nato vsebino: url (`/ scBox / rm-v / sc-rights.jpg`) premaknete nad elementom, ko premaknete nad elementom. V primeru vsebine: " 03B1", matematično simbol "alfa", vendar uporabite posebne znake: ";", "lt;", "laquo;", "raquo;" in drugi ne smejo - prikazali se bodo, kot je.

Dovoljeno je veliko možnosti, da opredeli vsebino navidezno: normalno "besedilo", url (), zaporedje šestnajstiških znakov, se nanašajo na: open-quote / blizu citat, ali ne-open-quote / no-close-citat, morda itd Kot je navedba absolutnega položaja vsebine. s slogovnimi lastnostmi, nato pa se s CSS omogoči, da se pseudo-element doda kjerkoli v elementu, na katerega je pritrjen.

Lahko kombinirate hkratno uporabo pred in po. Zato postavite simbole s CSS pred vsebino, lahko dobite različne učinke in s kombiniranjem različnih psevdo-razredov in psevdo-elementov presenetite obiskovalca, ne da bi porabili en sam bajt jаvascript kode.

Značilnosti psevdoelementov

Za njihovo označevanje se uporablja simbol ":", kar velja za pseudo-razrede, vendar v CSS3 razlikovanje psevdo-elementov običajno imenujemo "::". Brskalniki, ki to razumejo, zaznavata oba znaka. Prostori v zapisu niso dovoljeni, niz, v katerem je zapisan pseudo-razred in (ali samo) pseudo-element, je zapisano skupaj:

scElement: hover :: pred (vsebina: `predpona` ...)

scElement: aktiven: po {vsebina: `priponka` ...}

Pomembno je, da ne pozabite: CSS, preden deluje zunaj vsebine spletnega mesta. Slogi niso pomembni za vsebino strani. Pseudo-elementi niso izjema. Niso prisotni v drevesu DOM in jih ni zaželeno uporabljati v pomembnih delih spletnega mesta - ne bodo vključeni v vsebino.

Uporaba ":" in "::" podpira mobilne platforme in sodobni brskalniki, vendar pogosto ni odveč, če bi preverjali delo na zastarelejših različicah.

Vsebina psevdo-elementa ni vključena v vsebino spletnega mesta. Iskalniki ne bodo videli. Kako uporabljati to okoliščino je odvisno od specifične situacije, vendar je sposobnost uporabe CSS pred in po, neodvisno ali v kompleksni, zanimiva, če je vsebina url (). Neposredna uporaba vsebine psevdo-elementa kot povezave na spletno mesto vam omogoča, da prenesete datoteko iz nje, na primer sliko.

Sposobnost, da spremenite datoteke slog na spletu (kaskadno slogov datoteke - ni nobena izjema), ne posega v obliko in uporabo psevdo kot je primerno v danem trenutku, na pravem mestu algoritma, odvisno od dejavnosti, obiskovalca.