CSS: lenguaje de estilo para las páginas web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 31
Visitas el mes pasado: 72
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquà mismo se enseñan.
By Anyelguti
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 |
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.
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.
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:
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:
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.
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
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.
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