CSS: psevdo-elementi in psevdo-razredi

Včasih se zdi, da za preživetje v sodobnem svetu morate vedeti, kako ustvariti spletne strani. Tudi v šolah poučujejo osnove HTML.

Kaj je to?

Z neuradnim pravom se vsi slogi, ki jih spletni skrbnik napiše v oznako CSS, uporabijo za tiste elemente strukture, ki jih je mogoče videti v izvorni kodi. Vendar obstajajo skupine elementov, ki v dokumentu HTML niso predpisani, vendar morajo tudi določiti sloge.

Na primer, v datoteki HTML ni nobene oznake, ki bi bila odgovorna za oblikovanje velike črke novega odstavka ali območja, ki je pred določenim elementom. In oznake ne morejo prikazati dejavnosti povezav ali spremeniti slike, ko kazalec miške kaže na to. Da formaliziramo ta in mnoga druga pomena, obstajajo selektorji CSS: psevdo-razredi in psevdo-elementi.

Pseudo-razredi se imenujejo selektorji, ki vplivajo na obstoječe elemente dokumenta. Pseudo-elementi navadno določajo in spremenijo območje, ki je bilo prvotno odsotno iz izvorne datoteke. Preprosto povedano, psevdo-elementi postavljajo nova področja strani, ki niso bila v oznaki HTML, pseudo-razredi pa določajo stanje predmetov pod določenimi pogoji.

Po: po

Najprej morate paziti na pseudo-elemente CSS prej in po tem, ko jih vsak samospoštovalec uporablja za izboljšanje videza, berljivosti in privlačnosti spletnega mesta. Ti elementi omogočajo dodajanje novih področij, nalepk in stilov pred ali po izvirnem dokumentu.

Vsakdo je verjetno vsaj enkrat videl na katerem koli spletnem mestu objavo publikacij, po tem pa so stali besede: "Novost", "Novo" ali "Šok", "Priljubljene", "Najboljše", "Super" itd. objekti so bili določeni z uporabo CSS po psevdo-elementu.

Če želite ustvariti tak položaj, morate v kaskadni slogovni list dodati naslednjo kodo:

Tu beseda novo podaja ime novega razreda, zato morate pred ustreznim odstavkom v oznaki HTML vnesti: class = "new". Ime razreda mora biti med oklepaji začetne oznake. Če se vse naredi pravilno, po koncu odstavka na strani brskalnika bo napis "Nekaj ​​novega".

Seveda je v primeru scenarij nastavljen za preprost napis, vendar nihče ni rekel, da ne morete spremeniti velikosti, barve in položaja. Vse potrebne parametre lahko vnesete v novi razred po vsebini. Ločite jih s podpičjem in na koncu zaprite oklepaj.

Pred: prej

Skoraj enake lastnosti imajo psevdo-element CSS prej. Z eno manjšo razliko: je zasnovan tako, da dodaja potrebne elemente pred predmetom. Pisano je natanko na enak način kot po, le z besedo prej.

Pred naslednjim odstavkom besedila lahko dodate besede, ki pritegnejo pozornost, ali pa preprosto postavite sliko ali element Unicode pred besedilom. Na primer, odpiranje ponudb ali alinej. Če želite to uvesti, morate v oznako CSS dodati nov razred in določiti potrebne značilnosti. Najpreprostejša rešitev bi bila taka:

Če želite zapreti konec dokumenta, morate ustvariti po pseudo-razredu in namesto vsebina: odprta piši vsebina: blizu, ustrezno spremenite pozicioniranje. Če je bil v pseudo-razredu, preden je bila alinea od levega roba, potem mora biti v razredu od desne. Tudi v oznaki lahko dodate sliko (recimo enake kotacije) in besedilo ne bo več videti kot dolgočasen list.

Epska Saga: najprej

Najprej je psevdo-element CSS zelo priljubljen tudi pri ustvarjanju novih projektov. Zlasti to zadeva projekte z zabavnimi in pravljicami, pa tudi spletne vire zgodovinske in znanstvene smeri.

Ta psevdo-element CSS ima dve lastnosti - vrstica in črka:

• Pismo - spremeni prvo črko fragmenta besedila, ki mu je dodana. Tako tvori padajoč padec - element, pri katerem je izhodišče več vrstic nižje glede na glavno besedilo. Če želite ta parameter nastaviti v kaskadnem slognem listu, morate nastaviti značilnosti odstavka. Na primer, P: prva črka {***} - in že med oklepaji označujejo vse potrebne parametre, kot so barva, pisava, velikost. Če je začetno črko ustvarjeno samo za prvi odstavek, se ustvari nov razred (tako kot v primeru z novo: po).
• Linija - ta položaj popolnoma spremeni prvo vrstico odstavka. Zelo je priročen za uporabo v znanstvenih publikacijah, če morate izpostaviti pomembne informacije. Zapisano je na enak način kot drugi primeri. Toda tukaj je pomembno zapomniti, da pseudo-element ne izbere stavka, temveč niz. Odvisno od brskalnika, ki ga uporabnik uporablja, je lahko prva vrstica daljša ali krajša, zato je pomembno zagotoviti, da ta izbira ne bo videti smešno. V takih primerih je bil v CSS ustvarjen psevdo-element prekinitve vrstice.

Nova linija

Dejansko se ta element redko uporablja, ker uspešno nadomesti oznaka
. Vendar pa obstajajo primeri, ko je treba določiti prelom vrstice s psevdo-elementi. Za te namene lahko uporabite isto. Za to je napisana naslednja koda: po {vsebina: ` A`- beli prostor: pre-}. Ime razreda naj bo napisano med oklepajema začetne oznake, takoj, ko se zapre, po njej sledi prelom vrstice.

