Unsa ang kalainan tali sa CSS selector class ug id? id ug paggamit sa klase sa HTML

Unsa ang kalainan tali sa CSS selector class ug id? id ug paggamit sa klase sa HTML

Chen Weiliangkasamtangang ginapatumanSEO, pag-optimize sa siteWordPresstema.

Bisan tuod ako nakakat-on sa pipila ka mga batakang HTML ug CSS kahibalo kaniadto, apan wala pa nako kini magamit sa makadiyot, ilabi na ang paggamit sa bahin sa CSS, sayon ​​​​nga makalimtan.

Busa, irekord ug i-summarize ang kalainan ug paggamit sa CSS selector id ug klase dinhi:

• id katumbas sa #div
• klase katumbas sa .div

Ang kalainan tali sa id ug klase

paghulagway sa id

• Ang id usa ka fixed tag, nga gigamit sa pagpasabot sa mas dako nga estilo sa web page, nga gihubit sa porma sa #div
• Pananglitan: pagbahin sa mga kolum, ibabaw, lawas, ubos, ug uban pa...
• Gigamit kini sa paghubit sa usa ka piho nga elemento, nga mahimo ra makita kausa matag panid ug dili matawag nga balik-balik.

deskripsyon sa klase

• Ang klase kay usa ka grupo sa estilo, nga gigamit sa pagpasabot sa mga detalyadong estilo sa web page. Gipasabot kini sa porma sa .div ug mahimong balikon.
• Pananglitan: usa ka piho nga menu, usa ka linya sa teksto, ug uban pa...
• Sa parehas nga panid, mahimo kining tawgon nga balik-balik sa daghang mga elemento

Ang div selector mismo walay mga kabtangan. Pinaagi sa pagpasabot sa iyang css, kini nagkontrol sa pipila ka mga layout sama sa gilapdon, gitas-on, kolor sa background ug gidak-on sa teksto sa div.

Kinatibuk-anE-commercewebsite,Pagtukod ug estasyonAng html web page nga gihimo sa programa mao ang pag-amgo sa layout sa panid pinaagi sa CSS.

Unsa ang usa ka tigpili?

Ang kahulugan sa matag estilo sa CSS naglangkob sa 2 ka bahin:

选择器 {样式}

• Ang bahin sa wala pa ang {} mao ang "selector".
• Ang "selector" nagpaila sa "estilo" sa {} diin kini molihok.
• Sa ato pa, hain nga elemento sa web page naglihok kining "estilo"?

pananglitan sa code

Ania kung unsaon pagpili ug pag-istilo sa usa ka class="sidebar" nga elemento:

.sidebar
{ 
background-color:black;
}

Ania kung giunsa pagpili ug istilo ang usa ka elemento nga adunay id="footer":

#footer
{ 
background-color:black;
}