Seguimos estudiando el apasionante mundo del desarrollo web con HTML5 y CSS3, aunque este año me he propuesto aprender JavaScript. Con lo cual si me decido a iniciarme, compartiré mis nuevos conocimientos con ustedes. Pero vamos al grano, en la clase anterior estudiamos los selectores de clase en CSS3. , vamos a estudiar los selectores de id en CSS3.
Antes de comenzar con este tipo de selector vamos a recordar algo. Dentro de cada etiqueta, podemos asignar un atributo id. Pero ojo!, en un documento html, no puede haber dos etiquetas con un mismo id. Si esto fuera así, se producirían errores, con lo cual, lo correcto es que no existan dos etiquetas con un mismo id.
Estos selectores nos permiten seleccionar una etiqueta, en base al valor del atributo id. Son muy similares a selectores de clase, pero la gran diferencia, es que el uso de id tiene un mayor peso en términos de especificidad. También, a diferencia de las clases y como he comentado al inicio, los id´s pueden ser definidos una única vez dentro de un documento html.
¿En que situaciones es recomendable usar id´s?
Por ejemplo, cuando tenemos una sección dentro de nuestro sitio, que es única y sepas que nos se va a repetir y quieres identificarlo. Una opción muy valida sería un menú principal.
/*Para hacer referencia a un id usamos almoadilla #*/
#piedepagina { background: blue; text-align: center; }
Es recomendable, que los nombres que uses para las clases e id´s, sean lo más significativos y descriptivos posibles intentando que no sean largos. Lo mejor es que el nombre que se le asignen, tanto a las clases como a los id´s, sea en función a lo que realizan dentro de la página web.
En mi caso uso id´s habitualmente para menú principal, secciones, ventanas emergentes, formulario de contacto, etc. Las páginas web estáticas que desarrollo para clientes, o para mi mismo, suelen ser una sola pagina. Esta pagina la divido en secciones, de cuatro a seis secciones concretamente. Con lo cual, uso muchísimo los id´s para identificar esas secciones y enlazarlas a los link´s del menú principal. De echo esto lo estudiamos en el curso de HTML5 desde cero, lo utilizo muchisimo para enlazar a secciones de una misma página.
Finalizando clase
Aunque a veces me extiendo mucho, la clase de hoy a sido bastante asequible en el sentido de que ha sido cortita, pero hemos aprendido a usar los selectores de clase en CSS3.
Así que nada más por ahora queridos entusiastas del desarrollo web, espero vuestra visita para continuar aprendiendo. Y porsupuesto no dudes en dejarme un comentario sobre este tema, si te ha gustado o servido de algo, o si quieres puntualizar o corregir algo. Por favor, tomate un minuto para compartir este articulo, clase , post o como quieras llamarlo. De esta forma ayudas a que esta comunidad de estudio crezca y otras personas interesadas en aprender, puedan acceder a este contenido.
0 Comentarios