Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 77

Visitas el mes pasado: 127

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




9. Otras propiedades CSS (II)

9.2 Texto con CSS.

css

Añadir texto a un elemento.

Las propiedades que se describen en esta página para que funcionen con Internet Explorer, la página debe estar escrita en XHTML 1.0, y llevar la etiqueta !DOCTYPE correspondiente. Si la etiqueta !DOCTYPE es de lenguaje HTML 4.01, las propiedades no tienen efecto en Internet Explorer. En el resto de los navegadores habituales se ve correctamente. (Ver etiqueta !DOCTYPE en la página 15.1 Etiqueta Doctype).

Es posible añadir texto a un elemento mediante la propiedad content. 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 counter 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 en cuanto 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:

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.



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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