Clase HTML
Tutorial HTML » Clase HTML
Usando el atributo de clase HTML
El atributo de clase HTML se utiliza para definir estilos iguales para elementos con el mismo nombre de clase.
Entonces, todos los elementos HTML con el mismo atributo de clase obtendrán el mismo estilo.
Consejo: el atributo de clase se puede utilizar en cualquier elemento HTML.
Nota: ¡El nombre de la clase distingue entre mayúsculas y minúsculas!
Aquí tenemos tres elementos <div> que indican el mismo nombre de clase:
Sintaxis:
Crear una clase HTML - ejemplo
En el siguiente ejemplo tenemos tres elementos <div> con un atributo de clase con el valor de "ciudad".
<!DOCTYPE html>
<html>
<head>
<style>
.ciudad {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body><div class="ciudad">
<h2>Londres</h2>
<p>Londres es la capital de Inglaterra.</p>
</div><div class="ciudad">
<h2>Paris</h2>
<p>París es la capital de Francia.</p>
</div><div class="ciudad">
</body>
<h2>Tokyo</h2>
<p>Tokio es la capital de Japón.</p>
</div>
</html>
Usar el atributo de clase HTML en líneas de pedido - ejemplos
El atributo de clase HTML también se puede utilizar en elementos en línea:
<!DOCTYPE html>
<html>
<head>
<title>Mi clase HTML en líneas de pedido</title>
<style>
span.text
{
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>Mi <span class="text">clase HTML</span> en líneas de pedido</h1>
<p>Agregar aquí <span class="text">tu texto</span> el mejor.</p>
</body>
</html>
Etiquetas: crear una clase html, atributo de classe html, selectores de clase html, clase html css, crear clase html, clase container html, contrnedor, selector de classe
Diferentes elementos pueden compartir la misma clase
Diferentes elementos HTML pueden apuntar al mismo nombre de clase.
En el siguiente ejemplo, tanto <h2> como <p> apuntan a la clase "ciudad" y compartirán el mismo estilo:
<!DOCTYPE html>
<html>
<head>
<style>
.ciudad {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Diferentes elementos pueden compartir la misma clase</h2>
<p>Incluso si los dos elementos no tienen el mismo nombre de etiqueta, ambos pueden apuntar a la misma clase y obtener el mismo estilo CSS:</p>
<h2 class="ciudad">Paris</h2>
</body>
<p class="ciudad">París es la capital de Francia.</p>
</html>
crear una clase html, atributo de classe html, selectores de clase html, clase html css, crear clase html, clase container html, contrnedor, selector de classe
Clase HTML - html.es
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.