CSS: pseudo-elemente și pseudo-clase

Uneori se pare că, pentru a supraviețui în lumea modernă, trebuie să știți cum să creați site-uri web. Chiar și în școli le predă elementele de bază ale HTML.

Ce este?

Prin lege nescrisă toate stilurile pe care webmaster-ul intră în CSS-markup utilizat pentru elementele structurale care pot fi văzute în codul sursă. Cu toate acestea, există grupuri de elemente care nu sunt prescrise în documentul HTML, dar ele trebuie, de asemenea, să specifice stilurile.

De exemplu, în HTML-fișier, nici o etichetă, care ar fi responsabilă pentru proiectarea unui nou alineat capitalizată sau zonă care se află în fața unui anumit element. Și etichetele nu pot afișa o activitate de legătură sau pot schimba imaginea când cursorul mouse-ului indică spre ea. Pentru a formaliza aceste și multe alte semnificații, există selectori CSS: pseudo-clase și pseudo-elemente.

Pseudo-clasele se numesc selectori, care afectează elementele existente ale documentului. Pseudoelementele specifică și modifică de obicei zona care a fost inițial absentă din fișierul sursă. Pur și simplu, pseudo-elementele stabilesc noi domenii de pagină care nu erau în marcajul HTML, iar pseudo-clasele definesc starea obiectelor în anumite condiții.

După: după

Primul lucru pe care ar trebui să-l acordați este pseudo-elementele CSS înainte și după ce fiecare resursă care le respectă pe sine o folosește pentru a îmbunătăți aspectul, lizibilitatea și atractivitatea site-ului. Aceste elemente oferă posibilitatea de a adăuga noi zone, etichete și stiluri înainte sau după documentul original.

Fiecare trebuie să fi văzut cel puțin o dată pe orice anunțuri online ale publicațiilor, după care au fost cuvintele: „Noi“, „noi“ sau „șoc“, „Favorite“, „cel mai bun“, „Super“, etc .. Aceste obiectele au fost specificate folosind CSS după pseudo-element.

Pentru a crea o astfel de poziție, trebuie să adăugați următorul cod în foaia de stil cascadă:

Aici cuvântul nou specifică numele clasei noi, deci înainte de paragraful necesar în marcajul HTML, trebuie să introduceți: class = "new". Numele clasei trebuie să fie între paranteza etichetei de deschidere. Dacă totul se face corect, după sfârșitul paragrafului de pe pagina browser-ului va exista o inscripție "Ceva nou".

Firește, în exemplu, un script este setat pentru o inscripție simplă, dar nimeni nu a spus că nu puteți schimba dimensiunea, culoarea și poziționarea. Toți parametrii necesari pot fi introduși în noua clasă după conținut. Separă-le cu punct și virgulă și la sfârșit închide brațul.

Înainte: înainte

Caracteristicile aproape identice au un CSS pseudo-element înainte. Cu o diferență minoră: este concepută pentru a adăuga elementele necesare în fața obiectului. Este scris exact în același mod ca și după, numai cu cuvântul anterior.

Înainte de următorul paragraf al textului, puteți adăuga cuvinte care atrag atenția sau puteți plasa pur și simplu o imagine sau un element Unicode în fața textului. De exemplu, citate sau liniuțe de deschidere. Pentru a implementa acest lucru, trebuie să adăugați o clasă nouă la marcajul CSS și să specificați caracteristicile necesare. Cea mai simplă soluție ar arăta astfel:

Pentru a linia sfârșitul documentului, trebuie să creați o clasă după pseudo-clasă și în loc de conținut: deschis scrie conținut: închis, în consecință, modificați poziționarea. Dacă în clasa pseudo-clasa înainte de indent a fost de la marginea din stânga, apoi în clasa după, trebuie să fie din dreapta. De asemenea, în marcaj, puteți adăuga o imagine (de exemplu, aceleași citate), iar textul nu va mai arăta ca o foaie neclară.

Saga Epica: în primul rând

CSS-ul pseudo-element este, de asemenea, foarte popular în crearea de noi proiecte. În special, aceasta se referă la proiecte cu subiecte de divertisment și de basm, precum și resurse web de orientare istorică și științifică.

Acest pseudo-element CSS are două caracteristici - linia și litera:

• scrisoare - modifică prima literă a fragmentului de text la care se adaugă. Astfel, ea formează o picătură-drop - un element în care linia de bază este mai multe linii mai mici față de textul principal. Pentru a seta acest parametru în foaia de stil cascadă, trebuie să setați caracteristicile paragrafului. De exemplu, P: prima literă {***} - și deja între paranteze indică toți parametrii necesari, cum ar fi culoarea, fontul, mărimea. Dacă litera inițială va fi creată numai pentru primul paragraf, atunci se creează o nouă clasă (la fel ca în exemplul cu nou: după).
• linie - această poziție modifică complet prima linie a paragrafului. Este foarte convenabil să se folosească în publicațiile științifice, dacă trebuie să evidențiați informații importante. Este scris în același mod ca și alte exemple. Dar aici este important să ne amintim că pseudo-elementul nu selectează o propoziție, ci un șir. În funcție de browserul pe care îl utilizează utilizatorul, prima linie poate fi mai lungă sau mai scurtă, deci este important să vă asigurați că această selecție nu pare ridicolă. În astfel de cazuri, a fost creat un pseudo-element al liniei de rupere în CSS.

Linie nouă

De fapt, acest element este rar folosit, deoarece înlocuiește cu succes etichetă
. Cu toate acestea, există situații în care este necesară specificarea unei rupturi de linie prin pseudo-elemente. În aceste scopuri, puteți utiliza aceeași după. Pentru aceasta, este scris următorul cod: după {conținut: ` A`- spațiu alb: pre-}. Numele clasei trebuie să fie scrisă între parantezele etichetei de deschidere, de îndată ce se închide, următoarea linie urmează după ea.

