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 «стиль» 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 классамиsau 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:

# Selector Exemplu Descriere
1 *
* {
  margin: 0;
  padding: 0;
}
Se aplică tuturor elementelor unui document HTML.
2 #id
#img123 {
   width:100px;
   height 100px;
}
# este urmat de id-ul elementului căruia urmează să fie aplicat stilul dat.
3 etichetă
table {
   color: black;
}
Se aplică tuturor tabelelor din document.
4 tag.selector
table.important {
   color: red;
}
Se aplică tuturor tabelelor de documente care au atributul de clasă specificat.
5 .selector
.picture {
  opacity: 0.5
}
Se aplică tuturor elementelor care au atributul de clasă specificat. Orice etichetă.
6 părinte copil
main article {
  color: blue;
}
Se aplică tuturor elementelor în care eticheta părinte conține clasa principală, iar eticheta secundară conține clasa articolului.
7 tag: link
a:link {
color: blue;
}
Pseudo-clasa :link este folosită pentru a modela link-urile pe care utilizatorul nu a făcut clic încă.
8 tag: vizitat
a:visited {
color: red;
}
Pseudoclasa :link este folosită pentru a stila link-urile pe care utilizatorul a făcut deja clic.
9 tag:verificat
input[type=radio]:checked {
 border: 1px solid black;
}
Această pseudo-clasă va selecta doar elementele UI bifate: butoane radio sau casete de selectare.
10 etichetă: hover
div:hover {
  background: red;
}
Această pseudo-clasă vă permite să schimbați stilul unui element atunci când treceți cu mouse-ul peste el.
unsprezece tag:primul copil
ul li:first-child {
 border-top: none;
}
Această pseudo-clasă va permite doar selectarea primului element copil.

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.