atribut de clasă

6.1 Atributul de clasă și eticheta de stil

Dar asta nu este tot. După ce au fost inventate sute de „stiluri” a apărut întrebarea: cum să le folosești? Și apoi le-a venit ideea de a le grupa în „clase”. Acestea, desigur, nu sunt aceleași clase ca în Java. Doar grupuri cu stil special.

Și dacă înainte de a folosi „clasele” aveai o imagine:

       <img src="logo.png" style="width=100px;height=100px;opacity=0.5">
    

Acum ar putea fi scris ca:

<img src="logo.png" class="picture">
 
<style>
    img.picture {
        width=100px;
        height=100px;
        opacity=0.5
    }
</style>

Am creat unul special «style» pictureși am transferat valorile stilului din style. Și apoi am legat <img> și imaginea „stil” cu eticheta class.

6.2 Selector, tipuri de selectoare

Aceste stiluri, redate separat, au devenit cunoscute ca classessau selectors. Au mai multe caracteristici importante.

Se html-elementpot avea mai multe selectoare. Numele lor sunt indicate cu un spațiu. Exemplu:

       <img src="logo.png" class="picture main">
    

Unul dintre motivele pentru care am atins aici selectoare este pentru că acestea pot fi aplicate automat. Și această proprietate utilă va fi folosită foarte des în viitor. Inclusiv dezvoltatorii Java.

Iată o scurtă listă a acestora:

* {
  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;
}

Nu trebuie să memorezi totul. Dar ar fi bine dacă ai studia acest tabel de câteva ori și toate acestea s-ar fi depus în capul tău. Fără web în viața modernă, nicăieri și pe web - nicăieri fără selectoare.