Uso de Id y Class en HTML y CSS.

Más
3 años 8 meses antes #206 por SotoCode
Uso de Id y Class en HTML y CSS. Publicado por SotoCode
¡Muy buenas a todos! Quería compartir el uso de Id y Class en HTML y CSS.

Id: se utiliza para identificar un elemento en concreto del HTML. Por ejemplo, si quisiéramos localizar el menú de nuestra web sería conveniente utilizar este atributo.
Class: se utiliza para identificar un conjunto de elementos del HTML. Por ejemplo, para los botones del menú podríamos utilzar este atributo. Dado que todos van a tener el mismo estilo, usando esto simplificamos mucho la forma de acceder a determinadas etiquetas.

Código HTML:
<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <link type="text/css" rel="stylesheet" href="idClassCSS.css"/>
      <title>ID & CLASS</title>
    </head>
    <body>
        <div id="menu">
            <div class="botonImpar">1</div>
            <div class="botonPar">2</div>
            <div class="botonImpar">3</div>
            <div class="botonPar">4</div>
            <div class="botonImpar">5</div>
        </div>
    </body>
</html>

Código CSS:
.botonImpar {
  width: 20%;
  height: 100%;
  background-color: #FFC300;
  float:left;
  text-align: center;
}

.botonPar {
  width: 20%;
  height: 100%;
  background-color:  #FF5733;
  float:left;
  text-align: center;
}

#menu {
  width: 1000px;
  height: 30px;
  margin: auto;
  color: white;
  font-family: Arial;
}

En el ejemplo, hemos creado una barra de menú. Hemos creado un id para la barra de menú y dos clases, una para botones pares y otra para los impares.
El id menu solo almacenará el tamaño de la barra de menú. Y cada una de las clases botonImpar o botonPar almacenaran su tamaño y su color de fondo.
Para declarar estos atributos en en HTML, se hará de la siguiente forma:
<elemento id="nombre"></elemento>
<elemento class="nombre"></elemento>
Y para declararlos en el CSS para su modificación, se hará de la siguiente forma:
Si es id: #nombre { }
Si es class: .nombre { }

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Gracias a Foro Kunena

Encuentra ayuda

¿Te queda alguna duda?

Hostingato ® 2019. Marca registrada.

Uso de Cookies

Utilizamos cookies propias y de terceros para información estadística y mejorar tu navegación. Para continuar navegando debes aceptar nuestra política de cookies.

Aceptar Rechazar