Како се користе псеудо елементи пре и после у ЦСС -у

Како се користе псеудо елементи пре и после у ЦСС -у

Псеудо-елементи су један од напреднијих селектора који су доступни за употребу у ЦСС-у. Главна сврха ових бирача је креирање јединственог стила, без промене ХТМЛ документа који се користи за креирање основне структуре дате веб странице.





Ево како се користе псеудо-елементи у ЦСС-у.



претворити пнг у пдф виндовс 10

Уобичајени псеудо-елементи

Постоји опсежна листа псеудо-елемената који су доступни како би олакшали живот веб програмерима. Неки од ових псеудо-елемената укључују:





  • пре него што
  • После
  • Позадина
  • Прва линија
  • Прво слово

У посебним ситуацијама, неки псеудо-елементи ће се показати прикладнијим од других, али једино што остаје константно је општа структура за коришћење било ког псеудо-елемента.

Пример структуре псеудоелемената


selector::pseudo-element{
/* css code */
}

Иако можете користити ХТМЛ елемент као бирач, препоручује се употреба класе или ид -а како бисте избегли циљање ненамерних елемената у свом изгледу. Елемент, стил или податке које желите да уметнете на жељену позицију треба поставити између увијених заграда.



Псеудо-елементи пре и после су најпопуларнији на листи, а с обзиром на то да постоји много практичних начина за њихову употребу-није тешко схватити зашто.

Употреба Псеудо-елемента Бефоре у ЦСС-у

Иако није немогуће, слике је тешко преклопити читљивим текстом у ЦСС -у. То је углавном зато што би слика и текст заузели исту позицију на веб страници.



Релативно је лако то учинити послати слику у позадину групе текста , али када је та слика превише светла, има тенденцију да затрпа текст који се налази на њој. У овим случајевима, следећи корак је покушај да слику учините мање непрозирном користећи својство непрозирности.

Једини проблем је што ће слика и текст заузети исти положај и текст ће постати донекле транспарентан.



Један од ретких ефикасних начина за решавање овог проблема је коришћење псеудо-елемента бефоре.

Коришћење примера Пре псеудо-елемената


.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%;
}

Горњи код је креиран да се користи у складу са доњом класом ХТМЛ дестинатионПаге. Као што је приказано у горњем коду, помоћу псеудо-елемента бефоре можемо циљати слику и користити својство непрозирности на њој пре него што се слика комбинује са текстом.





This is the result of using the before pseudo-element
to overlay and image with readable text.


Ово ће резултирати постављањем прекривача на слику и јасним текстом на врху, као што је приказано на доњој слици:

Коришћење Афтер Псеудо-елемента у ЦСС-у

Практична употреба за псеудо-елемент афтер је помоћ у стварању ХТМЛ обрасца. Већина образаца је креирана са скупом поља која захтевају податке за успешно слање обрасца.

Један од начина да означите да поље у обрасцу захтева податке је постављање звездице иза ознаке за ово поље. Псеудо-елемент афтер пружа вам практичан начин да то учините.

Користећи Пример псеудо-елемента после


.required::after{
content: '*';
color: red;
}

Уметањем горњег кода у ЦСС одељак вашег обрасца осигураћете да ће свака ознака која садржи потребну класу бити директно праћена црвеном звездицом. Псеудо-елемент афтер је такође практичан у овом примеру јер помаже у одвајању стила од структуре (што је увек идеално у развоју софтвера.)

можете ли користити свој лаптоп као монитор

Својство садржаја

Као што је приказано у горе наведеном примеру псеудо-елемента, својство садржаја је алатка која се користи за уметање новог садржаја на веб страницу. Ово својство се користи само са псеудо-елементима пре и после.

Важно је напоменути да чак и ако нема доступног садржаја за унос у својство садржаја (као у претходном примеру псеудо-елемента горе), и даље морате да користите својство садржаја у оквиру параметара пре или после псеудо-елемент да би их натерао да раде како је предвиђено.

Сада можете користити псеудо-елементе у ЦСС-у

У овом чланку сте научили како да идентификујете и користите псеудо-елементе у својим ЦСС програмима. Упознали сте се са псеудо-елементима пре и после и дали вам практичне начине да користите оба. Такође сте могли да видите зашто је својство садржаја неопходно за успешну употребу псеудо-елемената пре и после.

Објави Објави Твеет Емаил 10 једноставних примера ЦСС кода које можете научити за 10 минута

Треба вам помоћ са ЦСС -ом? Испробајте ове основне примере ЦСС кода за почетак, а затим их примените на своје веб странице.

Прочитајте следеће Повезане теме
  • Програмирање
  • Веб дизајн
  • ЦСС
О аутору Кадеисха Кеан(Објављен 21 чланак)

Кадеисха Кеан је програмер софтвера и писац техничке/технологије. Она има изразиту способност да поједностави неке од најсложенијих технолошких концепата; производњу материјала који може лако разумети сваки почетник у технологији. Одушевљена је писањем, развојем занимљивог софтвера и путовањем по свету (кроз документарне филмове).

Више од Кадеисха Кеан

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили