Breaking

Post Top Ad

Your Ad Spot

martes, 7 de mayo de 2019

Selectores de ID de CSS

Puede asignar un identificador único a un elemento HTML, y luego diseñar ese elemento haciendo referencia a su identificador único. Esto le permite definir un estilo que solo puede usar el elemento al que le asigna la ID.
Cualquier elemento HTML puede tener el idatributo aplicado. El valor de este atributo es el identificador único del elemento. Por ejemplo, <h1 id="mainHeading">le da a ese elemento un identificador único de mainHeading.
Podemos hacer referencia a esa ID desde nuestro código CSS.

Sintaxis de CSS ID

La sintaxis para declarar un ID de CSS es la misma que para las clases, excepto que en lugar de usar un punto, se utiliza un hash (#).
# id-name { propiedad : valor ; }
De nuevo, similar a las clases, si desea usar el mismo nombre de identificación para varios elementos, pero cada uno con un estilo diferente, puede prefijar el hash con el nombre del elemento HTML.
p #intro { font-size : 2em ; }

Ejemplo de ID de CSS

<! DOCTYPE html>
< título > Ejemplo </ título >
< estilo >
  div # css-section {
    borde : 1px  punteado  rojo ;
    relleno : 20px ;
    }
</ estilo >
< div  id = "css-section" >
  Este afortunado div tiene identificación ...
</ div >
< div >
  Este pobre div no tiene identificación ...
</ div >

IDs vs Clases

Dadas las clases y las identificaciones son muy similares, puede que se esté preguntando cuál usar. Esto depende de la situación.

Cuando usar clases

Debe usar clases cuando su estilo deba aplicarse varias veces en la misma página. Por ejemplo, puede tener muchos <h1>elementos que necesitan el mismo estilo aplicado.

Cuando usar IDs

Debe usar ID si solo un elemento de la página debe tener el estilo aplicado y / o si necesita un identificador único para ese elemento. Por ejemplo, puede asignar una ID a una <nav>etiqueta que contenga el menú de la izquierda. Los estilos para esta ID podrían contener la posición, el color de fondo, las propiedades de flotación, el tamaño, etc. Probablemente no querrá que ningún otro elemento de la página use este estilo en particular.
Otra cosa útil acerca de las ID es que puede usar el Modelo de objetos de documento (DOM) para referirse a ellos. Esto le permite utilizar técnicas de JavaScript / DHTML para crear un sitio web mucho más interactivo.
Sin embargo, hay una escuela de pensamiento dentro de la comunidad de desarrolladores que desaprueba a los selectores de identificación. De hecho, algunos desarrolladores afirman que nunca se deben usar los selectores de ID.
Esta es una decisión que deberá tomar. Es bastante posible (y común) desarrollar un sitio web sin utilizar selectores de ID.

Más selectores

Solo hemos cubierto algunos de los selectores más comunes. CSS incluye muchos más selectores que puede usar al seleccionar un elemento para el estilo.
Estas son algunas de las cosas que puede hacer con los selectores:
  • Selecciona solo aquellos elementos que tengan un determinado atributo.
  • Seleccione un elemento determinado que tenga un atributo determinado con un valor determinado.
  • Seleccione un elemento específico, pero solo cuando esté dentro de otro elemento específico.
  • Seleccione solo el primer hijo de un elemento específico.
  • Seleccione solo el último hijo de un elemento específico.
  • Incluso puede especificar qué niño (por ejemplo, el 3er niño, o el 4º, el 5º ... etc.).
  • Seleccione un elemento solo cuando se está desplazando.
  • Mucho más.
Marca esa página, o guarda una copia. Al codificar CSS, a menudo se encontrará buscando un selector adecuado para usar. Con las recientes incorporaciones a CSS, ahora hay más de 70 selectores, por lo que una lista como esa puede ser muy útil.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas