6.1 Ang katangian ng klase at ang tag ng istilo
Ngunit hindi lang iyon. Matapos maimbento ang daan-daang "estilo", ang tanong ay lumitaw: paano gamitin ang mga ito? At pagkatapos ay nagkaroon sila ng ideya na pagsama-samahin sila sa "mga klase". Ang mga ito ay, siyempre, hindi ang parehong mga klase tulad ng sa Java. Mga espesyal na grupo ng istilo lamang.
At kung bago gumamit ng "mga klase" mayroon kang larawan:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">
Ngayon ay maaari itong isulat bilang:
<img src="logo.png" class="picture">
<style>
img.picture {
width=100px;
height=100px;
opacity=0.5
}
</style>
Gumawa kami ng isang espesyal «style» picture
at inilipat ang mga halaga ng estilo mula sa style
. At pagkatapos ay itinali namin ang <img> at ang "style" na larawan gamit ang tag na class
.
6.2 Selector, mga uri ng selector
Ang mga istilong ito, na ginawang hiwalay, ay naging kilala bilang classes
o selectors
. Mayroon silang ilang mahahalagang katangian.
Ang isa html-element
ay maaaring magkaroon ng maramihang mga tagapili. Ang kanilang mga pangalan ay ipinahiwatig ng isang puwang. Halimbawa:
<img src="logo.png" class="picture main">
Isang dahilan kung bakit kami nakipag-ugnayan sa mga tagapili dito ay dahil maaari silang awtomatikong mailapat. At ang kapaki-pakinabang na ari-arian na ito ay gagamitin nang napakadalas sa hinaharap. Kasama ang mga developer ng Java.
Narito ang isang maikling listahan ng mga ito:
# | Tagapili | Halimbawa | Paglalarawan |
---|---|---|---|
1 | * |
|
Nalalapat sa lahat ng elemento ng isang HTML na dokumento. |
2 | #id |
|
Ang # ay sinusundan ng id ng elemento kung saan ilalapat ang ibinigay na istilo. |
3 | tag |
|
Nalalapat sa lahat ng mga talahanayan sa dokumento. |
4 | tag.selector |
|
Nalalapat sa lahat ng mga talahanayan ng dokumento na may tinukoy na katangian ng klase. |
5 | .tagapili |
|
Nalalapat sa lahat ng elemento na may tinukoy na katangian ng klase. Kahit anong tag. |
6 | anak ng magulang |
|
Nalalapat sa lahat ng elemento kung saan ang parent tag ay naglalaman ng pangunahing klase at ang child tag ay naglalaman ng article class. |
7 | tag: link |
|
Ang :link pseudo-class ay ginagamit sa istilo ng mga link na hindi pa naki-click ng user. |
8 | tag:binisita |
|
Ang :link pseudo-class ay ginagamit upang i-istilo ang mga link na na-click na ng user. |
9 | tag: nasuri |
|
Ang pseudo-class na ito ay pipili lamang ng mga naka-check na elemento ng UI: mga radio button o mga checkbox. |
10 | tag:hover |
|
Nagbibigay-daan sa iyo ang pseudo-class na ito na baguhin ang istilo ng isang elemento kapag nag-hover sa ibabaw nito gamit ang mouse. |
labing-isa | tag:panganay na anak |
|
Papayagan lang ng pseudo-class na ito ang unang child element na mapili. |
Hindi mo kailangang isaulo lahat. Ngunit ito ay mabuti kung pinag-aralan mo ang talahanayang ito ng ilang beses at ang lahat ng ito ay idineposito sa iyong ulo. Kung wala ang web sa modernong buhay, wala kahit saan, at sa web - wala kahit saan na walang mga tagapili.