Această opțiune are mai mult timp în proiectarea de conținut ușor de citit, iar în cazul în care nu este nevoie de a lucra cu browsere anormal neexplorate, cel mai bine este de a limita tag-ul
.

Pseudo-clase Sintaxă

După cum am menționat deja, pseudo-clasele definesc starea elementelor cu care interacționează utilizatorul. Spre deosebire de pseudoelementele CSS care specifică caracteristicile structurii invizibile, clasele imaginare sunt orientate către factori de comportament. Pentru a fi mai clară, putem da un mic exemplu. Să presupunem că site-ul are o listă de link-uri utile, utilizatorul navighează prin ele, citește informațiile, dar după un timp întâlnește conținutul pe care l-a văzut deja. El sa dus din nou la această pagină, deoarece există o mulțime de legături și nu sunt altfel. Pentru a evita acest lucru, webmasteri adăuga pseudo, care se schimbă culoarea de link-uri vizitate, atunci utilizatorul va ști exact ceea ce a citit, și care nu a fost încă trecut.

Toate pseudo-clasele sunt scrise într-o tabelă de stiluri cascadă cu o sintaxă simplă și verificată:

• Selector: Pseudo-clasa {caracteristici de stil: culoare, mărime, indentare, poziționare, etc.}

Aceste clase pot fi împărțite în trei grupe principale:

• Cei care determină starea elementului;
• cele care aparțin pseudo-elementelor;
• clase fictive care definesc limbajul conținutului.

Pseudo-clase și starea elementelor

Luați în considerare aceeași ordine ca pseudo-clasele pot fi. Primul subspecii se caracterizează printr-o schimbare a stării elementului, în funcție de starea sa la un anumit moment. Acesta este modul în care a fost în exemplul de mai sus: dacă link-ul este trecut, atunci acesta va schimba culoarea. Acestea includ astfel de pseudo-clase:

• :activă. Dacă aplicați această pseudo-clasă, atunci când plasați cursorul peste un fragment separat, acesta devine activ. Aceasta va avea ca rezultat o schimbare de culoare, o creștere a mărimii sau o animație va apărea.
• :legătură. În principiu, se aplică legăturilor pe care utilizatorul nu le-a vizitat încă. Acestea rămân neschimbate.
• : focalizare. Cel mai adesea folosit pentru documente text, atunci când utilizatorul, prin setarea cursorului pe câmp, poate schimba culoarea textului. Uneori este folosit pentru imagini. De exemplu, ele expun o imagine umbrită, dar atunci când face clic, devine o culoare naturală.
• :planare. Atunci când un utilizator se plimba pur și simplu peste un anumit obiect, el poate schimba culoarea sau forma și nu are nevoie să facă clic.
• :a vizitat. Practic această pseudo-clasă este pentru link-uri vizitate, care își schimba culoarea în purpuriu în mod implicit.

Începătorii presupun în mod eronat că aceste pseudo-clase sunt doar pentru referințe, dar cu dorința și fantezia potrivite, puteți schimba orice element al site-ului.

Specific pentru pseudo-elementele CSS

Pentru acest grup de selectori sunt pseudo-clase care pot schimba pseudoelemente. O astfel de pseudo-clasă este : primul copil. În foaia de stil cascadă, trebuie să creați o nouă clasă pentru : primul copil și setați culoarea textului sau dimensiunea acestuia. Rezultatul va arăta astfel:

• B: primul copil {culoare: roșu-}

Cel mai adesea se face atunci când este necesar să se selecteze mai multe fragmente de text cu caractere aldine și numai începutul paragrafului ar trebui să difere. Prin urmare, o clasă este numită la fel ca eticheta care este responsabilă pentru textul cu caractere aldine. Dacă o aplică în practică, din cauza pseudo-clasa, doar primul fragment bold va avea o culoare roșie, restul cuvintelor va fi de culoare standard negru.

de asemenea : primul copil utilizați pentru a elimina liniuța din primul paragraf, apoi în loc de culoare: roșu- va fi necesar să scrieți text-liniuță: 0-, iar B este înlocuit cu P (înseamnă și eticheta care este responsabilă pentru începutul paragrafului).

Limba de conținut

Pseudo-clasa : lang se aplică în principiu textelor care sunt scrise în diferite limbi. De exemplu, dacă articolul conține citări în limba originală, puteți specifica caracteristici separate pentru ele. Sintaxa pentru acest grup va fi:

• Numele clasei: lang (limba) {caracteristicile textului (culoare, font, vedere etc)}

În ceea ce privește poziția "limbă", ea este desemnată conform normelor acceptate. De exemplu, engleza - ru, ru - ru, germana - de, etc Datorită acestei pseudo - clase, puteți schimba stilul de text străin în întreg documentul.

constatări

Pseudo-clasele și pseudo-elementele CSS sunt una dintre acele întrebări despre foaia de stil cascadă care cauzează dificultăți în înțelegere. Cu toate acestea, nu există nici o afacere mare, cel mai important - să înțeleagă că pseudo - un anumit stat care se efectuează la termenele convenite anterior. De exemplu, când plasați mouse-ul peste un mouse sau faceți clic pe un mouse. Un pseudo-element este o parte independentă a unui document care nu face parte din marcajul HTML, dar poate avea un stil propriu. Puteți chiar să spuneți că acesta este HTML virtual. Dacă te uiți la situația din această parte, totul devine extrem de simplu și de înțeles și cu această cunoaștere poți începe să creezi site-uri.