Noticias 

Aprende a referenciar atributos con CSS3

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:
seleccion por atributo css
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.

 Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts