Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

.

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

 

9. Otras propiedades CSS (II)

9.2 Texto con CSS.

Añadir texto a un elemento.

Es posible añadir texto a un elemento mediante la propiedad content. Aunque las versiones antiguas de Internet Explorer no admiten esta propiedad, hoy día se verá bien en la gran mayoría de navegadores. Mediante esta propiedad podemos añadir un texto que aparecerá antes o después del elemento seleccionado. Sin embargo para que esta propiedad funcione correctamente debemos usar los pseudoelementos :before (antes) o :after (después). Veamos esto con más detalle:

La definición de la propiedad content es la siguiente:

content	generar contenido de texto
Valores	normal|[ <cadena> | <url> | <contador> |attr( <identificador> )|open-quote| close-quote|no-open-quote|no-close-quote] +| inherit
Descripción	Permite introducir texto dentro de un elemento
Valor inicial	normal
se aplica a	pseudo-elementos :before y :after

pseudoelementos before y after

Antes de explicar los valores de esta propiedad, debemos ver los pseudoelementos :before (antes) y :after (después).

Estos se aplican en el selector, para indicarle dónde se debe insertar el contenido añadido mediante la propiedad content Ejemplos:

h2:before { content: .... ; }

h2:after { content: .... ; }

El primer ejemplo insertará un texto delante del contenido de la etiqueta h2, y el segundo lo insertará detrás. El contenido insertado forma parte de la etiqueta, por lo que adquiere sus mismas propiedades, si bien las podemos cambiar añadiendo otras propiedades en las reglas anteriores; estas propiedades sólo afectarán al texto añadido.

valor "cadena"

El valor más simple que le podemos dar a la propiedad content es una cadena de texto. Esta consiste en el texto que queremos insertar escrito entre comillas.

Así por ejemplo si escribimos:

p:before { content: "Esto es un párrafo: " ; color: blue; }

Veremos delante de todos los párrafos de texto escrito en color azul la cadena de texto que hemos puesto entre comillas.

Ejemplo propiedad content 1

Numerar los elementos.

Es posible numerar los elementos que afectan a un mismo selector de forma automática mediante el valor <contador> de la propiedad content de manera que cada en cada elemento aparezca un número que lo identifique. Sin embargo para ello debemos explicar antes dos propiedades que están relacionadas con los contadores; estas son counter-increment y counter-reset. Mediante estas propiedades y la propiedad content podemos organizar un documento en forma de esquema, con numeración de secciones, subsecciones, párrafos, etc.

La propiedad counter-increment indica que se ha creado un contador de elementos para numeración automática, y además indica la cantidad en que se incrementa el valor del contador de un elemento a otro. su definición es la siguiente:

counter-increment	contador de incremento
Valores	[ <identificador> <entero>? ]+ | none | inherit
Descripción	Permite la numeración automática de los elementos
Valor inicial	none
se aplica a	Todos los elementos

El valor identificador es una palabra que identifica al contador, para luego poder usarlo con la propiedad content. el valor entero es un número entero que muestra la cantidad en que se incrementa el contador de un elemento a otro. si se omite se entiende que es "1".

La propiedad counter-reset reinicia el contador indicado. su definición es la siguiente:

counter-reset	reinicio del contador
Valores	[ <identificador> <entero>? ]+ | none | inherit
Descripción	Permite la numeración automática de los elementos
Valor inicial	none
se aplica a	Todos los elementos

Los valores que toma esta propiedad son los mismos que para counter-increment pero el valor entero indica el numero con el que se reinicia el contador. Si no se especifica nada es igual a "0".

Estas dos propiedades crean un contador, pero para que la numeración automática se muestre en pantalla debemos usar también la propiedad content en su valor contador. Este valor se escribirá así: content: counter(identificador) donde "identificador" es el valor que le hemos dado a las propiedades counter-increment y counter-reset. Veamos un ejemplo:

p { counter-increment: apartado 1; }

h2 { counter-reset: apartado; }

p:before { content: "apartado " counter(apartado) "º :"; }

La primera regla crea un contador de numeración automática de los párrafos. el contador lo hemos llamado "apartado". el número "1" indica que la numeración se incrementará de uno en uno.

La segunda regla pone el contador a cero cada vez que nos encontramos con una etiqueta h2 (indicada en el selector).

