Contingut

This translation is incomplete. Please help translate this article from English.

Aquesta és la 9th secció del tutorial CSS Getting Started; descriu algunes formes en què es pot utilitzar CSS per afegir contingut quan es visualitza un document. Modifiqueu la fulla d'estil per afegir el contingut del text i una imatge.

Informació: Contingut

Un dels avantatges importants de CSS és que ajuda a separar l'estil d'un document, del seu contingut. No obstant això, hi ha situacions en què té sentit especificar certs continguts com a part de la fulla d'estil, no com a part del document.

El contingut especificat en una fulla d'estil pot constar de text o imatges. S'especifica el contingut de la fulla d'estils quan el contingut està estretament lligat a l'estructura del document.

Més detalls

Especificar el contingut d'una fulla d'estil pot causar complicacions. Per exemple, es poden tenir diferents versions d'idioma del document que comparteix una fulla d'estil. Si una part de la fulla d'estil ha de ser traduït, vol dir que heu de posar parts de la fulla d'estil en arxius separats i encarregar-se de fer els vincles amb la versió d'idioma adequat a cada document.

Aquestes complicacions no sorgeixen si el contingut que especifiqueu consisteix en símbols o imatges que s'apliquen en tots els idiomes i cultures.

El contingut especificat en una fulla d'estil no es converteixi en part del DOM.

Contingut de text

CSS pot inserir el contingut de text abans o després d'un element. Per especificar això, fer una regla i afegir ::before o ::after al selector. En la declaració, especificar la propietat content amb el contingut de text com el seu valor.

Exemple

HTML

A text where I need to <span class="ref">something</span>

CSS

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

Sortida

Més detalls

El joc de caràcters d'una fulla d'estil és UTF-8 per defecte, però es pot especificar a l'enllaç, en la pròpia fulla d'estil o d'altres maneres. Per a més detalls, veure 4.4 representació de fulles d'estil CSS en l'especificació CSS.

Els caràcters individuals també poden ser especificats per un mecanisme d'escapament que utilitza la barra invertida com a caràcter d'escapament. Per exemple, \ 265B és el símbol d'escacs per a una reina negre ♛. Per a més detalls, vegeu Referència a caràcters que no estan representats en una codificació de caràcters i també Caràcters i suposats en l'especificació CSS.

Contingut d'image

Per afegir una imatge abans o després d'un element, especifiqueu l'adreça URL d'un fitxer d'imatge en el valor de la propietat content.

Exemple

Aquesta regla afegeix un espai i una icona després de cada vincle que té la classe glossari:

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

Per afegir una imatge com a fons d'un element, introduïu l'adreça URL d'un fitxer d'imatge en el valor de la propietat background. Aquesta és una propietat abreujada que especifica el color de fons, la imatge, com la imatge es repeteix i alguns altres detalls.

Exemple

Aquesta norma estableix el fons d'un element específic, utilitzant una URL per especificar un fitxer d'imatge.

El selector especifica el id de l'element. El valor no-repeat fa que la imatge aparegui una sola vegada:

#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
Més detalls

Per obtenir informació sobre les propietats individuals que afecten els fons, i sobre altres opcions quan s'especifican imatges de fons, veure la pàgina de referència background.

Acció: Afegir una imatge de fons

Aquesta imatge és un quadrat blanc amb una línia blava a la part inferior:

Image:Blue-rule.png
  1. Descarregueu l'arxiu d'imatge en el mateix directori que el fitxer CSS. (Per exemple, feu-hi clic per obtenir un menú de context, a continuació, selecciona Desar imatge com i especifiqueu el directori que utilitzeu per aquest tutorial.)
  2. Editeu l'arxiu CSS i afegiu aquesta regla al cos, establint una imatge de fons per tota la pàgina.
    background: url("Blue-rule.png");
    

    El valor de repeat és el valor per defecte, de manera que no necessita ser especificat. La imatge es repeteix horitzontal i verticalment, donant una aparença com de paper pautat:

    Image:Blue-rule-ground.png

    Cascading Style Sheets

    Cascading Style Sheets

Repte

Descarregueu aquesta imatge:

Image:Yellow-pin.png

Afegiu una regla a la fulla d'estils perquè mostri la imatge al començament de cada línia:

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
Veure la solució per el repte.

I ara què?

Una forma comuna d'afegir contingut a les fulles d'estil és marcar elements en les llistes. La següent secció descriu com especificar l'estil d'elements de llista.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,