Ta možnost traja več časa pri gradnji berljive vsebine in če vam ni treba delati z anomalalno neraziskanimi brskalniki, potem je bolje omejiti oznako
.

Sintaksa pseudo-razredov

Kot že omenjeno, psevdo-razredi opredeljujejo stanje elementov, s katerimi interakcijo uporabnika. Za razliko od psevdoelementov CSS, ki določajo nevidne strukturne značilnosti, so usmerjeni imaginarni razredi vedenjski dejavniki. Da bi bili jasnejši, lahko podamo majhen primer. Recimo, da ima spletno mesto seznam koristnih povezav, uporabnik se pomika po njih, bere podatke, a čez nekaj časa naleti na vsebino, ki jo je že videl. Še enkrat je šel na to stran, saj je veliko povezav in se ne razlikujejo. Če želite to preprečiti, skrbniki spletnega mesta dodajo psevdo-razred, ki spremeni barvo referenčne povezave, nato pa bo uporabnik natančno vedel, kaj je prebral in kje ni šel.

Vsi psevdo-razredi so zapisani v tabelo kaskadnih slogov z enostavno in preverjeno sintakso:

• Izbirnik: Pseudo-class {style characteristics: barva, velikost, zamik, pozicioniranje itd.}

Te razrede lahko razdelimo na tri glavne skupine:

• Tiste, ki določajo stanje elementa;
• tiste, ki spadajo v psevdo-elemente;
• fiktivni razredi, ki opredeljujejo jezik vsebine.

Pseudo-razredi in stanje elementov

Razmislite o enakem vrstnem redu kot pseudo-razredi. Za prvo podvrsto je značilna sprememba stanja elementa, odvisno od njenega stanja v določenem trenutku. Tako je bilo v zgornjem primeru: če je povezava sprejeta, bo spremenila barvo. To vključuje tako pseudo-razrede:

• :aktiven. Če uporabite ta pseudo-razred, potem ko premikate miško nad ločenim fragmentom, postane aktiven. To bo povzročilo spremembo barve, povečanje velikosti ali animacijo.
• :povezavo. V bistvu velja za povezave, ki jih uporabnik še ni obiskal. Ostajajo nespremenjeni.
• : poudarek. Najpogosteje se uporablja za besedilne dokumente, ko lahko uporabnik z nastavitvijo kazalca na polju spremeni barvo besedila. Včasih se uporablja za slike. Na primer, razkrijejo osenčeno sliko, toda ko klikne, postane naravna barva.
• :lebdite. Ko uporabnik preprosto lebdi nad določenim predmetom, lahko spremeni barvo ali obliko in mu ni treba klikati.
• :obiskali. V bistvu je ta pseudo-razred namenjen obiskanim povezavam, ki privzeto spremenijo barvo v vijolično.

Začetniki napačno domnevajo, da so ti psevdo-razredi le za reference, vendar s pravilno željo in fantazijo lahko spremenite kateri koli element spletnega mesta.

Natančneje za psevdo-elemente CSS

V to skupino selektorjev so psevdo-razredi, ki lahko spremenijo psevdo-elemente. Takšen pseudo-razred je : prvi otrok. V kaskadnem slognem listu morate ustvariti nov razred za : prvi otrok in nastavite barvo besedila ali njegovo velikost. Rezultat bo videti takole:

• B: prvi otrok {barva: rdeča-}

Najpogosteje se to naredi, ko je potrebno izbrati več drobcev besedila v krepkem tisku in samo začetek odstavka se mora razlikovati. Zato je razred imenovan tako kot oznaka, ki je odgovorna za krepko besedilo. Če to v praksi uporabljate, bo pseudo-razredu samo prvi krepki fragment rdeče barve, ostale besede pa bodo standardne črne barve.

Tudi : prvi otrok uporabite za odstranitev alinee v prvem odstavku, nato pa namesto barva: rdeča- bo potrebno pisati besedilna razvrstitev: 0-, in B pa se nadomesti z P (označuje tudi oznako, ki je odgovorna za začetek odstavka).

Jezik vsebine

Pseudo razred : lang v bistvu velja za besedila, napisana v različnih jezikih. Na primer, če ima članek citate v izvirnem jeziku, lahko za njih določite posebne značilnosti. Sintaksa za to skupino bo:

• Ime razreda: lang (jezik) {značilnosti besedila (barva, pisava, pogled itd.)}

Kar se tiče položaja "jezik", je označena v skladu s sprejetimi normami. Na primer, angleščina - ru, ruščina - ruščina, nemščina - de, itd. Zahvaljujoč temu pseudo - razredu lahko spremenite slog tujega besedila v celotnem dokumentu.

Sklepi

Pseudo-razredi in psevdo-elementi CSS so eno od teh vprašanj o kaskadnem slognem listu, ki povzroča težave pri razumevanju. Vendar tu ni nič zapletenega, glavno je razumeti, da je psevdo-razred določeno stanje, ki se izpolni pod pogoji, ki so bili predhodno določeni. Na primer, ko se pomaknete nad miško ali kliknete miško. Pseudo-element je neodvisen del dokumenta, ki ni del oznake HTML, vendar ima lahko svoj slog. Lahko celo rečete, da je to virtualni HTML. Če pogledate situacijo s te strani, postane vse zelo preprosto in razumljivo in s tem znanjem lahko začnete ustvarjati spletna mesta.