Grupo de HTML y CSS
Este grupo esta relacionado con nuestro curso profesional de HTML y CSS. Aquí se comparten... View more
organizador:
- Organizado por
-
Referencia por nombre. HTML y CSS
Referencia por nombre. HTML y CSS
Que tal colegas, hago esta publicación por si alguien quedó con dudas sobre la sección de referencia por nombre de modulo de CSS, del curso de HTML, CSS y JS.
Referencias.
A la hora de estar trabajando con estilos en CSS nosotros tenemos que identificar cual es el elemento al que queremos asignarle los estilos, para eso debemos de buscar como referirnos a ellos. En el curso estamos viendo tres formas de referirnos a los elementos; ID, Clase y Nombre.
Imaginemos que tenemos el siguiente código HTML, un párrafo con el nombre de nuestra plataforma:
<p>Azul School</p></span><span style="font-family: inherit; font-size: inherit;">A ese mismo elemento le podemos agregar un identificador y una clase sin problemas, y quedaría así.
<p id="nombrePlataforma" class="textoCuerpo">Azul School</p>Ahora veamos como podemos hacer para agregarle estilos a ese elemento utilizando las tres referencias, y como afecta cada uno.
1.- Referencia por nombre.
El nombre del elemento es “p”, así que la forma para agregar estilos por referencia de nombre es el siguiente:
p{ color: #696969; font-size: 20px; font-weight: bold;
}
El problema aquí es que este estilo va a afectar a todos los elementos “p” no solo al de arriba, así que se debe de usar cuando deseas que los estilos afecten a todos los elementos con el mismo nombre.
2.- Referencia por ID.
Los ID están hechos para que sean únicos, por esa razón no deben de ir en mas de un elemento. En caso que desees asignarle estilos a un elemento por su id, es de la siguiente forma, tomando de ejemplo el código HTML anterior.
#nombrePlataforma{ color: #696969; font-size: 20px; font-weight: bold;
}
La desventaja sería que solo se aplica a un elemento, ya que un ID no se debe de repetir.
3.- Referencia por clase.
Esta es la mejor opción a la hora de estas agregando estilos a los elementos, ya que las clases se pueden repetir muchas veces y puedes agregarle una clase a todos los elementos que quieras que se ven igual.
.textoCuerpo{ color: #696969; font-size: 20px; font-weight: bold;
}
Espero que con esta publicación todo haya quedado claro, si no, pueden preguntar en este hilo todas sus dudas, con gusto las contesto.
- 0 Respuestas
Sorry, there were no replies found.
Inicia sesión para responder.