Cerrar

Enviar mensaje

twitter FaceBook You Tube Git Hub Enviar email

Manual de HTML5 y CSS3

[20]
Generación de contenido automático

Publicidad

[20.1] generación de contenido

Con CSS2 apareció la posibilidad de que el propio CSS estableciera contenido en los elementos HTML. Esto cambia la óptica que se tiene de CSS en cuanto a ser un lenguaje que simplemente da formato o mejor, extiende esta idea.

Por supuesto estos contenidos son elementos simples en la página, delimitadores, viñetas, números,... pero facilitan el mantenimiento de los contenidos.

[20.2] propiedad content

Es la propiedad relacionada con la generación de contenido. Es muy poderosa ya que permite numerosas opciones.

[20.2.1]indicar un texto automático en un elemento

A la propiedad content se le puede aplicar un texto (delimitado por comillas) que se aplicará al elemento indicado.

Según el estándar sólo se puede utilizar mediante los selectores :before y :after que permiten establecer contenido que se mostrará antes y/o después del elemento al que se aplica.

Ejemplo:

<!doctype html>
<html lang=”es”>
    <head>
        <meta charset=”UTF-8”>
            <title>Comillas</title>
            <style>
		.cita:before{
			content: ‘”’;
		}
		.cita:after{
			content: ‘”’;
		}
		.cita{
			font-style: italic;
		}
 
	</style>
    </head>
 

    <body>
        <p class=”cita”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur provident eum praesentium placeat aperiam enim non voluptatem ab eaque modi laboriosam error esse dicta in impedit debitis vel veniam optio dolore facilis est dolorem ut officiis excepturi sint quasi fugit fugiat! Assumenda numquam amet porro sint nemo non perspiciatis vero laboriosam voluptate vel nihil deleniti ut consequuntur! In accusamus assumenda harum veniam blanditiis tenetur excepturi debitis sit est minima vel quia nihil? Accusamus beatae quod hic optio nostrum quibusdam adipisci modi aspernatur alias eaque laudantium dignissimos sed pariatur dolore obcaecati explicabo maxime possimus dolores non facilis deleniti placeat laborum recusandae!</p>
    </body>
</html>

En el ejemplo se establece que por delante del texto marcado con clase cita se pongan comillas, por detrás se hace lo mismo. Por lo que cualquier texto de clase cita saldrá entrecomillado y en cursiva:

Otro ejemplo (ya que las comillas se pueden generar de otra forma):

.copyright:before{
	content:”Jorge Sánchez - 2015”;
}

Si un párrafo se marca de esta forma:

<p class=”copyright”></p>

Aún sin contenido, se mostraría el texto Jorge Sánchez - 2015

[20.3] entrecomillado automático

[20.3.1]aplicar comillas automáticas

Para el caso de que queremos engrosar un texto dentro de unas comillas, CSS3 añadió la propiedad quotes. En esta propiedad basta indicar el carácter de apertura y el de cierre.

Ejemplos:

uso

resultado

 
quotes:”’” “’”

Texto entrecomillado con comilla simple:

‘Este es el texto’

 
quotes:’”’ ‘”’

Texto entrecomillado con comilla doble:

“Este es el texto”

 
quotes: ‘>>’ ‘<<’

Texto entrecomillado con menor y mayor:

>>Este es el texto<<

 
quotes: ‘«‘ ‘»’

Texto entrecomillado con comilla literaria:

«Este es el texto»

 
quotes: ‘«‘ ‘»’ ‘”’ ‘”’

Se indican cuatro comillas para el caso de que dentro del texto entrecomillado haya otro texto entrecomillado:

«Este es el texto con “comillas” interiores»

La propiedad quotes, realmente sólo indica como serán las comillas. Para entrecomillar se usa la propiedad content comentada en el punto anterior, a la cual se la pasa el valor open-quote y close-quote según queramos abrir o cerrar comillas.

Ejemplo de uso:

