Enne CSS-i - originaal, mugav ja praktiline

Pseudoelemendid ja CSS-i pseudoklassid: enne, pärast, hõljumine, aktiivne jne - tõhus võimalus kvalitatiivselt parandada ja lihtsustada saidi täitmist, välja arvatud koodi JavaScript-käitlejad ilmsete, keeruliste reaktsioonide kavandamise otsuste, sündmuste elementide, dialoogide ja külastajate tegevuste jaoks.

Pseudoelemendid on mugavad ja multifunktsionaalsed, neil on lihtsad ja komplekssed autori ideed olulised ja mitmemõõtmeline omadused: kuidas tähelepanu juhtida originaalsuunas, märkamatult määrata tegevused, leida vajalik vihje õiges kohas.

Kui avatakse pseudoelemendi sisus url (), avanevad suured perspektiivid. Tõepoolest, see suvand avab uusi horisonte, nii saidi lehele midagi alla laadida, kui ka midagi võimaliku aktiveerimise kohta

Pseudoelementide eripära

Pseudoelemendid (:: enne CSS-i, :: pärast) erinevad elementidest, valijatest ja pseudoklassidest, kuna need dokumendipuu algselt ei eksisteeri. Võibolla praktikas see ei ole eriti tähtis, kuid kui me kaalutleme sisu paigutamist saidi lehtedele, siis pole usaldusväärne sisu vara otsingurinkile mõeldav tähendus.

Pseudoelement :: enne CSS-i võimaldab teil lisada sisu enne elementi ja :: pärast-pärast. Sisu võib CSS-i omadustest, kuid mitte HTML-märgenditest, kujuneda lihtsast tekstist keeruka vorminguni. Pseudoelement võib olla täielikult paigutatud selle elemendi külge, millele see on kinnitatud, sest enne ja pärast on see suhteline ja mobiilne. Saate määrata mitte ainult asukoha, vaid ka suuruse, värvi, tausta, fontide ja muude CSS-i omaduste.

Nagu CSS-i pseudoklassid, eelneb enne ja pärast seda sümbol ":", kuid vastavalt CSS3 standardile on soovitatav "::". Lehe konkreetse kasutamise katsetamine ei ole kunagi üleliigne: mõned brauserid või nende versioonid ei pruugi seda või seda pseudoelementi lihtsalt märganud.

Üldised kasutustingimused

Näiteks tabeli elemendi klassi = 'scElement' ja elemendi sisu kirjeldamine div-elemendiga, täpsustades stiilide tabelis CSS-i kirjelduse:

.scElement {
POSITION ...;
Z-indeks ...;
...

},

Võite taotleda sellele pseudoklassi ": hover" ja pseudoelement ":: before" CSS:

.scElement: hover :: enne {content: 'prefix'; Värv ...; Taustavärv ...;}.

Siis, kui hiirekursor ületab sõna "Element", ilmub sõna "prefiks", milles muutuvad tähtede ja tausta värv.

Pseudoelementide sisu variandid

Kui te ei määra pseudoelemendis olevaid omadusi, jäävad nad samaväärseks põhielemendiga - scElement. Saate määrata URL-i ja seejärel sisu: url ('/ scBox / rm-v / sc-rights.png') omadus osutab elemendi pildile, kui kursor selle üle liigub. Sisu puhul: "\ 03B1" ilmub matemaatiline sümbol "alfa " , kuid kasuta erimärke: "& nbsp;", "& lt;", "& laquo;", "& raquo;" Ja teised ei tohiks - neid kuvatakse nii, nagu on.

Pseudoelementide sisu täpsustamiseks on palju võimalusi: tavaline tekst, URL (), kuueteistkümnendate sümbolite järjestus, märkus: open-quote / close-quote või no-open-quote / no-close-quote jne. Kuna on võimalik määrata absoluutse sisu positsiooni Tänu stiili omadustele, rakendades CSS-i eelnevalt, võimaldab see pseudoelemendi asetada mis tahes elemendis, millele see on lisatud.

Võite kombineerida samaaegset kasutamist enne ja pärast. Seega, kui sisestate sümbolid CSS-iga, võite saada erinevat mõju ning kombineerides erinevad pseudo-klassid ja pseudoelemendid, üllatab külastaja ilma JavaScripti koodi ühe baidita.

Pseudoelementide omadused

Nende tähistamiseks kasutatakse sümbolit ":", samuti pseudoklasside jaoks, kuid CSS3-s on pseudoelementide eristamine tavaliselt tähistatud "::". Brauserid, kes seda mõistavad, mõistavad mõlemat märki. Salvestusruumid ei ole lubatud, string, milles pseudo-klass ja (või ainult) pseudoelement salvestatakse, on kirjutatud kokku:

ScElement: hover :: enne {content: 'prefix'; ...}

ScElement: aktiivne: pärast {content: 'suffix'; ...}

Tähtis on mitte unustada: CSS-i enne töötab väljaspool saidi sisu. Stiilid ei puuduta lehe sisu. Pseudoelemendid ei ole erand. Need ei ole DOM-puuris ja soovitav on neid kasutada olulistes saidi osades - neid ei kaasata sisusse.

Kasutus ":" ja "::" toetab mobiilplatvorme ja kaasaegseid brausereid, kuid vananenud versioonide töö kontrollimiseks pole sageli enam vaja.

Pseudoelemendi sisu ei sisaldu saidi sisus. Otsingumootorid seda ei näe. Selle olukorra kasutamine sõltub konkreetsest olukorrast, kuid CSS-i kasutamise võime nii enne kui ka pärast iseseisvalt või kompleksselt on huvitav, kui sisu on URL (). Pseudoelemendi sisu otsene kasutamine saidi lingina võimaldab teil failist, näiteks pildilt, alla laadida.

Võimalus muuta stiilifaile saidil (kaskaaditavate stiilifailide failid - mitte erand) ei takista pseudoelementide moodustamist ja kasutamist teatud ajahetkel sobivate algoritmi kohas, olenevalt külastajate toimingutest.