2011-07-18 12 views
8

Soy nuevo en CSS y estoy siguiendo un ejemplo de libro de:propiedad de contenido CSS no se muestra

Iv'e copiaron las siguientes opciones del libro y guardado como HTML. todas las propiedades de css parecen funcionar excepto la propiedad de "contenido" que no se muestra. Gracias de antemano.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
     <title> The content property </title> 
     <style type='text/css' media='all'> 
      div { 
       content: "Hello, world!"; 
      } 
     </style> 
    </head> 
    <body> 
     <div></div> 
    </body> 
</html> 

Respuesta

15

content se utiliza con :before o :after así:

div:after 
{ 
    content: "Hello, world!"; 
} 

En cualquier caso, sólo he utilizado content para casos especiales (para borrar elementos flotantes, por ejemplo). Nunca he usado esto para insertar contenido. Por lo general, desea separar el contenido y la presentación de todos modos, así que creo que esta es una mala idea. ¿Qué libro estás leyendo? :)

+0

Wiley - Wrox Beginning - Css - Hojas de estilo en cascada para diseño web (2005) y el texto parece hacer esto más de una vez. ¿Libro viejo? ¿O simplemente mala edición? – Greycrow

+2

Alerta roja ... Hojas de estilo en cascada para diseño web (2005) ... Mucho ha cambiado desde 2005. Recomiendo encarecidamente obtener un nuevo libro. – AlienWebguy

+0

Gracias ... Antiguo libro de la biblioteca ... Obtendrá uno nuevo :) – Greycrow

12

La propiedad content sólo se aplica a CSS pseudo-elementos tales como :before y :after.

No puede usarlo para establecer el contenido de un elemento arbitrario.

+0

Esa respuesta es correcta para todos los navegadores pero Opera. Probado con http://jsfiddle.net/H2LS6/ – kay

5

La propiedad content sólo funciona para :before y :after anteponer o añadir contenido a dichos nodos, así:

CSS:

.email-address:before { 
    content: "Email address: "; 
} 

HTML:

<ul> 
    <li class="email-address">[email protected]</li> 
</ul> 

Los la salida sería

• Dirección de correo electrónico: [email protected]

Cuestiones relacionadas