From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../learn/css/howto/generated_content/index.html | 179 +++++++++++++++++++++ files/ca/learn/css/howto/index.html | 86 ++++++++++ 2 files changed, 265 insertions(+) create mode 100644 files/ca/learn/css/howto/generated_content/index.html create mode 100644 files/ca/learn/css/howto/index.html (limited to 'files/ca/learn/css/howto') diff --git a/files/ca/learn/css/howto/generated_content/index.html b/files/ca/learn/css/howto/generated_content/index.html new file mode 100644 index 0000000000..877bfefad7 --- /dev/null +++ b/files/ca/learn/css/howto/generated_content/index.html @@ -0,0 +1,179 @@ +--- +title: Contingut +slug: Learn/CSS/Howto/Generated_content +tags: + - Basic + - Beginner + - CSS + - CSS Background + - 'CSS:Getting_Started' + - Graphics + - Guide + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/Howto/Generated_content +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color") }}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 {{ cssxref("::before") }} o {{ cssxref("::after") }} al selector. En la declaració, especificar la propietat {{ cssxref("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

+ +

{{ EmbedLiveSample('Text_content', 600, 30) }}

+
+ +
+
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 {{ cssxref("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 {{ cssxref("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 {{ cssxref("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. +
  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

    +
    +
    +
    +
    3. +
+ +
+
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è?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Llistes") }}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.

diff --git a/files/ca/learn/css/howto/index.html b/files/ca/learn/css/howto/index.html new file mode 100644 index 0000000000..1f087d3e22 --- /dev/null +++ b/files/ca/learn/css/howto/index.html @@ -0,0 +1,86 @@ +--- +title: Use CSS to solve common problems +slug: Learn/CSS/Howto +translation_of: Learn/CSS/Howto +--- +
Translation in progress{{LearnSidebar}}
+ +

The following links provide solutions to common problems you can solve with CSS.

+ +

Common use cases

+ +
+
+

Basics

+ + + +

CSS and text

+ + +
+ +
+

Boxes and layouts

+ + +
+
+ +

Uncommon and advanced techniques

+ +

CSS allows very advanced design techniques. These articles help demistify the harder use cases you may face.

+ +

General

+ + + +

Advanced effects

+ + + +

Layout

+ + + +

See also

+ +

CSS FAQ — A variety of topics: from debugging to selector usage.

-- cgit v1.2.3-54-g00ecf