katangian ng klase

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» pictureat 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 classeso selectors. Mayroon silang ilang mahahalagang katangian.

Ang isa html-elementay 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:

* {
  margin: 0;
  padding: 0;
}

#img123 {
   width:100px;
   height 100px;
}

table {
   color: black;
}

table.important {
   color: red;
}

.picture {
  opacity: 0.5
}

main article {
  color: blue;
}

a:link {
color: blue;
}

a:visited {
color: red;
}

input[type=radio]:checked {
 border: 1px solid black;
}

div:hover {
  background: red;
}

ul li:first-child {
 border-top: none;
}

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.