Codificación aprenderaprogramar.com: CU01014D
REFERENCIAR EN CSS CON CUALQUIER ATRIBUTO
Sabemos que podemos aplicar estilos CSS a partir de una etiqueta HTML (referenciar por tag), o bien a partir de una parte del documento HTML con un nombre único (referenciar por id), o bien a partir del atributo class (referenciar por clase). A partir de CSS3 se introdujo la posibilidad de referenciar estilos mediante cualquier atributo de elementos HTML.
Los atributos son parámetros asociados a una etiqueta HTML y que tienen un valor concreto. Por ejemplo en <div class=”destacado” > … </div> el atributo class del contenedor div tiene como valor “destacado”. Pero encontramos muchos otros atributos en el código HTML. Algunos ejemplos son:
|
Ejemplo código |
Etiqueta |
Atributo |
Valor del atributo |
|
<a href="libros.html">Libros de programación</a> |
<a>…</a> |
href |
libros.html |
|
<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"> |
<img …> |
src |
http://i.imgur.com/afC0L.jpg |
|
<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"> |
<img …> |
alt |
Notepad++ |
|
<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"> |
<img …> |
title |
Notepad++, un útil editor de texto |
|
<input type="text" name="nombre" /> |
<input…> |
type |
text |
|
<input type="text" name="nombre" /> |
<input…> |
name |
nombre |
|
<input type="submit" value="Enviar"> |
<input…> |
type |
submit |
Con CSS podemos aplicar estilos a todos los elementos de un tipo que cumplan tener cierto atributo. La sintaxis a emplear es:
|
NombreElementoHTML[selectorDeAtributo] { propiedad1ParaEseTipoDeElementos:valor; propiedad2ParaEseTipoDeElementos:valor; … propiedadnParaEseTipoDeElementos:valor; } |
Como selector de atributo tenemos distintas posibilidades. A continuación señalamos algunas:
|
Selector de atributo |
Ejemplo CSS |
Observaciones |
|
[nombreAtributo] |
input[name] { background-color: red;} p[title] {background-color: yellow;} Nota: no puede haber espacio entre el nombre de elemento y el corchete. |
Selecciona todos los elementos que tienen el atributo nombreAtributo, independientemente de su valor. En el ejemplo, todos los inputs que lleven name tendrán fondo rojo y todos los párrafos que lleven title tendrán fondo amarillo. |
|
[nombreAtributo = "valor"] |
input[name="correo"]{background-color: yellow; font-size:75%;} |
Selecciona todos los elementos cuyo nombreAtributo es valor. En el ejemplo, se pone fondo amarillo y tamaño de letra 75% a todos los elementos input con atributo nombre = “correo”. Si el input no tiene nombre ó este no es “correo”, no se aplica. |
|
[nombreAtributo^="valor"] |
a[href^="http://www.aprender"] {background-color: yellow; font-size:75%;} |
Selecciona todos los elementos cuyo nombreAtributo comienza por valor. En el ejemplo, se pone fondo amarillo y tamaño de letra 75 % a todos los links cuyo atributo href comienza por http://www.aprender |
|
[nombreAtributo*="valor"] |
a[href*="aprenderaprogramar"] {background-color: pink; font-size:125%;} |
Selecciona todos los elementos cuyo nombreAtributo contiene a valor. En el ejemplo, se pone fondo rosado y tamaño de letra 125 % a todos los links cuyo atributo href contiene aprenderaprogramar. |
|
[nombreAtributo$="valor"] |
a[href$=".com"], a[href$="6"] {background-color: pink; font-size:125%;} |
Selecciona todos los elementos cuyo nombreAtributo termina en valor. En el ejemplo, se pone fondo rosado y tamaño de letra 125 % a todos los links cuyo atributo href termina en .com ó en 6. |
Los selectores ^, * y $ tienen aquí un uso similar al que se da en otros lenguajes para crear lo que se denomina expresiones regulares: expresiones que siguen un determinado patrón (como empezar por…, terminar por…, contener…, etc.).
Escribe código CSS utilizando estos selectores y pruébalos sobre el documento HTML base que estamos usando para el curso. Recuerda no dejar espacios entre el nombre de elemento y los corchetes, es decir, a[href$="6"] es correcto pero a [ href$="6" ] no es correcto por contener espacios.
EJERCICIO
Crea una regla de estilos para aplicar la propiedad font-family: Arial a toda la página web. Crea otra regla que afecte a todas las etiquetas de imagen (<img …>) que tengan atributo “title” y aplícales las siguientes propiedades CSS: border-style:solid, border-width: 5px y border-color: LightSalmon. Aplica esta regla al código HTML base que estamos usando para el curso a través del archivo estilos.css con el que estamos aplicando estilos a este documento HTML y visualiza los resultados.
SOLUCIÓN
El código a incluir en el archivo estilos.css sería el siguiente:
/* Curso CSS estilos aprenderaprogramar.com*/
body {font-family: Arial;}
/*Aplicamos un borde especial a las imágenes que tienen atributo title*/
img[title]{border-style:solid; border-width: 5px; border-color: LightSalmon;}
Nota: si tu navegador no reconoce LightSalmon escribe #FFA07A en lugar de LightSalmon. Es decir, escribiríamos border-color: #FFA07A;
El resultado al visualizar el documento HTML en el navegador debe ser similar a este, donde vemos las imágenes que tienen atributo title con un borde color salmón:
SELECTORES BÁSICOS FRENTE A ESPECIALES
La mayoría de las páginas web se pueden trabajar con los selectores básicos basados en etiquetas HTML, atributos id y class. En general otros selectores tienen menor uso, en parte porque pueden complicar la dificultad de comprensión de una hoja de estilos. Restringiremos por tanto su uso a casos en que sea especialmente necesario y comentaremos adecuadamente el código CSS cuando los utilicemos.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