La tercera regla es la que hace que se visualice la numeración del contador. Observese que la propiedad content lleva el valor counter(apartado) donde "apartado" es el identificador que hemos puesto en las reglas anteriores. Las cadenas de texto de la etiqueta content pueden estar tanto delante como detrás de counter( ...)

En el siguiente enlace vemos este ejemplo:

Ejemplo propiedad content 2

Se puede indicar el tipo de numeración que queremos dar (números, letras, numeros romanos, etc.), añadiendolo en el valor contador, de la siguiente manera:

content: counter(apartado, upper-latin)

después del identificador ponemos una coma y el valor del tipo de numeración que queremos. Los valores de tipo de numeración admitidos son los mismos que para la propiedad list-style-type. En el ejemplo anterior habríamos numerado mediante letras mayúsculas. En la página 4.2 Estilo en listas tienes explicados estos valores.

Así en el ejemplo del enlace anterior, podemos numerar las secciones con números romanos en mayúsculas si añadimos las siguientes reglas:

h2 { counter-increment: seccion; }

h2:before { content: counter(seccion, upper-roman) " : "; }

y el ejemplo quedará de la siguiente manera:

Ejemplo propiedad content 3

La propiedad quotes

Los valores open-quote, close-quote, no-open-quote, no-close-quote de la propiedad content indican insertar comillas antes y/o después del elemento señalado en el selector. En concreto indican:

• open-quote: inserta comillas de apertura.
• close-quote: Inserta comillas de cierre.
• no-open-quote: anula el valor "open-quote"
• no-close-quote: anula el valor "close-quote"

Veamos un ejemplo, las siguientes líneas de código pondrán a los párrafos comillas de apertura de color azul (primera linea) y comillas rojas de cierre (segunda línea:)

p:before { content: open-quote; color: blue; }

p:after { content: close-quote; color: red; }

Vemos en el siguiente ejemplo aplicados estos valores.

Ejemplo propiedad content 4

Sin embargo las comillas anteriores las podemos cambiar por cualquier texto, mediante la propiedad quotes. Esta propiedad tiene la siguiente definición:

quotes	Texto para comillas
Valores	[ <cadena> <cadena> ] +|none| inherit
Descripción	especifica el tipo de comillas o texto que las sustituya.
Valor inicial	none
se aplica a	Todos los elementos

Esta propiedad está relacionada con la propiedad content. Los valores establecidos en la etiqueta quotes son insertados en el documento mediante la etiqueta content.

El valor inicial por defecto es none, pero esta propiedad se hereda, con lo que es posible que no lo sea si su elemento padre tiene otro valor. De ahi el uso de los valores no-open-quote y no-close-quote con la propiedad content.

Los valores <cadena> <cadena> son dos cadenas de texto, la primera indica el texto que debe insertarse al principio del elemento, y se corresponde con los valores open-quote , no-open-quote de la propiedad content; la segunda indica el texto que insertaremos al final del elemento, y se corresponde con los valores close-quote , no-close-quote de la propiedad content.

Estos valores son cadenas de texto que escribiremos entre comillas (recuerda, si quieres escribir unas comillas dobles, debes usar comillas simples para delimitarlas, y viceversa). Debemos escribir siempre dos cadenas para que la propiedad funcione (aunque luego sólo usemos una), la de apertura y la de cierre; y para su inserción en el documento utilizaremos la propiedad content.

Así, en el ejemplo anterior podemos modificar el código CSS de la siguiente manera:

p { quotes: "pregunta: ¿" "?"; }

p:before { content: open-quote; color: blue; }

p:after { content: close-quote; color: red; }

Y la página se verá de la siguiente manera

Ejemplo propiedad content 5

Otros valores de content

Es posible insertar imágenes mediante el valor url de la propiedad content. la forma es la misma que para la propiedad background-image por ejemplo:

p:before { content: url("imagen.jpg") ; }

El valor attr(x) devuelve como cadena de texto el valor del atributo X, por ejemplo, si en el código html ponemos un atributo title:

<p title=" fin del párrafo">Esto es un párrafo.</p>

y le aplicamos la siguiente regla CSS:

p:after { content: attr(title); color: blue }

El valor del atributo title será la cadena de texto; la cual se insertará donde le indica la propiedad content:

Esto es un párrafo.

---

En la siguiente página veremos cómo hacer diferentes formatos para una página dependiendo del medio con el que se aplique.

Medios CSS.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com