ATRIBUTO DE CLASSE HTML
Atributo class é usado para especificar uma classe para um
elemento html.
Atributo class é usado para style ou na folha de style.
<div>
elementos com um class atributo com o valor "cidade".
Todos os três <div> elementos serão igual de acordo com o valor
.cidade
(.cidade) Pode usar qualquer nome desde que seja igual
class=”cidade” é igual a .cidade
<html>
<head>
<style>
. cidade {
background-color:
red;
color: black;
border: 3px solid
black;
margin: 15px;
padding: 15px;
}
</style>
</head>
<body>
<div class="cidade">
<h2>Paris</h2>
<p>Paris capital da França</p>
</div>
<div class="cidade">
<h2>São Paulo</h2>
<p>São paulo estado da região sul.</p>
</div>
<div class="cidade">
<h2>Tóquio</h2>
<p>Tóqui capital do japão</p>
</div>
</body>
</html>
<span>elementos com um class atributo com o valor "nota"
Ambos os <span> elementos serão igual para valor .nota
(.nota) Pode usar qualquer nome desde que seja igual
class=”nota” é igual a .nota
<!DOCTYPE html>
<html>
<head>
<style>
.nota {
font-size: 120%;
color: tomato;
}
</style>
</head>
<body>
<h1>Meu <span
class="nota">grande</span> amor</h1>
<p>Você muito <span
class="nota">importante</span> para mim.</p>
</body>
</html>
Criando uma class
Use qualquer nome para criar
uma class. Dentro< body> class=”qualquernome” dentro do style vai ser
.qualquernome e dentro das chaves { } os elemento do css.
<!DOCTYPE html>
<html>
<head>
<style>
.cidade {
background-color: red;
color: white;
padding: 15px;
}
</style>
</head>
<body>
<h2>Título 2</h2>
<p>Usando css</p>
<h2
class="cidade">Brasil</h2>
<p>Brasil um paìs da
america do sul.</p>
<h2
class="cidade">Paris</h2>
<p>Paris é a capital da
França.</p>
<h2
class="cidade">Tóquio</h2>
<p>Tóquio é a cpital do
Japão.</p>
</body>
</html>
O class atributo pode ser usado em qualquer elemento HTML.
VÁRIAS CLASSES
<!DOCTYPE
html>
<html>
<head>
<style>
.cidade {
background-color: tomato;
color: white;
padding: 10px;
}
.grande{
text-align: center;
}
</style>
</head>
<body>
<h2>VÁRIOS
CLASS</h2>
<h2
class="cidade grande">Cidade do México</h2>
<h2
class="cidade">Lisboa</h2>
<h2
class="cidade">Tóquio</h2>
</body>
</html>
DIFERENTES ELEMENTOS PODEM
COMPARTILHAR A MESMA CLASSE
ambos <h2>e <p> apontam para a classe "cidade"
<!DOCTYPE html>
<html>
<head>
<style>
.cidade {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>DIFERENTES
ELEMENTOS PODEM COMPARTILHAR A MESMA CLASSE </h2>
<h2
class="cidade">Londres</h2>
<p class="cidade">Londres
capital da Ingraterra</p>
</body>
</html>
USO DO ATRIBUTO CLASS EM
JAVASCRIPT
<!DOCTYPE html>
<html>
<body>
<h2>Uso do atributo class em JavaScript</h2>
<p>Clique no botão para ocultar todos os elementos com
o nome da classe "cidade":</p>
<button onclick="myFunction()">Ocultar
elementos</button>
<h2 class="cidade">Brasil</h2>
<p> Brasil um país da america do sul</p>
<h2 class="cidade">Londres</h2>
<p>Londres capital da Ingraterra</p>
<h2 class="cidade">Tóquio</h2>
<p>Tóquio capital do Japão</p>
<script>
function myFunction() {
var x =
document.getElementsByClassName("cidade");
for (var i = 0; i
< x.length; i++) {
x[i].style.display
= "none";
}
}
</script>
</body>
</html>