InternetDesign Web

CSS-yokukhetha, kwaye indima yayo ukufometha html-uxwebhu

Ukudala website kwaye beqaqadeka kunye izinto ezithile wephepha web, wonke umntu uya sijongene kwithuba le CSS-umkhethi. Usebenzela ukubonisa ngokuchanekileyo ukuba lingakanani zonke iingxenye html-ifayile labo indawo kwiphepha. Ukuze wenze oku, ukwenza CSS-uxwebhu izicacisa selectors ezithile kunye iinketho zabo ukufometha: umbala, ubukhulu, indawo kunye nezinye. Wonke web ingcibi kufuneka bekwazile kwaye bakwazi ukungena kakuhle kokukhethiweyo ezinqwenelekayo. Zahlula yi uhlobo, loo engundoqo iyileyo sixoxe ngezantsi.

Iintlobo selectors CSS

Ngokuxhomekeke kuyo element lisetyenziswa html-efomatiweyo, CSS-yokukhetha ukuze inento enye yala maqela alandelayo:

  • tag umkhethi;
  • umkhethi yeklasi;
  • id-ukhetho;
  • athi ukhetho.

tag umkhethi

Libizwa ngokuba "uhlobo umkhethi" okanye "isiqalelo", oko yeyona ilula kwaye eqhelekileyo. Njengoko bakhe CSS-xwebhu amagama amasuntswana html-fayile, apho thina uchaze. Umzekelo, ukuba kufuneka ukuseta uhlobo lomhlathi, siya ucacise iimpawu kunye neenqobo zawo element p {imvelaphi: x; umbala: y; ubukhulu: z}. Kulo mzekelo, yonke imihlathi wephepha le web le iya kuba ifomati enye (umbala ongasemva, ubungakanani itekisi, njalo njalo. D.).

umkhethi class

Yaye kuthekani ukuba ufuna ukubuza yonke kumhlathi yakho yahlukile kwezinye iindlela? Ukuze wenze oku, kukho umkhethi eklasini.

CSS-uxwebhu kule Icala izakuqulatha ungeno le fomu ilandelayo: p.first {umbala: x; wefonti-size: y}. Ngenxa yoko, thina ezichaza iimpawu "color" yaye "ubungakanani" kuphela kumhlathi kwiklasi yokuqala.

Xa html-uxwebhu kulo mzekelo wangena lesiphumo iklasi kwigama isimbo kuqala. Iiklasi zingaba kangangoko indlela ofuna ukwenza isicelo izinto iphepha le web.

umkhethi id

Kudla kukho imfuneko ukuchaza isimbo ngokucokisekileyo ngakumbi, umzekelo naliphi isiqalelo omnye page, okanye isampula kubo. Kulo meko, uncedo uza id-umkhethi. Ifayile html ayithiye igama into enqwenelekayo into ikhomba ukuba phakathi kwabanye. Ngokomzekelo, izinto ukuba sifuna ukuba yahlukile kwezinye iza kuba isihloko senqaku.

Ngoko html-uxwebhu sabele header h1 isazisi, articlename ezinjalo. Yaye le CSS-ifayile, ucacise indlela, esongeza igama ID grille: #articlename {umbala: eluhlaza; umbhalo-lungelelanisa: iziko}. Ngoku isihloko wethu liya kuba umbala oluhlaza wedwa.

Nganye kwezi ntlobo zingentla linokuchazwa ngokuthi "elula CSS-umkhethi". Bona ukuchaza ufomato ukuba parameter ethile ye HTML-xwebhu: kunye izinto ezifanayo (umz, yonke imihlathi inqaku), iklasi ibe nye (umzekelo, kuphela isiqendu sokuqala) okanye umba ethile (umzekelo, isihloko senqaku).

nokuchazwa selectors

Ukongeza kule miba ingentla apha, kukho CSS-selectors zobumnini - indlela intsonkothe ngaphezulu entlobo yesicelo. It ivumela izinto format html kwi lesiphumo okhethiweyo okanye ixabiso. Kukho iintlobo ezininzi kule yomkhethi:

  • bubukho lesiphumo;
  • ngexabiso layo ngqo;
  • kwixabiso Lahlani sophawu;
  • ngokubaluleka kwazo ethile.

Makhe siqwalasele nganye yezi ntlobo:

  1. Icala lokuqala. Ufomato sifakwa, xa ekhona ethile sophawu html-ikhowudi (kusenokuba p, div, okuphezulu okungaguqukiyo ephepheni, njalo njalo). Ukuba akunjalo, isebenzisa i lunezinto zonke izinto style. Umzekelo, ngokuba iziqalelo kokuba isihloko (isixhobo kwincam).
  2. Icala lesibini. Indlela usebenza kuphela HTML-izinto zibe umdlalo ngqo amaxabiso ngemfanelo. Umzekelo, ukuba ufake i iziqalelo, apho ixabiso lohlobo lesiphumo ilingana ukuthumela.
  3. Icala lesithathu. Phantsi format iza kuquka kuphela imiba kuluhlu lwamaxabiso ukuba unalo igama elithile. Umzekelo, Bar Esecaleni sophawu "udidi" beengxenye div.
  4. Icala wesine. Style ichazwa kuphela ezo zinto ze html-uxwebhu, imfanelo yakhe ethile ixabiso elithile, kwaye iqala kunye naye. Umzekelo, ukusetyenziswa umbala axeliweyo kuzo iziqalelo zonke i IsiNgesi lesiphumo ulwimi (elinokuba en, en-uYayiro, en-au kunye t. D.).

Ngenxa yoko, ngokusebenzisa enye okanye enye, umkhethi CSS, intle acaciswe lonke iphepha le web, yaye bachaze ezinye iimpawu zayo.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 xh.birmiss.com. Theme powered by WordPress.