| 5.3 Contenido generado | ||||
 |
Anterior | Siguiente |  |
|
¡CSS en acción!
Seleccione otra hoja de estilo para navegar:
Actual: default.css
| 5.3 Contenido generado | ||||
|
Anterior | Siguiente | |
|
Existen en HTML determinados elementos que provocan la aparición de
contenidos que no son parte del documento fuente. Es el caso de las listas ordenadas
(OL) que son representadas gráficamente como párrafos
numerados; las listas sin ordenar (UL) que insertan una viñeta
antes de cada ítem; las citas (Q) y (BLOCKQUOTE)
que son procesadas entre comillas.
Las CSS tienen propiedades específicas para controlar el aspecto gráfico de tales elementos. Más aún, podemos generar contenidos para insertar antes o después de otros elementos, además de los mencionados.
Esta posibilidad se contradice en parte con la regla de separar el contenido de la página de su presentación, pero resulta útil para aquellos casos en que cierto elemento se repite frecuentemente en la edición o que deba actualizarse periódicamente. En todo caso, se trata de una manera de ampliar la gama de herramientas disponibles para el autor.
| 'content' | |
|---|---|
| Valores: | [ <cadena> | <uri> | <contador> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit |
| Valor inicial: | una cadena vacía |
| Se aplica a: | los pseudo-elementos :before y :after |
| Se hereda?: | no |
| Porcentajes: | no admitidos |
Esta propiedad se usa con los pseudo-elementos :before y :after
para generar contenido en un documento. Los valores tienen los siguientes significados:
Para generar contenido en una página se efectúan dos operaciones:
Primero, con los pseudo-elementos :before y :after
se especifica dónde se insertará el contenido.
Segundo, con la propiedad content se especifica qué
es lo que se va a insertar.
Supongamos que queremos poner la cadena de texto "Título:
" antes de cada elemento <H1>:
H1:before {content: "Título: "}
(Consultar la sección sobre los pseudo-elementos :before y :after para ver ejemplos)
Las comillas se usan principalmente para destacar una cita o una frase reproducida textualmente; también para indicar un matiz irónico y en los casos en que se utilizan neologismos. Subsiste a veces la costumbre de utilizarlas para "enfatizar" un texto, pero para esto se dispone de otros recursos más adecuados como las itálicas, las negritas o el subrayado.
En CSS2, los autores pueden especificar qué tipos de comillas debe usar el navegador según el contexto o por preferencias de estilo. La propiedad 'quotes' especifica pares de comillas para cada nivel de citas anidadas y la propiedad 'content' permite que sean insertadas antes o después de una cita.
| 'quotes' | |
|---|---|
| Valores: | [<cadena> <cadena>]+ | none | inherit |
| Valor inicial: | depende de la aplicación del usuario |
| Se aplica a: | todos los elementos |
| Se hereda?: | si |
| Porcentajes: | no admitidos |
Esta propiedad especifica las comillas para las citas anidadas. Los valores tienen estos significados:
Q { quotes: '"' '"' "'" "'" }
Q:before { content: open-quote }
Q:after { content: close-quote }
La numeración automática en CSS2 es controlada con dos propiedades, 'counter-increment' y 'counter-reset'. Los contadores definidos por estas propiedades se usan con las funciones counter() y counters() de la propiedad 'content'.
| 'counter-reset' | |
|---|---|
| Valores: | [ <identificador> <entero>? ]+ | none | inherit |
| Valor inicial: | none |
| Se aplica a: | todos los elementos |
| Se hereda?: | no |
| Porcentajes: | no admitidos |
| 'counter-increment' | |
|---|---|
| Valores: | [ <identificador> <entero>? ]+ | none | inherit |
| Valor inicial: | none |
| Se aplica a: | todos los elementos |
| Se hereda?: | no |
| Porcentajes: | no admitidos |
La propiedad 'counter-increment' acepta uno o más nombres de contadores
(identificadores), cada uno seguido de manera opcional por un entero. El entero
indica en cuanto se incrementará el contador con cada aparición del elemento.
El incremento predeterminado es 1 y se admiten enteros negativos o el cero.
La propiedad 'counter-reset' también contiene una lista de uno
o más nombres de contadores, cada uno seguido de manera opcional por un entero.
El entero da el valor en que el contador es colocado con cada aparición del
elemento. El valor por defecto es 0.
Las propiedades de lista permiten definir el formato visual en las listas.
En HTML encontramos dos tipos de listas: las ordenadas (OL) y las
listas sin ordenar (UL). Estas listas generan una caja principal
para el contenido y una caja de marcador (una viñeta, un número,
etc.). El mismo comportamiento se espera de cualquier elemento con la propiedad
'display: list-item'.
Las propiedades de lista permiten especificar el tipo de marcador y su posición con respecto a la caja principal (afuera o dentro de ella antes del contenido). No permiten a los autores especificar distintos estilos (color, fuente, alineación, etc.) para los marcadores de listas o ajustar su posición con respecto a la caja principal. Con las propiedades de lista, las propiedades del fondo se aplican solamente a la caja principal; una caja de marcador 'outside' es siempre transparente.
| 'list-style-type' | |
|---|---|
| Valores: | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit |
| Valor inicial: | disc |
| Se aplica a: | los elementos con 'display: list-item' |
| Se hereda?: | si |
| Porcentajes: | no admitidos |
El valor 'none' especifica ningún marcador, de lo contrario hay tres tipos de marcadores: signos, sistemas numéricos y sistemas alfabéticos. Esta propiedad especifica la apariencia del marcador de los ítems de la lista.
Nota: Las listas numeradas mejoran la accesibilidad del documento haciendo a las listas más fáciles de navegar.
Los signos son especificados con disc, circle y square. Su forma exacta depende del navegador.
Los sistemas numéricos son especificados con:
Una aplicación del usuario que no reconoce un sistema numérico debe usar 'decimal'.