<style>
	blockquote{
		quotes: ‘«‘ ‘»’;
	}
	blockquote:before{
		content:open-quote;
	}
	blockquote:after{
		content:close-quote;
	}
 
</style>
</head>
<body>
	<blockquote>Alea jacta est</blockquote>
</body>

Como hay símbolos de comillas que no están en el teclado, podemos usar su código. Los códigos más habituales para poner comillas son:

Carácter

Código ISO 10646

“

0022

‘

0027

‹

2039

›

203A

«

00AB

»

00BB

‘

2018

’

2019

“

201C

”

201D

„

201E

Ejemplo de uso:

quotes:”\201D” “\201E”;

[20.3.2]retirar entrecomillado

Podemos indicar en lugar de open-quote y close-quote, los valores no-open-quote y no-close-quote a la propiedad content precisamente para lo contrario, para no poner comillas.

Por ejemplo, normalmente el elemento q aplica entrecomillado automático, si no le deseamos aplicaríamos este código:

q:before{
	content:no-open-quote;
}
q:after{
	content:no-close-quote;
}

[20.4] numeración automática

CSS2 trajo también la posibilidad de numerar automáticamente elementos gracias al uso de contadores. Para ello podemos usar una función llamada counter que nos permite utilizar unan variable de contador. La variable contadora se manipula con estas propiedades:

Ejemplo de numeración automática:

<!doctype html>
<html lang=”es”>
    <head>
     <meta charset=”UTF-8”>
            <title>Document</title>
     <style>
	     	body{
	     		counter-reset:cont;
	     	}
				.cita:before{
					content: “Capítulo “ counter(cont) “) “;
					counter-increment: cont 2;
				}
 

	</style>
    </head>
 
    <body>
        <p class=”cita”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit assumenda ratione repellat quaerat voluptate aperiam quis ipsum amet esse quia ullam eos quibusdam non maiores atque. Animi laborum repudiandae modi!maxime possimus dolores non facilis deleniti placeat laborum recusandae!</p>
        <p class=”cita”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quasi delectus quia quo mollitia ex vero veniam nostrum ipsum minima tenetur ad animi non soluta amet rem assumenda? Molestias officia.</p>
        <p class=”cita”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi repellat mollitia numquam minima alias id debitis voluptas ut animi dolor! Distinctio laborum quasi quo soluta dignissimos odit nam dolores quibusdam?</p>
</body>
</html>

El resultado es:

[20.5] generar contenido a partir de atributos

La propiedad content tiene la posibilidad de generar contenido utilizando una función llamada attr a la que podemos pasar un atributo del elemento. Entonces generaremos automáticamente el contenido del elemento a partir del contenido de dicho elemento.

Un ejemplo típico es este:

a:before{
	content:attr(href);
}

En el caso de indicar un enlace de esta forma:

<a href=”http://www.jorgesanchez.net”></a>

Aparecerá el texto:

http://www.jorgesanchez.net

Que aparezca este texto es porque content genera el contenido para el enlace (ya que realmente en el código de la etiqueta a no se ha especificado) a partir del contenido del atributo href.

[20.6] generar contenido a partir de una URL

La posibilidad más espectacular de la propiedad content es que puede utilizar la función url para incorporar al elemento contenidos procedentes de una URL. Ejemplo:

<!doctype html>
<html lang=”es”>
<head>
    <meta charset=”UTF-8”>
    <title>URL</title>
    <style>
        p:before{
            content:url(arrow.png);
        }
 
    </style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Incidunt, voluptate!</p>
<p>Adipisci aliquid assumenda cupiditate
    error eveniet explicabo facilis temporibus
    voluptas.</p>
<p>Adipisci at atque qui?
    Cupiditate ducimus libero nesciunt
    suscipit veniam?</p>
</body>
</html>

Suponiendo que dispongamos de la imagen arrow.png en el mismo directorio en el que se encuentra la página web, el resultado sería: