Atributul HTML class
Atributul class setează o clasă pentru un element HTML. Mai multe elemente pot avea aceeași clasă.
Atributul class
Atributul class indică de obicei un nume de clasă dintr-o foaie de stil, astfel încât elementul primește acel stil. Poate fi folosit și de JavaScript pentru a găsi și modifica elemente cu o clasă dată. Mai multe elemente cu aceeași clasă sunt stilizate la fel.
Sfat: Atributul class poate fi folosit pe orice element. Notă: Numele clasei este sensibil la majuscule.
Trei div-uri cu o clasă
Trei div-uri care partajează clasa city, toate stilizate la fel.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>Londra</h2>
<p>Londra este capitala Angliei.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Parisul este capitala Franței.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo este capitala Japoniei.</p>
</div>
</body>
</html>
Două span-uri cu o clasă
Două span-uri care partajează clasa note.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>Titlul Meu <span class="note">Important</span></h1>
<p>Acesta este un text <span class="note">important</span>.</p>
</body>
</html>
Sintaxa pentru Clasă
Pentru a crea o clasă, scrie un punct (.) urmat de numele clasei, apoi pune proprietățile CSS între acolade.
Exemplu
Definirea și folosirea unei clase numite city.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">Londra</h2>
<p>Londra este capitala Angliei.</p>
<h2 class="city">Paris</h2>
<p>Parisul este capitala Franței.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo este capitala Japoniei.</p>
</body>
</html>
Clase Multiple
Un element poate aparține la mai multe clase. Separă numele claselor cu un spațiu (de exemplu, o clasă city și o clasă main împreună), iar elementul primește stilurile din toate acestea.
Exemplu
Un element cu două clase care primește stiluri din ambele.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>
</head>
<body>
<h2 class="city main">Londra</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
</body>
</html>
Elemente Diferite Pot Partaja Aceeași Clasă
Elemente diferite pot folosi același nume de clasă și pot partaja stilul acesteia.
Exemplu
Un <h2> și un <p> care partajează clasa city.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">Paris</h2>
<p class="city">Parisul este capitala Franței</p>
</body>
</html>
Folosirea Atributului class în JavaScript
JavaScript poate folosi numele clasei pentru a lucra cu elemente specifice. Metoda getElementsByClassName() găsește toate elementele cu o clasă dată.
Nu-ți face griji dacă acest cod îți este nefamiliar; vei afla mai multe în capitolul HTML JavaScript.
Exemplu
Un buton care ascunde toate elementele cu clasa city.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Apasă butonul pentru a ascunde toate elementele cu numele de clasă "city":</p>
<button onclick="myFunction()">Ascunde elementele</button>
<div class="city">
<h2>Londra</h2>
<p>Londra este capitala Angliei.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Parisul este capitala Franței.</p>
</div>
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</body>
</html>
Rezumatul Capitolului
Pe scurt: atributul class setează unul sau mai multe nume de clase pentru un element. Clasele sunt folosite de CSS și JavaScript pentru a selecta elemente, pot fi folosite pe orice element, iar numele clasei este sensibil la majuscule. Elemente diferite pot partaja o clasă, iar JavaScript le poate accesa cu getElementsByClassName().