Ano ang pagkakaiba sa pagitan ng CSS selector class at id? id at paggamit ng klase sa HTML

Ano ang pagkakaiba sa pagitan ng CSS selector class at id? id at paggamit ng klase sa HTML

Chen Weiliangkasalukuyang nagsasagawaSEO, i-optimize ang siteWordPresstema.

Bagama't natutunan ko ang ilang mga pangunahing kaalaman sa HTML at CSS dati, ngunit hindi ko ito pinaandar, lalo na ang paggamit ng bahagi ng CSS, madali itong makalimutan.

Kaya, itala at ibuod ang pagkakaiba at paggamit ng CSS selector id at klase dito:

• id ay tumutugma sa #div
• klase ay tumutugma sa .div

Ang pagkakaiba sa pagitan ng id at klase

paglalarawan ng id

• Ang id ay isang nakapirming tag, na ginagamit upang tukuyin ang mas malaking istilo sa web page, na tinukoy sa anyo ng #div
• Halimbawa: paghahati ng mga column, itaas, katawan, ibaba, atbp...
• Ginagamit upang tukuyin ang isang partikular na elemento, na maaari lamang lumitaw nang isang beses bawat pahina at hindi maaaring tawaging paulit-ulit.

paglalarawan ng klase

• Ang klase ay isang pangkat ng istilo, na ginagamit upang tukuyin ang mga detalyadong istilo sa web page. Ito ay tinukoy sa anyo ng .div at maaaring ulitin.
• Halimbawa: isang partikular na menu, isang linya ng text, atbp...
• Sa parehong pahina, maaari itong tawagin nang paulit-ulit ng maraming elemento

Ang div selector mismo ay walang mga katangian. Sa pamamagitan ng pagtukoy sa css nito, kinokontrol nito ang ilang layout gaya ng lapad, taas, kulay ng background at laki ng text ng div.

PangkalahatanE-commercewebsite,Bumuo ng istasyonAng html web page na nabuo ng programa ay upang mapagtanto ang layout ng pahina sa pamamagitan ng CSS.

Ano ang isang tagapili?

Ang kahulugan ng bawat istilo ng CSS ay binubuo ng 2 bahagi:

选择器 {样式}

• Ang bahagi bago ang {} ay ang "selector".
• Ang "selector" ay nagpapahiwatig ng "estilo" ng {} kung saan ito kumikilos.
• Ibig sabihin, sa aling elemento ng web page gumagana ang "estilo" na ito?

halimbawa ng code

Narito kung paano pumili at mag-istilo ng class="sidebar" na elemento:

.sidebar
{ 
background-color:black;
}

Narito kung paano pumili at mag-istilo ng elemento na may id="footer":

#footer
{ 
background-color:black;
}