Atributo de clase HTML
Ejemplo
Uso del atributo class en un documento HTML:
<html>
<head>
<style>
h1.intro {
color: blue;
}
p.important {
color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph. :)</p>
</body>
</html>
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
El class
atributo especifica uno o más nombres de clase para un elemento.
El class
atributo se usa principalmente para apuntar a una clase en una hoja de estilo. Sin embargo, también puede ser utilizado por JavaScript (a través de HTML DOM) para realizar cambios en los elementos HTML con una clase específica.
Compatibilidad con navegador
Attribute | |||||
---|---|---|---|---|---|
class | Yes | Yes | Yes | Yes | Yes |
Sintaxis
<element class="classname">
Valores de atributo
Value | Description |
---|---|
classname | Specifies one or more class names for an element. To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.
Naming rules:
|
Más ejemplos
Ejemplo
Agregue varias clases a un elemento HTML:
<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
color: blue;
text-align: center;
}
.important {
background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">Header 1</h1>
<p>A paragraph.</p>
</body>
</html>
Ejemplo
Usando JavaScript para agregar un color de fondo amarillo al primer elemento con class="example" (índice 0).
var x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";
Ejemplo
Usando JavaScript para agregar la clase "mystyle" a un elemento con id="myDIV":
document.getElementById("myDIV").classList.add("mystyle");
páginas relacionadas
Tutorial HTML: Atributos HTML
Tutorial CSS: Sintaxis CSS
Referencia CSS: CSS .class Selector
Referencia de HTML DOM: Método HTML DOM getElementsByClassName()
Referencia HTML DOM: propiedad HTML DOM className
Referencia HTML DOM: Propiedad classList de HTML DOM
Referencia HTML DOM: objeto de estilo HTML DOM