Referenciar CSS con atributos de tags HTML. Selectores tipo expresión regular. Ejercicios resueltos (CU01014D)

Resumen: Entrega nº14 del Tutorial básico del programador web: CSS desde cero.
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.

css

 

 

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.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

JULIO - AGOSTO 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. JavaScript, jQuery
5. .NET, C#
6. HTML, CSS
7. Android, iOS
8. Php, MySql


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación