MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Content

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Esta es la 9ª sección del tutorial CSS Getting Started; Describe algunas formas en las que puede utilizar CSS para agregar contenido cuando se muestra un documento. Modifica su hoja de estilo para agregar contenido de texto y una imagen.

Informacion: Contenido

Una de las ventajas importantes de CSS es que le ayuda a separar el estilo de un documento de su contenido. Sin embargo, hay situaciones en las que tiene sentido especificar cierto contenido como parte de la hoja de estilo, no como parte del documento.

El contenido especificado en una hoja de estilo puede consistir en texto o imágenes. Especifica el contenido de su hoja de estilos cuando el contenido está estrechamente vinculado a la estructura del documento.

Más detalles

Especificar contenido en una hoja de estilo puede causar complicaciones. Por ejemplo, es posible que tenga versiones de idioma diferentes de su documento que comparten una hoja de estilo. Si parte de la hoja de estilo tiene que ser traducida, significa que debe colocar las partes de la hoja de estilos en archivos separados y organizar para que se vincule con las versiones de idioma adecuado de su documento.

Estas complicaciones no surgen si el contenido especificado incluye símbolos o imágenes que se aplican en todos los idiomas y culturas.

El contenido especificado en una hoja de estilo no se convierte en parte del DOM.

Texto contenido

CSS puede insertar contenido de texto antes o después de un elemento. Para especificar esto, haga una regla y agregue :: before o :: after al selector. En la declaración, especifique la propiedad content con el contenido de texto como su valor.

Ejemplo

HTML

Un texto donde necesito <span class="ref">alguna cosa</span>

CSS

.ref::before {
  font-weight: negrita;
  color: navy;
  content: "Reference: ";
}

Output

Mas detalles

El conjunto de caracteres de una hoja de estilo es UTF-8 de forma predeterminada, pero se puede especificar en el vínculo o en la hoja de estilos o en otras formas. Para obtener más información, consulte 4. 4 Representación de hoja de estilo CSS en la especificación CSS.

Los caracteres individuales también se pueden especificar mediante un mecanismo de escape que utiliza la barra invertida como el carácter de escape. Por ejemplo, \ 265B es el símbolo del ajedrez para una reina negra ♛. Para obtener más información, consulte Referencia a caracteres no representados en una codificación de caracteres y también Caracteres y caso en la Especificación CSS.

Imagen contenido

Para agregar una imagen antes o después de un elemento, puede especificar la URL de un archivo de imagen en el valor de la propiedad content.

Ejemplo

Esta regla añade un espacio y un icono después de cada enlace que tiene el glosario de clases:

a.glossary:after {content: " " url("../images/glossary-icon.gif");}

Para agregar una imagen como fondo de un elemento, especifique la URL de un archivo de imagen en el valor de la propiedad background. Esta es una propiedad abreviada que especifica el color de fondo, la imagen, cómo se repite la imagen y algunos otros detalles.

Ejemplo

Esta regla establece el fondo de un elemento específico, utilizando una URL para especificar un archivo de imagen.

El selector especifica el id del elemento. El valor no-repeat hace que la imagen aparezca sólo una vez:

#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
Mas detalles

Para obtener información sobre las propiedades individuales que afectan a los fondos y sobre otras opciones al especificar imágenes de fondo, consulte lafondo página de referencia.

Acción: Añadir una imagen de fondo

Esta imagen es un cuadrado blanco con una línea azul en la parte inferior:

Image:Blue-rule.png
  1. Descargue el archivo de imagen en el mismo directorio que su archivo CSS. (Por ejemplo, haga clic con el botón derecho del ratón para obtener un menú contextual y, a continuación, seleccione Guardar imagen como y especifique el directorio que está utilizando para este tutorial).
  2. Edit your CSS file and add this rule to the body, setting a background image for the entire page.
  3. background: url("Blue-rule.png");
    

    La repetición de valor es la predeterminada, por lo que no es necesario especificarla. La imagen se repite horizontal y verticalmente, dando una apariencia como papel de escribir forrado:

    Image:Blue-rule-ground.png

    Cascading Style Sheets

    Cascading Style Sheets

Challenge

Download this image:

Image:Yellow-pin.png

Add a one rule to your stylesheet so that it displays the image at the start of each line:

Image:Blue-rule-ground.png

image:Yellow-pin.png Cascading Style Sheets
image:Yellow-pin.png Cascading Style Sheets
Possible solution

Add this rule to your stylesheet:

p:before{
  content: url("yellow-pin.png");
}

 

Hide solution
See a solution for the challenge.

What next?

A common way that stylesheets add content is to mark items in lists. The next section describes how to specify style for list elements.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: lavilofam1
 Última actualización por: lavilofam1,