Home-theater-designers
Pseudo-elementele sunt unul dintre selectoarele mai avansate care sunt disponibile pentru utilizare în CSS. Scopul principal din spatele acestor selectoare este de a crea un stil unic, fără a modifica documentul HTML care este utilizat pentru a crea structura de bază a unei anumite pagini web.
Iată cum se utilizează pseudo-elementele în CSS.
cum se fac colaje foto pe facebook
Pseudo-elemente comune
Există o listă extinsă de pseudo-elemente care sunt disponibile pentru a face viața unui dezvoltator web mai ușoară. Unele dintre aceste pseudoelemente includ:
- Inainte de
- După
- Fundal
- Prima linie
- Prima literă
În situații specifice, unele pseudo-elemente se vor dovedi mai potrivite decât altele, dar singurul lucru care rămâne constant este structura generală pentru utilizarea oricărui pseudo-element.
Exemplu de structură a pseudo-elementelor
selector::pseudo-element{
/* css code */
} Deși puteți utiliza un element HTML ca selector, este recomandat să utilizați o clasă sau un id pentru a evita direcționarea elementelor neintenționate în aspectul dvs. Elementul, stilul sau datele pe care doriți să le inserați în poziția dorită ar trebui plasate între acoladele.
Pseudoelementele înainte și după sunt cele mai populare din listă și având în vedere că există multe modalități practice de a le folosi - nu este greu de văzut de ce.
Utilizarea elementului Before Pseudo în CSS
Deși nu este imposibil, este dificil să suprapui imagini cu text lizibil în CSS. Acest lucru se datorează în principal faptului că imaginea și textul ar ocupa aceeași poziție pe o pagină web.
Este relativ ușor să trimiteți o imagine pe fundalul unui grup de text , dar atunci când acea imagine este prea strălucitoare, tinde să copleșească textul care este deasupra ei. În aceste cazuri, pasul următor este încercarea de a face imaginea mai puțin opacă folosind proprietatea opacitate.
Singura problemă este că, din moment ce imaginea și textul ocupă aceeași poziție, textul va deveni oarecum transparent.
Una dintre puținele modalități eficiente de a rezolva această problemă este folosirea pseudo-elementului anterior.
Folosind exemplul Before Pseudo-element
.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Codul de mai sus este creat pentru a fi utilizat la unison cu clasa HTML landingPage de mai jos. Așa cum se arată în codul de mai sus, folosind pseudo-elementul anterior putem viza imaginea și putem folosi proprietatea opacității de pe ea înainte ca imaginea să fie combinată cu textul.
This is the result of using the before pseudo-element
to overlay and image with readable text.
Acest lucru va duce la plasarea unei suprapuneri pe imagine și la afișarea textului clar deasupra, așa cum se arată în imaginea de mai jos:
Folosind After Pseudo-elementul în CSS
O utilizare practică pentru pseudo-elementul de după este de a ajuta la crearea unui formular HTML. Majoritatea formularelor sunt create cu un set de câmpuri care necesită date pentru ca formularul să fie trimis cu succes.
O modalitate de a indica faptul că un câmp dintr-un formular necesită date este plasarea unui asterisc după eticheta pentru acest câmp. Pseudo-elementul after vă oferă o modalitate practică de a face acest lucru.
Folosind Exemplul After Pseudo-element
.required::after{
content: '*';
color: red;
} Inserarea codului de mai sus în secțiunea CSS a formularului dvs. vă va asigura că fiecare etichetă care conține clasa necesară va fi urmată direct de un asterisc roșu. Pseudo-elementul after este, de asemenea, practic în acest exemplu, deoarece ajută la separarea stilului de structură (care este întotdeauna ideal în dezvoltarea de software).
cum să transmiteți de la iPhone la Xbox One
Proprietatea de conținut
După cum se arată în exemplul de pseudo-element de mai sus, proprietatea conținutului este instrumentul care este utilizat pentru a insera conținut nou pe o pagină web. Această proprietate este utilizată numai cu pseudo-elementele înainte și după.
Este important să rețineți că, chiar dacă nu există conținut disponibil pentru a fi alimentat la proprietatea de conținut (cum ar fi în exemplul anterior de pseudo-element de mai sus), vi se cere totuși să utilizați proprietatea de conținut în parametrii dinainte sau după pseudo-element pentru a-i face să funcționeze conform intenției.
Acum puteți utiliza pseudo-elemente în CSS
În acest articol, ați învățat cum să identificați și să utilizați pseudo-elemente în programele dvs. CSS. Ați fost introdus în pseudo-elementele anterioare și ulterioare și vi s-au oferit modalități practice de utilizare a ambelor. De asemenea, ați putut vedea de ce proprietatea conținutului este necesară pentru utilizarea cu succes a pseudo-elementelor înainte și după.
Acțiune Acțiune Tweet E-mail 10 exemple de cod CSS simple pe care le puteți învăța în 10 minuteAveți nevoie de ajutor cu CSS? Încercați aceste exemple de cod CSS de bază pentru a începe, apoi aplicați-le pe propriile pagini web.
Citiți în continuare Subiecte asemănătoare- Programare
- Web design
- CSS
Kadeisha Kean este un dezvoltator de software complet și scriitor tehnic / tehnologic. Are capacitatea distinctă de a simplifica unele dintre cele mai complexe concepte tehnologice; producând materiale care pot fi înțelese cu ușurință de orice novice în tehnologie. Este pasionată de scriere, dezvoltarea de software-uri interesante și călătoria prin lume (prin documentare).
Mai multe de la Kadeisha KeanAboneaza-te la newsletter-ul nostru
Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
Faceți clic aici pentru a vă abona