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 classes
sau selectors
. Au mai multe caracteristici importante.
Se html-element
pot 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 | * |
|
Se aplică tuturor elementelor unui document HTML. |
2 | #id |
|
# este urmat de id-ul elementului căruia urmează să fie aplicat stilul dat. |
3 | etichetă |
|
Se aplică tuturor tabelelor din document. |
4 | tag.selector |
|
Se aplică tuturor tabelelor de documente care au atributul de clasă specificat. |
5 | .selector |
|
Se aplică tuturor elementelor care au atributul de clasă specificat. Orice etichetă. |
6 | părinte copil |
|
Se aplică tuturor elementelor în care eticheta părinte conține clasa principală, iar eticheta secundară conține clasa articolului. |
7 | tag: link |
|
Pseudo-clasa :link este folosită pentru a modela link-urile pe care utilizatorul nu a făcut clic încă. |
8 | tag: vizitat |
|
Pseudoclasa :link este folosită pentru a stila link-urile pe care utilizatorul a făcut deja clic. |
9 | tag:verificat |
|
Această pseudo-clasă va selecta doar elementele UI bifate: butoane radio sau casete de selectare. |
10 | etichetă: hover |
|
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 |
|
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.