From cb9e359a51c3249d8f5157db69d43fd413ddeda6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:12 +0100 Subject: unslug ca: move --- .../building_blocks/a_cool_looking_box/index.html | 85 +++ .../backgrounds_and_borders/index.html | 307 +++++++++ .../cascada_i_her\303\250ncia/index.html" | 333 ---------- .../cascade_and_inheritance/index.html | 333 ++++++++++ .../creating_fancy_letterheaded_paper/index.html | 97 +++ .../css/building_blocks/debugging_css/index.html | 198 ++++++ .../css/building_blocks/depurar_el_css/index.html | 198 ------ .../desbordament_de_contingut/index.html | 123 ---- .../dimensionar_elements_en_css/index.html | 129 ---- .../css/building_blocks/fons_i_vores/index.html | 307 --------- .../fundamental_css_comprehension/index.html | 114 ++++ .../building_blocks/overflowing_content/index.html | 123 ++++ .../selectors/attribute_selectors/index.html | 154 +++++ .../selectors/combinators/index.html | 111 ++++ .../learn/css/building_blocks/selectors/index.html | 223 +++++++ .../pseudo-classes_and_pseudo-elements/index.html | 398 +++++++++++ .../type_class_and_id_selectors/index.html | 117 ++++ .../selectors_css/combinadors/index.html | 111 ---- .../css/building_blocks/selectors_css/index.html | 223 ------- .../pseudo-classes_and_pseudo-elements/index.html | 398 ----------- .../selectors_css/selectors_atribut/index.html | 154 ----- .../selectors_de_tipus_classe_i_id/index.html | 117 ---- .../building_blocks/sizing_items_in_css/index.html | 129 ++++ .../valors_i_unitats_css/index.html | 394 ----------- .../building_blocks/values_and_units/index.html | 394 +++++++++++ .../caixa_aspecte_interessant/index.html | 85 --- .../caixes_estil/creaci\303\263_carta/index.html" | 97 --- files/ca/learn/css/css_layout/flexbox/index.html | 330 +++++++++ files/ca/learn/css/css_layout/floats/index.html | 516 ++++++++++++++ files/ca/learn/css/css_layout/grids/index.html | 699 +++++++++++++++++++ files/ca/learn/css/css_layout/index.html | 66 ++ .../learn/css/css_layout/introduction/index.html | 700 +++++++++++++++++++ .../ca/learn/css/css_layout/normal_flow/index.html | 95 +++ .../ca/learn/css/css_layout/positioning/index.html | 467 +++++++++++++ .../practical_positioning_examples/index.html | 404 +++++++++++ .../css/css_layout/responsive_design/index.html | 324 +++++++++ .../supporting_older_browsers/index.html | 237 +++++++ .../css/disseny_css/disseny_responsiu/index.html | 324 --------- .../index.html" | 404 ----------- files/ca/learn/css/disseny_css/flexbox/index.html | 330 --------- .../ca/learn/css/disseny_css/flotadors/index.html | 516 -------------- .../learn/css/disseny_css/flux_normal/index.html | 95 --- files/ca/learn/css/disseny_css/graelles/index.html | 699 ------------------- files/ca/learn/css/disseny_css/index.html | 66 -- .../disseny_css/introduccio_disseny_css/index.html | 700 ------------------- .../learn/css/disseny_css/posicionament/index.html | 467 ------------- .../suport_en_navegadors_antics/index.html | 237 ------- .../index.html" | 112 ---- .../estilitzar_enlla\303\247os/index.html" | 424 ------------ .../learn/css/estilitzar_text/fonts_web/index.html | 193 ------ files/ca/learn/css/estilitzar_text/index.html | 55 -- .../css/estilitzar_text/llistes_estil/index.html | 382 ----------- .../css/estilitzar_text/text_fonamental/index.html | 739 --------------------- .../com_comen\303\247ar_amb_css/index.html" | 254 ------- .../first_steps/com_estructurar_el_css/index.html | 512 -------------- .../css/first_steps/com_funciona_el_css/index.html | 156 ----- .../css/first_steps/getting_started/index.html | 254 +++++++ .../first_steps/how_css_is_structured/index.html | 512 ++++++++++++++ .../learn/css/first_steps/how_css_works/index.html | 156 +++++ .../learn/css/first_steps/que_es_el_css/index.html | 119 ---- .../learn/css/first_steps/what_is_css/index.html | 119 ++++ .../comprensi\303\263_css_fonamental/index.html" | 114 ---- .../learn/css/styling_text/fundamentals/index.html | 739 +++++++++++++++++++++ files/ca/learn/css/styling_text/index.html | 55 ++ .../css/styling_text/styling_links/index.html | 424 ++++++++++++ .../css/styling_text/styling_lists/index.html | 382 +++++++++++ .../styling_text/typesetting_a_homepage/index.html | 112 ++++ .../ca/learn/css/styling_text/web_fonts/index.html | 193 ++++++ 68 files changed, 9567 insertions(+), 9567 deletions(-) create mode 100644 files/ca/learn/css/building_blocks/a_cool_looking_box/index.html create mode 100644 files/ca/learn/css/building_blocks/backgrounds_and_borders/index.html delete mode 100644 "files/ca/learn/css/building_blocks/cascada_i_her\303\250ncia/index.html" create mode 100644 files/ca/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/ca/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html create mode 100644 files/ca/learn/css/building_blocks/debugging_css/index.html delete mode 100644 files/ca/learn/css/building_blocks/depurar_el_css/index.html delete mode 100644 files/ca/learn/css/building_blocks/desbordament_de_contingut/index.html delete mode 100644 files/ca/learn/css/building_blocks/dimensionar_elements_en_css/index.html delete mode 100644 files/ca/learn/css/building_blocks/fons_i_vores/index.html create mode 100644 files/ca/learn/css/building_blocks/fundamental_css_comprehension/index.html create mode 100644 files/ca/learn/css/building_blocks/overflowing_content/index.html create mode 100644 files/ca/learn/css/building_blocks/selectors/attribute_selectors/index.html create mode 100644 files/ca/learn/css/building_blocks/selectors/combinators/index.html create mode 100644 files/ca/learn/css/building_blocks/selectors/index.html create mode 100644 files/ca/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html create mode 100644 files/ca/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html delete mode 100644 files/ca/learn/css/building_blocks/selectors_css/combinadors/index.html delete mode 100644 files/ca/learn/css/building_blocks/selectors_css/index.html delete mode 100644 files/ca/learn/css/building_blocks/selectors_css/pseudo-classes_and_pseudo-elements/index.html delete mode 100644 files/ca/learn/css/building_blocks/selectors_css/selectors_atribut/index.html delete mode 100644 files/ca/learn/css/building_blocks/selectors_css/selectors_de_tipus_classe_i_id/index.html create mode 100644 files/ca/learn/css/building_blocks/sizing_items_in_css/index.html delete mode 100644 files/ca/learn/css/building_blocks/valors_i_unitats_css/index.html create mode 100644 files/ca/learn/css/building_blocks/values_and_units/index.html delete mode 100644 files/ca/learn/css/caixes_estil/caixa_aspecte_interessant/index.html delete mode 100644 "files/ca/learn/css/caixes_estil/creaci\303\263_carta/index.html" create mode 100644 files/ca/learn/css/css_layout/flexbox/index.html create mode 100644 files/ca/learn/css/css_layout/floats/index.html create mode 100644 files/ca/learn/css/css_layout/grids/index.html create mode 100644 files/ca/learn/css/css_layout/index.html create mode 100644 files/ca/learn/css/css_layout/introduction/index.html create mode 100644 files/ca/learn/css/css_layout/normal_flow/index.html create mode 100644 files/ca/learn/css/css_layout/positioning/index.html create mode 100644 files/ca/learn/css/css_layout/practical_positioning_examples/index.html create mode 100644 files/ca/learn/css/css_layout/responsive_design/index.html create mode 100644 files/ca/learn/css/css_layout/supporting_older_browsers/index.html delete mode 100644 files/ca/learn/css/disseny_css/disseny_responsiu/index.html delete mode 100644 "files/ca/learn/css/disseny_css/exemples_pr\303\240ctics_posicionament/index.html" delete mode 100644 files/ca/learn/css/disseny_css/flexbox/index.html delete mode 100644 files/ca/learn/css/disseny_css/flotadors/index.html delete mode 100644 files/ca/learn/css/disseny_css/flux_normal/index.html delete mode 100644 files/ca/learn/css/disseny_css/graelles/index.html delete mode 100644 files/ca/learn/css/disseny_css/index.html delete mode 100644 files/ca/learn/css/disseny_css/introduccio_disseny_css/index.html delete mode 100644 files/ca/learn/css/disseny_css/posicionament/index.html delete mode 100644 files/ca/learn/css/disseny_css/suport_en_navegadors_antics/index.html delete mode 100644 "files/ca/learn/css/estilitzar_text/composici\303\263_p\303\240gina_inici/index.html" delete mode 100644 "files/ca/learn/css/estilitzar_text/estilitzar_enlla\303\247os/index.html" delete mode 100644 files/ca/learn/css/estilitzar_text/fonts_web/index.html delete mode 100644 files/ca/learn/css/estilitzar_text/index.html delete mode 100644 files/ca/learn/css/estilitzar_text/llistes_estil/index.html delete mode 100644 files/ca/learn/css/estilitzar_text/text_fonamental/index.html delete mode 100644 "files/ca/learn/css/first_steps/com_comen\303\247ar_amb_css/index.html" delete mode 100644 files/ca/learn/css/first_steps/com_estructurar_el_css/index.html delete mode 100644 files/ca/learn/css/first_steps/com_funciona_el_css/index.html create mode 100644 files/ca/learn/css/first_steps/getting_started/index.html create mode 100644 files/ca/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/ca/learn/css/first_steps/how_css_works/index.html delete mode 100644 files/ca/learn/css/first_steps/que_es_el_css/index.html create mode 100644 files/ca/learn/css/first_steps/what_is_css/index.html delete mode 100644 "files/ca/learn/css/introducci\303\263_a_css/comprensi\303\263_css_fonamental/index.html" create mode 100644 files/ca/learn/css/styling_text/fundamentals/index.html create mode 100644 files/ca/learn/css/styling_text/index.html create mode 100644 files/ca/learn/css/styling_text/styling_links/index.html create mode 100644 files/ca/learn/css/styling_text/styling_lists/index.html create mode 100644 files/ca/learn/css/styling_text/typesetting_a_homepage/index.html create mode 100644 files/ca/learn/css/styling_text/web_fonts/index.html (limited to 'files/ca/learn/css') diff --git a/files/ca/learn/css/building_blocks/a_cool_looking_box/index.html b/files/ca/learn/css/building_blocks/a_cool_looking_box/index.html new file mode 100644 index 0000000000..3a4df8a2b2 --- /dev/null +++ b/files/ca/learn/css/building_blocks/a_cool_looking_box/index.html @@ -0,0 +1,85 @@ +--- +title: Una caixa d'aspecte interessant +slug: Learn/CSS/Caixes_estil/Caixa_aspecte_interessant +tags: + - Assessment + - Beginner + - CSS + - Learn + - backgrounds + - borders + - box + - box model + - effects +translation_of: Learn/CSS/Building_blocks/A_cool_looking_box +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
+ +

En aquesta avaluació, obtindreu una mica més de pràctica a l'hora de crear caixes d'aspecte interessant, intentant crear una caixa atractiva.

+ + + + + + + + + + + + +
Rrequisits previs:Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.
Objectiu:Provar la comprensió del model de caixa CSS i altres característiques relacionades amb la caixa, com ara les vores i els fons.
+ +

Punt de partida

+ +

Per començar aquesta avaluació, heu de:

+ + + +
+

Nota: Com a alternativa, podeu utilitzar un lloc com JSBin o Thimble per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia. Si l'editor en línia que esteu utilitzant no té cap panell CSS independent, no dubteu a posar-lo en un element <style> al capdavant del document.

+
+ +

Resum del projecte

+ +

La vostra tasca és crear una caixa genial i de luxe i explorar que  podem tenir de divertit amb CSS.

+ +

Tasques generals

+ + + +

L'estil de la caixa

+ +

Ens agradaria que dissenyéssiu
+ el {{htmlelement("p")}} proporcionat, donant-li el següent:

+ + + +

Exemple

+ +

La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:

+ +

+ +

Avaluació

+ +

Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema en el fil de conversa en l'àrea d'aprenentatge, o en el canal IRC #mdn en Mozilla IRC. Intenteu primer l'exercici - no es guanya res fent trampes!

+ +

{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

diff --git a/files/ca/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ca/learn/css/building_blocks/backgrounds_and_borders/index.html new file mode 100644 index 0000000000..2e2ce4727c --- /dev/null +++ b/files/ca/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -0,0 +1,307 @@ +--- +title: Fons i vores +slug: Learn/CSS/Building_blocks/Fons_i_vores +translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}
+ +

En aquest article veurem algunes de les coses creatives que pots fer amb fons i vores amb el CSS. Des d’afegir degradats o imatges de fons fins a arrodonir cantonades; els fons i les vores són la solució per a moltes qüestions d’estil en CSS.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Aprendre a aplicar estil al fons i la vora de les caixes.
+ +

Aplicar estil als fons amb CSS

+ +

La propietat CSS {{cssxref("background")}} és una propietat abreviada que substitueix un seguit de propietats de fons que presentarem en aquest article. Quan et trobes amb una propietat de fons complexa en un full d’estil, pot ser que et sembli una mica difícil d’entendre perquè es poden estar passant molts valors alhora.

+ +
.box {
+  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
+  url(big-star.png) center no-repeat, rebeccapurple;
+} 
+
+ +

Més endavant en aquest tutorial tornarem a l’objectiu de com funcionen les propietats abreviades, però primer fem un cop d’ull a les diverses coses que pots fer amb els fons amb el CSS, a partir de cadascuna de les propietats dels fons.

+ +

Els colors de fons

+ +

La propietat {{cssxref("background-color")}} defineix el color de fons de qualsevol element en CSS. La propietat accepta qualsevol color (<color>) vàlid. Un color de fons s'estén per sota del contingut i del farciment de la caixa.

+ +

En l'exemple següent hem utilitzat diversos valors de color per a afegir un color de fons a la caixa, un títol d’encapçalament i un element {{htmlelement("span")}}.

+ +

Juga a fer servir qualsevol valor de <color> disponible.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}

+ +

Les imatges de fons

+ +

La propietat {{cssxref("background-image")}} permet visualitzar una imatge de fons en un element. En l'exemple següent hi ha dues caixes: una té una imatge de fons que és més gran que la caixa, l'altra té una imatge petita en forma d’estrella.

+ +

Aquest exemple mostra dues coses sobre les imatges de fons. La imatge gran no es redueix de manera predeterminada per a adaptar-se a la caixa, sinó que només en veiem un tros petit d’una cantonada, mentre que la imatge petita es mostra en mosaic fins a omplir la caixa. La imatge en aquest cas és en realitat una única estrella.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}

+ +

Si especifiques un color de fons a més d'una imatge de fons, la imatge es mostra a sobre. Afegeix una propietat background-color a l'exemple de dalt i observa-ho en acció.

+ +

Control amb la propietat background-repeat

+ +

La propietat {{cssxref("background-repeat")}} s'utilitza per a controlar el comportament en mosaic de les imatges. Els valors disponibles són:

+ + + +

Prova aquests valors en l'exemple següent. Hem establert la propietat al valor no-repeat, de manera que només veuràs una estrella. Prova els diferents valors repeat-x i repeat-y i observa’n els efectes.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}

+ +

Les mides de la imatge de fons

+ +

En l'exemple anterior hi ha una imatge gran que ha acabat retallada perquè és més gran que el fons. En aquest cas podríem utilitzar la propietat {{cssxref("background-size")}}, que pot prendre valors de longitud o percentatge, per a dimensionar la imatge i que s'ajusti al fons.

+ +

També pots utilitzar paraules clau:

+ + + +

En l'exemple següent hem utilitzat la imatge més gran de l'exemple anterior i unitats de longitud per dimensionar-la dins de la caixa. Observa que això ha distorsionat la imatge.

+ +

Fes la prova següent.

+ + + +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}

+ +

La ubicació de la imatge de fons

+ +

La propietat {{cssxref("background-position")}} et permet triar la posició en què apareix la imatge de fons en la caixa a la qual s'aplica. Fa servir un sistema de coordenades en què el (0,0) és a la part superior esquerra de la caixa, i la caixa es posiciona sobre els eixos horitzontal (x) i vertical ((y).

+ +
+

Nota: El valor per defecte de background-position és (0,0).

+
+ +

Els valors de background-position més comuns prenen dos valors independents: un valor horitzontal seguit d'un valor vertical.

+ +

També pots utilitzar paraules clau com top i right (busca la resta de possibilitats en la pàgina sobre la propietat {{cssxref("background-position")}}):

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top center;
+} 
+
+ +

I longituds i percentatges:

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: 20px 10%;
+} 
+
+ +

També pots barrejar valors de paraules clau amb longituds o percentatges, per exemple:

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px;
+}
+ +

Finalment, també pots utilitzar una sintaxi de 4 valors per a indicar una distància des de determinades cantonades de la caixa; la unitat de longitud en aquest cas és un desplaçament del valor que la precedeix. Així, doncs, en el CSS de sota, posicionem el fons a 20px de l’extrem superior i 10px de l’extrem dret:

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px right 10px;
+}
+ +

Juga amb aquests valors en l'exemple següent i mou l'estrella per la caixa.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}

+ +
+

Nota: background-position és una propietat abreviada de {{cssxref ("background-position-x")}} i {{cssxref ("background-position-y")}}, que et permeten establir els diferents valors de posició de l'eix per separat.

+
+ +

Degradats de fons

+ +

Un degradat (quan s'utilitza per a un fons) actua igual que una imatge i també es defineix amb la propietat {{cssxref("background-image")}}.

+ +

Pots llegir més informació sobre els diferents tipus de degradats i què pots fer amb ells en la pàgina sobre els tipus de dades <gradient> de MDN. Una manera divertida de jugar amb els degradats és utilitzar un dels molts generadors de degradats CSS que hi ha disponibles al web, com aquest. Pots crear un degradat i copiar i enganxar el codi font que el genera.

+ +

Prova alguns degradats diferents en l'exemple següent. En les dues caixes hi ha, respectivament, un degradat lineal que s’estén per tota la caixa i un degradat radial amb una mida fixa, que per tant es repeteix.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}

+ +

Múltiples imatges de fons

+ +

També és possible posar més d’una imatge de fons: especifica amb una sola propietat background-image els diversos valors, separats cadascun per una coma.

+ +

En fer-ho, pot passar que les imatges de fons es superposin entre elles. Els fons es disposen amb la darrera imatge de fons enumerada a la part inferior de la pila, i cada imatge anterior s’apila a sobre de la que la segueix en el codi.

+ +
+

Nota: Els degradats es poden barrejar feliçment amb imatges de fons normals.

+
+ +

Les altres propietats background-* també poden tenir valors separats per comes, de la mateixa manera que background-image:

+ +
background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
+background-repeat: no-repeat, repeat-x, repeat;
+background-position: 10px 20px,  top right;
+ +

Cada valor de les diverses propietats coincideix amb els valors que estan en la mateixa posició en les altres propietats. Aquí sobre, per exemple, el valor per a la propietat background-repeat d’image1 és no-repeat. Però, què passa quan propietats diferents tenen una quantitat diferent de valors? La resposta és que els valors que ocupen les posicions més petites s'alternen cíclicament: en l'exemple anterior hi ha quatre imatges de fons però només dos valors background-position. Les dues primeres posicions s’apliquen a les dues primeres imatges, i després els valores es tornen a assignar cíclicament: el valor de la primera posició s’aplica a image3, i el valor de segona posició, a image4.

+ +

Juguem! En l'exemple següent hem inclòs dues imatges. Per a comprovar l'ordre d'apilament, canvia la imatge de fons que apareix primer en la llista. O juga amb les altres propietats i canvia’n els valors de posició i mida, o la repetició.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}

+ +

Ancoratge del fons

+ +

Una altra opció que hi ha disponible per als fons és especificar com es desplacen quan es desplaça el contingut. Això es controla amb la propietat {{cssxref("background-attachment")}}, que pot prendre els valors següents:

+ + + +

La propietat {{cssxref("background-attachment")}} només funciona quan hi ha contingut pel qual et pots desplaçar; hem preparat un exemple que mostra les diferències entre els tres valors: fes-hi un cop d’ull a background-attachment.html (també en pots consultar el codi font aquí).

+ +

Ús de la propietat abreviada background

+ +

Com hem esmentat al començament d'aquest article, sovint veuràs fons que estan especificats amb la propietat {{cssxref("background")}}. Aquesta propietat abreviada et permet configurar totes les propietats diferents alhora.

+ +

Si fas servir diversos fons, has d’especificar totes les propietats per al primer fons, i a continuació afegir-hi el fons següent, després d’una coma. En l'exemple següent hi ha un degradat amb una mida i una posició, i després un fons d'imatge amb no-repeat i una posició, i després un color.

+ +

Quan s’escriuen els valor abreviats de les imatges de fons cal seguir unes regles, per exemple:

+ + + +

Consulta la pàgina sobre {{cssxref("background")}} de MDN per a veure’n totes les possibilitats.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}

+ +

Consideracions d’accessibilitat relatives als fons

+ +

Quan poses un text sobre una imatge o un color de fons, t’has d’assegurar que té prou contrast perquè els usuaris el poden llegir. Si poses una imatge de fons i el text s’hi llegeix a sobre, també has d'especificar un color de fons que permeti llegir el text si la imatge no es carrega.

+ +

Els lectors de pantalla no poden analitzar les imatges de fons, de manera que aquestes haurien de ser purament decoratives; qualsevol contingut important hauria de formar part de la pàgina HTML, i no estar continguda en segon pla.

+ +

Vores

+ +

En aprendre el model de caixes, vam descobrir com afecten les vores a la mida de la caixa. En aquesta secció veurem com emprar les vores de manera creativa. Normalment, quan afegim vores a un element amb CSS, utilitzem una propietat abreviada que estableix el color, l'amplada i l'estil de la vora en una línia de CSS.

+ +

Podem establir una vora per als quatre costats d'una caixa amb la propietat {{cssxref("border")}}:

+ +
.box {
+  border: 1px solid black;
+}
+ +

O podem establir una sola vora de la caixa, per exemple:

+ +
.box {
+  border-top: 1px solid black;
+}
+ +

Cadascuna d’aquestes propietats abreviades seria:

+ +
.box {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+}
+ +

I per a les no abreviades seria:

+ +
.box {
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: black;
+}
+ +
+

Nota: Aquestes propietats de la vora superior, dreta, inferior i esquerra també tenen mapades propietats lògiques relacionades amb el mode d'escriptura del document (per exemple, text d'esquerra a dreta o de dreta a esquerra, o de dalt a baix). Ho explorarem en l’article següent, que inclou el tractament del text en diverses direccions.

+
+ +

Amb les vores es poden emprar una gran varietat d'estils. En l'exemple següent hem utilitzat un estil de vora diferent per als quatre costats de la caixa. Juga amb l'estil, l'amplada i el color de la vora per veure com funcionen les vores.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}

+ +

Les cantonades arrodonides

+ +

L’arrodoniment de les cantonades d'una caixa s’aconsegueix amb la propietat {{cssxref("border-radius")}} i les propietats associades que es relacionen amb cada cantó de la caixa. Es poden utilitzar dues longituds o percentatges com a valor; el primer valor defineix el radi horitzontal, i el segon el radi vertical. En molts casos només faràs servir un valor, que s'utilitzarà per a tots dos.

+ +

Per exemple, pots fer que les quatre cantonades d’una caixa tinguin un radi de 10px:

+ +
.box {
+  border-radius: 10px;
+}
+ +

O que la cantonada superior dreta tingui un radi horitzontal d’1em i un radi vertical del 10%:

+ +
.box {
+  border-top-right-radius: 1em 10%;
+}
+ +

Hem fixat les quatre cantonades de l'exemple següent i després hem canviat els valors de l'extrem superior dret perquè sigui diferent. Juga amb els valors i canvia les cantonades. Consulta la pàgina de propietats de {{cssxref("border-radius")}} i esbrina les opcions de sintaxi disponibles.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}

+ +

Posa a prova les teves habilitats

+ +

Hem vist moltes coses en aquest article. Recordes la informació més important? Trobaràs més proves per verificar que retens la informació abans de seguir a Test your skills: Backgrounds and Borders.
+  

+ +

Resum

+ +

En aquest articles hem descobert força conceptes, i pots veure que hi ha molt per afegir a un fons o una vora d'una caixa. Consulta les diverses pàgines de propietat si vols obtenir més informació sobre alguna de les funcions que hem comentat. Cada pàgina de MDN té més exemples d’ús amb què pots jugar i ampliar els teus coneixements.

+ +

En el proper article descobrirem com interactua el mode d'escriptura del document amb el CSS. Què passa quan el text no flueix d'esquerra a dreta?

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Els selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diverses direccions
    6. +
  6. El desbordament de continguts
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionar elements en CSS
    9. +
  9. Imatges, mèdia i elements de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depura el teu CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git "a/files/ca/learn/css/building_blocks/cascada_i_her\303\250ncia/index.html" "b/files/ca/learn/css/building_blocks/cascada_i_her\303\250ncia/index.html" deleted file mode 100644 index 09a5e368eb..0000000000 --- "a/files/ca/learn/css/building_blocks/cascada_i_her\303\250ncia/index.html" +++ /dev/null @@ -1,333 +0,0 @@ ---- -title: Cascada i herència -slug: Learn/CSS/Building_blocks/Cascada_i_herència -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance ---- -
{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
- -

L’objectiu d’aquest article és desenvolupar la comprensió d’alguns dels conceptes més fonamentals del CSS (la cascada, l’especificitat i l’herència) que controlen com s’aplica el CSS a l’HTML i com es resolen els conflictes.

- -

Si bé pot semblar que és menys rellevant i una mica més acadèmic que algunes altres parts del curs, la seva comprensió t'estalviarà feina més endavant! T’animem a treballar aquesta secció en profunditat i comprovar que entens els conceptes abans de continuar endavant.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Aprendre què són la cascada i l'especificitat, i com funciona l'herència en CSS.
- -

Regles conflictives

- -

CSS significa fulls d'estil en cascada (cascading style sheets), i es molt important entendre la paraula, cascada; el comportament de la cascada és clau per a comprendre el CSS.

- -

En algun moment treballaràs en un projecte i trobaràs que el CSS que creus que s’hauria d’aplicar a un element no funciona. Normalment, el problema és que has creat dues regles que podrien aplicar-se al mateix element. La cascada i el concepte d’especificitat, que estan estretament relacionats, són mecanismes que controlen quina regla s'aplica quan hi ha aquest conflicte. La regla que dona estil al teu element pot ser que no sigui la que esperaves, per la qual cosa has d'entendre com funcionen aquests mecanismes.

- -

Aquí també és important el concepte d'herència, que significa que algunes propietats CSS per defecte hereten valors establerts per a l'element pare, i d'altres no. Això també pot causar algun comportament que potser no esperes.

- -

Comencem per fer una ullada ràpida als elements clau que tractem i, a continuació, examinarem com interaccionen entre si i amb el CSS. Poden semblar un conjunt de conceptes complicats d’entendre. A mesura que vagis adquirint pràctica a l'hora d’escriure CSS, se’t farà més evident la manera que té de funcionar.

- -

La cascada

- -

Fulls d’estil en cascada: en un nivell molt senzill això significa que l’ordre de les regles CSS és important; quan s’apliquen dues regles que tenen la mateixa especificitat, la que s’utilitza és l'última que surt al codi CSS.

- -

En l’exemple següent hi ha dues regles que podrien aplicar-se a h1. h1 acaba sent de color blau: aquestes regles tenen un selector idèntic i, per tant, porten la mateixa especificitat, de manera que l’última regla en el full d'estil guanya.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} 

- -

Especificitat

- -

L’especificitat és la manera com el navegador decideix quina regla s’aplica si diverses regles tenen selectors diferents i poden aplicar-se al mateix element. Bàsicament és una mesura de com d'específica serà la selecció d'un selector:

- - - -

Vegem-ne un exemple! A continuació, tornem a tenir dues regles que podrien aplicar-se a h1. L’encapçalament h1 següent acaba sent de color vermell: el selector de classe dona a aquesta regla una especificitat més alta, i per tant s'aplica encara que la regla amb el selector d'elements apareix més avall en el full d'estil.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} 

- -

Més endavant explicarem la puntuació de l'especificitat.

- -

Herència

- -

L’herència també s’ha d’entendre en aquest context: els elements fill hereten alguns valors de propietat CSS que s’han establert en els elements pare, i no n’hereten d’altres.

- -

Per exemple, si configures un element color i un font-family per a un element, aquest color i tipus de lletra també s’apliquen a tots els elements que hi hagi a dintre, tret que els hi hagis aplicat valors de color i lletra diferents directament.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} 

- -

Algunes propietats no s'hereten. Per exemple, si estableixes una amplada ({{cssxref("width")}}) del 50% per a un element, cap dels seus elements descendents adquireix una amplada del 50% de l'amplada de l'element pare. Si fos així, seria molt frustrant utilitzar CSS!

- -
-

Nota: A les pàgines de referència de les propietats CSS de MDN, pots trobar un quadre d'informació tècnica, normalment a la part inferior de la secció d'especificacions, que enumera diversos punts de dades sobre aquesta propietat, inclòs si s'hereta o no. Consulta, per exemple, la secció Especificacions de la propietat del color.

-
- -

Entendre com interaccionen els conceptes

- -

Aquests tres conceptes controlen quin CSS s'aplica a cada element. En les seccions següents veurem com funcionen conjuntament. De vegades pot semblar una mica complicat, però començaràs a recordar-los a mesura que guanyis experiència amb el CSS, i sempre ho pots tornar a buscar si se t'obliden els detalls. Fins i tot als desenvolupadors experimentats els costa recordar tots els detalls.

- -

Comprendre l’herència

- -

Començarem per l'herència. En l'exemple següent hi ha un element {{HTMLElement("ul")}}, que conté dos nivells de llistes no ordenades. Hem definit per a l'element exterior <ul> una vora i un farciment, i n’hem canviat el color de la lletra.

- -

El color s’ha aplicat als fills directes i també als indirectes: els elements fill immediats (<li>) i els que hi ha a la primera llista imbricada. Després, hem afegit una classe special a la segona llista imbricada i hi hem aplicat un color diferent, el qual hereten els fills d’aquesta.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} 

- -

No s'hereten propietats com l'amplada (com ja s'ha esmentat), els marges, els farciments i les vores. Si els fills de la nostra llista haguessin d’heretar una vora, cada llista i element de llista obtindria una vora, i probablement no sigui un efecte que vulguem.

- -

Quines propietats s'hereten de manera predeterminada i quines no, es en bona mesura qüestió de sentit comú.

- -

Control de l’herència

- -

El CSS proporciona quatre valors especials de propietat universal per a controlar l’herència. Totes les propietats CSS admeten aquests valors.

- -
-
{{cssxref("inherit")}}
-
Estableix el valor de la propietat aplicat a un element seleccionat perquè sigui igual que el de l’element pare. Això, en efecte, «activa l'herència».
-
{{cssxref("initial")}}
-
Estableix que el valor de la propietat que s’aplica a l’element que se selecciona sigui igual que el valor que el full d'estil predeterminat del navegador estableix per a la propietat d’aquest element. Si el full d’estil predeterminat del navegador no estableix cap valor i la propietat s’hereta de manera natural, el valor de la propietat s’estableix en inherit.
-
{{cssxref("unset")}}
-
Restableix la propietat al seu valor natural, cosa que significa que si la propietat s’hereta naturalment, actua com a inherit, i en cas contrari, actua com a initial.
-
- -
-

Nota: També hi ha un valor més recent, {{cssxref("revert")}}, que té un suport limitat per part dels navegadors.

-
- -
-

Nota: Consulta la secció {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} per obtenir més informació sobre cadascuna d'elles i el seu funcionament.

-
- -

Podem observar una llista d’enllaços i analitzar com funcionen els valors universals. L’exemple en viu següent et permet jugar amb el CSS i veure què passa si hi fas canvis. Jugar amb el codi és realment la millor manera d’arribar a conèixer l'HTML i el CSS.

- -

Per exemple:

- -
    -
  1. El segon element de llista té aplicada la classe my-class-1. Estableix el color que hereta l’element <a> que té imbricat. Com canvia el color de l'enllaç si suprimeixes la regla?
    2. -
  2. Entens per què el tercer i el quart enllaços són del color que són? Si no és així, repassa la descripció dels valors anteriors.
    3. -
  3. Quin dels enllaços canvia de color si defineixes un color nou per a l'element <a>, per exemple a { color: red; }?
    4. -
- -

{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} 

- -

Restablir tots els valors de propietat

- -

La propietat CSS abreviada all es pot utilitzar per a aplicar un d’aquests valors d’herència a (gairebé) totes les propietats alhora. El seu valor pot ser qualsevol dels valors d'herència (inherit, initial, unset o revert). És una manera còmoda de desfer els canvis que s’han aplicat a l’estil de manera que puguis tornar a un punt de partida conegut abans d'introduir canvis nous.

- -

En l’exemple següent hi ha dues citacions de bloc. La primera té un estil que s’aplica directament sobre la citació de bloc, mentre que la segona té una classe aplicada a la citació de bloc que estableix el valor de all en unset.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} 

- -

Prova d’establir el valor all a alguns dels altres valors disponibles i observa quina és la diferència.

- -

Entendre la cascada

- -

Ara entenem per què un paràgraf que està profundament imbricat dins l'estructura del teu HTML és del mateix color que el CSS que s’ha especificat per a body, i entenem per què canvia el CSS que, de les lliçons introductòries, hem aplicat a algun element en qualsevol punt del document, ja sigui assignant CSS a un element o creant una classe. Ara farem una ullada de més a prop a com la cascada defineix quines regles CSS s'apliquen quan hi ha més d'un situació que pot aplicar estil a un element.

- -

Cal considerar tres factors, en un ordre d'importància creixent. Els posteriors anul·len els anteriors:

- -
    -
  1. Ordre dins el codi
    2. -
  2. Especificitat
    3. -
  3. Importància
    4. -
- -

Ara els analitzarem i descobrirem com els navegadors determinen quin CSS han d’aplicar.

- -

Ordre dins el codi

- -

Ja hem vist com l’ordre dins el codi és important en la cascada. Si hi ha més d’una regla, amb exactament el mateix pes, guanya la que apareix última en el CSS. Pots veure-ho com que les regles que són més properes a l'element sobreescriuen les anteriors fins que l'última guanya i estableix el disseny que es dona a l'element.

- -

Especificitat

- -

Un cop entès el fet que l’ordre dins el codi importa, en algun moment et pots topar amb una situació en què saps que no s’aplica la regla que apareix l’última en el full d’estil, sinó una d’anterior. Això es deu al fet que aquesta regla anterior té una especificitat més elevada: és més específica i, per tant, el navegador la tria per donar estil a l'element.

- -

Com hem vist abans en aquest article, un selector de classes té més pes que un selector d’elements, de manera que les propietats definides per a la classe anul·len les que s’apliquen directament per a l’element.

- -

Una observació important que cal fer aquí és que, tot i que pensem en selectors i regles que s’apliquen a l'element que seleccionen, no es sobreescriu tota la regla, sinó només les propietats que són iguals.

- -

Aquest comportament ajuda a evitar repeticions dins el CSS. Una pràctica habitual és definir estils genèrics per als elements bàsics, i després crear classes per a aquells que són diferents. Per exemple, en el full d’estil següent hem definit estils genèrics per a títols d’encapçalament de nivell 2 i després hem creat algunes classes que canvien només algunes propietats i valors. Els valors definits inicialment s'apliquen a tots els títols d’encapçalament, i els valors més específics s'apliquen als títols d’encapçalament en què s'ha establert alguna classe.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} 

- -

Observa ara com calcula l’especificitat el navegador. Ja saps que un selector d’elements té una especificitat baixa i una classe el pot sobreescriure. Essencialment s’atorga un valor en punts als diferents tipus de selectors i, si se sumen, s’obté el pes concret de cada selector, que pot avaluar-se respecte d’altres coincidències potencials.

- -

La quantitat d'especificitat que presenta un selector es mesura a partir de quatre valors (o components) diferents, que es poden entendre com si fossin milers, centenes, desenes i unitats; quatre dígits simples disposats en quatre columnes:

- -
    -
  1. Milers: suma un punt en aquesta columna si la declaració es troba continguda dins d’un atribut {{htmlattrxref("style")}}, també conegut com estil de línia. Aquestes declaracions no tenen selectors, de manera que la seva especificitat és sempre de 1.000.
    2. -
  2. Centenes: suma un punt en aquesta columna per cada selector d’identificador que està contingut en el selector global.
    3. -
  3. Desenes: suma un punt en aquesta columna per cada selector de classe, selector d'atributs o de pseudoclasse que està contingut dins del selector general.
    4. -
  4. Unitats: suma un punt en aquesta columna per cada selector d'elements o pseudoelement que està contingut dins del selector general.
    5. -
- -
-

Nota: El selector universal (*), els combinadors (+, >, ~, ' ') i la pseudoclasse de negació (:not) no tenen cap efecte sobre l'especificitat.

-
- -

La taula següent mostra alguns exemples aïllats per posar-te en situació. Estudia aquestes qüestions i assegura't d’entendre per què tenen aquestes especificitats. Encara no hem exposat detalladament els selectors, però pots trobar detalls de cada selector en la pàgina de referència dels selectors de MDN.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorMilersCentenesDesenesUnitatsEspecificitat total
h100010001
h1 + p::first-letter00030003
li > a[href*="en-US"] > .inline-warning00220022
#identifier01000100
Cap selector, amb una regla dins de l’atribut {{htmlattrxref ("style")}} d'un element10001000
- -

Abans de continuar endavant, observa un exemple en acció.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} 

- -

Què hi passa, aquí? En primer lloc, només ens interessen les set primeres regles d’aquest exemple i, com ja deus haver observat, hem inclòs els seus valors d’especificitat en un comentari abans de cadascuna.

- - - -
    -
- -
-

Nota: Aquest ha estat només un exemple aproximat per facilitar-ne la comprensió. En realitat, cada tipus de selector té el seu nivell d'especificitat propi, que no pot ser sobreescrit per selectors amb un nivell d'especificitat inferior. Per exemple, una combinació de selectors d’una classe milió no podrien sobreescriure les regles d’un selector d’ID unitat.

- -

Una manera més precisa d’avaluar l’especificitat seria puntuar els nivells d’especificitat individualment començant pel més alt i descendint quan sigui necessari. Només quan hi hagi un empat entre puntuacions de selector dins d’un nivell d’especificitat, hauràs d'avaluar el nivell següent; en cas contrari, pots prescindir dels selectors de nivell d’especificitat inferior perquè mai podran sobreescriure els nivells d’especificitat més alts.

-
- -

!important

- -

Hi ha una element especial de CSS que podries utilitzar per substituir tots els càlculs anteriors, però has de tenir molta cura a l'hora de fer-lo servir: !important. S’utilitza per fer que una propietat i un valor particulars tinguin l’especificitat màxima; per tant, anul·la les regles normals de la cascada.

- -

Observa aquest exemple, en què hi ha dos paràgrafs, un dels quals té un selector d’ID.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} 

- -

Fes-ne la prova i observa què succeeix. Si et costa d’entendre, prova d’eliminar algunes de les propietats i observa què passa:

- -
    -
  1. Veuràs que els valors {{cssxref("color")}} i {{cssxref("padding")}} de la tercera regla s'han aplicat, però {{cssxref("background-color")}} no ho ha fet. Per què? Els tres haurien d’aplicar-se sense cap problema, perquè les regles posteriors en l’ordre del codi en general anul·len les regles anteriors.
    2. -
  2. Tanmateix, les regles anteriors guanyen perquè els selectors de classe tenen una especificitat més alta que els selectors d’element.
    3. -
  3. Els dos elements tenen una {{htmlattrxref("class")}} better, però el segon té un {{htmlattrxref("id")}} winning. Com que els ID tenen una especificitat encara més elevada que les classes (només es pot tenir un element amb un determinat ID en una mateixa pàgina, però es poden tenir molts elements amb la mateixa classe: els selectors ID són molt específics amb allò que delimiten), el color de fons vermell i la vora negra d'1 píxel s'aplicaran tots dos estils al segon element, mentre que el primer element té un color de fons gris i cap vora, tal i com especifica la classe.
    4. -
  4. El segon element si adquireix un color de fons vermell, però no té cap vora. Per què? Perquè la declaració !important de la segona regla s’ha inclòs després de border: none, i això vol dir que aquesta declaració obté el valor de la vora border) de la regla anterior, tot i que l'ID té una especificitat més elevada.
    5. -
- -
-

Nota: L'única manera de substituir aquesta declaració !important seria incloure una altra declaració !important en una declaració amb la mateixa especificitat que es trobi més endavant en l'ordre del codi, o que presenti una especificitat més alta.

-
- -

És útil saber que !important existeix perquè sàpigues què és si t’ho trobes en el codi d’algú altre. Tanmateix, et recomanem fermament que no l'utilitzis tret que no tinguis cap altra alternativa. !important canvia el funcionament habitual de la cascada, de manera que pot complicar molt la resolució dels problemes de depuració de CSS, sobretot en un full d’estil.

- -

Una de les situacions en què potser l'has d'utilitzar és quan treballes en un CMS en què no pots editar els mòduls CSS bàsics, però vols substituir un estil que no es pot substituir de cap altra manera. Però, de debò, no ho facis servir si ho pots evitar!

- -

La importància de la ubicació del CSS

- -

Per acabar, és útil tenir en compte també que la importància d’una declaració CSS depèn de quin full d’estil s’especifica; és possible que els usuaris estableixin fulls d’estil personalitzats que anul·lin els estils del desenvolupador. Per exemple, l’usuari pot tenir una deficiència visual i pot voler definir una mida de lletra per a totes les pàgines web que visita que sigui el doble de la mida normal, per a poder llegir amb més facilitat.

- -

En resum

- -

Les declaracions que entren en conflicte s’aplicaran en l’ordre següent, en què les que apareixen amb posterioritat sempre reescriuen les anteriors:

- -
    -
  1. Declaracions en fulls d’estil d’agent d’usuari (per exemple, els estils predeterminats del navegador, que s’utilitzen quan no s’estableix cap altre estil).
    2. -
  2. Declaracions normals en fulls d’estil de l’usuari (estils personalitzats que estableix un usuari).
    3. -
  3. Declaracions normals en fulls d'estil d'autor (aquests són els estils que establim nosaltres, els desenvolupadors web).
    4. -
  4. Declaracions importants en fulls d’estil d’autor.
    5. -
  5. Declaracions importants en els fulls d'estil de l'usuari.
    6. -
- -

Té sentit que els fulls d’estil dels desenvolupadors web reemplacin els fulls d’estil dels usuaris, de manera que el disseny es pot mantenir tal i com es pretén, però a vegades els usuaris tenen bons motius per a anul·lar els estils dels desenvolupadors web, com ja s’ha esmentat; això es pot aconseguir amb !important en les regles d’estil.

- -

Posa a prova les teves habilitats

- -

Hem vist moltes coses en aquest article. Ets capaç de recordar-ne la informació més important? A Test your skills: the Cascade trobaràs més proves per verificar que has retingut aquesta informació abans de continuar.

- -

Què segueix?

- -

Si has entès el gruix d’aquest article, ja has començat a familiaritzar-te amb la mecànica fonamental del CSS. A continuació, examinarem els selectors amb detall.

- -

Si no has entès del tot els conceptes de la cascada, l'especificitat i l'herència, no et preocupis. Sens dubte, això és el més complicat que hem exposat fins ara, i a vegades fins i tot els desenvolupadors web professionals ho troben complicat. T’aconsellem que tornis a aquest article unes quantes vegades a mesura que avancis en el curs, i que hi continuïs pensant.

- -

Torna a aquest punt si comences a trobar-te amb problemes estranys amb estils que no s'apliquen com esperaves. Podria ser un problema d'especificitat.

- -

{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diverses direccions
    6. -
  6. El desbordament dels continguts
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionar elements en CSS
    9. -
  9. Imatges, media i elements de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depurar el CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ca/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..09a5e368eb --- /dev/null +++ b/files/ca/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,333 @@ +--- +title: Cascada i herència +slug: Learn/CSS/Building_blocks/Cascada_i_herència +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +
{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
+ +

L’objectiu d’aquest article és desenvolupar la comprensió d’alguns dels conceptes més fonamentals del CSS (la cascada, l’especificitat i l’herència) que controlen com s’aplica el CSS a l’HTML i com es resolen els conflictes.

+ +

Si bé pot semblar que és menys rellevant i una mica més acadèmic que algunes altres parts del curs, la seva comprensió t'estalviarà feina més endavant! T’animem a treballar aquesta secció en profunditat i comprovar que entens els conceptes abans de continuar endavant.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Aprendre què són la cascada i l'especificitat, i com funciona l'herència en CSS.
+ +

Regles conflictives

+ +

CSS significa fulls d'estil en cascada (cascading style sheets), i es molt important entendre la paraula, cascada; el comportament de la cascada és clau per a comprendre el CSS.

+ +

En algun moment treballaràs en un projecte i trobaràs que el CSS que creus que s’hauria d’aplicar a un element no funciona. Normalment, el problema és que has creat dues regles que podrien aplicar-se al mateix element. La cascada i el concepte d’especificitat, que estan estretament relacionats, són mecanismes que controlen quina regla s'aplica quan hi ha aquest conflicte. La regla que dona estil al teu element pot ser que no sigui la que esperaves, per la qual cosa has d'entendre com funcionen aquests mecanismes.

+ +

Aquí també és important el concepte d'herència, que significa que algunes propietats CSS per defecte hereten valors establerts per a l'element pare, i d'altres no. Això també pot causar algun comportament que potser no esperes.

+ +

Comencem per fer una ullada ràpida als elements clau que tractem i, a continuació, examinarem com interaccionen entre si i amb el CSS. Poden semblar un conjunt de conceptes complicats d’entendre. A mesura que vagis adquirint pràctica a l'hora d’escriure CSS, se’t farà més evident la manera que té de funcionar.

+ +

La cascada

+ +

Fulls d’estil en cascada: en un nivell molt senzill això significa que l’ordre de les regles CSS és important; quan s’apliquen dues regles que tenen la mateixa especificitat, la que s’utilitza és l'última que surt al codi CSS.

+ +

En l’exemple següent hi ha dues regles que podrien aplicar-se a h1. h1 acaba sent de color blau: aquestes regles tenen un selector idèntic i, per tant, porten la mateixa especificitat, de manera que l’última regla en el full d'estil guanya.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} 

+ +

Especificitat

+ +

L’especificitat és la manera com el navegador decideix quina regla s’aplica si diverses regles tenen selectors diferents i poden aplicar-se al mateix element. Bàsicament és una mesura de com d'específica serà la selecció d'un selector:

+ + + +

Vegem-ne un exemple! A continuació, tornem a tenir dues regles que podrien aplicar-se a h1. L’encapçalament h1 següent acaba sent de color vermell: el selector de classe dona a aquesta regla una especificitat més alta, i per tant s'aplica encara que la regla amb el selector d'elements apareix més avall en el full d'estil.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} 

+ +

Més endavant explicarem la puntuació de l'especificitat.

+ +

Herència

+ +

L’herència també s’ha d’entendre en aquest context: els elements fill hereten alguns valors de propietat CSS que s’han establert en els elements pare, i no n’hereten d’altres.

+ +

Per exemple, si configures un element color i un font-family per a un element, aquest color i tipus de lletra també s’apliquen a tots els elements que hi hagi a dintre, tret que els hi hagis aplicat valors de color i lletra diferents directament.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} 

+ +

Algunes propietats no s'hereten. Per exemple, si estableixes una amplada ({{cssxref("width")}}) del 50% per a un element, cap dels seus elements descendents adquireix una amplada del 50% de l'amplada de l'element pare. Si fos així, seria molt frustrant utilitzar CSS!

+ +
+

Nota: A les pàgines de referència de les propietats CSS de MDN, pots trobar un quadre d'informació tècnica, normalment a la part inferior de la secció d'especificacions, que enumera diversos punts de dades sobre aquesta propietat, inclòs si s'hereta o no. Consulta, per exemple, la secció Especificacions de la propietat del color.

+
+ +

Entendre com interaccionen els conceptes

+ +

Aquests tres conceptes controlen quin CSS s'aplica a cada element. En les seccions següents veurem com funcionen conjuntament. De vegades pot semblar una mica complicat, però començaràs a recordar-los a mesura que guanyis experiència amb el CSS, i sempre ho pots tornar a buscar si se t'obliden els detalls. Fins i tot als desenvolupadors experimentats els costa recordar tots els detalls.

+ +

Comprendre l’herència

+ +

Començarem per l'herència. En l'exemple següent hi ha un element {{HTMLElement("ul")}}, que conté dos nivells de llistes no ordenades. Hem definit per a l'element exterior <ul> una vora i un farciment, i n’hem canviat el color de la lletra.

+ +

El color s’ha aplicat als fills directes i també als indirectes: els elements fill immediats (<li>) i els que hi ha a la primera llista imbricada. Després, hem afegit una classe special a la segona llista imbricada i hi hem aplicat un color diferent, el qual hereten els fills d’aquesta.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} 

+ +

No s'hereten propietats com l'amplada (com ja s'ha esmentat), els marges, els farciments i les vores. Si els fills de la nostra llista haguessin d’heretar una vora, cada llista i element de llista obtindria una vora, i probablement no sigui un efecte que vulguem.

+ +

Quines propietats s'hereten de manera predeterminada i quines no, es en bona mesura qüestió de sentit comú.

+ +

Control de l’herència

+ +

El CSS proporciona quatre valors especials de propietat universal per a controlar l’herència. Totes les propietats CSS admeten aquests valors.

+ +
+
{{cssxref("inherit")}}
+
Estableix el valor de la propietat aplicat a un element seleccionat perquè sigui igual que el de l’element pare. Això, en efecte, «activa l'herència».
+
{{cssxref("initial")}}
+
Estableix que el valor de la propietat que s’aplica a l’element que se selecciona sigui igual que el valor que el full d'estil predeterminat del navegador estableix per a la propietat d’aquest element. Si el full d’estil predeterminat del navegador no estableix cap valor i la propietat s’hereta de manera natural, el valor de la propietat s’estableix en inherit.
+
{{cssxref("unset")}}
+
Restableix la propietat al seu valor natural, cosa que significa que si la propietat s’hereta naturalment, actua com a inherit, i en cas contrari, actua com a initial.
+
+ +
+

Nota: També hi ha un valor més recent, {{cssxref("revert")}}, que té un suport limitat per part dels navegadors.

+
+ +
+

Nota: Consulta la secció {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} per obtenir més informació sobre cadascuna d'elles i el seu funcionament.

+
+ +

Podem observar una llista d’enllaços i analitzar com funcionen els valors universals. L’exemple en viu següent et permet jugar amb el CSS i veure què passa si hi fas canvis. Jugar amb el codi és realment la millor manera d’arribar a conèixer l'HTML i el CSS.

+ +

Per exemple:

+ +
    +
  1. El segon element de llista té aplicada la classe my-class-1. Estableix el color que hereta l’element <a> que té imbricat. Com canvia el color de l'enllaç si suprimeixes la regla?
    2. +
  2. Entens per què el tercer i el quart enllaços són del color que són? Si no és així, repassa la descripció dels valors anteriors.
    3. +
  3. Quin dels enllaços canvia de color si defineixes un color nou per a l'element <a>, per exemple a { color: red; }?
    4. +
+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} 

+ +

Restablir tots els valors de propietat

+ +

La propietat CSS abreviada all es pot utilitzar per a aplicar un d’aquests valors d’herència a (gairebé) totes les propietats alhora. El seu valor pot ser qualsevol dels valors d'herència (inherit, initial, unset o revert). És una manera còmoda de desfer els canvis que s’han aplicat a l’estil de manera que puguis tornar a un punt de partida conegut abans d'introduir canvis nous.

+ +

En l’exemple següent hi ha dues citacions de bloc. La primera té un estil que s’aplica directament sobre la citació de bloc, mentre que la segona té una classe aplicada a la citació de bloc que estableix el valor de all en unset.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} 

+ +

Prova d’establir el valor all a alguns dels altres valors disponibles i observa quina és la diferència.

+ +

Entendre la cascada

+ +

Ara entenem per què un paràgraf que està profundament imbricat dins l'estructura del teu HTML és del mateix color que el CSS que s’ha especificat per a body, i entenem per què canvia el CSS que, de les lliçons introductòries, hem aplicat a algun element en qualsevol punt del document, ja sigui assignant CSS a un element o creant una classe. Ara farem una ullada de més a prop a com la cascada defineix quines regles CSS s'apliquen quan hi ha més d'un situació que pot aplicar estil a un element.

+ +

Cal considerar tres factors, en un ordre d'importància creixent. Els posteriors anul·len els anteriors:

+ +
    +
  1. Ordre dins el codi
    2. +
  2. Especificitat
    3. +
  3. Importància
    4. +
+ +

Ara els analitzarem i descobrirem com els navegadors determinen quin CSS han d’aplicar.

+ +

Ordre dins el codi

+ +

Ja hem vist com l’ordre dins el codi és important en la cascada. Si hi ha més d’una regla, amb exactament el mateix pes, guanya la que apareix última en el CSS. Pots veure-ho com que les regles que són més properes a l'element sobreescriuen les anteriors fins que l'última guanya i estableix el disseny que es dona a l'element.

+ +

Especificitat

+ +

Un cop entès el fet que l’ordre dins el codi importa, en algun moment et pots topar amb una situació en què saps que no s’aplica la regla que apareix l’última en el full d’estil, sinó una d’anterior. Això es deu al fet que aquesta regla anterior té una especificitat més elevada: és més específica i, per tant, el navegador la tria per donar estil a l'element.

+ +

Com hem vist abans en aquest article, un selector de classes té més pes que un selector d’elements, de manera que les propietats definides per a la classe anul·len les que s’apliquen directament per a l’element.

+ +

Una observació important que cal fer aquí és que, tot i que pensem en selectors i regles que s’apliquen a l'element que seleccionen, no es sobreescriu tota la regla, sinó només les propietats que són iguals.

+ +

Aquest comportament ajuda a evitar repeticions dins el CSS. Una pràctica habitual és definir estils genèrics per als elements bàsics, i després crear classes per a aquells que són diferents. Per exemple, en el full d’estil següent hem definit estils genèrics per a títols d’encapçalament de nivell 2 i després hem creat algunes classes que canvien només algunes propietats i valors. Els valors definits inicialment s'apliquen a tots els títols d’encapçalament, i els valors més específics s'apliquen als títols d’encapçalament en què s'ha establert alguna classe.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} 

+ +

Observa ara com calcula l’especificitat el navegador. Ja saps que un selector d’elements té una especificitat baixa i una classe el pot sobreescriure. Essencialment s’atorga un valor en punts als diferents tipus de selectors i, si se sumen, s’obté el pes concret de cada selector, que pot avaluar-se respecte d’altres coincidències potencials.

+ +

La quantitat d'especificitat que presenta un selector es mesura a partir de quatre valors (o components) diferents, que es poden entendre com si fossin milers, centenes, desenes i unitats; quatre dígits simples disposats en quatre columnes:

+ +
    +
  1. Milers: suma un punt en aquesta columna si la declaració es troba continguda dins d’un atribut {{htmlattrxref("style")}}, també conegut com estil de línia. Aquestes declaracions no tenen selectors, de manera que la seva especificitat és sempre de 1.000.
    2. +
  2. Centenes: suma un punt en aquesta columna per cada selector d’identificador que està contingut en el selector global.
    3. +
  3. Desenes: suma un punt en aquesta columna per cada selector de classe, selector d'atributs o de pseudoclasse que està contingut dins del selector general.
    4. +
  4. Unitats: suma un punt en aquesta columna per cada selector d'elements o pseudoelement que està contingut dins del selector general.
    5. +
+ +
+

Nota: El selector universal (*), els combinadors (+, >, ~, ' ') i la pseudoclasse de negació (:not) no tenen cap efecte sobre l'especificitat.

+
+ +

La taula següent mostra alguns exemples aïllats per posar-te en situació. Estudia aquestes qüestions i assegura't d’entendre per què tenen aquestes especificitats. Encara no hem exposat detalladament els selectors, però pots trobar detalls de cada selector en la pàgina de referència dels selectors de MDN.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorMilersCentenesDesenesUnitatsEspecificitat total
h100010001
h1 + p::first-letter00030003
li > a[href*="en-US"] > .inline-warning00220022
#identifier01000100
Cap selector, amb una regla dins de l’atribut {{htmlattrxref ("style")}} d'un element10001000
+ +

Abans de continuar endavant, observa un exemple en acció.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} 

+ +

Què hi passa, aquí? En primer lloc, només ens interessen les set primeres regles d’aquest exemple i, com ja deus haver observat, hem inclòs els seus valors d’especificitat en un comentari abans de cadascuna.

+ + + +
    +
+ +
+

Nota: Aquest ha estat només un exemple aproximat per facilitar-ne la comprensió. En realitat, cada tipus de selector té el seu nivell d'especificitat propi, que no pot ser sobreescrit per selectors amb un nivell d'especificitat inferior. Per exemple, una combinació de selectors d’una classe milió no podrien sobreescriure les regles d’un selector d’ID unitat.

+ +

Una manera més precisa d’avaluar l’especificitat seria puntuar els nivells d’especificitat individualment començant pel més alt i descendint quan sigui necessari. Només quan hi hagi un empat entre puntuacions de selector dins d’un nivell d’especificitat, hauràs d'avaluar el nivell següent; en cas contrari, pots prescindir dels selectors de nivell d’especificitat inferior perquè mai podran sobreescriure els nivells d’especificitat més alts.

+
+ +

!important

+ +

Hi ha una element especial de CSS que podries utilitzar per substituir tots els càlculs anteriors, però has de tenir molta cura a l'hora de fer-lo servir: !important. S’utilitza per fer que una propietat i un valor particulars tinguin l’especificitat màxima; per tant, anul·la les regles normals de la cascada.

+ +

Observa aquest exemple, en què hi ha dos paràgrafs, un dels quals té un selector d’ID.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} 

+ +

Fes-ne la prova i observa què succeeix. Si et costa d’entendre, prova d’eliminar algunes de les propietats i observa què passa:

+ +
    +
  1. Veuràs que els valors {{cssxref("color")}} i {{cssxref("padding")}} de la tercera regla s'han aplicat, però {{cssxref("background-color")}} no ho ha fet. Per què? Els tres haurien d’aplicar-se sense cap problema, perquè les regles posteriors en l’ordre del codi en general anul·len les regles anteriors.
    2. +
  2. Tanmateix, les regles anteriors guanyen perquè els selectors de classe tenen una especificitat més alta que els selectors d’element.
    3. +
  3. Els dos elements tenen una {{htmlattrxref("class")}} better, però el segon té un {{htmlattrxref("id")}} winning. Com que els ID tenen una especificitat encara més elevada que les classes (només es pot tenir un element amb un determinat ID en una mateixa pàgina, però es poden tenir molts elements amb la mateixa classe: els selectors ID són molt específics amb allò que delimiten), el color de fons vermell i la vora negra d'1 píxel s'aplicaran tots dos estils al segon element, mentre que el primer element té un color de fons gris i cap vora, tal i com especifica la classe.
    4. +
  4. El segon element si adquireix un color de fons vermell, però no té cap vora. Per què? Perquè la declaració !important de la segona regla s’ha inclòs després de border: none, i això vol dir que aquesta declaració obté el valor de la vora border) de la regla anterior, tot i que l'ID té una especificitat més elevada.
    5. +
+ +
+

Nota: L'única manera de substituir aquesta declaració !important seria incloure una altra declaració !important en una declaració amb la mateixa especificitat que es trobi més endavant en l'ordre del codi, o que presenti una especificitat més alta.

+
+ +

És útil saber que !important existeix perquè sàpigues què és si t’ho trobes en el codi d’algú altre. Tanmateix, et recomanem fermament que no l'utilitzis tret que no tinguis cap altra alternativa. !important canvia el funcionament habitual de la cascada, de manera que pot complicar molt la resolució dels problemes de depuració de CSS, sobretot en un full d’estil.

+ +

Una de les situacions en què potser l'has d'utilitzar és quan treballes en un CMS en què no pots editar els mòduls CSS bàsics, però vols substituir un estil que no es pot substituir de cap altra manera. Però, de debò, no ho facis servir si ho pots evitar!

+ +

La importància de la ubicació del CSS

+ +

Per acabar, és útil tenir en compte també que la importància d’una declaració CSS depèn de quin full d’estil s’especifica; és possible que els usuaris estableixin fulls d’estil personalitzats que anul·lin els estils del desenvolupador. Per exemple, l’usuari pot tenir una deficiència visual i pot voler definir una mida de lletra per a totes les pàgines web que visita que sigui el doble de la mida normal, per a poder llegir amb més facilitat.

+ +

En resum

+ +

Les declaracions que entren en conflicte s’aplicaran en l’ordre següent, en què les que apareixen amb posterioritat sempre reescriuen les anteriors:

+ +
    +
  1. Declaracions en fulls d’estil d’agent d’usuari (per exemple, els estils predeterminats del navegador, que s’utilitzen quan no s’estableix cap altre estil).
    2. +
  2. Declaracions normals en fulls d’estil de l’usuari (estils personalitzats que estableix un usuari).
    3. +
  3. Declaracions normals en fulls d'estil d'autor (aquests són els estils que establim nosaltres, els desenvolupadors web).
    4. +
  4. Declaracions importants en fulls d’estil d’autor.
    5. +
  5. Declaracions importants en els fulls d'estil de l'usuari.
    6. +
+ +

Té sentit que els fulls d’estil dels desenvolupadors web reemplacin els fulls d’estil dels usuaris, de manera que el disseny es pot mantenir tal i com es pretén, però a vegades els usuaris tenen bons motius per a anul·lar els estils dels desenvolupadors web, com ja s’ha esmentat; això es pot aconseguir amb !important en les regles d’estil.

+ +

Posa a prova les teves habilitats

+ +

Hem vist moltes coses en aquest article. Ets capaç de recordar-ne la informació més important? A Test your skills: the Cascade trobaràs més proves per verificar que has retingut aquesta informació abans de continuar.

+ +

Què segueix?

+ +

Si has entès el gruix d’aquest article, ja has començat a familiaritzar-te amb la mecànica fonamental del CSS. A continuació, examinarem els selectors amb detall.

+ +

Si no has entès del tot els conceptes de la cascada, l'especificitat i l'herència, no et preocupis. Sens dubte, això és el més complicat que hem exposat fins ara, i a vegades fins i tot els desenvolupadors web professionals ho troben complicat. T’aconsellem que tornis a aquest article unes quantes vegades a mesura que avancis en el curs, i que hi continuïs pensant.

+ +

Torna a aquest punt si comences a trobar-te amb problemes estranys amb estils que no s'apliquen com esperaves. Podria ser un problema d'especificitat.

+ +

{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diverses direccions
    6. +
  6. El desbordament dels continguts
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionar elements en CSS
    9. +
  9. Imatges, media i elements de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depurar el CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git a/files/ca/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html b/files/ca/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html new file mode 100644 index 0000000000..2623d6d0dd --- /dev/null +++ b/files/ca/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html @@ -0,0 +1,97 @@ +--- +title: Creació d'una carta amb encapçalat de fantasia +slug: Learn/CSS/Caixes_estil/Creació_carta +tags: + - Assessment + - Background + - Beginner + - CSS + - CodingScripting + - border + - borderBoxes + - letter + - letterhead + - letterheaded + - paper +translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}
+ +

Si voleu fer una impressió correcta, escriviu una carta amb un bon paper i una capçalera agradable pot ser un començament realment bo. En aquesta avaluació, us desafiarem a crear una plantilla en línia per aconseguir-ho.

+ + + + + + + + + + + + +
Requisits previs:Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.
Objectiu:Provar la comprensió del model de caixa CSS i altres característiques relacionades amb la caixa, com ara la implementació de fons.
+ +

Punt de partida

+ +

Per començar aquesta avaluació, heu de:

+ + + +
+

Nota: Com a alternativa, podeu utilitzar un lloc com JSBin o Thimble per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia. Si l'editor en línia que esteu utilitzant no té cap panell CSS independent, no dubteu a posar-lo en un element <style> al capdavant del document.

+
+ +

Resum del projecte

+ +

Se us ha donat els fitxers necessaris per crear una plantilla de paper amb capçalera. Només cal que col·loqueu els fitxers junts. Per arribar-hi, heu de:

+ +

La carta principal

+ + + +

El logotip

+ + + +

Consells i suggeriments

+ + + +

Exemple

+ +

La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:

+ +

+ +

 

+ +

Avaluació

+ +

Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema en el fil de conversa en l'àrea d'aprenentatge, o en el canal IRC #mdn en Mozilla IRC. Intenteu primer l'exercici - no es guanya res fent trampes!

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}

diff --git a/files/ca/learn/css/building_blocks/debugging_css/index.html b/files/ca/learn/css/building_blocks/debugging_css/index.html new file mode 100644 index 0000000000..273468969e --- /dev/null +++ b/files/ca/learn/css/building_blocks/debugging_css/index.html @@ -0,0 +1,198 @@ +--- +title: Depurar el CSS +slug: Learn/CSS/Building_blocks/Depurar_el_CSS +translation_of: Learn/CSS/Building_blocks/Debugging_CSS +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}
+ +

En escriure codi CSS de vegades et pots trobar que el teu CSS no fa el que esperes. Pot ser que esperis que un determinat selector coincideixi amb un element, i no passa; o que una caixa tingui una mida diferent de la que t’esperaves. Aquest article et proporciona orientacions sobre com es pot emprendre la depuració d’un problema en CSS i et mostra com les eines de desenvolupador (DevTools) que tots els navegadors moderns inclouen et poden ajudar a esbrinar què passa.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Adquirir informació bàsica sobre les eines de desenvolupador dels navegadors i aprendre a inspeccionar i editar el CSS de manera senzilla.
+ +

Com accedir a les eines de desenvolupador del navegador

+ +

L'article Què són les eines de desenvolupador dels navegadors és una guia actualitzada que explica com accedir a les eines de desenvolupament web en diversos navegadors i plataformes. Tot i que pots decidir fer el desenvolupament web majoritàriament en un navegador determinat, i per tant et familiaritzaràs amb les eines que inclou aquell navegador, val la pena saber com accedir-hi des d'altres navegadors. Això t’ajudarà si fas proves de les representacions que donen diferents navegadors.

+ +

També t’adonaràs que els diversos navegadors han decidit centrar-se en àrees diferents a l’hora de crear les eines de desenvolupador. Per exemple, en Firefox hi ha algunes eines excel·lents per a treballar visualment amb la compaginació amb CSS, que et permeten inspeccionar i editar Dissenys de graella, Flexbox i Formes. Ara bé, tots els diferents navegadors tenen eines fonamentals semblants; per exemple, per a inspeccionar les propietats i els valors que s’apliquen als elements de la teva pàgina i modificar-los des de l'editor.

+ +

En aquest article analitzarem algunes funcions útils de les eines de desenvolupador de Firefox per a treballar amb CSS. Per fer-ho, utilitzarem un fitxer d'exemple. Carrega’l en una pestanya nova si vols seguir-nos alhora, i obre les eines de desenvolupador tal com es descriu en l'article de l'enllaç anterior.

+ +

El DOM i el View Source

+ +

Una cosa que pot sorprendre els nouvinguts a DevTools és la diferència entre el que es veu quan mires el codi font d'una pàgina web o el fitxer HTML que hi ha penjat al servidor, i el que pots veure en la finestra HTML de DevTools. Tot i que s’assembla força al que es pot veure des de View Source, hi ha algunes diferències.

+ +

En el processat pel DOM, el navegador pot haver corregit un codi HTML mal escrit. Si has tancat un element de manera incorrecta, per exemple perquè has obert un <h2> però l’has tancat amb un </h3>, el navegador esbrina què volies fer i l'HTML del DOM tanca correctament l’etiqueta d’obertura <h2> amb l’etiqueta de tancament </h2> corresponent. El navegador també normalitza tot el codi HTML i el DOM mostra, a més, tots els canvis que s’hi fan amb JavaScript.

+ +

En canvi, View Source és simplement el codi font HTML que hi ha emmagatzemat en el servidor. L’arbre HTML de DevTools mostra exactament el que representa el navegador, de manera que et proporciona una visió detallada del que passa realment.

+ +

Inspecció del CSS aplicat

+ +

Selecciona un element de la teva pàgina, ja sigui fent clic amb el botó dret del ratolí o prement la tecla ctrl per seleccionar l'opció Inspeccionar, o selecciona’l en l'arbre HTML de l'esquerra de la pantalla de la interfície DevTools. Selecciona l'element amb la classe box1; aquest és el primer element de la pàgina que té una caixa que l’envolta.

+ +

Pàgina d'exemple per a aquest tutorial amb DevTools.

+ +

Si observes la vista de visualització de regles, Rules view, que hi ha a la dreta de l’HTML, pots veure les propietats i els valors CSS que s’apliquen a aquest element. S’hi veuen les regles que s’apliquen directament a la classe box1 i també les regles de CSS que la caixa hereta de l’element pare, en aquest cas <body>. Això és útil per a veure si s’aplica algun codi CSS que no esperes. Potser hi ha una regla que s’hereta d’un element pare i has d’afegir una regla que l’anul·li en el context d’aquest element.

+ +

També és útil la capacitat d’ampliar les propietats abreviades. En el nostre exemple hem fet servir la propietat abreviada margin.

+ +

Fes clic a la fletxa petita per a ampliar la vista i que se’n mostrin les diferents propietats sense abreviar i els valors.

+ +

Pots activar i desactivar els valors en la finestra de Visualització de regles quan aquest plafó està actiu; si hi passes el ratolí per sobre, apareixeran les caselles de verificació. Desmarca la casella de verificació d’una regla, per exemple border-radius i aquell CSS deixarà d’aplicar-se.

+ +

Pots utilitzar-ho per a fer una comparació entre A i B i decidir si alguna cosa es veu més bé amb una regla aplicada o no, i també per a ajudar a depurar-la. Per exemple, quan un disseny de pàgina web no funciona correctament i intentes esbrinar quina propietat provoca el problema.

+ +

Editar els valors

+ +

A més d’activar i desactivar propietats, pots editar-ne els valors. Pot ser que vulguis veure si un altre color escau més, o modificar la mida d'alguna cosa. Les DevTools et poden ajudar a estalviar molt de temps a l'hora d'editar un full d’estil i tornar a carregar la pàgina.

+ +

Amb l’element box1 seleccionat, fes clic en la mostra (el petit cercle de color) que mostra el color que s’aplica a la vora. S'obrirà un selector de colors i podràs provar amb colors diferents, que s'actualitzaran en temps real a la pàgina. De manera semblant pots canviar l'amplada o l'estil de la vora.

+ +

Taula d'estils de DevTools amb un selector de colors obert.

+ +

Afegir una propietat

+ +

Amb les DevTools pots afegir propietats. Que t'has adonat que no vols que la caixa hereti la mida de la lletra de l'element <body> i vols definir-hi una mida de lletra pròpia? Fes-ne primer la prova en les DevTools abans d’afegir-ho al teu fitxer CSS.

+ +

Fes clic en la clau de tancament de la regla i comença a introduir-hi una altra declaració; en el moment que comences a escriure, DevTools mostra una llista completa de les propietats que hi coincideixen. Selecciona la propietat per a la mida de la lletra (font-size) i introdueix-hi el valor que vols provar. També pots fer clic al botó + per a afegir una altra regla amb el mateix selector, i afegir-hi les regles noves.

+ +

El tauler DevTools quan afegeixes una propietat nova a les regles, amb l’eina de compleció automàtica oberta

+ +
+

Nota: També hi ha altres funcions útils en la vista de visualització de regles; per exemple, es ratllen les declaracions que tenen valors no vàlids. Pots obtenir més informació en l’article Examinar i editar el CSS.

+
+ +

Entendre el model de caixes

+ +

En articles anteriors hem parlat del model de caixes i del fet que tenim un model de caixes alternatiu que canvia la manera com es calculen les mides dels elements segons la mida que els proporciones, i també de l'àrea de farciment i els marges. Les DevTools et poden ajudar a entendre com es calcula la mida d'un element.

+ +

La vista de disposició mostra un esquema del model de caixes de l’element seleccionat, juntament amb una descripció de les propietats i els valors que canvien la manera com es disposa l’element en la pàgina. Inclou una descripció de les propietats que potser no has utilitzat explícitament sobre l'element, però que tenen valors inicials definits.

+ +

Una de les propietats que es detallen en aquesta taula és la propietat de dimensionament de caixa (box-sizing), que controla quin model de caixes utilitza l'element.

+ +

Compara les dues caixes amb les classes box1 i box2. Totes dues tenen definida la mateixa amplada (400px), però box1 és visualment més ampla. En la finestra de disseny pots veure que utilitza content-box. Aquest valor pren la mida que dones a l’element, i a continuació hi suma l’amplada de l'àrea de farciment i de les vores.

+ +

L’element amb una classe box2 fa servir border-box, de manera que aquí l’àrea de farciment i les vores es resten de la mida que has donat a l’element. Això significa que l'espai que ocupa la caixa en la pàgina és la mida exacta que has especificat, en el nostre cas: width: 400px.

+ +

La secció de compaginació dels DevTools

+ +
+

Nota: Obtén més informació sobre com examinar i inspeccionar el model de caixes.

+
+ +

Resolució de qüestions d'especificitat

+ +

De vegades durant el desenvolupament, però en particular quan necessites editar el CSS en un lloc que ja està en actiu, et trobes amb problemes per aconseguir que s’apliquin algunes regles CSS. No importa què facis, l'element simplement sembla que no entén la regla CSS. El que acostuma a passar és que un selector més específic anul·la els teus canvis, i aquí les DevTools et poden ajudar molt.

+ +

En el nostre fitxer d’exemple hi ha dues paraules incloses en un element <em>. Una es mostra de color carabassa, i l’altra de color rosa brillant. Al CSS hi hem aplicat:

+ +
em {
+  color: hotpink;
+  font-weight: bold;
+}
+ +

Per sobre de tot això, en el full d’estil hi ha una regla amb un selector .special:

+ +
.special {
+  color: orange;
+}
+ +

Com recordaràs de l'article sobre la cascada i l’herència en què comentem l’especificitat, els selectors de classe són més específics que els selectors d’elements, així que aquest és el valor que s’aplica. Les DevTools et poden ajudar a trobar aquest tipus de problemes, sobretot si la informació està amagada en algun lloc d'un extens full d'estil.

+ +

Inspecciona l'element <em> amb la classe .special i DevTools et mostrarà que el color que s'aplica és orange, i la propietat color aplicada a l'em està ratllada. Aquí pots veure que el selector de classe supera el selector d’elements.

+ +

Un element <code>em</code> seleccionat i inspeccionat amb DevTools per veure què anul•la el color.

+ +

Obtén més informació sobre les DevTools de Firefox

+ +

Hi ha molta informació sobre les DevTools de Firefox aquí a MDN. Dona una ullada a la secció principal de DevTools i consulta les Guies pràctiques per a obtenir més detalls sobre les qüestions que hem tractat breument en aquest article.

+ +

Problemes en depurar el CSS

+ +

Les DevTools poden ser de gran ajuda a l’hora de resoldre problemes en CSS, de manera que, què has de fer quan et trobes en una situació en què el CSS no es comporta com esperes? Els passos següents t’haurien d’ajudar.

+ +

Fes un pas enrere des del problema

+ +

Qualsevol problema de codificació pot ser frustrant, sobretot els problemes amb el CSS, perquè sovint no reps cap missatge d’error que et permeti de cercar en línia per ajudar-te a trobar una solució. Si et sents frustrat, allunyat de la qüestió durant un temps: passeja, pren-te un refresc, parla amb un company de feina o treballa en una altra cosa durant un temps. De vegades la solució apareix màgicament quan deixes de pensar en el problema i, fins i tot si no arriba, resulta molt més fàcil treballar quan et sent fresc.

+ +

Els teus HTML i CSS són vàlids?

+ +

Els navegadors esperen que tant el teu CSS com el teu HTML estiguin escrits correctament, però els navegadors també són molt indulgents i fan tot el possible per mostrar les teves pàgines web, encara que hi hagi errors d'etiquetatge. Si hi ha errors en el codi, el navegador ha de suposar què vols dir, i pot ser que prengui una decisió diferent de la que tenies en ment. A més, dos navegadors diferents podrien fer front al problema de maneres diferents. Per tant, un bon primer pas és executar tant el codi HTML com el CSS amb un validador, per a descobrir qualsevol error i esmenar-lo.

+ + + +

Les propietats i els valors són compatibles amb el navegador?

+ +

Els navegadors simplement ignoren el CSS que no entenen. Si la propietat o el valor que utilitzes no és compatible amb el navegador amb què fas les proves, no es trencarà res, però no s’aplicarà el CSS. Les DevTools en general ressalten d’alguna manera les propietats i els valors que no són compatibles. En la captura de pantalla següent, el navegador no admet el subvalor {{cssxref("grid-template-columns")}}.

+ +

Imatge de les DevTools del navegador amb el subvalor grid-template-columns: subgrid es mostra ratllat perquè aquest subvalor no és compatible.

+ +

També pots donar una ullada a les taules de compatibilitat del navegador que hi ha a la part inferior de cada pàgina de propietat del projecte MDN. Et mostren la compatibilitat del navegador per a aquesta propietat, sovint desglossada si hi ha compatibilitat per a algun ús de la propietat però no d’altres. La taula següent mostra les dades de compatibilitat per a la propietat {{cssxref("shape-outside")}}.

+ +

{{compat("css.shape-outside")}}

+ +

Alguna cosa anul·la el teu CSS?

+ +

Aquí és on la informació que has après sobre l’especificitat et resultarà molt útil. Si hi ha alguna regla que anul·la el que vols fer perquè té més especificitat, pots entrar en un joc molt frustrant per a intentar esbrinar què passa. Tanmateix, com es descriu més amunt, les DevTools et mostraran quin CSS s’aplica i podràs esbrinar com anul·lar-ho amb un nou selector que sigui prou específic.

+ +

Fer una prova reduïda del problema

+ +

Si el problema no es resol amb els passos anteriors, has d'investigar més. El millor que pots fer en aquest moment és crear una cosa que es coneix com a prova reduïda. Ser capaç de «reduir un problema» és una habilitat molt útil. T'ajuda a trobar problemes en el teu codi propi i en el dels teus companys, i també et permet informar d’errors i demanar ajuda de manera més efectiva.

+ +

Una prova reduïda és un exemple de codi que mostra el problema de la manera més senzilla possible, sense contingut ni estil. Això de vegades significa eliminar del teu disseny de pàgina web el codi problemàtic i fer-ne un petit exemple que només mostri aquest codi o aquesta funció.

+ +

Per a crear una prova reduïda:

+ +
    +
  1. Si el teu codi d’etiquetatge es genera dinàmicament (per exemple amb un CMS), fes una versió estàtica de la sortida que mostra el problema. Un lloc per compartir codi com CodePen és útil per a allotjar proves reduïdes, perquè aleshores són accessibles en línia i es poden compartir fàcilment amb els companys. Pots començar per visualitzar el codi d’origen de la pàgina i copiar l’HTML a CodePen; a continuació, inclou-hi qualsevol CSS i JavaScript rellevants. Després d'això, comprova si el problema encara hi és.
    2. +
  2. Si suprimir el JavaScript no fa desaparèixer el problema, no incloguis el JavaScript. Si suprimir el JavaScript fa desaparèixer el problema, elimina tant de JavaScript com et sigui possible, i deixa-hi només el que origina el problema.
    3. +
  3. Elimina qualsevol codi HTML que no contribueixi al problema. Elimina components, o fins i tot elements principals del disseny de pàgina. Un cop més, prova de reduir al mínim el codi mentre encara es mostri el problema.
    4. +
  4. Elimina qualsevol CSS que no afecti el problema.
    5. +
+ +

En aquest procés podràs descobrir què causa el problema, o com a mínim el podràs activar i desactivar en eliminar-ne quelcom específic. Val la pena afegir alguns comentaris al codi a mesura que descobreixes coses. Si has de demanar ajuda, aquests comentaris mostraran a la persona que t'ajuda el que ja has provat. O també et pot acabar de donar prou informació per a poder cercar problemes i situacions semblants.

+ +

Si encara no trobes la solució del problema, tenir una prova reduïda et permet demanar ajuda, publicar-la en un fòrum o mostrar-la a un col·laborador. És molt més probable obtenir ajuda si mostres que abans de fer-ho t’has pres la feina de reduir el problema i esbrinar exactament on passa. Aleshores, un desenvolupador amb més experiència pot ser capaç de detectar el problema ràpidament i orientar-te en la direcció correcta; o, encara que no sigui així, la teva prova reduïda els permetrà de donar-hi una ullada ràpida i, potser, oferir-te una mica d'ajuda.

+ +

En el cas que el problema sigui un error en un navegador, la prova reduïda també es pot fer servir per a enviar un informe d’errors al proveïdor del navegador corresponent (per exemple, a la pàgina web bugzilla de Mozilla).

+ +

A mesura que adquireixis més experiència amb el CSS aprendràs a veure amb més facilitat on hi ha els problemes. Tanmateix, fins i tot els més experimentats de nosaltres ens trobem de vegades barrinant què dimonis passa aquí. Adoptar un enfocament metòdic, fer una prova reduïda i explicar el problema a algú són possibilitats que acostumen a donar un bon resultat a l'hora de trobar una solució.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Els selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diverses direccions
    6. +
  6. El desbordament dels continguts
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionar elements amb el CSS
    9. +
  9. Imatges, mèdia i elements de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depura el teu CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git a/files/ca/learn/css/building_blocks/depurar_el_css/index.html b/files/ca/learn/css/building_blocks/depurar_el_css/index.html deleted file mode 100644 index 273468969e..0000000000 --- a/files/ca/learn/css/building_blocks/depurar_el_css/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: Depurar el CSS -slug: Learn/CSS/Building_blocks/Depurar_el_CSS -translation_of: Learn/CSS/Building_blocks/Debugging_CSS ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}
- -

En escriure codi CSS de vegades et pots trobar que el teu CSS no fa el que esperes. Pot ser que esperis que un determinat selector coincideixi amb un element, i no passa; o que una caixa tingui una mida diferent de la que t’esperaves. Aquest article et proporciona orientacions sobre com es pot emprendre la depuració d’un problema en CSS i et mostra com les eines de desenvolupador (DevTools) que tots els navegadors moderns inclouen et poden ajudar a esbrinar què passa.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Adquirir informació bàsica sobre les eines de desenvolupador dels navegadors i aprendre a inspeccionar i editar el CSS de manera senzilla.
- -

Com accedir a les eines de desenvolupador del navegador

- -

L'article Què són les eines de desenvolupador dels navegadors és una guia actualitzada que explica com accedir a les eines de desenvolupament web en diversos navegadors i plataformes. Tot i que pots decidir fer el desenvolupament web majoritàriament en un navegador determinat, i per tant et familiaritzaràs amb les eines que inclou aquell navegador, val la pena saber com accedir-hi des d'altres navegadors. Això t’ajudarà si fas proves de les representacions que donen diferents navegadors.

- -

També t’adonaràs que els diversos navegadors han decidit centrar-se en àrees diferents a l’hora de crear les eines de desenvolupador. Per exemple, en Firefox hi ha algunes eines excel·lents per a treballar visualment amb la compaginació amb CSS, que et permeten inspeccionar i editar Dissenys de graella, Flexbox i Formes. Ara bé, tots els diferents navegadors tenen eines fonamentals semblants; per exemple, per a inspeccionar les propietats i els valors que s’apliquen als elements de la teva pàgina i modificar-los des de l'editor.

- -

En aquest article analitzarem algunes funcions útils de les eines de desenvolupador de Firefox per a treballar amb CSS. Per fer-ho, utilitzarem un fitxer d'exemple. Carrega’l en una pestanya nova si vols seguir-nos alhora, i obre les eines de desenvolupador tal com es descriu en l'article de l'enllaç anterior.

- -

El DOM i el View Source

- -

Una cosa que pot sorprendre els nouvinguts a DevTools és la diferència entre el que es veu quan mires el codi font d'una pàgina web o el fitxer HTML que hi ha penjat al servidor, i el que pots veure en la finestra HTML de DevTools. Tot i que s’assembla força al que es pot veure des de View Source, hi ha algunes diferències.

- -

En el processat pel DOM, el navegador pot haver corregit un codi HTML mal escrit. Si has tancat un element de manera incorrecta, per exemple perquè has obert un <h2> però l’has tancat amb un </h3>, el navegador esbrina què volies fer i l'HTML del DOM tanca correctament l’etiqueta d’obertura <h2> amb l’etiqueta de tancament </h2> corresponent. El navegador també normalitza tot el codi HTML i el DOM mostra, a més, tots els canvis que s’hi fan amb JavaScript.

- -

En canvi, View Source és simplement el codi font HTML que hi ha emmagatzemat en el servidor. L’arbre HTML de DevTools mostra exactament el que representa el navegador, de manera que et proporciona una visió detallada del que passa realment.

- -

Inspecció del CSS aplicat

- -

Selecciona un element de la teva pàgina, ja sigui fent clic amb el botó dret del ratolí o prement la tecla ctrl per seleccionar l'opció Inspeccionar, o selecciona’l en l'arbre HTML de l'esquerra de la pantalla de la interfície DevTools. Selecciona l'element amb la classe box1; aquest és el primer element de la pàgina que té una caixa que l’envolta.

- -

Pàgina d'exemple per a aquest tutorial amb DevTools.

- -

Si observes la vista de visualització de regles, Rules view, que hi ha a la dreta de l’HTML, pots veure les propietats i els valors CSS que s’apliquen a aquest element. S’hi veuen les regles que s’apliquen directament a la classe box1 i també les regles de CSS que la caixa hereta de l’element pare, en aquest cas <body>. Això és útil per a veure si s’aplica algun codi CSS que no esperes. Potser hi ha una regla que s’hereta d’un element pare i has d’afegir una regla que l’anul·li en el context d’aquest element.

- -

També és útil la capacitat d’ampliar les propietats abreviades. En el nostre exemple hem fet servir la propietat abreviada margin.

- -

Fes clic a la fletxa petita per a ampliar la vista i que se’n mostrin les diferents propietats sense abreviar i els valors.

- -

Pots activar i desactivar els valors en la finestra de Visualització de regles quan aquest plafó està actiu; si hi passes el ratolí per sobre, apareixeran les caselles de verificació. Desmarca la casella de verificació d’una regla, per exemple border-radius i aquell CSS deixarà d’aplicar-se.

- -

Pots utilitzar-ho per a fer una comparació entre A i B i decidir si alguna cosa es veu més bé amb una regla aplicada o no, i també per a ajudar a depurar-la. Per exemple, quan un disseny de pàgina web no funciona correctament i intentes esbrinar quina propietat provoca el problema.

- -

Editar els valors

- -

A més d’activar i desactivar propietats, pots editar-ne els valors. Pot ser que vulguis veure si un altre color escau més, o modificar la mida d'alguna cosa. Les DevTools et poden ajudar a estalviar molt de temps a l'hora d'editar un full d’estil i tornar a carregar la pàgina.

- -

Amb l’element box1 seleccionat, fes clic en la mostra (el petit cercle de color) que mostra el color que s’aplica a la vora. S'obrirà un selector de colors i podràs provar amb colors diferents, que s'actualitzaran en temps real a la pàgina. De manera semblant pots canviar l'amplada o l'estil de la vora.

- -

Taula d'estils de DevTools amb un selector de colors obert.

- -

Afegir una propietat

- -

Amb les DevTools pots afegir propietats. Que t'has adonat que no vols que la caixa hereti la mida de la lletra de l'element <body> i vols definir-hi una mida de lletra pròpia? Fes-ne primer la prova en les DevTools abans d’afegir-ho al teu fitxer CSS.

- -

Fes clic en la clau de tancament de la regla i comença a introduir-hi una altra declaració; en el moment que comences a escriure, DevTools mostra una llista completa de les propietats que hi coincideixen. Selecciona la propietat per a la mida de la lletra (font-size) i introdueix-hi el valor que vols provar. També pots fer clic al botó + per a afegir una altra regla amb el mateix selector, i afegir-hi les regles noves.

- -

El tauler DevTools quan afegeixes una propietat nova a les regles, amb l’eina de compleció automàtica oberta

- -
-

Nota: També hi ha altres funcions útils en la vista de visualització de regles; per exemple, es ratllen les declaracions que tenen valors no vàlids. Pots obtenir més informació en l’article Examinar i editar el CSS.

-
- -

Entendre el model de caixes

- -

En articles anteriors hem parlat del model de caixes i del fet que tenim un model de caixes alternatiu que canvia la manera com es calculen les mides dels elements segons la mida que els proporciones, i també de l'àrea de farciment i els marges. Les DevTools et poden ajudar a entendre com es calcula la mida d'un element.

- -

La vista de disposició mostra un esquema del model de caixes de l’element seleccionat, juntament amb una descripció de les propietats i els valors que canvien la manera com es disposa l’element en la pàgina. Inclou una descripció de les propietats que potser no has utilitzat explícitament sobre l'element, però que tenen valors inicials definits.

- -

Una de les propietats que es detallen en aquesta taula és la propietat de dimensionament de caixa (box-sizing), que controla quin model de caixes utilitza l'element.

- -

Compara les dues caixes amb les classes box1 i box2. Totes dues tenen definida la mateixa amplada (400px), però box1 és visualment més ampla. En la finestra de disseny pots veure que utilitza content-box. Aquest valor pren la mida que dones a l’element, i a continuació hi suma l’amplada de l'àrea de farciment i de les vores.

- -

L’element amb una classe box2 fa servir border-box, de manera que aquí l’àrea de farciment i les vores es resten de la mida que has donat a l’element. Això significa que l'espai que ocupa la caixa en la pàgina és la mida exacta que has especificat, en el nostre cas: width: 400px.

- -

La secció de compaginació dels DevTools

- -
-

Nota: Obtén més informació sobre com examinar i inspeccionar el model de caixes.

-
- -

Resolució de qüestions d'especificitat

- -

De vegades durant el desenvolupament, però en particular quan necessites editar el CSS en un lloc que ja està en actiu, et trobes amb problemes per aconseguir que s’apliquin algunes regles CSS. No importa què facis, l'element simplement sembla que no entén la regla CSS. El que acostuma a passar és que un selector més específic anul·la els teus canvis, i aquí les DevTools et poden ajudar molt.

- -

En el nostre fitxer d’exemple hi ha dues paraules incloses en un element <em>. Una es mostra de color carabassa, i l’altra de color rosa brillant. Al CSS hi hem aplicat:

- -
em {
-  color: hotpink;
-  font-weight: bold;
-}
- -

Per sobre de tot això, en el full d’estil hi ha una regla amb un selector .special:

- -
.special {
-  color: orange;
-}
- -

Com recordaràs de l'article sobre la cascada i l’herència en què comentem l’especificitat, els selectors de classe són més específics que els selectors d’elements, així que aquest és el valor que s’aplica. Les DevTools et poden ajudar a trobar aquest tipus de problemes, sobretot si la informació està amagada en algun lloc d'un extens full d'estil.

- -

Inspecciona l'element <em> amb la classe .special i DevTools et mostrarà que el color que s'aplica és orange, i la propietat color aplicada a l'em està ratllada. Aquí pots veure que el selector de classe supera el selector d’elements.

- -

Un element <code>em</code> seleccionat i inspeccionat amb DevTools per veure què anul•la el color.

- -

Obtén més informació sobre les DevTools de Firefox

- -

Hi ha molta informació sobre les DevTools de Firefox aquí a MDN. Dona una ullada a la secció principal de DevTools i consulta les Guies pràctiques per a obtenir més detalls sobre les qüestions que hem tractat breument en aquest article.

- -

Problemes en depurar el CSS

- -

Les DevTools poden ser de gran ajuda a l’hora de resoldre problemes en CSS, de manera que, què has de fer quan et trobes en una situació en què el CSS no es comporta com esperes? Els passos següents t’haurien d’ajudar.

- -

Fes un pas enrere des del problema

- -

Qualsevol problema de codificació pot ser frustrant, sobretot els problemes amb el CSS, perquè sovint no reps cap missatge d’error que et permeti de cercar en línia per ajudar-te a trobar una solució. Si et sents frustrat, allunyat de la qüestió durant un temps: passeja, pren-te un refresc, parla amb un company de feina o treballa en una altra cosa durant un temps. De vegades la solució apareix màgicament quan deixes de pensar en el problema i, fins i tot si no arriba, resulta molt més fàcil treballar quan et sent fresc.

- -

Els teus HTML i CSS són vàlids?

- -

Els navegadors esperen que tant el teu CSS com el teu HTML estiguin escrits correctament, però els navegadors també són molt indulgents i fan tot el possible per mostrar les teves pàgines web, encara que hi hagi errors d'etiquetatge. Si hi ha errors en el codi, el navegador ha de suposar què vols dir, i pot ser que prengui una decisió diferent de la que tenies en ment. A més, dos navegadors diferents podrien fer front al problema de maneres diferents. Per tant, un bon primer pas és executar tant el codi HTML com el CSS amb un validador, per a descobrir qualsevol error i esmenar-lo.

- - - -

Les propietats i els valors són compatibles amb el navegador?

- -

Els navegadors simplement ignoren el CSS que no entenen. Si la propietat o el valor que utilitzes no és compatible amb el navegador amb què fas les proves, no es trencarà res, però no s’aplicarà el CSS. Les DevTools en general ressalten d’alguna manera les propietats i els valors que no són compatibles. En la captura de pantalla següent, el navegador no admet el subvalor {{cssxref("grid-template-columns")}}.

- -

Imatge de les DevTools del navegador amb el subvalor grid-template-columns: subgrid es mostra ratllat perquè aquest subvalor no és compatible.

- -

També pots donar una ullada a les taules de compatibilitat del navegador que hi ha a la part inferior de cada pàgina de propietat del projecte MDN. Et mostren la compatibilitat del navegador per a aquesta propietat, sovint desglossada si hi ha compatibilitat per a algun ús de la propietat però no d’altres. La taula següent mostra les dades de compatibilitat per a la propietat {{cssxref("shape-outside")}}.

- -

{{compat("css.shape-outside")}}

- -

Alguna cosa anul·la el teu CSS?

- -

Aquí és on la informació que has après sobre l’especificitat et resultarà molt útil. Si hi ha alguna regla que anul·la el que vols fer perquè té més especificitat, pots entrar en un joc molt frustrant per a intentar esbrinar què passa. Tanmateix, com es descriu més amunt, les DevTools et mostraran quin CSS s’aplica i podràs esbrinar com anul·lar-ho amb un nou selector que sigui prou específic.

- -

Fer una prova reduïda del problema

- -

Si el problema no es resol amb els passos anteriors, has d'investigar més. El millor que pots fer en aquest moment és crear una cosa que es coneix com a prova reduïda. Ser capaç de «reduir un problema» és una habilitat molt útil. T'ajuda a trobar problemes en el teu codi propi i en el dels teus companys, i també et permet informar d’errors i demanar ajuda de manera més efectiva.

- -

Una prova reduïda és un exemple de codi que mostra el problema de la manera més senzilla possible, sense contingut ni estil. Això de vegades significa eliminar del teu disseny de pàgina web el codi problemàtic i fer-ne un petit exemple que només mostri aquest codi o aquesta funció.

- -

Per a crear una prova reduïda:

- -
    -
  1. Si el teu codi d’etiquetatge es genera dinàmicament (per exemple amb un CMS), fes una versió estàtica de la sortida que mostra el problema. Un lloc per compartir codi com CodePen és útil per a allotjar proves reduïdes, perquè aleshores són accessibles en línia i es poden compartir fàcilment amb els companys. Pots començar per visualitzar el codi d’origen de la pàgina i copiar l’HTML a CodePen; a continuació, inclou-hi qualsevol CSS i JavaScript rellevants. Després d'això, comprova si el problema encara hi és.
    2. -
  2. Si suprimir el JavaScript no fa desaparèixer el problema, no incloguis el JavaScript. Si suprimir el JavaScript fa desaparèixer el problema, elimina tant de JavaScript com et sigui possible, i deixa-hi només el que origina el problema.
    3. -
  3. Elimina qualsevol codi HTML que no contribueixi al problema. Elimina components, o fins i tot elements principals del disseny de pàgina. Un cop més, prova de reduir al mínim el codi mentre encara es mostri el problema.
    4. -
  4. Elimina qualsevol CSS que no afecti el problema.
    5. -
- -

En aquest procés podràs descobrir què causa el problema, o com a mínim el podràs activar i desactivar en eliminar-ne quelcom específic. Val la pena afegir alguns comentaris al codi a mesura que descobreixes coses. Si has de demanar ajuda, aquests comentaris mostraran a la persona que t'ajuda el que ja has provat. O també et pot acabar de donar prou informació per a poder cercar problemes i situacions semblants.

- -

Si encara no trobes la solució del problema, tenir una prova reduïda et permet demanar ajuda, publicar-la en un fòrum o mostrar-la a un col·laborador. És molt més probable obtenir ajuda si mostres que abans de fer-ho t’has pres la feina de reduir el problema i esbrinar exactament on passa. Aleshores, un desenvolupador amb més experiència pot ser capaç de detectar el problema ràpidament i orientar-te en la direcció correcta; o, encara que no sigui així, la teva prova reduïda els permetrà de donar-hi una ullada ràpida i, potser, oferir-te una mica d'ajuda.

- -

En el cas que el problema sigui un error en un navegador, la prova reduïda també es pot fer servir per a enviar un informe d’errors al proveïdor del navegador corresponent (per exemple, a la pàgina web bugzilla de Mozilla).

- -

A mesura que adquireixis més experiència amb el CSS aprendràs a veure amb més facilitat on hi ha els problemes. Tanmateix, fins i tot els més experimentats de nosaltres ens trobem de vegades barrinant què dimonis passa aquí. Adoptar un enfocament metòdic, fer una prova reduïda i explicar el problema a algú són possibilitats que acostumen a donar un bon resultat a l'hora de trobar una solució.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Els selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diverses direccions
    6. -
  6. El desbordament dels continguts
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionar elements amb el CSS
    9. -
  9. Imatges, mèdia i elements de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depura el teu CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/desbordament_de_contingut/index.html b/files/ca/learn/css/building_blocks/desbordament_de_contingut/index.html deleted file mode 100644 index 2ee0dc6129..0000000000 --- a/files/ca/learn/css/building_blocks/desbordament_de_contingut/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Desbordament de contingut -slug: Learn/CSS/Building_blocks/Desbordament_de_contingut -translation_of: Learn/CSS/Building_blocks/Overflowing_content ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}
- -

En aquest apartat veurem un altre concepte important en CSS: el desbordament. El desbordament és el que succeeix quan hi ha massa contingut i no cap còmodament en una caixa. En aquesta guia aprendràs què és i com gestionar-lo.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions de CSS (consulta els Primers passos amb el CSS).
Objectiu:Entendre el desbordament i com gestionar-lo.
- -

Què és el desbordament?

- -

Ja sabem que tot en CSS són caixes i que podem restringir la mida d’aquestes caixes assignant valors als atributs {{cssxref("width")}} i {{cssxref("height")}} (o {{cssxref("inline-size")}} i {{cssxref("block-size")}}). El desbordament és el que succeeix quan dins d’una caixa hi ha massa contingut i no hi cap. El CSS t'ofereix diverses eines per a gestionar aquest desbordament, i també és un concepte útil de comprendre en aquesta fase inicial. Et trobaràs amb situacions de desbordament força sovint quan escriguis CSS, sobretot quan aprofundeixis en el disseny de pàgines web amb CSS.

- -

El CSS tracta d'evitar «la pèrdua de dades»

- -

Comencem per examinar dos exemples que mostren com es comporta per defecte el CSS quan es desborda.

- -

El primer és una caixa a la que s’han restringit les dimensions del bloc en donar-hi una alçada (height). Després s’hi ha afegit més contingut del que cap en l’espai de la caixa. El contingut de la caixa es desborda i s’encavalca desordenadament sobre el paràgraf que hi ha a sota.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}

- -

El segon consisteix en una paraula dins d'una caixa en la qual s’ha restringit la dimensió de línia. La caixa s'ha fet massa petita perquè la paraula hi càpiga, i acaba sortint més enllà de la caixa.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}

- -

Pot ser que et preguntis per què el CSS ha adoptat per defecte l’enfocament més aviat desarreglat de provocar el desbordament del contingut. Per què no amagar el contingut de més, o fer créixer la caixa?

- -

Sempre que és possible, el CSS no amaga cap part de contingut; fer-ho provocaria la pèrdua de dades, i això acostuma a ser un problema. En termes de CSS, això significa que una part del contingut desapareix. El problema que el contingut s’esvaeixi és que podria passar que no t'adonis que ha desaparegut. Pot passar que els visitants de la teva pàgina no s'adonin que ha desaparegut. Pot tractar-se del botó d'enviament d'un formulari, i ningú no podria completar el formulari; això, és un gran problema! Per tant, el CSS tendeix a desbordar-se de manera visible. D’aquesta manera és probable que t’adonis del desperfecte o, en el pitjor dels casos, que un visitant del teu lloc web t'informi que una part del contingut s’encavalca amb una altra, i que s’ha de rectificar.

- -

Si has restringit la mida d’una caixa amb width o height, el CSS suposa que saps què fas i que gestiones el potencial de desbordament. En general, restringir la mida d’un bloc és problemàtic quan es col·loca text en una caixa, perquè pot haver-hi més text del que esperaves en el moment de dissenyar un lloc web, o que el text ocupi més espai, per exemple, perquè l'usuari ha augmentat la mida de la lletra.

- -

En el proper parell d’articles veurem diferents maneres de controlar la mida que poden ser menys propenses al desbordament. Tanmateix, també pots controlar la manera com es comporta el desbordament si necessites una mida fixa. Continua llegint!

- -

La propietat overflow

- -

La propietat {{cssxref("overflow")}} és la manera de prendre el control del desbordament d'un element i dir al navegador com volem que s’hi comporti. El valor per defecte del desbordament és visible, és per això que per defecte podem veure el nostre contingut quan es desborda.

- -

Si vols que el contingut que desborda es talli, pots establir el valor overflow: hidden per a la caixa. Això farà exactament el que diu: amagar el desbordament. Això pot causar la desaparició de les coses, de manera que només ho hauries de fer si ocultar contingut no causarà cap problema.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}

- -

Potser voldries posar barres de desplaçament quan el contingut es desborda. Si utilitzes overflow: scroll, el navegador sempre mostra les barres de desplaçament, fins i tot quan no hi ha prou contingut per a desbordar-se. Pot ser que vulguis fer-ho així perquè evita que les barres de desplaçament apareguin i desapareguin en funció del contingut.

- -

Observa que si vas traient part del contingut que hi ha en la caixa següent, les barres de desplaçament de la caixa es mantenen, fins i tot quan no hi ha res per desplaçar.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}

- -

En l’exemple anterior només hem de desplaçar-nos per l’eix y, però tenim barres de desplaçament en els dos eixos. En lloc d’això, podries utilitzar la propietat {{cssxref("overflow-y")}} i establir overflow-y: scroll, i et desplaçaries només sobre l'eix y.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}

- -

També pots desplaçar-te sobre l'eix x amb {{cssxref("overflow-x")}}, tot i que no és recomanable quan apareixen paraules llargues. Consulta les propietats {{cssxref("word-break")}} o {{cssxref("overflow-wrap")}} si has de treballar amb paraules llargues en una caixa petita. També et poden ajudar a crear caixes que s’adaptin més bé segons la quantitat de contingut alguns dels mètodes que s’exposen en l’apartat Dimensionament d’elements amb CSS.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}

- -

Igual que amb scroll, obtindràs una barra de desplaçament en la dimensió de desplaçament si hi ha prou contingut per provocar l’aparició d’una barra de desplaçament.

- -
-

Nota: pots especificar el desplaçament en x i en y amb la propietat overflow passant-hi dos valors. Si s’especifiquen dues paraules clau, la primera s’aplica a overflow-x i la segona a overflow-y. En cas contrari, tant overflow-x com overflow-y s’estableixen en el mateix valor. Per exemple, overflow: scroll hidden configuraria overflow-x per a scroll i overflow-y per a hidden.

-
- -

Si vols que les barres de desplaçament apareguin només si hi ha més contingut del que es pot incloure dins de la caixa, utilitza overflow: auto. En aquest cas, el navegador decideix quan mostra les barres de desplaçament. Els navegadors per als equips d'escriptori normalment ho fan només quan hi ha prou contingut per a provocar desbordament.

- -

En l’exemple següent, elimina una mica de contingut fins que no càpiga en la caixa i observa que les barres de desplaçament desapareixen.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}

- -

El desbordament estableix un context de formatació de bloc

- -

Hi ha un concepte en CSS que s'anomena block formatting context (context de formatació de bloc) o BFC. No és res que t'hagi de preocupar gaire ara mateix, però és útil saber que quan empres un valor de desbordament com ara scroll o auto, crees un BFC. El resultat és que el contingut de la caixa en què has canviat el valor overflow es converteix en un mini disseny de pàgina web propi. Les coses que hi ha fora del contenidor no poden ficar-se en el contenidor, i res pot sobresortir de la caixa cap als elements del disseny de pàgina web del voltant. Això és per permetre el comportament amb desplaçament, perquè per a crear una experiència de desplaçament coherent, tot el contingut de la caixa ha d’estar-hi contingut i no en pot sobresortir ni superposar-se amb altres elements de la pàgina.

- -

Desbordaments no volguts en el disseny web

- -

Els mètodes de disseny moderns (tal com es recull en el mòdul de Disseny de pàgines web amb CSS) gestionen molt bé el desbordament. Han estat dissenyats per fer front al fet que normalment no podem predir la quantitat de contingut que hi haurà en una pàgina web. En el passat, però, els desenvolupadors solien utilitzar altures fixes per a intentar alinear els extrems inferiors de caixes que en realitat no tenien cap relació entre elles. Això era fràgil, i encara et pots topar amb aplicacions heretades en què el contingut d’una caixa se superposa amb un altre contingut de la pàgina. Si veus això, sabràs que es tracta de desbordament; l'ideal seria que tornis a fer un càlcul de les mides dels elements de disseny de la pàgina per no haver de dependre de mides de caixa fixes.

- -

En desenvolupar un lloc sempre has de tenir en compte els problemes de desbordament. Has de provar els dissenys amb quantitats de contingut grans i petites, augmentar la mida de la lletra del text i assegurar-te que el teu CSS pot fer-ho de manera coherent. És probable que et vulguis reservar les opcions de canviar el valor de desbordament per ocultar contingut o afegir barres de desplaçament només per a casos especials, per exemple, per quan realment vols una caixa amb barres de desplaçament.

- -

Posa a prova els teus coneixements

- -

Hi ha moltes coses a absorbir en aquesta lliço. En recordes la informació més important? Per comprovar-ho, vés a Test your skills: overflow.

- -

Resum

- -

Aquest breu article ha introduït el concepte de desbordament; ara entens que el CSS intenta no invisibilitzar el contingut que es desborda perquè això causa la pèrdua de dades. Has descobert que pots gestionar un desbordament potencial i també que has de fer proves per assegurar-te que la teva feina no causa accidentalment desbordaments problemàtics.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Els selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diferents direccions
    6. -
  6. El desbordament del contingut
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionament d’elements amb CSS
    9. -
  9. Imatges, media i controls de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depura el teu CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/dimensionar_elements_en_css/index.html b/files/ca/learn/css/building_blocks/dimensionar_elements_en_css/index.html deleted file mode 100644 index 5ff34b8d93..0000000000 --- a/files/ca/learn/css/building_blocks/dimensionar_elements_en_css/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Dimensionar elements en CSS -slug: Learn/CSS/Building_blocks/Dimensionar_elements_en_CSS -translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}
- -

En els articles que hem vist fins ara has descobert diverses maneres de dimensionar els elements d'una pàgina web amb CSS. És important entendre la importància de les diferents característiques dels elements del teu disseny, i en aquest article resumim les maneres com assignar una mida als elements amb CSS i definim uns quants termes relatius al dimensionament que t'ajudaran en el futur.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Entendre les diferents maneres com podem assignar mides als elements amb CSS.
- -

La mida natural o intrínseca de les coses

- -

Els elements HTML tenen una mida natural predeterminada abans que els afecti cap codi CSS. Un exemple senzill n’és una imatge. Una imatge té una amplada i una alçada definides en el fitxer d'imatge, que s'incorpora a la pàgina. Aquesta mida es descriu com la mida intrínseca, que prové de la imatge mateixa.

- -

Quan poses una imatge en una pàgina i no en canvies l’alçada i l’amplada, ja sigui amb atributs en l’etiqueta <img> o amb el CSS, es mostra amb aquesta mida intrínseca. Hem donat a la imatge de l’exemple següent una vora perquè puguis veure la dimensió que té el fitxer.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}

- -

Un element {{htmlelement("div")}} buit, però, no té mida pròpia. Si afegeixes un element {{htmlelement("div")}} sense contingut al teu HTML, i hi poses una vora, com hem fet abans amb la imatge, veuràs que a la pàgina apareix una línia. Es tracta de la vora de l'element replegat sobre si mateix perquè no té contingut que el mantingui obert. En el nostre exemple següent, aquesta vora s'estén per tota l'amplada de l’element que el conté, perquè és un element que té un comportament de bloc, amb el qual ja t'hauries de començar a familiaritzar. No té alçada (ni mida en la dimensió del bloc) perquè no hi ha contingut.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}

- -

Afegeix una mica de text a l'interior de l'element buit de l'exemple anterior. Ara la vora envolta aquest text perquè el contingut defineix l'altura de l'element. La mida d'aquest element <div> en la dimensió del bloc prové, per tant, de la mida del contingut. Una vegada més, aquesta és la mida intrínseca de l'element: el contingut en defineix la mida.

- -

Configurar una mida específica

- -

Per descomptat, podem donar una mida específica als elements del nostre disseny. Quan es dona una mida a un element (el contingut del qual hauria d’encaixar en aquesta mida) ens hi referim com la mida extrínseca. Agafa els elements <div> de l'exemple anterior: podem donar-los valors específics d'amplada i d'alçada, i aleshores tindran aquesta mida, independentment del contingut que hi fiquem a dins. Tal com vam descobrir en l’anterior article sobre el desbordament, una altura fixa pot provocar el desbordament del contingut si el contingut no cap en l’espai de la caixa.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}

- -

Arranjar l'alçada dels elements amb longituds o percentatges s’ha de fer amb molta cura justament pel problema del desbordament.

- -

L'ús de percentatges

- -

En molts sentits, els percentatges actuen com unitats de longitud, i com hem comentat en l'article sobre valors i unitats, sovint es poden intercanviar amb les longituds. Quan fas servir un percentatge has de ser conscient de què és percentatge. En el cas d’una caixa dins d’un altre contenidor, si dones a la caixa secundària un percentatge d’amplada, serà un percentatge de l’amplada del contenidor principal.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}

- -

Això és perquè els percentatges es calculen a partir de la mida del bloc contenidor. Sense un percentatge aplicat, el nostre element <div> ocuparia el 100% de l'espai disponible, perquè és un element de bloc. Si hi donem un percentatge d’amplada, es converteix en un percentatge de l’espai que ompliria normalment.

- -

Marges i àrea de farciment com a percentatges

- -

Si estableixes margins i padding com percentatges, pot ser que observis algun comportament estrany. En l’exemple següent hi ha una caixa. Hem assignat a la caixa interior un marge ({{cssxref("margin")}}) del 10% i un àrea de farciment ({{cssxref("padding")}}) també del 10%. L'àrea de farciment i el marge de les parts superior i inferior de la caixa tenen la mateixa mida que els marges de l’esquerra i la dreta.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}

- -

Podries esperar, per exemple, que el percentatge dels marges superior i inferior sigui un percentatge de l'alçada de l'element, i que el percentatge dels marges esquerre i dret sigui un percentatge de l'amplada de l'element. Però aquest no és el cas!

- -

Quan utilitzes marges i àrees de farciment definits en percentatges, el valor es calcula a partir de la mida de l’element de línia, per tant, de l'amplada de l'element quan es treballa en un llenguatge horitzontal. En el nostre exemple, tots els marges i l'àrea de farciment són del 10% de l'amplada de l'element. Això significa que pots tenir marges i àrea de farciment de la mateixa mida al voltant de la caixa. És un fet que val la pena de recordar si utilitzes els percentatges d'aquesta manera.

- -

Mida mínima i màxima

- -

A més d’assignar mides fixes a les coses, podem demanar al CSS que doni a un element una mida mínima o màxima. Si tens una caixa que pot contenir una quantitat variable de contingut i vols que sempre tingui una alçada determinada com a mínim, pots establir la propietat {{cssxref("min-height")}}. La caixa sempre serà almenys d'aquesta alçada, però creixerà si hi ha més contingut del que pot contenir amb aquesta alçada mínima.

- -

En l'exemple següent hi ha dues caixes, totes dues amb una alçada establerta en 150 píxels. La caixa de l’esquerra té 150 píxels d’alçada; la caixa de la dreta ha augmentat la mida a més de 150 píxels perquè té més contingut i no hi cabria.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}

- -

Això és molt útil per tractar amb quantitats de contingut variables i evitar desbordaments.

- -

Un ús comú de {{cssxref("max-width")}} és reduir les imatges si no hi ha prou espai perquè es mostrin amb l’amplada intrínseca, alhora que es garanteix que no superen l'alçada de la caixa.

- -

Per exemple, si una imatge té una amplada intrínseca més petita que la de l’element que la conté i hi estableixes una amplada de width: 100%, la imatge s’estirarà i es farà gran, i podria pixelar-se. En canvi, si l’amplada intrínseca fos més gran que l’element que la conté, desbordaria. És probable que no vulguis que passi cap d'aquestes dues coses.

- -

Si en lloc d'això utilitzes max-width: 100%, la imatge es pot fer més petita que la seva mida intrínseca, però no es farà més gran que el 100% de la seva mida.

- -

En l'exemple següent hem utilitzat dues vegades la mateixa imatge. A la primera hi hem donat width: 100%, i com que està continguda en un recipient més gran, s'estén per tota l'amplada del contenidor. La segona imatge, en canvi, té max-width: 100%, i no s’estira per ocupar tot el recipient. La tercera caixa torna a contenir la mateixa imatge, amb max-width: 100%; en aquest cas pots observar com s’ha reduït per encaixar dins la caixa.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}

- -

Aquesta tècnica s’utilitza per fer que les imatges siguin adaptatives, de manera que quan es visualitzen en un dispositiu més petit es redueixen adequadament. Però no has d'utilitzar aquesta tècnica per carregar imatges molt grans i després reduir-les en el navegador. Les imatges han de tenir una mida adequada i no han de ser més grans del que es necessita en relació amb la mida més gran en què es poden mostrar en el disseny. La descàrrega d’imatges massa grans fa que el teu lloc web vagi més lent i pot ser més car per als usuaris que tenen una connexió amb comptador de dades.

- -
-

Nota: Troba més informació sobre les tècniques d’imatges adaptatives.

-
- -

Unitats de finestra gràfica

- -

La finestra gràfica (que és l’àrea visible de la teva pàgina en el navegador que utilitzes per visitar un lloc web) també té una mida. En CSS hi ha unes unitats que es relacionen amb la mida de la finestra gràfica: la unitat vw per a l'amplada i la unitat vh per a l'alçada. Amb aquestes unitats pots establir mides relatives a la finestra gràfica de l'usuari.

- -

1vh és igual a l'1% de l’alçada de la finestra gràfica, i 1vw és igual a l’1% de l’amplada de la finestra gràfica. Pots fer servir aquestes unitats per a dimensionar les caixes, però també el text. A l'exemple següent tenim una caixa que té una mida de 20vh i 20vw. La caixa conté una lletra A, que ha rebut un valor {{cssxref("font-size")}} de 10vh.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}

- -

Si canvies els valors de vh i vw, canvia la mida de la caixa o de la lletra; si canvies la mida de la finestra gràfica, també canvien les mides de la caixa i de la lletra perquè es mostren en relació amb la finestra gràfica. Per veure com canvia l'exemple quan canvies la mida de la finestra gràfica, has de carregar l'exemple en una finestra nova del navegador que puguis redimensionar (perquè la teva finestra gràfica és l’<iframe> incorporat que conté l'exemple anterior). Obre l'exemple, redimensiona la finestra del navegador i observa què passa amb la mida de la caixa i del text.

- -

Dimensionar les coses segons la finestra gràfica pot ser útil en els teus dissenys. Per exemple, si vols que una secció principal es mostri a pantalla completa abans que la resta del contingut, fes que aquella part de la pàgina tingui un 100vh d’alçada i empenyerà la resta del contingut fora de la finestra gràfica, i això significa que només apareixerà quan l'usuari es desplaci pel document.

- -

Resum

- -

Aquest article t'ha proporcionat un resum dels problemes principals que podries trobar-te a l’hora de dimensionar les coses en un lloc web. En passar a l’article de Disseny de pàgines web amb CSS, la mida serà un aspecte molt important per a dominar els diferents mètodes de disseny, per la qual cosa val la pena entendre els conceptes que s'han explicat aquí abans de continuar.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Els selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diferents direccions
    6. -
  6. El desbordament del contingut
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionar elements en CSS
    9. -
  9. Imatges, mèdia i elements de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depura el teu CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/fons_i_vores/index.html b/files/ca/learn/css/building_blocks/fons_i_vores/index.html deleted file mode 100644 index 2e2ce4727c..0000000000 --- a/files/ca/learn/css/building_blocks/fons_i_vores/index.html +++ /dev/null @@ -1,307 +0,0 @@ ---- -title: Fons i vores -slug: Learn/CSS/Building_blocks/Fons_i_vores -translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}
- -

En aquest article veurem algunes de les coses creatives que pots fer amb fons i vores amb el CSS. Des d’afegir degradats o imatges de fons fins a arrodonir cantonades; els fons i les vores són la solució per a moltes qüestions d’estil en CSS.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Aprendre a aplicar estil al fons i la vora de les caixes.
- -

Aplicar estil als fons amb CSS

- -

La propietat CSS {{cssxref("background")}} és una propietat abreviada que substitueix un seguit de propietats de fons que presentarem en aquest article. Quan et trobes amb una propietat de fons complexa en un full d’estil, pot ser que et sembli una mica difícil d’entendre perquè es poden estar passant molts valors alhora.

- -
.box {
-  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
-  url(big-star.png) center no-repeat, rebeccapurple;
-} 
-
- -

Més endavant en aquest tutorial tornarem a l’objectiu de com funcionen les propietats abreviades, però primer fem un cop d’ull a les diverses coses que pots fer amb els fons amb el CSS, a partir de cadascuna de les propietats dels fons.

- -

Els colors de fons

- -

La propietat {{cssxref("background-color")}} defineix el color de fons de qualsevol element en CSS. La propietat accepta qualsevol color (<color>) vàlid. Un color de fons s'estén per sota del contingut i del farciment de la caixa.

- -

En l'exemple següent hem utilitzat diversos valors de color per a afegir un color de fons a la caixa, un títol d’encapçalament i un element {{htmlelement("span")}}.

- -

Juga a fer servir qualsevol valor de <color> disponible.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}

- -

Les imatges de fons

- -

La propietat {{cssxref("background-image")}} permet visualitzar una imatge de fons en un element. En l'exemple següent hi ha dues caixes: una té una imatge de fons que és més gran que la caixa, l'altra té una imatge petita en forma d’estrella.

- -

Aquest exemple mostra dues coses sobre les imatges de fons. La imatge gran no es redueix de manera predeterminada per a adaptar-se a la caixa, sinó que només en veiem un tros petit d’una cantonada, mentre que la imatge petita es mostra en mosaic fins a omplir la caixa. La imatge en aquest cas és en realitat una única estrella.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}

- -

Si especifiques un color de fons a més d'una imatge de fons, la imatge es mostra a sobre. Afegeix una propietat background-color a l'exemple de dalt i observa-ho en acció.

- -

Control amb la propietat background-repeat

- -

La propietat {{cssxref("background-repeat")}} s'utilitza per a controlar el comportament en mosaic de les imatges. Els valors disponibles són:

- - - -

Prova aquests valors en l'exemple següent. Hem establert la propietat al valor no-repeat, de manera que només veuràs una estrella. Prova els diferents valors repeat-x i repeat-y i observa’n els efectes.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}

- -

Les mides de la imatge de fons

- -

En l'exemple anterior hi ha una imatge gran que ha acabat retallada perquè és més gran que el fons. En aquest cas podríem utilitzar la propietat {{cssxref("background-size")}}, que pot prendre valors de longitud o percentatge, per a dimensionar la imatge i que s'ajusti al fons.

- -

També pots utilitzar paraules clau:

- - - -

En l'exemple següent hem utilitzat la imatge més gran de l'exemple anterior i unitats de longitud per dimensionar-la dins de la caixa. Observa que això ha distorsionat la imatge.

- -

Fes la prova següent.

- - - -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}

- -

La ubicació de la imatge de fons

- -

La propietat {{cssxref("background-position")}} et permet triar la posició en què apareix la imatge de fons en la caixa a la qual s'aplica. Fa servir un sistema de coordenades en què el (0,0) és a la part superior esquerra de la caixa, i la caixa es posiciona sobre els eixos horitzontal (x) i vertical ((y).

- -
-

Nota: El valor per defecte de background-position és (0,0).

-
- -

Els valors de background-position més comuns prenen dos valors independents: un valor horitzontal seguit d'un valor vertical.

- -

També pots utilitzar paraules clau com top i right (busca la resta de possibilitats en la pàgina sobre la propietat {{cssxref("background-position")}}):

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top center;
-} 
-
- -

I longituds i percentatges:

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: 20px 10%;
-} 
-
- -

També pots barrejar valors de paraules clau amb longituds o percentatges, per exemple:

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top 20px;
-}
- -

Finalment, també pots utilitzar una sintaxi de 4 valors per a indicar una distància des de determinades cantonades de la caixa; la unitat de longitud en aquest cas és un desplaçament del valor que la precedeix. Així, doncs, en el CSS de sota, posicionem el fons a 20px de l’extrem superior i 10px de l’extrem dret:

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top 20px right 10px;
-}
- -

Juga amb aquests valors en l'exemple següent i mou l'estrella per la caixa.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}

- -
-

Nota: background-position és una propietat abreviada de {{cssxref ("background-position-x")}} i {{cssxref ("background-position-y")}}, que et permeten establir els diferents valors de posició de l'eix per separat.

-
- -

Degradats de fons

- -

Un degradat (quan s'utilitza per a un fons) actua igual que una imatge i també es defineix amb la propietat {{cssxref("background-image")}}.

- -

Pots llegir més informació sobre els diferents tipus de degradats i què pots fer amb ells en la pàgina sobre els tipus de dades <gradient> de MDN. Una manera divertida de jugar amb els degradats és utilitzar un dels molts generadors de degradats CSS que hi ha disponibles al web, com aquest. Pots crear un degradat i copiar i enganxar el codi font que el genera.

- -

Prova alguns degradats diferents en l'exemple següent. En les dues caixes hi ha, respectivament, un degradat lineal que s’estén per tota la caixa i un degradat radial amb una mida fixa, que per tant es repeteix.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}

- -

Múltiples imatges de fons

- -

També és possible posar més d’una imatge de fons: especifica amb una sola propietat background-image els diversos valors, separats cadascun per una coma.

- -

En fer-ho, pot passar que les imatges de fons es superposin entre elles. Els fons es disposen amb la darrera imatge de fons enumerada a la part inferior de la pila, i cada imatge anterior s’apila a sobre de la que la segueix en el codi.

- -
-

Nota: Els degradats es poden barrejar feliçment amb imatges de fons normals.

-
- -

Les altres propietats background-* també poden tenir valors separats per comes, de la mateixa manera que background-image:

- -
background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
-background-repeat: no-repeat, repeat-x, repeat;
-background-position: 10px 20px,  top right;
- -

Cada valor de les diverses propietats coincideix amb els valors que estan en la mateixa posició en les altres propietats. Aquí sobre, per exemple, el valor per a la propietat background-repeat d’image1 és no-repeat. Però, què passa quan propietats diferents tenen una quantitat diferent de valors? La resposta és que els valors que ocupen les posicions més petites s'alternen cíclicament: en l'exemple anterior hi ha quatre imatges de fons però només dos valors background-position. Les dues primeres posicions s’apliquen a les dues primeres imatges, i després els valores es tornen a assignar cíclicament: el valor de la primera posició s’aplica a image3, i el valor de segona posició, a image4.

- -

Juguem! En l'exemple següent hem inclòs dues imatges. Per a comprovar l'ordre d'apilament, canvia la imatge de fons que apareix primer en la llista. O juga amb les altres propietats i canvia’n els valors de posició i mida, o la repetició.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}

- -

Ancoratge del fons

- -

Una altra opció que hi ha disponible per als fons és especificar com es desplacen quan es desplaça el contingut. Això es controla amb la propietat {{cssxref("background-attachment")}}, que pot prendre els valors següents:

- - - -

La propietat {{cssxref("background-attachment")}} només funciona quan hi ha contingut pel qual et pots desplaçar; hem preparat un exemple que mostra les diferències entre els tres valors: fes-hi un cop d’ull a background-attachment.html (també en pots consultar el codi font aquí).

- -

Ús de la propietat abreviada background

- -

Com hem esmentat al començament d'aquest article, sovint veuràs fons que estan especificats amb la propietat {{cssxref("background")}}. Aquesta propietat abreviada et permet configurar totes les propietats diferents alhora.

- -

Si fas servir diversos fons, has d’especificar totes les propietats per al primer fons, i a continuació afegir-hi el fons següent, després d’una coma. En l'exemple següent hi ha un degradat amb una mida i una posició, i després un fons d'imatge amb no-repeat i una posició, i després un color.

- -

Quan s’escriuen els valor abreviats de les imatges de fons cal seguir unes regles, per exemple:

- - - -

Consulta la pàgina sobre {{cssxref("background")}} de MDN per a veure’n totes les possibilitats.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}

- -

Consideracions d’accessibilitat relatives als fons

- -

Quan poses un text sobre una imatge o un color de fons, t’has d’assegurar que té prou contrast perquè els usuaris el poden llegir. Si poses una imatge de fons i el text s’hi llegeix a sobre, també has d'especificar un color de fons que permeti llegir el text si la imatge no es carrega.

- -

Els lectors de pantalla no poden analitzar les imatges de fons, de manera que aquestes haurien de ser purament decoratives; qualsevol contingut important hauria de formar part de la pàgina HTML, i no estar continguda en segon pla.

- -

Vores

- -

En aprendre el model de caixes, vam descobrir com afecten les vores a la mida de la caixa. En aquesta secció veurem com emprar les vores de manera creativa. Normalment, quan afegim vores a un element amb CSS, utilitzem una propietat abreviada que estableix el color, l'amplada i l'estil de la vora en una línia de CSS.

- -

Podem establir una vora per als quatre costats d'una caixa amb la propietat {{cssxref("border")}}:

- -
.box {
-  border: 1px solid black;
-}
- -

O podem establir una sola vora de la caixa, per exemple:

- -
.box {
-  border-top: 1px solid black;
-}
- -

Cadascuna d’aquestes propietats abreviades seria:

- -
.box {
-  border-width: 1px;
-  border-style: solid;
-  border-color: black;
-}
- -

I per a les no abreviades seria:

- -
.box {
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-top-color: black;
-}
- -
-

Nota: Aquestes propietats de la vora superior, dreta, inferior i esquerra també tenen mapades propietats lògiques relacionades amb el mode d'escriptura del document (per exemple, text d'esquerra a dreta o de dreta a esquerra, o de dalt a baix). Ho explorarem en l’article següent, que inclou el tractament del text en diverses direccions.

-
- -

Amb les vores es poden emprar una gran varietat d'estils. En l'exemple següent hem utilitzat un estil de vora diferent per als quatre costats de la caixa. Juga amb l'estil, l'amplada i el color de la vora per veure com funcionen les vores.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}

- -

Les cantonades arrodonides

- -

L’arrodoniment de les cantonades d'una caixa s’aconsegueix amb la propietat {{cssxref("border-radius")}} i les propietats associades que es relacionen amb cada cantó de la caixa. Es poden utilitzar dues longituds o percentatges com a valor; el primer valor defineix el radi horitzontal, i el segon el radi vertical. En molts casos només faràs servir un valor, que s'utilitzarà per a tots dos.

- -

Per exemple, pots fer que les quatre cantonades d’una caixa tinguin un radi de 10px:

- -
.box {
-  border-radius: 10px;
-}
- -

O que la cantonada superior dreta tingui un radi horitzontal d’1em i un radi vertical del 10%:

- -
.box {
-  border-top-right-radius: 1em 10%;
-}
- -

Hem fixat les quatre cantonades de l'exemple següent i després hem canviat els valors de l'extrem superior dret perquè sigui diferent. Juga amb els valors i canvia les cantonades. Consulta la pàgina de propietats de {{cssxref("border-radius")}} i esbrina les opcions de sintaxi disponibles.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}

- -

Posa a prova les teves habilitats

- -

Hem vist moltes coses en aquest article. Recordes la informació més important? Trobaràs més proves per verificar que retens la informació abans de seguir a Test your skills: Backgrounds and Borders.
-  

- -

Resum

- -

En aquest articles hem descobert força conceptes, i pots veure que hi ha molt per afegir a un fons o una vora d'una caixa. Consulta les diverses pàgines de propietat si vols obtenir més informació sobre alguna de les funcions que hem comentat. Cada pàgina de MDN té més exemples d’ús amb què pots jugar i ampliar els teus coneixements.

- -

En el proper article descobrirem com interactua el mode d'escriptura del document amb el CSS. Què passa quan el text no flueix d'esquerra a dreta?

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Els selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diverses direccions
    6. -
  6. El desbordament de continguts
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionar elements en CSS
    9. -
  9. Imatges, mèdia i elements de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depura el teu CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ca/learn/css/building_blocks/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..34a654269a --- /dev/null +++ b/files/ca/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -0,0 +1,114 @@ +--- +title: Comprensió CSS fonamental +slug: Learn/CSS/Introducció_a_CSS/Comprensió_CSS_fonamental +tags: + - Assessment + - Beginner + - CSS + - CodingScripting + - Selectors + - Style + - Syntax + - box model + - comments + - rules +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
+ +

Heu cobert molt en aquest mòdul, de manera que us heu de sentir bé d'haver arribat al final!. El pas final abans de continuar és intentar l'avaluació del mòdul: això implica una sèrie d'exercicis relacionats que s'han de completar per crear el disseny final - un perfil de targeta de visita/targeta de jugador/perfil social.

+ + + + + + + + + + + + +
Requisits previs:Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.
Objectiu:Comprovar la comprensió de la teoria CSS fonamental, la sintaxi i la mecànica
+ +

Punt de partida

+ +

Per començar aquesta avaluació, heu de:

+ + + +
+

Nota: D'altra banda, podeu utilitzar un lloc com JSBin o Thimble per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia i utilitzar aquest URL per indicar a l'element <img> el fitxer d'imatge. Si l'editor en línia que esteu utilitzant no té cap panell CSS separat, no dubteu a posar-lo en un element <style> al capdavant del document.

+
+ +

Resum del projecte

+ +

Se us ha proporcionat un mica d'HTML sense processar i una imatge, i heu d'escriure el CSS necessari per d'introduir una mica d'estil bonic en una targeta de negocis en línia, que potser es pot duplicar com a targeta de jugador o perfil de xarxes socials. Les següents seccions descriuen el que heu de fer.

+ +

Configuració bàsica:

+ + + +

Tingueu cura dels selectors i els conjunts de regles proporcionats:

+ + + +

Nou conjunt de regles que necessiteu escriure :

+ + + +

Altres coses a pensar:

+ + + +

Consells i suggeriments

+ + + +

Exemple

+ +

La següent captura de pantalla mostra un exemple del que hauria de tenir el disseny acabat:

+ +

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

+ +

 

+ +

Avaluació

+ +

Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema en el fil de conversa en l'àrea d'aprenentatge, o en el canal IRC #mdn en Mozilla IRC. Intenteu primer l'exercici - no es guanya res fent trampes!

+ +

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

diff --git a/files/ca/learn/css/building_blocks/overflowing_content/index.html b/files/ca/learn/css/building_blocks/overflowing_content/index.html new file mode 100644 index 0000000000..2ee0dc6129 --- /dev/null +++ b/files/ca/learn/css/building_blocks/overflowing_content/index.html @@ -0,0 +1,123 @@ +--- +title: Desbordament de contingut +slug: Learn/CSS/Building_blocks/Desbordament_de_contingut +translation_of: Learn/CSS/Building_blocks/Overflowing_content +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}
+ +

En aquest apartat veurem un altre concepte important en CSS: el desbordament. El desbordament és el que succeeix quan hi ha massa contingut i no cap còmodament en una caixa. En aquesta guia aprendràs què és i com gestionar-lo.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions de CSS (consulta els Primers passos amb el CSS).
Objectiu:Entendre el desbordament i com gestionar-lo.
+ +

Què és el desbordament?

+ +

Ja sabem que tot en CSS són caixes i que podem restringir la mida d’aquestes caixes assignant valors als atributs {{cssxref("width")}} i {{cssxref("height")}} (o {{cssxref("inline-size")}} i {{cssxref("block-size")}}). El desbordament és el que succeeix quan dins d’una caixa hi ha massa contingut i no hi cap. El CSS t'ofereix diverses eines per a gestionar aquest desbordament, i també és un concepte útil de comprendre en aquesta fase inicial. Et trobaràs amb situacions de desbordament força sovint quan escriguis CSS, sobretot quan aprofundeixis en el disseny de pàgines web amb CSS.

+ +

El CSS tracta d'evitar «la pèrdua de dades»

+ +

Comencem per examinar dos exemples que mostren com es comporta per defecte el CSS quan es desborda.

+ +

El primer és una caixa a la que s’han restringit les dimensions del bloc en donar-hi una alçada (height). Després s’hi ha afegit més contingut del que cap en l’espai de la caixa. El contingut de la caixa es desborda i s’encavalca desordenadament sobre el paràgraf que hi ha a sota.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}

+ +

El segon consisteix en una paraula dins d'una caixa en la qual s’ha restringit la dimensió de línia. La caixa s'ha fet massa petita perquè la paraula hi càpiga, i acaba sortint més enllà de la caixa.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}

+ +

Pot ser que et preguntis per què el CSS ha adoptat per defecte l’enfocament més aviat desarreglat de provocar el desbordament del contingut. Per què no amagar el contingut de més, o fer créixer la caixa?

+ +

Sempre que és possible, el CSS no amaga cap part de contingut; fer-ho provocaria la pèrdua de dades, i això acostuma a ser un problema. En termes de CSS, això significa que una part del contingut desapareix. El problema que el contingut s’esvaeixi és que podria passar que no t'adonis que ha desaparegut. Pot passar que els visitants de la teva pàgina no s'adonin que ha desaparegut. Pot tractar-se del botó d'enviament d'un formulari, i ningú no podria completar el formulari; això, és un gran problema! Per tant, el CSS tendeix a desbordar-se de manera visible. D’aquesta manera és probable que t’adonis del desperfecte o, en el pitjor dels casos, que un visitant del teu lloc web t'informi que una part del contingut s’encavalca amb una altra, i que s’ha de rectificar.

+ +

Si has restringit la mida d’una caixa amb width o height, el CSS suposa que saps què fas i que gestiones el potencial de desbordament. En general, restringir la mida d’un bloc és problemàtic quan es col·loca text en una caixa, perquè pot haver-hi més text del que esperaves en el moment de dissenyar un lloc web, o que el text ocupi més espai, per exemple, perquè l'usuari ha augmentat la mida de la lletra.

+ +

En el proper parell d’articles veurem diferents maneres de controlar la mida que poden ser menys propenses al desbordament. Tanmateix, també pots controlar la manera com es comporta el desbordament si necessites una mida fixa. Continua llegint!

+ +

La propietat overflow

+ +

La propietat {{cssxref("overflow")}} és la manera de prendre el control del desbordament d'un element i dir al navegador com volem que s’hi comporti. El valor per defecte del desbordament és visible, és per això que per defecte podem veure el nostre contingut quan es desborda.

+ +

Si vols que el contingut que desborda es talli, pots establir el valor overflow: hidden per a la caixa. Això farà exactament el que diu: amagar el desbordament. Això pot causar la desaparició de les coses, de manera que només ho hauries de fer si ocultar contingut no causarà cap problema.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}

+ +

Potser voldries posar barres de desplaçament quan el contingut es desborda. Si utilitzes overflow: scroll, el navegador sempre mostra les barres de desplaçament, fins i tot quan no hi ha prou contingut per a desbordar-se. Pot ser que vulguis fer-ho així perquè evita que les barres de desplaçament apareguin i desapareguin en funció del contingut.

+ +

Observa que si vas traient part del contingut que hi ha en la caixa següent, les barres de desplaçament de la caixa es mantenen, fins i tot quan no hi ha res per desplaçar.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}

+ +

En l’exemple anterior només hem de desplaçar-nos per l’eix y, però tenim barres de desplaçament en els dos eixos. En lloc d’això, podries utilitzar la propietat {{cssxref("overflow-y")}} i establir overflow-y: scroll, i et desplaçaries només sobre l'eix y.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}

+ +

També pots desplaçar-te sobre l'eix x amb {{cssxref("overflow-x")}}, tot i que no és recomanable quan apareixen paraules llargues. Consulta les propietats {{cssxref("word-break")}} o {{cssxref("overflow-wrap")}} si has de treballar amb paraules llargues en una caixa petita. També et poden ajudar a crear caixes que s’adaptin més bé segons la quantitat de contingut alguns dels mètodes que s’exposen en l’apartat Dimensionament d’elements amb CSS.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}

+ +

Igual que amb scroll, obtindràs una barra de desplaçament en la dimensió de desplaçament si hi ha prou contingut per provocar l’aparició d’una barra de desplaçament.

+ +
+

Nota: pots especificar el desplaçament en x i en y amb la propietat overflow passant-hi dos valors. Si s’especifiquen dues paraules clau, la primera s’aplica a overflow-x i la segona a overflow-y. En cas contrari, tant overflow-x com overflow-y s’estableixen en el mateix valor. Per exemple, overflow: scroll hidden configuraria overflow-x per a scroll i overflow-y per a hidden.

+
+ +

Si vols que les barres de desplaçament apareguin només si hi ha més contingut del que es pot incloure dins de la caixa, utilitza overflow: auto. En aquest cas, el navegador decideix quan mostra les barres de desplaçament. Els navegadors per als equips d'escriptori normalment ho fan només quan hi ha prou contingut per a provocar desbordament.

+ +

En l’exemple següent, elimina una mica de contingut fins que no càpiga en la caixa i observa que les barres de desplaçament desapareixen.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}

+ +

El desbordament estableix un context de formatació de bloc

+ +

Hi ha un concepte en CSS que s'anomena block formatting context (context de formatació de bloc) o BFC. No és res que t'hagi de preocupar gaire ara mateix, però és útil saber que quan empres un valor de desbordament com ara scroll o auto, crees un BFC. El resultat és que el contingut de la caixa en què has canviat el valor overflow es converteix en un mini disseny de pàgina web propi. Les coses que hi ha fora del contenidor no poden ficar-se en el contenidor, i res pot sobresortir de la caixa cap als elements del disseny de pàgina web del voltant. Això és per permetre el comportament amb desplaçament, perquè per a crear una experiència de desplaçament coherent, tot el contingut de la caixa ha d’estar-hi contingut i no en pot sobresortir ni superposar-se amb altres elements de la pàgina.

+ +

Desbordaments no volguts en el disseny web

+ +

Els mètodes de disseny moderns (tal com es recull en el mòdul de Disseny de pàgines web amb CSS) gestionen molt bé el desbordament. Han estat dissenyats per fer front al fet que normalment no podem predir la quantitat de contingut que hi haurà en una pàgina web. En el passat, però, els desenvolupadors solien utilitzar altures fixes per a intentar alinear els extrems inferiors de caixes que en realitat no tenien cap relació entre elles. Això era fràgil, i encara et pots topar amb aplicacions heretades en què el contingut d’una caixa se superposa amb un altre contingut de la pàgina. Si veus això, sabràs que es tracta de desbordament; l'ideal seria que tornis a fer un càlcul de les mides dels elements de disseny de la pàgina per no haver de dependre de mides de caixa fixes.

+ +

En desenvolupar un lloc sempre has de tenir en compte els problemes de desbordament. Has de provar els dissenys amb quantitats de contingut grans i petites, augmentar la mida de la lletra del text i assegurar-te que el teu CSS pot fer-ho de manera coherent. És probable que et vulguis reservar les opcions de canviar el valor de desbordament per ocultar contingut o afegir barres de desplaçament només per a casos especials, per exemple, per quan realment vols una caixa amb barres de desplaçament.

+ +

Posa a prova els teus coneixements

+ +

Hi ha moltes coses a absorbir en aquesta lliço. En recordes la informació més important? Per comprovar-ho, vés a Test your skills: overflow.

+ +

Resum

+ +

Aquest breu article ha introduït el concepte de desbordament; ara entens que el CSS intenta no invisibilitzar el contingut que es desborda perquè això causa la pèrdua de dades. Has descobert que pots gestionar un desbordament potencial i també que has de fer proves per assegurar-te que la teva feina no causa accidentalment desbordaments problemàtics.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Els selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diferents direccions
    6. +
  6. El desbordament del contingut
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionament d’elements amb CSS
    9. +
  9. Imatges, media i controls de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depura el teu CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git a/files/ca/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/ca/learn/css/building_blocks/selectors/attribute_selectors/index.html new file mode 100644 index 0000000000..6ab61828f8 --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -0,0 +1,154 @@ +--- +title: Selectors d'atribut +slug: Learn/CSS/Building_blocks/Selectors_CSS/Selectors_atribut +translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

+ +

Com ja saps a partir de l’estudi de l'HTML, els elements poden tenir atributs, que donen més detalls sobre l'element que s’etiqueta. En CSS pots utilitzar selectors d’atributs per a seleccionar elements que tenen uns atributs determinats. Aquest article et mostra com utilitzar aquests selectors tan útils.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (consulta Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Conèixer els selectors d’atributs i com utilitzar-los.
+ +

Selectors de presència i de valor

+ +

Aquests selectors permeten seleccionar un element només per la presència d’un atribut (per exemple href) o per diferents coincidències amb el valor de l’atribut.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorExempleDescripció
[attr]a[title]Selecciona elements que tenen com a nom d'atribut attr el valor entre claudàtors.
[attr=value]a[href="https://example.com"]Selecciona elements que tenen el nom d'atribut attr, el valor del qual sigui exactament la cadena de caràcters que hi ha entre cometes: value.
[attr~=value]p[class~="special"] +

Selecciona elements amb un nom d’atribut attr el valor del qual és exactament value, o elements que tenen un atribut attr que conté un o més valors, dels quals almenys un coincideix amb value.

+ +

Observa que en una llista de diversos valors, els valors se separen amb espais en blanc.

+
[attr|=value]div[lang|="zh"]Selecciona elements que tenen un nom d’atribut attr que pot ser exactament value o que pot començar per value seguit immediatament d’un guionet.
+ +

En l'exemple següent pots veure que com es fan servir aquests selectors.

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}

+ +

Selectors de subcadena

+ +

Aquests selectors permeten obtenir una concordança més ajustada a partir de les subcadenes que conté el valor del teu atribut. Per exemple, si hi ha les classes box-warning i box-error i vols seleccionar tot el que comença amb la cadena «box-», pots seleccionar-les totes dues amb [class^="box-"].

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorExempleDescripció
[attr^=value]li[class^="box-"]Selecciona elements amb un nom d'atribut attr que conté la subcadena value al principi.
[attr$=value]li[class$="-box"]Selecciona elements amb un nom d’atribut attr que conté la subcadena value al final.
[attr*= ]li[class*="box"]Relaciona elements amb un nom d'atribut attr que conté almenys una ocurrència de la subcadena value en qualsevol lloc de la cadena.
+ +

L’exemple següent mostra l'ús d'aquests selectors:

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}

+ +

Distinció entre majúscules i minúscules

+ +

Si vols seleccionar els valors d'atribut tant si estan escrits en majúscules com en minúscules, pots utilitzar el valor i abans del claudàtor de tancament. Aquest indicador informa el navegador que els caràcters ASCII han de coincidir independentment de si les lletres són majúscules o minúscules. Sense aquest indicador, la correspondència entre els valors es farà segons les directrius del llenguatge del document pel que fa a la distinció entre majúscules i minúscules; en el cas de l'HTML, distingeix entre majúscules i minúscules.

+ +

En l'exemple següent, el primer selector coincideix amb un valor que comença per a; només coincideix el primer element de la llista perquè els altres dos elements de la llista comencen amb una A majúscula. El segon selector no distingeix entre majúscules i minúscules, així que la correspondència és entre tots els elements de la llista.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

+ +
+

Nota: També hi ha un valor s més recent, que imposa la coincidència de majúscules i les minúscules en contextos en què normalment no es dona; tanmateix, aquest valor encara no té gaire compatibilitat amb els navegadors i no resulta gaire útil en el context de l’HTML.

+
+ +

Propers passos

+ +

Ara que hem acabat amb els selectors d’atribut, pots avançar cap a l’article següent sobre les pseudoclasses i els pseudoelements.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Els selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diverses direccions
    6. +
  6. El desbordament dels continguts
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionar elements en CSS
    9. +
  9. Imatges, mèdia i elements de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depura el teu CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git a/files/ca/learn/css/building_blocks/selectors/combinators/index.html b/files/ca/learn/css/building_blocks/selectors/combinators/index.html new file mode 100644 index 0000000000..175379f986 --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors/combinators/index.html @@ -0,0 +1,111 @@ +--- +title: Combinadors +slug: Learn/CSS/Building_blocks/Selectors_CSS/Combinadors +translation_of: Learn/CSS/Building_blocks/Selectors/Combinators +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

+ +

Els últims selectors que veurem s’anomenen combinadors, perquè combinen altres selectors de manera que proporcionen una relació útil entre aquests i la ubicació de continguts en el document.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Obtenir més informació sobre els diferents selectors que es poden utilitzar en CSS.
+ +

Selector de descendents

+ +

Ja has vist selectors de descendents en articles anteriors (selectors separats per un espai):

+ +
body article p
+ +

Aquests selectors seleccionen elements que són descendents d’un altre selector. No cal que els elements que se seleccionen siguin fills directes.

+ +

En l'exemple següent se seleccionen només els elements <p> que hi ha dins d'un element que està etiquetat amb una classe .box.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}

+ +

Combinador de fills

+ +

El combinador de fills és un símbol de «més gran que» (>), que només selecciona elements que són descendents directes. Els descendents que hi ha més avall en la jerarquia no se seleccionen; per exemple, per a seleccionar només els elements <p> que són descendents directes d’elements <article>:

+ +
article > p
+ +

En aquest exemple hi ha una llista ordenada imbricada dins d'una altra llista no ordenada. Fem servir el combinador de fills per a seleccionar només els elements <li> que són fills directes de <ul> i els apliquem una vora superior.

+ +

Si suprimim l’element >, que designa que es tracta d'un selector de fills, obtenim un selector de descendents, i tots els elements <li> adquireixen una vora vermella.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

+ +

Selector de germans adjacents

+ +

El selector de germans adjacents (+) s'utilitza per a seleccionar un element que es troba immediatament a continuació d'un altre element en el mateix nivell de jerarquia; per exemple, per a seleccionar tots els elements <img> que hi ha just a continuació d‘elements <p>:

+ +
p + img
+ +

Un cas comú d’ús d’aquest combinador és per a fer alguna cosa amb un paràgraf que va a continuació d’un encapçalament, com en el nostre exemple següent. Aquí busquem un paràgraf que estigui immediatament a continuació d’<h1> i hi apliquem estil.

+ +

Si insereixes qualsevol altre element, com ara <h2>, entre <h1> i <p>, el paràgraf ja no coincideix amb el selector, i el color de fons no s'aplica.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}

+ +

Selector de germans general

+ +

Si vols seleccionar els elements que són germans d’un element, encara que no siguin adjacents directes, pots fer servir el selector de germans general (~). Per a seleccionar tots els elements <img> que estiguin en qualsevol lloc a continuació dels elements <p>, hem de fer això:

+ +
p ~ img
+ +

En l'exemple següent seleccionem tots els elements <p> que hi ha després de <h1>, i tot i que en el document també hi ha un element <div>, se selecciona també l'element <p> que hi ha després.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}

+ +

L'ús dels combinadors

+ +

Pots combinar qualsevol dels selectors que hem vist en articles anteriors amb els combinadors per a seleccionar parts d’un document. Per exemple, per a seleccionar els elements de llista que tenen una classe «a» que són descendents directes de <ul>, pots utilitzar el codi següent:

+ +
ul > li[class="a"]  {  }
+ +

Tanmateix, has de tenir cura quan crees llistes grans de selectors que seleccionen parts molt específiques del document, perquè el selector serà molt específic per a la ubicació d'aquest element en l'etiquetatge i et serà difícil reutilitzar les regles CSS.

+ +

Sovint és millor crear una classe senzilla i aplicar-la a l’element en qüestió. Ara bé, els coneixements sobre combinadors et poden ser molt útils si necessites accedir a algun part del document, però no pots accedir al codi HTML, potser a causa de la generació d’un CMS.

+ +

Comprova les teves habilitats

+ +

Hem vist moltes coses en aquest article. Recordes la informació més important? Trobaràs més tests per a verificar que has retingut aquesta informació a Test your skills: Selectors.

+ +

Avancem

+ +

Aquesta és l’última secció dels nostres articles sobre selectors. A continuació passarem a una altra qüestió important del CSS: el model de caixes del CSS.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Els selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament de les diverses direccions del text
    6. +
  6. El desbordament del contingut
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionar elements en CSS
    9. +
  9. Elements d'imatge, de mèdia i de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depurar el CSS
    12. +
  12. Organitzar el teu CSS
    13. +
diff --git a/files/ca/learn/css/building_blocks/selectors/index.html b/files/ca/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..4bd7b005de --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,223 @@ +--- +title: Selectors CSS +slug: Learn/CSS/Building_blocks/Selectors_CSS +translation_of: Learn/CSS/Building_blocks/Selectors +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

En el {{Glossary("CSS")}}, els selectors s'utilitzen per a determinar els elements {{glossary("HTML")}} de les pàgines web als quals volem aplicar estil. Hi ha una gran varietat de selectors CSS disponibles, que permeten obtenir una precisió àmplia a l’hora de seleccionar elements per a aplicar-los estil. En aquest article i els seus subarticles s'explicaran els diferents tipus amb detall i observarem com funcionen.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Conèixer amb detall com funcionen els selectors CSS.
+ +

Què és un selector?

+ +

Ja has conegut els selectors. Un selector CSS és la primera part d'una regla CSS. Es tracta d’un patró d’elements i d’altres termes que diuen al navegador quins elements HTML s’han de seleccionar perquè tinguin els valors de les propietat CSS segons la regla que se’ls ha d’aplicar. L'element o els elements que selecciona el selector s'anomenen el subjecte del selector.

+ +

Una mica de codi amb un h1 ressaltat.

+ +

En articles anteriors, has vist altres selectors i també que hi ha selectors que es focalitzen en el document de maneres diferents (per exemple, seleccionant un element com h1, o una classe com .special).

+ +

En CSS, els selectors es defineixen en l’especificació dels selectors CSS; com qualsevol altra part del CSS, han de ser compatibles amb els navegadors perquè funcionin. La majoria de selectors que trobaràs es defineixen en l’especificació de selectors de nivell 3, que és una especificació madura i, per tant, trobaràs una compatibilitat de navegadors excel·lent per a aquests selectors.

+ +

Llistes de selectors

+ +

Si tens més d'un element que utilitza el mateix CSS, cadascun dels selectors es poden combinar en una llista de selectors que aplica la mateixa regla a tots els selectors. Per exemple, si tenim el mateix CSS per a h1 i també per a una classe .special, ho podríem escriure com dues regles separades.

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

Però també podem combinar-los en una llista de selectors, afegint-hi una coma entre ells.

+ +
h1, .special {
+  color: blue;
+}
+ +

L’espai en blanc és vàlid tant abans com després de la coma. També pots decidir que la llegibilitat dels selectors és més bona si cada un està en una línia nova.

+ +
h1,
+.special {
+  color: blue;
+}
+ +

En l'exemple en viu següent, combina els dos selectors que tenen declaracions idèntiques. La visualització hauria de ser la mateixa després de la combinació.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}

+ +

Si agrupes els selectors d'aquesta manera, i algun dels selectors no és vàlid, s'ignorarà tota la regla.

+ +

En l'exemple següent, la regla del selector de classe no vàlida s’ignorarà mentre que no hi haurà problemes a l'hora d’aplicar estil a h1.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

Tanmateix, en combinar-les, no s’aplicarà estil ni a h1 ni a la classe, perquè la regla ja no és vàlida.

+ +
h1, ..special {
+  color: blue;
+}
+ +

Tipus de selectors

+ +

Hi ha uns quants grups diferents de selectors, i conèixer quin tipus de selector necessites t'ajudarà a trobar l'eina adequada a l'hora de treballar. En els subarticles d’aquest article examinarem amb més detall els diferents grups de selectors.

+ +

Selectors de tipus, de classe i d’ID

+ +

Aquest grup inclou selectors que delimiten un element HTML, com ara <h1>.

+ +
h1 { }
+ +

També inclou selectors que delimiten una classe:

+ +
.box { }
+ +

o un ID:

+ +
#unique { }
+ +

Selectors d'atribut

+ +

Aquest grup de selectors t'ofereix diferents maneres de seleccionar elements segons la presència d’un atribut determinat en un element:

+ +
a[title] { }
+ +

O fins i tot fer una selecció segons la presència d’un atribut amb un valor determinat:

+ +
a[href="https://example.com"] { }
+ +

Les pseudoclasses i els pseudoelements

+ +

Aquest grup de selectors inclou les pseudoclasses, que apliquen estil a certs estats d’un element. La pseudoclasse :hover, per exemple, selecciona un element només quan hi passa pel damunt el cursor del ratolí:

+ +
a:hover { }
+ +

També inclou els pseudoelements, que seleccionen una part determinada d’un element en lloc de l’element en si. Per exemple, ::first-line sempre selecciona la primera línia de text que hi ha dins d’un element (<p> en el cas següent), i actua com si un <span> delimités la primera línia amb format i després la seleccionés.

+ +
p::first-line { }
+ +

Combinadors

+ +

El grup final de selectors fa combinacions d’altres selectors que delimiten encara més els elements dels nostres documents. A continuació, per exemple, se seleccionen els paràgrafs que són fills directes dels elements <article> amb el combinador de fills (>):

+ +
article > p { }
+ +

Propers passos

+ +

Pots donar un cop d'ull a la taula de referència de selectors que hi ha a continuació per trobar enllaços directes als diversos tipus de selectors de la secció d'aprenentatge o de MDN en general, o pots continuar en ordre i descobrir els tipus de selectors de classe i d’ID.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

Taula de referència dels selectors

+ +

La taula següent t'ofereix una visió general dels selectors que tens disponibles, juntament amb enllaços a les pàgines d’aquesta guia, que et mostraran com utilitzar cada tipus de selector. També hem inclòs un enllaç a la pàgina MDN de cada selector, en què pots consultar la informació de compatibilitat amb els navegadors. Pots fer-ho servir com a referència de consulta per quan més endavant hagis de buscar selectors, o a mesura que experimentes amb el CSS en general.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorExempleTutorial de CSS
Selector de tipush1 { }Selectors de tipus
Selector universal* { }El selector universal
Selector de classe.box { }Selectors de classe
Selector d’ID#unique { }Selectors d’ID
Selector d'atributa[title] { }Selectors d'atribut
Selectors de pseudoclassep:first-child { }Pseudoclasse
Selectors de pseudoelementp::first-line { }Pseudoelements
Combinador descendentarticle pCombinador descendent
Combinador de fillsarticle > pCombinador de fills
Combinador de germans adjacentsh1 + pGermans adjacents
Combinador general de germansh1 ~ pGermans general
+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diverses direccions
    6. +
  6. El desbordament dels continguts
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionar elements en CSS
    9. +
  9. Imatges, media i elements de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depurar el CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git a/files/ca/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/ca/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html new file mode 100644 index 0000000000..b28cb4873a --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -0,0 +1,398 @@ +--- +title: Pseudoclasses i pseudoelements +slug: Learn/CSS/Building_blocks/Selectors_CSS/Pseudo-classes_and_pseudo-elements +translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

+ +

El conjunt següent de selectors que veurem s’anomenen pseudoclasses i pseudoelements. N'hi ha una bona quantitat i sovint serveixen per a propòsits força específics. Un cop que hauràs après a utilitzar-los, pots mirar-te la llista i veure si n’hi ha cap que et serveixi per a la tasca que intentes assolir. Una vegada més afegim que la pàgina de MDN corresponent a cada selector et pot ser útil per a esbrinar-ne la compatibilitat dels navegadors.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Adquirir més informació sobre els selectors de pseudoclasse i pseudoelement.
+ +

Què és una pseudoclasse?

+ +

Una pseudoclasse és un selector que selecciona elements que es troben en un estat específic. Per exemple, són el primer element del seu tipus o bé el cursor del ratolí els passa per sobre. Solen actuar com si haguessis aplicat una classe a alguna part del document, i sovint t’ajuden a reduir l'excés de classes en l'etiquetatge i et proporcionen un codi més flexible i fàcil de mantenir.

+ +

Les pseudoclasses són paraules clau que comencen amb dos punts (:):

+ +
:pseudo-class-name
+ +

Un exemple senzill de pseudoclasse

+ +

Donem una ullada a un exemple senzill. Si volem que el primer paràgraf d'un article es vegi més gran i en negreta, podem afegir una classe a aquest paràgraf i després afegir CSS a aquesta classe, tal com es mostra en el primer exemple següent:

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}

+ +

Tanmateix, això pot resultar molest a l'hora de fer-ne el manteniment; i si afegim un tipus nou de paràgraf a la part superior del document? Hauríem d’incloure la classe en el nou paràgraf. Doncs, en comptes d’afegir la classe, podríem utilitzar el selector de pseudoclasse {{cssxref(":first-child")}}; això seleccionarà sempre el primer element fill de l'article i ja no caldria editar l’HTML (que no sempre és possible, perquè de vegades es genera des d'un CMS).

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}

+ +

Totes les pseudoclasses es comporten de la mateixa manera. Etiqueten una part del document que es troba en un estat determinat, i es comporten com si haguessis afegit una classe a l'HTML. Pots veure’n més exemples a MDN:

+ + + +
+

Nota: és vàlid escriure pseudoclasses i pseudoelements sense que les precedeixi cap selector d'element. En l'exemple anterior, podríem escriure :first-child i la regla s'aplicaria a qualsevol element que sigui el primer element d'un element <article>, no només primers paràgrafs. :first-child equival a *:first-child. Però normalment volem més control i cal ser més específics.

+
+ +

Pseudoclasses d'acció d'usuari

+ +

Algunes pseudoclasses només actuen quan l'usuari interactua d'alguna manera amb el document. Aquestes pseudoclasses d'acció de l'usuari, de vegades denominades pseudoclasses dinàmiques, actuen com si s'hagués afegit una classe a l'element quan l'usuari hi interactua. Els exemples inclouen:

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

+ +

Què és un pseudoelement?

+ +

Els pseudoelements es comporten d’una manera similar, però actuen com si afegissis un element HTML completament nou a l’etiquetatge, en lloc d’aplicar una classe als elements que ja hi ha. Els pseudoelements comencen amb un doble dos punts ::.

+ +
::pseudo-element-name
+ +
+

Nota: Alguns pseudoelements originals utilitzaven la sintaxi de dos punts simple, i de vegades encara ho pots veure en algun codi o alguns exemples. Els navegadors moderns admeten els primers pseudoelements amb una sintaxi de dos punts simple o de dos punts doble per a tenir compatibilitat cap enrere.

+
+ +

Per exemple, si volguessis seleccionar la primera línia d’un paràgraf, podries etiquetar-la amb un element <span> i utilitzar un selector d’elements; però això falla si el nombre de paraules que has etiquetat és superior o inferior a l'amplada de l'element principal. Com que no podem saber quantes paraules cabran en una línia perquè això canvia amb l’amplada de la pantalla o la mida de la lletra, no és possible fer-ho només afegint HTML.

+ +

El selector de pseudoelements ::first-line ho fa de manera segura: selecciona només la primera línia, encara que el nombre de paraules augmenti o disminueixi.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}

+ +

Actua com si hi hagués una etiqueta <span> màgica en aquesta primera línia que s'actualitza cada cop que canvia la longitud de la línia.

+ +

Pots veure que això selecciona la primera línia dels dos paràgrafs.

+ +

Combinar pseudoclasses i pseudoelements

+ +

Si vols que la primera línia del primer paràgraf es vegi en negreta, pots agrupar els selectors :first-child i ::first-line. Prova d’introduir en l'exemple en viu anterior el CSS següent. Amb això demanem que volem seleccionar la primera línia del primer element <p>, que hi ha dins d’un element <article>.

+ +
article p:first-child::first-line {
+  font-size: 120%;
+  font-weight: bold;
+}
+ +

Generar contingut amb ::before i ::after

+ +

Hi ha un parell de pseudoelements especials, que s'utilitzen juntament amb la propietat content per a inserir contingut al document mitjançant CSS.

+ +

Pots utilitzar-los per a inserir una cadena de text, com en l'exemple en viu següent. Prova de canviar el valor de text de la propietat {{cssxref("content")}} i observa com canvia a la sortida. També pots canviar el pseudoelement ::before per ::after i observa que el text s’insereix al final de l'element, en lloc del principi.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}

+ +

Inserir cadenes de text amb CSS, de fet, no es fa gaire sovint a la web, perquè aquest text no és accessible per a alguns lectors de pantalla i pot ser difícil de trobar i editar en el futur.

+ +

Un ús més vàlid d'aquests pseudoelements és inserir una icona, per exemple la petita fletxa afegida de l'exemple següent, que és un indicador visual que no volem que un lector de pantalla llegeixi:

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}

+ +

Aquests pseudoelements també s'utilitzen amb freqüència per a inserir una cadena buida, a la qual després pots aplicar estil com a qualsevol altre element de la pàgina.

+ +

En l'exemple següent hem afegit una cadena buida amb el pseudoelement ::before. L'hem establert en display: block per a poder-hi aplicar una amplada i una alçada. A continuació, utilitzem el CSS per donar-hi estil com a qualsevol altre element. Pots jugar-hi amb el CSS i canviar-ne l’aspecte i el comportament.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}

+ +

L’ús dels pseudoelements ::before i ::after, juntament amb la propietat content, es coneix en CSS com el «contingut generat» i veuràs que aquesta tècnica s’utilitza sovint per a diverses tasques. Un bon exemple és el lloc CSS Arrow Please, que t'ajuda a generar una fletxa amb CSS. Observa el CSS mentre crees la teva fletxa i fixa’t com funcionen els pseudoelements {{cssxref("::before")}} i {{cssxref("::after")}}. Sempre que vegis aquests selectors, cerca en la propietat {{cssxref("content")}} per esbrinar què s'ha afegit al document.

+ +

Secció de referència

+ +

Hi ha un gran nombre de pseudoclasses i pseudoelements, i és útil tenir una llista en la qual s’hi faci referència. A continuació es mostren unes taules amb enllaços que apunten a les seves pàgines de referència en MDN. Fes-les servir de referència per veure de quines possibilitats d’etiquetatge disposes.

+ +

Pseudoclasses

+ +

Paged Media, selecciona les pàgines de l’esquerra.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorDescripció
{{ Cssxref(":active") }}Selecciona un element quan l’usuari l'activa (per exemple, fent-hi clic a sobre).
{{ Cssxref(":any-link") }}Selecciona els estats :link i :visited d'un enllaç.
{{ Cssxref(":blank") }}Selecciona un element <input> que té el valor d'entrada buit.
{{ Cssxref(":checked") }}Selecciona un botó d'opció o una casella de selecció en l'estat de seleccionat.
{{ Cssxref(":current") }}Selecciona l'element o un antecessor de l'element que es mostra actiu.
{{ Cssxref(":default") }}Selecciona un o diversos elements de la interfície d'usuari que són els elements predeterminats entre un conjunt d'elements similars.
{{ Cssxref(":dir") }}Selecciona un element a partir de la direccionalitat (el valor de l’atribut dir en HTML o la propietat direction en CSS).
{{ Cssxref(":disabled") }}Selecciona els elements d'una interfície d'usuari que estan deshabilitats.
{{ Cssxref(":empty") }}Selecciona un element que no té fills, excepte, opcionalment, un espai blanc.
{{ Cssxref(":enabled") }}Selecciona els elements d'una interfície d'usuari que estan habilitats.
{{ Cssxref(":first") }}En Paged Media, selecciona la primera pàgina.
{{ Cssxref(":first-child") }}Selecciona un element que és el primer entre els seus germans.
{{ Cssxref(":first-of-type") }}Selecciona un element d'un tipus determinat entre els seus germans.
{{ Cssxref(":focus") }}Selecciona l’element que té el focus.
{{ Cssxref(":focus-visible")}}Selecciona l’element que té el focus i que el focus està visible per a l'usuari.
{{ Cssxref(":focus-within") }}Selecciona l’element que té el focus més l’element que té un descendent amb el focus.
{{ Cssxref(":future") }}Selecciona els elements que estan just després de l’element actiu.
{{ Cssxref(":hover") }}Selecciona un element quan l'usuari hi interactua.
{{ Cssxref(":indeterminate") }}Selecciona els elements d'una interfície d'usuari, el valor dels quals estan en un estat indeterminat; generalment es tracta de caselles de selecció.
{{ Cssxref(":in-range") }}Selecciona un element amb un rang de valors quan té el valor dins del rang.
{{ Cssxref(":invalid") }}Selecciona un element, com ara <input>, que estigui en un estat no vàlid.
{{ Cssxref(":lang") }}Selecciona un element segons l’idioma (valor de l’atribut lang en HTML).
{{ Cssxref(":last-child") }}Selecciona l’element que és l’últim entre els seus germans.
{{ Cssxref(":last-of-type") }}Selecciona un element d'un tipus determinat que és l’últim entre els seus germans.
{{ Cssxref(":left") }}
{{ Cssxref(":link")}}Selecciona els enllaços no visitats.
{{ Cssxref(":local-link")}}Selecciona els enllaços que apunten a les pàgines que estan al mateix lloc web que el document actiu.
{{ Cssxref(":is", ":is()")}}Selecciona qualsevol dels selectors de la llista de selectors.
{{ Cssxref(":not") }}Selecciona coses que no han estat seleccionades per altres selectors, que es converteixen en valor d'aquest selector.
{{ Cssxref(":nth-child") }}Selecciona elements d'entre una llista de germans: els germans es combinen amb una fórmula del tipus an+b (per exemple, 2n + 1 coincidiran amb els elements 1, 3, 5, 7, etc. Tots els imparells).
{{ Cssxref(":nth-of-type") }}Selecciona elements d'un tipus determinat d'entre una llista de germans (per exemple, <p>): els germans es corresponen amb una fórmula de la forma an+b (per exemple, 2n + 1 coincidiria amb els elements 1, 3, 5, 7, etc. Tots els imparells).
{{ Cssxref(":nth-last-child") }}Selecciona elements d'entre una llista de germans, comptant enrere des del final. Els germans es corresponen amb una fórmula del tipus an+b (per exemple, 2n + 1 coincidiria amb l’últim element de la seqüència, després els dos elements anteriors, un altre cop els dos elements anteriors, etc. Tots els imparells, comptant des del final).
{{ Cssxref(":nth-last-of-type") }}Selecciona elements d'un tipus determinat d'entre una llista de germans (per exemple, <p>), comptant cap enrere des del final. Els germans es corresponen amb una fórmula de la forma an+b (per exemple, 2n + 1 coincidiria amb l’últim element d’aquest tipus de la seqüència, després els dos elements anteriors a aquell, i un altre cop dos elements anteriors, etc. Tots els imparells, comptant des del final).
{{ Cssxref(":only-child") }}Selecciona un element que no té germans.
{{ Cssxref(":only-of-type") }}Selecciona un element que és l'únic del seu tipus entre els seus germans.
{{ Cssxref(":optional") }}Selecciona els elements de formulari que no són necessaris.
{{ Cssxref(":out-of-range") }}Selecciona un element amb un interval quan el seu valor està fora del rang.
{{ Cssxref(":past") }}Selecciona els elements que són anteriors a l’element actiu.
{{ Cssxref(":placeholder-shown") }}Selecciona un element d’entrada que mostra el marcador de posició del text.
{{ Cssxref(":playing") }}Selecciona un element que representa un àudio, un vídeo o un recurs similar, que pot ser «reproduït» o «pausat» quan aquest element «es reprodueix».
{{ Cssxref(":paused") }}Selecciona un element que representa un àudio, un vídeo o un recurs similar, que pot ser «reproduït» o «pausat», quan aquest element està «en pausa».
{{ Cssxref(":read-only") }}Selecciona un element no modificable per l'usuari.
{{ Cssxref(":read-write") }}Selecciona un element modificable per l'usuari.
{{ Cssxref(":required") }}Selecciona els elements de formulari que són necessaris.
{{ Cssxref(":right") }}En Paged Media, selecciona les pàgines de la dreta.
{{ Cssxref(":root") }}Selecciona un element que és l'arrel del document.
{{ Cssxref(":scope") }}Selecciona qualsevol element que sigui un element d'abast.
{{ Cssxref(":valid") }}Selecciona un element, com ara <input>, que estigui en un estat vàlid.
{{ Cssxref(":target") }}Selecciona l’element al qual apunta l’URL activa (és a dir, si té un ID que coincideix amb l’identificador de fragment de l’URL actiu).
{{ Cssxref(":visited") }}Selecciona els enllaços visitats.
+ +

Pseudoelements

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorDescripció
{{ Cssxref("::after") }}Selecciona un element que pot aparèixer després del contingut actiu de l'element originari.
{{ Cssxref("::before") }}Selecciona un element que pot aparèixer abans del contingut actiu de l'element originari.
{{ Cssxref("::first-letter") }}Selecciona la primera lletra de l'element.
{{ Cssxref("::first-line") }}Selecciona la primera línia de l'element.
{{ Cssxref("::grammar-error") }}Selecciona una part del document que conté un error de gramàtica que indica el navegador.
{{ Cssxref("::selection") }}Selecciona la part del document seleccionat.
{{ Cssxref("::spelling-error") }}Selecciona una part del document que conté un error d'ortografia que indica el navegador.
+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Els selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diverses direccions
    6. +
  6. El desbordament dels continguts
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionar elements en CSS
    9. +
  9. Imatges, mèdia i elements de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depura el teu CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git a/files/ca/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ca/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html new file mode 100644 index 0000000000..2cdbdc244a --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -0,0 +1,117 @@ +--- +title: 'Selectors de tipus, classe i ID' +slug: Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID +translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

+ +

En aquest article farem un cop d’ull als selectors més senzills que hi ha disponibles, i que probablement utilitzaràs més a l'hora de treballar.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Obtenir més informació sobre els diferents selectors CSS que podem utilitzar per a aplicar CSS a un document.
+ +

Selectors de tipus

+ +

A vegades, a un selector de tipus també se'l denomina selector de noms d'etiqueta o selector d'elements, perquè selecciona una etiqueta/element HTML al document. En l’exemple següent hem utilitzat selectors span, em i strong. Per tant, hem aplicat estil a totes les instàncies <span>, <em> i <strong>.

+ +

Afegeix una regla CSS que seleccioni l’element <h1> i en canviï el color pel blau.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}

+ +

El selector universal

+ +

El selector universal s'indica amb un asterisc (*) i selecciona tot el que hi ha dins del document (o dins de l'element pare, si s'encadena amb un altre element i un combinador descendent, per exemple). En l'exemple següent hem utilitzat el selector universal per a eliminar els marges de tots els elements. Això vol dir que, en lloc de l'estil predeterminat que hi afegeix el navegador, que deixa un espai de marge entre els títols d’encapçalament i els paràgrafs, tot està junt i no podem distingir els diferents paràgrafs amb facilitat.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}

+ +

Aquest tipus de comportament a vegades es pot veure en els «fulls d'estil de restabliment» (o «fulls d'estil reset»), que eliminen tot l'estil que aplica el navegador. Van ser molt populars en un moment determinat, tot i que eliminar tots els estils significava que aleshores havies de tornar-ho a fer tot! Per tant, acostumem a utilitzar el selector universal amb atenció per a afrontar situacions molt específiques, com la que es descriu a continuació.

+ +

Ús del selector universal per a facilitar la lectura

+ +

Un dels usos del selector universal és fer els selectors més fàcils de llegir i més evidents, en termes de què fan. Per exemple, si vull seleccionar el primer fill de qualsevol element <article>, independentment de quin element sigui, i posar-lo en negreta, podem utilitzar el selector {{cssxref(":first-child")}}, que veurem amb més detall en l’article sobre pseudoclasses i pseudoelements, com un selector descendent juntament amb el selector d'elements <article>:

+ +
article :first-child {
+
+}
+ +

Això es pot confondre, però, amb article:first-child, que selecciona qualsevol element <article> que sigui el primer fill d'un altre element.

+ +

Per evitar aquesta confusió, podem afegir al selector :first-child el selector universal, de manera que ara resulta obvi el que fa el selector. Selecciona qualsevol element que sigui el primer fill d'un element <article>:

+ +
article *:first-child {
+
+}
+ +

Selectors de classe

+ +

El selector de classe s’inicia amb un caràcter de punt (.) i selecciona qualsevol element del document que tingui aplicada la classe seleccionada. En l'exemple en directe següent hem creat una classe anomenada .highlight i l'hem aplicada a diversos llocs del document. Es ressalten tots els elements que tenen aplicada aquesta classe.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}

+ +

Seleccionar classes en elements concrets

+ +

Pots crear un selector que seleccioni els elements específics que tenen aplicada aquella classe. En l'exemple següent, destaquem un element <span> que té una classe highlight diferent del destacat que apliquem a l'encapçalament <h1> amb classe highlight. Ho fem adjuntant la classe al selector de tipus per a l’element que volem seleccionar, sense cap espai entremig.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}

+ +

Aquesta manera de seleccionar dificulta la reutilització de CSS, perquè la classe només s'aplica a aquest element en concret, i hauràs d'afegir un altre selector si decideixes que les regles s'han d'aplicar també a altres elements.

+ +

Seleccionar un element si té aplicada més d'una classe

+ +

Pots aplicar diverses classes a un element i seleccionar-les individualment, o bé seleccionar l'element només quan inclou totes les classes del selector. Això pot ser útil per a crear components que es poden combinar de maneres diferents al teu lloc web.

+ +

En l'exemple següent hi ha un element <div> que inclou una nota. La vora gris s'aplica quan la casella té una classe notebox. Si també té una classe warning o danger, el {{cssxref("border-color")}} canvia.

+ +

Podem dir-li al navegador que només volem fer coincidir l’element si té totes aquestes classes tot encadenant-les juntes sense espais entremig.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}

+ +

Selectors d’ID

+ +

Un selector d’ID comença amb un caràcter # en lloc d'un caràcter de punt, però s'utilitza bàsicament de la mateixa manera que un selector de classe. Ara bé, un ID només es pot utilitzar una vegada en cada document, i cada element pot tenir un id com a màxim. El selector pot seleccionar l’element que té l’id establert i també pots precedir l'identificador amb un selector de tipus que seleccioni l’element només si coincideix amb l'ID. Pots veure aquests dos usos en l'exemple següent:

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}

+ +
+

Nota: Tal com hem après en l’article que parla d'especificitat, un ID té més especificitat i anul·la la majoria dels altres selectors. Això pot dificultar les coses a l'hora de treballar. En la majoria dels casos és preferible afegir una classe a l'element, en lloc d'utilitzar un ID, però a vegades fer servir un ID és l'única manera de seleccionar l'element (potser perquè no es té accés al codi d’etiquetatge i, per tant, no es pot editar).

+
+ +

En el proper article

+ +

Continuarem explorant els selectors i veurem els selectors d’atribut.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Els selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diverses direccions
    6. +
  6. El desbordament dels continguts
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionar elements en CSS
    9. +
  9. Imatges, media i elements de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depurar el CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git a/files/ca/learn/css/building_blocks/selectors_css/combinadors/index.html b/files/ca/learn/css/building_blocks/selectors_css/combinadors/index.html deleted file mode 100644 index 175379f986..0000000000 --- a/files/ca/learn/css/building_blocks/selectors_css/combinadors/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Combinadors -slug: Learn/CSS/Building_blocks/Selectors_CSS/Combinadors -translation_of: Learn/CSS/Building_blocks/Selectors/Combinators ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

- -

Els últims selectors que veurem s’anomenen combinadors, perquè combinen altres selectors de manera que proporcionen una relació útil entre aquests i la ubicació de continguts en el document.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Obtenir més informació sobre els diferents selectors que es poden utilitzar en CSS.
- -

Selector de descendents

- -

Ja has vist selectors de descendents en articles anteriors (selectors separats per un espai):

- -
body article p
- -

Aquests selectors seleccionen elements que són descendents d’un altre selector. No cal que els elements que se seleccionen siguin fills directes.

- -

En l'exemple següent se seleccionen només els elements <p> que hi ha dins d'un element que està etiquetat amb una classe .box.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}

- -

Combinador de fills

- -

El combinador de fills és un símbol de «més gran que» (>), que només selecciona elements que són descendents directes. Els descendents que hi ha més avall en la jerarquia no se seleccionen; per exemple, per a seleccionar només els elements <p> que són descendents directes d’elements <article>:

- -
article > p
- -

En aquest exemple hi ha una llista ordenada imbricada dins d'una altra llista no ordenada. Fem servir el combinador de fills per a seleccionar només els elements <li> que són fills directes de <ul> i els apliquem una vora superior.

- -

Si suprimim l’element >, que designa que es tracta d'un selector de fills, obtenim un selector de descendents, i tots els elements <li> adquireixen una vora vermella.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

- -

Selector de germans adjacents

- -

El selector de germans adjacents (+) s'utilitza per a seleccionar un element que es troba immediatament a continuació d'un altre element en el mateix nivell de jerarquia; per exemple, per a seleccionar tots els elements <img> que hi ha just a continuació d‘elements <p>:

- -
p + img
- -

Un cas comú d’ús d’aquest combinador és per a fer alguna cosa amb un paràgraf que va a continuació d’un encapçalament, com en el nostre exemple següent. Aquí busquem un paràgraf que estigui immediatament a continuació d’<h1> i hi apliquem estil.

- -

Si insereixes qualsevol altre element, com ara <h2>, entre <h1> i <p>, el paràgraf ja no coincideix amb el selector, i el color de fons no s'aplica.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}

- -

Selector de germans general

- -

Si vols seleccionar els elements que són germans d’un element, encara que no siguin adjacents directes, pots fer servir el selector de germans general (~). Per a seleccionar tots els elements <img> que estiguin en qualsevol lloc a continuació dels elements <p>, hem de fer això:

- -
p ~ img
- -

En l'exemple següent seleccionem tots els elements <p> que hi ha després de <h1>, i tot i que en el document també hi ha un element <div>, se selecciona també l'element <p> que hi ha després.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}

- -

L'ús dels combinadors

- -

Pots combinar qualsevol dels selectors que hem vist en articles anteriors amb els combinadors per a seleccionar parts d’un document. Per exemple, per a seleccionar els elements de llista que tenen una classe «a» que són descendents directes de <ul>, pots utilitzar el codi següent:

- -
ul > li[class="a"]  {  }
- -

Tanmateix, has de tenir cura quan crees llistes grans de selectors que seleccionen parts molt específiques del document, perquè el selector serà molt específic per a la ubicació d'aquest element en l'etiquetatge i et serà difícil reutilitzar les regles CSS.

- -

Sovint és millor crear una classe senzilla i aplicar-la a l’element en qüestió. Ara bé, els coneixements sobre combinadors et poden ser molt útils si necessites accedir a algun part del document, però no pots accedir al codi HTML, potser a causa de la generació d’un CMS.

- -

Comprova les teves habilitats

- -

Hem vist moltes coses en aquest article. Recordes la informació més important? Trobaràs més tests per a verificar que has retingut aquesta informació a Test your skills: Selectors.

- -

Avancem

- -

Aquesta és l’última secció dels nostres articles sobre selectors. A continuació passarem a una altra qüestió important del CSS: el model de caixes del CSS.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Els selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament de les diverses direccions del text
    6. -
  6. El desbordament del contingut
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionar elements en CSS
    9. -
  9. Elements d'imatge, de mèdia i de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depurar el CSS
    12. -
  12. Organitzar el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/selectors_css/index.html b/files/ca/learn/css/building_blocks/selectors_css/index.html deleted file mode 100644 index 4bd7b005de..0000000000 --- a/files/ca/learn/css/building_blocks/selectors_css/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: Selectors CSS -slug: Learn/CSS/Building_blocks/Selectors_CSS -translation_of: Learn/CSS/Building_blocks/Selectors ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
- -

En el {{Glossary("CSS")}}, els selectors s'utilitzen per a determinar els elements {{glossary("HTML")}} de les pàgines web als quals volem aplicar estil. Hi ha una gran varietat de selectors CSS disponibles, que permeten obtenir una precisió àmplia a l’hora de seleccionar elements per a aplicar-los estil. En aquest article i els seus subarticles s'explicaran els diferents tipus amb detall i observarem com funcionen.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Conèixer amb detall com funcionen els selectors CSS.
- -

Què és un selector?

- -

Ja has conegut els selectors. Un selector CSS és la primera part d'una regla CSS. Es tracta d’un patró d’elements i d’altres termes que diuen al navegador quins elements HTML s’han de seleccionar perquè tinguin els valors de les propietat CSS segons la regla que se’ls ha d’aplicar. L'element o els elements que selecciona el selector s'anomenen el subjecte del selector.

- -

Una mica de codi amb un h1 ressaltat.

- -

En articles anteriors, has vist altres selectors i també que hi ha selectors que es focalitzen en el document de maneres diferents (per exemple, seleccionant un element com h1, o una classe com .special).

- -

En CSS, els selectors es defineixen en l’especificació dels selectors CSS; com qualsevol altra part del CSS, han de ser compatibles amb els navegadors perquè funcionin. La majoria de selectors que trobaràs es defineixen en l’especificació de selectors de nivell 3, que és una especificació madura i, per tant, trobaràs una compatibilitat de navegadors excel·lent per a aquests selectors.

- -

Llistes de selectors

- -

Si tens més d'un element que utilitza el mateix CSS, cadascun dels selectors es poden combinar en una llista de selectors que aplica la mateixa regla a tots els selectors. Per exemple, si tenim el mateix CSS per a h1 i també per a una classe .special, ho podríem escriure com dues regles separades.

- -
h1 {
-  color: blue;
-}
-
-.special {
-  color: blue;
-}
- -

Però també podem combinar-los en una llista de selectors, afegint-hi una coma entre ells.

- -
h1, .special {
-  color: blue;
-}
- -

L’espai en blanc és vàlid tant abans com després de la coma. També pots decidir que la llegibilitat dels selectors és més bona si cada un està en una línia nova.

- -
h1,
-.special {
-  color: blue;
-}
- -

En l'exemple en viu següent, combina els dos selectors que tenen declaracions idèntiques. La visualització hauria de ser la mateixa després de la combinació.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}

- -

Si agrupes els selectors d'aquesta manera, i algun dels selectors no és vàlid, s'ignorarà tota la regla.

- -

En l'exemple següent, la regla del selector de classe no vàlida s’ignorarà mentre que no hi haurà problemes a l'hora d’aplicar estil a h1.

- -
h1 {
-  color: blue;
-}
-
-..special {
-  color: blue;
-}
- -

Tanmateix, en combinar-les, no s’aplicarà estil ni a h1 ni a la classe, perquè la regla ja no és vàlida.

- -
h1, ..special {
-  color: blue;
-}
- -

Tipus de selectors

- -

Hi ha uns quants grups diferents de selectors, i conèixer quin tipus de selector necessites t'ajudarà a trobar l'eina adequada a l'hora de treballar. En els subarticles d’aquest article examinarem amb més detall els diferents grups de selectors.

- -

Selectors de tipus, de classe i d’ID

- -

Aquest grup inclou selectors que delimiten un element HTML, com ara <h1>.

- -
h1 { }
- -

També inclou selectors que delimiten una classe:

- -
.box { }
- -

o un ID:

- -
#unique { }
- -

Selectors d'atribut

- -

Aquest grup de selectors t'ofereix diferents maneres de seleccionar elements segons la presència d’un atribut determinat en un element:

- -
a[title] { }
- -

O fins i tot fer una selecció segons la presència d’un atribut amb un valor determinat:

- -
a[href="https://example.com"] { }
- -

Les pseudoclasses i els pseudoelements

- -

Aquest grup de selectors inclou les pseudoclasses, que apliquen estil a certs estats d’un element. La pseudoclasse :hover, per exemple, selecciona un element només quan hi passa pel damunt el cursor del ratolí:

- -
a:hover { }
- -

També inclou els pseudoelements, que seleccionen una part determinada d’un element en lloc de l’element en si. Per exemple, ::first-line sempre selecciona la primera línia de text que hi ha dins d’un element (<p> en el cas següent), i actua com si un <span> delimités la primera línia amb format i després la seleccionés.

- -
p::first-line { }
- -

Combinadors

- -

El grup final de selectors fa combinacions d’altres selectors que delimiten encara més els elements dels nostres documents. A continuació, per exemple, se seleccionen els paràgrafs que són fills directes dels elements <article> amb el combinador de fills (>):

- -
article > p { }
- -

Propers passos

- -

Pots donar un cop d'ull a la taula de referència de selectors que hi ha a continuació per trobar enllaços directes als diversos tipus de selectors de la secció d'aprenentatge o de MDN en general, o pots continuar en ordre i descobrir els tipus de selectors de classe i d’ID.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

- -

Taula de referència dels selectors

- -

La taula següent t'ofereix una visió general dels selectors que tens disponibles, juntament amb enllaços a les pàgines d’aquesta guia, que et mostraran com utilitzar cada tipus de selector. També hem inclòs un enllaç a la pàgina MDN de cada selector, en què pots consultar la informació de compatibilitat amb els navegadors. Pots fer-ho servir com a referència de consulta per quan més endavant hagis de buscar selectors, o a mesura que experimentes amb el CSS en general.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorExempleTutorial de CSS
Selector de tipush1 { }Selectors de tipus
Selector universal* { }El selector universal
Selector de classe.box { }Selectors de classe
Selector d’ID#unique { }Selectors d’ID
Selector d'atributa[title] { }Selectors d'atribut
Selectors de pseudoclassep:first-child { }Pseudoclasse
Selectors de pseudoelementp::first-line { }Pseudoelements
Combinador descendentarticle pCombinador descendent
Combinador de fillsarticle > pCombinador de fills
Combinador de germans adjacentsh1 + pGermans adjacents
Combinador general de germansh1 ~ pGermans general
- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diverses direccions
    6. -
  6. El desbordament dels continguts
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionar elements en CSS
    9. -
  9. Imatges, media i elements de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depurar el CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/selectors_css/pseudo-classes_and_pseudo-elements/index.html b/files/ca/learn/css/building_blocks/selectors_css/pseudo-classes_and_pseudo-elements/index.html deleted file mode 100644 index b28cb4873a..0000000000 --- a/files/ca/learn/css/building_blocks/selectors_css/pseudo-classes_and_pseudo-elements/index.html +++ /dev/null @@ -1,398 +0,0 @@ ---- -title: Pseudoclasses i pseudoelements -slug: Learn/CSS/Building_blocks/Selectors_CSS/Pseudo-classes_and_pseudo-elements -translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

- -

El conjunt següent de selectors que veurem s’anomenen pseudoclasses i pseudoelements. N'hi ha una bona quantitat i sovint serveixen per a propòsits força específics. Un cop que hauràs après a utilitzar-los, pots mirar-te la llista i veure si n’hi ha cap que et serveixi per a la tasca que intentes assolir. Una vegada més afegim que la pàgina de MDN corresponent a cada selector et pot ser útil per a esbrinar-ne la compatibilitat dels navegadors.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Adquirir més informació sobre els selectors de pseudoclasse i pseudoelement.
- -

Què és una pseudoclasse?

- -

Una pseudoclasse és un selector que selecciona elements que es troben en un estat específic. Per exemple, són el primer element del seu tipus o bé el cursor del ratolí els passa per sobre. Solen actuar com si haguessis aplicat una classe a alguna part del document, i sovint t’ajuden a reduir l'excés de classes en l'etiquetatge i et proporcionen un codi més flexible i fàcil de mantenir.

- -

Les pseudoclasses són paraules clau que comencen amb dos punts (:):

- -
:pseudo-class-name
- -

Un exemple senzill de pseudoclasse

- -

Donem una ullada a un exemple senzill. Si volem que el primer paràgraf d'un article es vegi més gran i en negreta, podem afegir una classe a aquest paràgraf i després afegir CSS a aquesta classe, tal com es mostra en el primer exemple següent:

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}

- -

Tanmateix, això pot resultar molest a l'hora de fer-ne el manteniment; i si afegim un tipus nou de paràgraf a la part superior del document? Hauríem d’incloure la classe en el nou paràgraf. Doncs, en comptes d’afegir la classe, podríem utilitzar el selector de pseudoclasse {{cssxref(":first-child")}}; això seleccionarà sempre el primer element fill de l'article i ja no caldria editar l’HTML (que no sempre és possible, perquè de vegades es genera des d'un CMS).

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}

- -

Totes les pseudoclasses es comporten de la mateixa manera. Etiqueten una part del document que es troba en un estat determinat, i es comporten com si haguessis afegit una classe a l'HTML. Pots veure’n més exemples a MDN:

- - - -
-

Nota: és vàlid escriure pseudoclasses i pseudoelements sense que les precedeixi cap selector d'element. En l'exemple anterior, podríem escriure :first-child i la regla s'aplicaria a qualsevol element que sigui el primer element d'un element <article>, no només primers paràgrafs. :first-child equival a *:first-child. Però normalment volem més control i cal ser més específics.

-
- -

Pseudoclasses d'acció d'usuari

- -

Algunes pseudoclasses només actuen quan l'usuari interactua d'alguna manera amb el document. Aquestes pseudoclasses d'acció de l'usuari, de vegades denominades pseudoclasses dinàmiques, actuen com si s'hagués afegit una classe a l'element quan l'usuari hi interactua. Els exemples inclouen:

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

- -

Què és un pseudoelement?

- -

Els pseudoelements es comporten d’una manera similar, però actuen com si afegissis un element HTML completament nou a l’etiquetatge, en lloc d’aplicar una classe als elements que ja hi ha. Els pseudoelements comencen amb un doble dos punts ::.

- -
::pseudo-element-name
- -
-

Nota: Alguns pseudoelements originals utilitzaven la sintaxi de dos punts simple, i de vegades encara ho pots veure en algun codi o alguns exemples. Els navegadors moderns admeten els primers pseudoelements amb una sintaxi de dos punts simple o de dos punts doble per a tenir compatibilitat cap enrere.

-
- -

Per exemple, si volguessis seleccionar la primera línia d’un paràgraf, podries etiquetar-la amb un element <span> i utilitzar un selector d’elements; però això falla si el nombre de paraules que has etiquetat és superior o inferior a l'amplada de l'element principal. Com que no podem saber quantes paraules cabran en una línia perquè això canvia amb l’amplada de la pantalla o la mida de la lletra, no és possible fer-ho només afegint HTML.

- -

El selector de pseudoelements ::first-line ho fa de manera segura: selecciona només la primera línia, encara que el nombre de paraules augmenti o disminueixi.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}

- -

Actua com si hi hagués una etiqueta <span> màgica en aquesta primera línia que s'actualitza cada cop que canvia la longitud de la línia.

- -

Pots veure que això selecciona la primera línia dels dos paràgrafs.

- -

Combinar pseudoclasses i pseudoelements

- -

Si vols que la primera línia del primer paràgraf es vegi en negreta, pots agrupar els selectors :first-child i ::first-line. Prova d’introduir en l'exemple en viu anterior el CSS següent. Amb això demanem que volem seleccionar la primera línia del primer element <p>, que hi ha dins d’un element <article>.

- -
article p:first-child::first-line {
-  font-size: 120%;
-  font-weight: bold;
-}
- -

Generar contingut amb ::before i ::after

- -

Hi ha un parell de pseudoelements especials, que s'utilitzen juntament amb la propietat content per a inserir contingut al document mitjançant CSS.

- -

Pots utilitzar-los per a inserir una cadena de text, com en l'exemple en viu següent. Prova de canviar el valor de text de la propietat {{cssxref("content")}} i observa com canvia a la sortida. També pots canviar el pseudoelement ::before per ::after i observa que el text s’insereix al final de l'element, en lloc del principi.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}

- -

Inserir cadenes de text amb CSS, de fet, no es fa gaire sovint a la web, perquè aquest text no és accessible per a alguns lectors de pantalla i pot ser difícil de trobar i editar en el futur.

- -

Un ús més vàlid d'aquests pseudoelements és inserir una icona, per exemple la petita fletxa afegida de l'exemple següent, que és un indicador visual que no volem que un lector de pantalla llegeixi:

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}

- -

Aquests pseudoelements també s'utilitzen amb freqüència per a inserir una cadena buida, a la qual després pots aplicar estil com a qualsevol altre element de la pàgina.

- -

En l'exemple següent hem afegit una cadena buida amb el pseudoelement ::before. L'hem establert en display: block per a poder-hi aplicar una amplada i una alçada. A continuació, utilitzem el CSS per donar-hi estil com a qualsevol altre element. Pots jugar-hi amb el CSS i canviar-ne l’aspecte i el comportament.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}

- -

L’ús dels pseudoelements ::before i ::after, juntament amb la propietat content, es coneix en CSS com el «contingut generat» i veuràs que aquesta tècnica s’utilitza sovint per a diverses tasques. Un bon exemple és el lloc CSS Arrow Please, que t'ajuda a generar una fletxa amb CSS. Observa el CSS mentre crees la teva fletxa i fixa’t com funcionen els pseudoelements {{cssxref("::before")}} i {{cssxref("::after")}}. Sempre que vegis aquests selectors, cerca en la propietat {{cssxref("content")}} per esbrinar què s'ha afegit al document.

- -

Secció de referència

- -

Hi ha un gran nombre de pseudoclasses i pseudoelements, i és útil tenir una llista en la qual s’hi faci referència. A continuació es mostren unes taules amb enllaços que apunten a les seves pàgines de referència en MDN. Fes-les servir de referència per veure de quines possibilitats d’etiquetatge disposes.

- -

Pseudoclasses

- -

Paged Media, selecciona les pàgines de l’esquerra.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorDescripció
{{ Cssxref(":active") }}Selecciona un element quan l’usuari l'activa (per exemple, fent-hi clic a sobre).
{{ Cssxref(":any-link") }}Selecciona els estats :link i :visited d'un enllaç.
{{ Cssxref(":blank") }}Selecciona un element <input> que té el valor d'entrada buit.
{{ Cssxref(":checked") }}Selecciona un botó d'opció o una casella de selecció en l'estat de seleccionat.
{{ Cssxref(":current") }}Selecciona l'element o un antecessor de l'element que es mostra actiu.
{{ Cssxref(":default") }}Selecciona un o diversos elements de la interfície d'usuari que són els elements predeterminats entre un conjunt d'elements similars.
{{ Cssxref(":dir") }}Selecciona un element a partir de la direccionalitat (el valor de l’atribut dir en HTML o la propietat direction en CSS).
{{ Cssxref(":disabled") }}Selecciona els elements d'una interfície d'usuari que estan deshabilitats.
{{ Cssxref(":empty") }}Selecciona un element que no té fills, excepte, opcionalment, un espai blanc.
{{ Cssxref(":enabled") }}Selecciona els elements d'una interfície d'usuari que estan habilitats.
{{ Cssxref(":first") }}En Paged Media, selecciona la primera pàgina.
{{ Cssxref(":first-child") }}Selecciona un element que és el primer entre els seus germans.
{{ Cssxref(":first-of-type") }}Selecciona un element d'un tipus determinat entre els seus germans.
{{ Cssxref(":focus") }}Selecciona l’element que té el focus.
{{ Cssxref(":focus-visible")}}Selecciona l’element que té el focus i que el focus està visible per a l'usuari.
{{ Cssxref(":focus-within") }}Selecciona l’element que té el focus més l’element que té un descendent amb el focus.
{{ Cssxref(":future") }}Selecciona els elements que estan just després de l’element actiu.
{{ Cssxref(":hover") }}Selecciona un element quan l'usuari hi interactua.
{{ Cssxref(":indeterminate") }}Selecciona els elements d'una interfície d'usuari, el valor dels quals estan en un estat indeterminat; generalment es tracta de caselles de selecció.
{{ Cssxref(":in-range") }}Selecciona un element amb un rang de valors quan té el valor dins del rang.
{{ Cssxref(":invalid") }}Selecciona un element, com ara <input>, que estigui en un estat no vàlid.
{{ Cssxref(":lang") }}Selecciona un element segons l’idioma (valor de l’atribut lang en HTML).
{{ Cssxref(":last-child") }}Selecciona l’element que és l’últim entre els seus germans.
{{ Cssxref(":last-of-type") }}Selecciona un element d'un tipus determinat que és l’últim entre els seus germans.
{{ Cssxref(":left") }}
{{ Cssxref(":link")}}Selecciona els enllaços no visitats.
{{ Cssxref(":local-link")}}Selecciona els enllaços que apunten a les pàgines que estan al mateix lloc web que el document actiu.
{{ Cssxref(":is", ":is()")}}Selecciona qualsevol dels selectors de la llista de selectors.
{{ Cssxref(":not") }}Selecciona coses que no han estat seleccionades per altres selectors, que es converteixen en valor d'aquest selector.
{{ Cssxref(":nth-child") }}Selecciona elements d'entre una llista de germans: els germans es combinen amb una fórmula del tipus an+b (per exemple, 2n + 1 coincidiran amb els elements 1, 3, 5, 7, etc. Tots els imparells).
{{ Cssxref(":nth-of-type") }}Selecciona elements d'un tipus determinat d'entre una llista de germans (per exemple, <p>): els germans es corresponen amb una fórmula de la forma an+b (per exemple, 2n + 1 coincidiria amb els elements 1, 3, 5, 7, etc. Tots els imparells).
{{ Cssxref(":nth-last-child") }}Selecciona elements d'entre una llista de germans, comptant enrere des del final. Els germans es corresponen amb una fórmula del tipus an+b (per exemple, 2n + 1 coincidiria amb l’últim element de la seqüència, després els dos elements anteriors, un altre cop els dos elements anteriors, etc. Tots els imparells, comptant des del final).
{{ Cssxref(":nth-last-of-type") }}Selecciona elements d'un tipus determinat d'entre una llista de germans (per exemple, <p>), comptant cap enrere des del final. Els germans es corresponen amb una fórmula de la forma an+b (per exemple, 2n + 1 coincidiria amb l’últim element d’aquest tipus de la seqüència, després els dos elements anteriors a aquell, i un altre cop dos elements anteriors, etc. Tots els imparells, comptant des del final).
{{ Cssxref(":only-child") }}Selecciona un element que no té germans.
{{ Cssxref(":only-of-type") }}Selecciona un element que és l'únic del seu tipus entre els seus germans.
{{ Cssxref(":optional") }}Selecciona els elements de formulari que no són necessaris.
{{ Cssxref(":out-of-range") }}Selecciona un element amb un interval quan el seu valor està fora del rang.
{{ Cssxref(":past") }}Selecciona els elements que són anteriors a l’element actiu.
{{ Cssxref(":placeholder-shown") }}Selecciona un element d’entrada que mostra el marcador de posició del text.
{{ Cssxref(":playing") }}Selecciona un element que representa un àudio, un vídeo o un recurs similar, que pot ser «reproduït» o «pausat» quan aquest element «es reprodueix».
{{ Cssxref(":paused") }}Selecciona un element que representa un àudio, un vídeo o un recurs similar, que pot ser «reproduït» o «pausat», quan aquest element està «en pausa».
{{ Cssxref(":read-only") }}Selecciona un element no modificable per l'usuari.
{{ Cssxref(":read-write") }}Selecciona un element modificable per l'usuari.
{{ Cssxref(":required") }}Selecciona els elements de formulari que són necessaris.
{{ Cssxref(":right") }}En Paged Media, selecciona les pàgines de la dreta.
{{ Cssxref(":root") }}Selecciona un element que és l'arrel del document.
{{ Cssxref(":scope") }}Selecciona qualsevol element que sigui un element d'abast.
{{ Cssxref(":valid") }}Selecciona un element, com ara <input>, que estigui en un estat vàlid.
{{ Cssxref(":target") }}Selecciona l’element al qual apunta l’URL activa (és a dir, si té un ID que coincideix amb l’identificador de fragment de l’URL actiu).
{{ Cssxref(":visited") }}Selecciona els enllaços visitats.
- -

Pseudoelements

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorDescripció
{{ Cssxref("::after") }}Selecciona un element que pot aparèixer després del contingut actiu de l'element originari.
{{ Cssxref("::before") }}Selecciona un element que pot aparèixer abans del contingut actiu de l'element originari.
{{ Cssxref("::first-letter") }}Selecciona la primera lletra de l'element.
{{ Cssxref("::first-line") }}Selecciona la primera línia de l'element.
{{ Cssxref("::grammar-error") }}Selecciona una part del document que conté un error de gramàtica que indica el navegador.
{{ Cssxref("::selection") }}Selecciona la part del document seleccionat.
{{ Cssxref("::spelling-error") }}Selecciona una part del document que conté un error d'ortografia que indica el navegador.
- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Els selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diverses direccions
    6. -
  6. El desbordament dels continguts
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionar elements en CSS
    9. -
  9. Imatges, mèdia i elements de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depura el teu CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/selectors_css/selectors_atribut/index.html b/files/ca/learn/css/building_blocks/selectors_css/selectors_atribut/index.html deleted file mode 100644 index 6ab61828f8..0000000000 --- a/files/ca/learn/css/building_blocks/selectors_css/selectors_atribut/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Selectors d'atribut -slug: Learn/CSS/Building_blocks/Selectors_CSS/Selectors_atribut -translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

- -

Com ja saps a partir de l’estudi de l'HTML, els elements poden tenir atributs, que donen més detalls sobre l'element que s’etiqueta. En CSS pots utilitzar selectors d’atributs per a seleccionar elements que tenen uns atributs determinats. Aquest article et mostra com utilitzar aquests selectors tan útils.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (consulta Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Conèixer els selectors d’atributs i com utilitzar-los.
- -

Selectors de presència i de valor

- -

Aquests selectors permeten seleccionar un element només per la presència d’un atribut (per exemple href) o per diferents coincidències amb el valor de l’atribut.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorExempleDescripció
[attr]a[title]Selecciona elements que tenen com a nom d'atribut attr el valor entre claudàtors.
[attr=value]a[href="https://example.com"]Selecciona elements que tenen el nom d'atribut attr, el valor del qual sigui exactament la cadena de caràcters que hi ha entre cometes: value.
[attr~=value]p[class~="special"] -

Selecciona elements amb un nom d’atribut attr el valor del qual és exactament value, o elements que tenen un atribut attr que conté un o més valors, dels quals almenys un coincideix amb value.

- -

Observa que en una llista de diversos valors, els valors se separen amb espais en blanc.

-
[attr|=value]div[lang|="zh"]Selecciona elements que tenen un nom d’atribut attr que pot ser exactament value o que pot començar per value seguit immediatament d’un guionet.
- -

En l'exemple següent pots veure que com es fan servir aquests selectors.

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}

- -

Selectors de subcadena

- -

Aquests selectors permeten obtenir una concordança més ajustada a partir de les subcadenes que conté el valor del teu atribut. Per exemple, si hi ha les classes box-warning i box-error i vols seleccionar tot el que comença amb la cadena «box-», pots seleccionar-les totes dues amb [class^="box-"].

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorExempleDescripció
[attr^=value]li[class^="box-"]Selecciona elements amb un nom d'atribut attr que conté la subcadena value al principi.
[attr$=value]li[class$="-box"]Selecciona elements amb un nom d’atribut attr que conté la subcadena value al final.
[attr*= ]li[class*="box"]Relaciona elements amb un nom d'atribut attr que conté almenys una ocurrència de la subcadena value en qualsevol lloc de la cadena.
- -

L’exemple següent mostra l'ús d'aquests selectors:

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}

- -

Distinció entre majúscules i minúscules

- -

Si vols seleccionar els valors d'atribut tant si estan escrits en majúscules com en minúscules, pots utilitzar el valor i abans del claudàtor de tancament. Aquest indicador informa el navegador que els caràcters ASCII han de coincidir independentment de si les lletres són majúscules o minúscules. Sense aquest indicador, la correspondència entre els valors es farà segons les directrius del llenguatge del document pel que fa a la distinció entre majúscules i minúscules; en el cas de l'HTML, distingeix entre majúscules i minúscules.

- -

En l'exemple següent, el primer selector coincideix amb un valor que comença per a; només coincideix el primer element de la llista perquè els altres dos elements de la llista comencen amb una A majúscula. El segon selector no distingeix entre majúscules i minúscules, així que la correspondència és entre tots els elements de la llista.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

- -
-

Nota: També hi ha un valor s més recent, que imposa la coincidència de majúscules i les minúscules en contextos en què normalment no es dona; tanmateix, aquest valor encara no té gaire compatibilitat amb els navegadors i no resulta gaire útil en el context de l’HTML.

-
- -

Propers passos

- -

Ara que hem acabat amb els selectors d’atribut, pots avançar cap a l’article següent sobre les pseudoclasses i els pseudoelements.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Els selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diverses direccions
    6. -
  6. El desbordament dels continguts
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionar elements en CSS
    9. -
  9. Imatges, mèdia i elements de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depura el teu CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/selectors_css/selectors_de_tipus_classe_i_id/index.html b/files/ca/learn/css/building_blocks/selectors_css/selectors_de_tipus_classe_i_id/index.html deleted file mode 100644 index 2cdbdc244a..0000000000 --- a/files/ca/learn/css/building_blocks/selectors_css/selectors_de_tipus_classe_i_id/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: 'Selectors de tipus, classe i ID' -slug: Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID -translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

- -

En aquest article farem un cop d’ull als selectors més senzills que hi ha disponibles, i que probablement utilitzaràs més a l'hora de treballar.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Obtenir més informació sobre els diferents selectors CSS que podem utilitzar per a aplicar CSS a un document.
- -

Selectors de tipus

- -

A vegades, a un selector de tipus també se'l denomina selector de noms d'etiqueta o selector d'elements, perquè selecciona una etiqueta/element HTML al document. En l’exemple següent hem utilitzat selectors span, em i strong. Per tant, hem aplicat estil a totes les instàncies <span>, <em> i <strong>.

- -

Afegeix una regla CSS que seleccioni l’element <h1> i en canviï el color pel blau.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}

- -

El selector universal

- -

El selector universal s'indica amb un asterisc (*) i selecciona tot el que hi ha dins del document (o dins de l'element pare, si s'encadena amb un altre element i un combinador descendent, per exemple). En l'exemple següent hem utilitzat el selector universal per a eliminar els marges de tots els elements. Això vol dir que, en lloc de l'estil predeterminat que hi afegeix el navegador, que deixa un espai de marge entre els títols d’encapçalament i els paràgrafs, tot està junt i no podem distingir els diferents paràgrafs amb facilitat.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}

- -

Aquest tipus de comportament a vegades es pot veure en els «fulls d'estil de restabliment» (o «fulls d'estil reset»), que eliminen tot l'estil que aplica el navegador. Van ser molt populars en un moment determinat, tot i que eliminar tots els estils significava que aleshores havies de tornar-ho a fer tot! Per tant, acostumem a utilitzar el selector universal amb atenció per a afrontar situacions molt específiques, com la que es descriu a continuació.

- -

Ús del selector universal per a facilitar la lectura

- -

Un dels usos del selector universal és fer els selectors més fàcils de llegir i més evidents, en termes de què fan. Per exemple, si vull seleccionar el primer fill de qualsevol element <article>, independentment de quin element sigui, i posar-lo en negreta, podem utilitzar el selector {{cssxref(":first-child")}}, que veurem amb més detall en l’article sobre pseudoclasses i pseudoelements, com un selector descendent juntament amb el selector d'elements <article>:

- -
article :first-child {
-
-}
- -

Això es pot confondre, però, amb article:first-child, que selecciona qualsevol element <article> que sigui el primer fill d'un altre element.

- -

Per evitar aquesta confusió, podem afegir al selector :first-child el selector universal, de manera que ara resulta obvi el que fa el selector. Selecciona qualsevol element que sigui el primer fill d'un element <article>:

- -
article *:first-child {
-
-}
- -

Selectors de classe

- -

El selector de classe s’inicia amb un caràcter de punt (.) i selecciona qualsevol element del document que tingui aplicada la classe seleccionada. En l'exemple en directe següent hem creat una classe anomenada .highlight i l'hem aplicada a diversos llocs del document. Es ressalten tots els elements que tenen aplicada aquesta classe.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}

- -

Seleccionar classes en elements concrets

- -

Pots crear un selector que seleccioni els elements específics que tenen aplicada aquella classe. En l'exemple següent, destaquem un element <span> que té una classe highlight diferent del destacat que apliquem a l'encapçalament <h1> amb classe highlight. Ho fem adjuntant la classe al selector de tipus per a l’element que volem seleccionar, sense cap espai entremig.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}

- -

Aquesta manera de seleccionar dificulta la reutilització de CSS, perquè la classe només s'aplica a aquest element en concret, i hauràs d'afegir un altre selector si decideixes que les regles s'han d'aplicar també a altres elements.

- -

Seleccionar un element si té aplicada més d'una classe

- -

Pots aplicar diverses classes a un element i seleccionar-les individualment, o bé seleccionar l'element només quan inclou totes les classes del selector. Això pot ser útil per a crear components que es poden combinar de maneres diferents al teu lloc web.

- -

En l'exemple següent hi ha un element <div> que inclou una nota. La vora gris s'aplica quan la casella té una classe notebox. Si també té una classe warning o danger, el {{cssxref("border-color")}} canvia.

- -

Podem dir-li al navegador que només volem fer coincidir l’element si té totes aquestes classes tot encadenant-les juntes sense espais entremig.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}

- -

Selectors d’ID

- -

Un selector d’ID comença amb un caràcter # en lloc d'un caràcter de punt, però s'utilitza bàsicament de la mateixa manera que un selector de classe. Ara bé, un ID només es pot utilitzar una vegada en cada document, i cada element pot tenir un id com a màxim. El selector pot seleccionar l’element que té l’id establert i també pots precedir l'identificador amb un selector de tipus que seleccioni l’element només si coincideix amb l'ID. Pots veure aquests dos usos en l'exemple següent:

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}

- -
-

Nota: Tal com hem après en l’article que parla d'especificitat, un ID té més especificitat i anul·la la majoria dels altres selectors. Això pot dificultar les coses a l'hora de treballar. En la majoria dels casos és preferible afegir una classe a l'element, en lloc d'utilitzar un ID, però a vegades fer servir un ID és l'única manera de seleccionar l'element (potser perquè no es té accés al codi d’etiquetatge i, per tant, no es pot editar).

-
- -

En el proper article

- -

Continuarem explorant els selectors i veurem els selectors d’atribut.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Els selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diverses direccions
    6. -
  6. El desbordament dels continguts
    7. -
  7. Els valors i les unitats
    8. -
  8. Dimensionar elements en CSS
    9. -
  9. Imatges, media i elements de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depurar el CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/sizing_items_in_css/index.html b/files/ca/learn/css/building_blocks/sizing_items_in_css/index.html new file mode 100644 index 0000000000..5ff34b8d93 --- /dev/null +++ b/files/ca/learn/css/building_blocks/sizing_items_in_css/index.html @@ -0,0 +1,129 @@ +--- +title: Dimensionar elements en CSS +slug: Learn/CSS/Building_blocks/Dimensionar_elements_en_CSS +translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}
+ +

En els articles que hem vist fins ara has descobert diverses maneres de dimensionar els elements d'una pàgina web amb CSS. És important entendre la importància de les diferents característiques dels elements del teu disseny, i en aquest article resumim les maneres com assignar una mida als elements amb CSS i definim uns quants termes relatius al dimensionament que t'ajudaran en el futur.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Entendre les diferents maneres com podem assignar mides als elements amb CSS.
+ +

La mida natural o intrínseca de les coses

+ +

Els elements HTML tenen una mida natural predeterminada abans que els afecti cap codi CSS. Un exemple senzill n’és una imatge. Una imatge té una amplada i una alçada definides en el fitxer d'imatge, que s'incorpora a la pàgina. Aquesta mida es descriu com la mida intrínseca, que prové de la imatge mateixa.

+ +

Quan poses una imatge en una pàgina i no en canvies l’alçada i l’amplada, ja sigui amb atributs en l’etiqueta <img> o amb el CSS, es mostra amb aquesta mida intrínseca. Hem donat a la imatge de l’exemple següent una vora perquè puguis veure la dimensió que té el fitxer.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}

+ +

Un element {{htmlelement("div")}} buit, però, no té mida pròpia. Si afegeixes un element {{htmlelement("div")}} sense contingut al teu HTML, i hi poses una vora, com hem fet abans amb la imatge, veuràs que a la pàgina apareix una línia. Es tracta de la vora de l'element replegat sobre si mateix perquè no té contingut que el mantingui obert. En el nostre exemple següent, aquesta vora s'estén per tota l'amplada de l’element que el conté, perquè és un element que té un comportament de bloc, amb el qual ja t'hauries de començar a familiaritzar. No té alçada (ni mida en la dimensió del bloc) perquè no hi ha contingut.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}

+ +

Afegeix una mica de text a l'interior de l'element buit de l'exemple anterior. Ara la vora envolta aquest text perquè el contingut defineix l'altura de l'element. La mida d'aquest element <div> en la dimensió del bloc prové, per tant, de la mida del contingut. Una vegada més, aquesta és la mida intrínseca de l'element: el contingut en defineix la mida.

+ +

Configurar una mida específica

+ +

Per descomptat, podem donar una mida específica als elements del nostre disseny. Quan es dona una mida a un element (el contingut del qual hauria d’encaixar en aquesta mida) ens hi referim com la mida extrínseca. Agafa els elements <div> de l'exemple anterior: podem donar-los valors específics d'amplada i d'alçada, i aleshores tindran aquesta mida, independentment del contingut que hi fiquem a dins. Tal com vam descobrir en l’anterior article sobre el desbordament, una altura fixa pot provocar el desbordament del contingut si el contingut no cap en l’espai de la caixa.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}

+ +

Arranjar l'alçada dels elements amb longituds o percentatges s’ha de fer amb molta cura justament pel problema del desbordament.

+ +

L'ús de percentatges

+ +

En molts sentits, els percentatges actuen com unitats de longitud, i com hem comentat en l'article sobre valors i unitats, sovint es poden intercanviar amb les longituds. Quan fas servir un percentatge has de ser conscient de què és percentatge. En el cas d’una caixa dins d’un altre contenidor, si dones a la caixa secundària un percentatge d’amplada, serà un percentatge de l’amplada del contenidor principal.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}

+ +

Això és perquè els percentatges es calculen a partir de la mida del bloc contenidor. Sense un percentatge aplicat, el nostre element <div> ocuparia el 100% de l'espai disponible, perquè és un element de bloc. Si hi donem un percentatge d’amplada, es converteix en un percentatge de l’espai que ompliria normalment.

+ +

Marges i àrea de farciment com a percentatges

+ +

Si estableixes margins i padding com percentatges, pot ser que observis algun comportament estrany. En l’exemple següent hi ha una caixa. Hem assignat a la caixa interior un marge ({{cssxref("margin")}}) del 10% i un àrea de farciment ({{cssxref("padding")}}) també del 10%. L'àrea de farciment i el marge de les parts superior i inferior de la caixa tenen la mateixa mida que els marges de l’esquerra i la dreta.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}

+ +

Podries esperar, per exemple, que el percentatge dels marges superior i inferior sigui un percentatge de l'alçada de l'element, i que el percentatge dels marges esquerre i dret sigui un percentatge de l'amplada de l'element. Però aquest no és el cas!

+ +

Quan utilitzes marges i àrees de farciment definits en percentatges, el valor es calcula a partir de la mida de l’element de línia, per tant, de l'amplada de l'element quan es treballa en un llenguatge horitzontal. En el nostre exemple, tots els marges i l'àrea de farciment són del 10% de l'amplada de l'element. Això significa que pots tenir marges i àrea de farciment de la mateixa mida al voltant de la caixa. És un fet que val la pena de recordar si utilitzes els percentatges d'aquesta manera.

+ +

Mida mínima i màxima

+ +

A més d’assignar mides fixes a les coses, podem demanar al CSS que doni a un element una mida mínima o màxima. Si tens una caixa que pot contenir una quantitat variable de contingut i vols que sempre tingui una alçada determinada com a mínim, pots establir la propietat {{cssxref("min-height")}}. La caixa sempre serà almenys d'aquesta alçada, però creixerà si hi ha més contingut del que pot contenir amb aquesta alçada mínima.

+ +

En l'exemple següent hi ha dues caixes, totes dues amb una alçada establerta en 150 píxels. La caixa de l’esquerra té 150 píxels d’alçada; la caixa de la dreta ha augmentat la mida a més de 150 píxels perquè té més contingut i no hi cabria.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}

+ +

Això és molt útil per tractar amb quantitats de contingut variables i evitar desbordaments.

+ +

Un ús comú de {{cssxref("max-width")}} és reduir les imatges si no hi ha prou espai perquè es mostrin amb l’amplada intrínseca, alhora que es garanteix que no superen l'alçada de la caixa.

+ +

Per exemple, si una imatge té una amplada intrínseca més petita que la de l’element que la conté i hi estableixes una amplada de width: 100%, la imatge s’estirarà i es farà gran, i podria pixelar-se. En canvi, si l’amplada intrínseca fos més gran que l’element que la conté, desbordaria. És probable que no vulguis que passi cap d'aquestes dues coses.

+ +

Si en lloc d'això utilitzes max-width: 100%, la imatge es pot fer més petita que la seva mida intrínseca, però no es farà més gran que el 100% de la seva mida.

+ +

En l'exemple següent hem utilitzat dues vegades la mateixa imatge. A la primera hi hem donat width: 100%, i com que està continguda en un recipient més gran, s'estén per tota l'amplada del contenidor. La segona imatge, en canvi, té max-width: 100%, i no s’estira per ocupar tot el recipient. La tercera caixa torna a contenir la mateixa imatge, amb max-width: 100%; en aquest cas pots observar com s’ha reduït per encaixar dins la caixa.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}

+ +

Aquesta tècnica s’utilitza per fer que les imatges siguin adaptatives, de manera que quan es visualitzen en un dispositiu més petit es redueixen adequadament. Però no has d'utilitzar aquesta tècnica per carregar imatges molt grans i després reduir-les en el navegador. Les imatges han de tenir una mida adequada i no han de ser més grans del que es necessita en relació amb la mida més gran en què es poden mostrar en el disseny. La descàrrega d’imatges massa grans fa que el teu lloc web vagi més lent i pot ser més car per als usuaris que tenen una connexió amb comptador de dades.

+ +
+

Nota: Troba més informació sobre les tècniques d’imatges adaptatives.

+
+ +

Unitats de finestra gràfica

+ +

La finestra gràfica (que és l’àrea visible de la teva pàgina en el navegador que utilitzes per visitar un lloc web) també té una mida. En CSS hi ha unes unitats que es relacionen amb la mida de la finestra gràfica: la unitat vw per a l'amplada i la unitat vh per a l'alçada. Amb aquestes unitats pots establir mides relatives a la finestra gràfica de l'usuari.

+ +

1vh és igual a l'1% de l’alçada de la finestra gràfica, i 1vw és igual a l’1% de l’amplada de la finestra gràfica. Pots fer servir aquestes unitats per a dimensionar les caixes, però també el text. A l'exemple següent tenim una caixa que té una mida de 20vh i 20vw. La caixa conté una lletra A, que ha rebut un valor {{cssxref("font-size")}} de 10vh.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}

+ +

Si canvies els valors de vh i vw, canvia la mida de la caixa o de la lletra; si canvies la mida de la finestra gràfica, també canvien les mides de la caixa i de la lletra perquè es mostren en relació amb la finestra gràfica. Per veure com canvia l'exemple quan canvies la mida de la finestra gràfica, has de carregar l'exemple en una finestra nova del navegador que puguis redimensionar (perquè la teva finestra gràfica és l’<iframe> incorporat que conté l'exemple anterior). Obre l'exemple, redimensiona la finestra del navegador i observa què passa amb la mida de la caixa i del text.

+ +

Dimensionar les coses segons la finestra gràfica pot ser útil en els teus dissenys. Per exemple, si vols que una secció principal es mostri a pantalla completa abans que la resta del contingut, fes que aquella part de la pàgina tingui un 100vh d’alçada i empenyerà la resta del contingut fora de la finestra gràfica, i això significa que només apareixerà quan l'usuari es desplaci pel document.

+ +

Resum

+ +

Aquest article t'ha proporcionat un resum dels problemes principals que podries trobar-te a l’hora de dimensionar les coses en un lloc web. En passar a l’article de Disseny de pàgines web amb CSS, la mida serà un aspecte molt important per a dominar els diferents mètodes de disseny, per la qual cosa val la pena entendre els conceptes que s'han explicat aquí abans de continuar.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Els selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diferents direccions
    6. +
  6. El desbordament del contingut
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionar elements en CSS
    9. +
  9. Imatges, mèdia i elements de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depura el teu CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git a/files/ca/learn/css/building_blocks/valors_i_unitats_css/index.html b/files/ca/learn/css/building_blocks/valors_i_unitats_css/index.html deleted file mode 100644 index b754bd27ac..0000000000 --- a/files/ca/learn/css/building_blocks/valors_i_unitats_css/index.html +++ /dev/null @@ -1,394 +0,0 @@ ---- -title: Valors i unitats CSS -slug: Learn/CSS/Building_blocks/Valors_i_unitats_CSS -translation_of: Learn/CSS/Building_blocks/Values_and_units ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
- -

Totes les propietats CSS tenen assignats un valor o un conjunt de valors permesos; donar una ullada a qualsevol pàgina de propietats de MDN t'ajudarà a comprendre els valors que admet una propietat concreta. En aquest article veurem uns quants dels valors i unitats que són d’ús més habitual.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Adquirir informació sobre els diferents tipus de valors i unitats que s’utilitzen en les propietats CSS.
- -

Què és un valor CSS

- -

En les especificacions CSS i en les pàgines de propietat d'aquest projecte MDN pots identificar amb facilitat els valors perquè estan escrits entre parèntesis angulars (brackets), per exemple <color> o <length>. Si veus que per a una propietat és vàlid el valor <color>, vol dir que per a aquesta propietat pots utilitzar com a valor qualsevol dels colors vàlids que apareixen a la pàgina de referència de la propietat <color>.

- -
-

Nota: Observa que també es fa referència als valors CSS com tipus de dades. Bàsicament són termes intercanviables: el terme tipus de dada és en realitat una altra manera de dir valor.

-
- -
-

Nota: Els valors CSS solen denotar-se entre parèntesis angulars per a diferenciar-los de les propietats CSS (per exemple, la propietat {{cssxref("color")}} i el tipus de dada <color>). Encara que tant els tipus de dades CSS com els elements d’HTML es denoten entre parèntesis angulars, és poc probable que et confonguis perquè s'utilitzen en contextos molt diferents.

-
- -

En l'exemple següent hem establert el color del nostre títol de capçalera amb una paraula clau, i el fons amb la funció rgb():

- -
h1 {
-  color: black;
-  background-color: rgb(197,93,161);
-} 
-
- -

Un valor en CSS és una manera de definir una col·lecció de subvalors permesos. Això vol dir que si <color> és un valor permès, no t'has de demanar quins dels diferents tipus de valor del color es poden utilitzar: les paraules clau, els valors hexadecimals, les funcions rgb(), etc. Pots utilitzar qualsevol valor <color> disponible, sempre que sigui compatible amb el navegador. La pàgina de MDN et dona informació sobre la compatibilitat de cada valor amb els navegadors. Per exemple, consulta la pàgina <color> i observa que en la secció de compatibilitat dels navegadors s’enumeren diferents tipus de valors de color i la compatibilitat que tenen amb els diferents navegadors.

- -

A continuació donem una ullada a uns quants dels tipus de valors i unitats amb què et pots trobar habitualment, amb exemples perquè facis proves amb diferents valors possibles.

- -

Nombres, longituds i percentatges

- -

En CSS pots trobar diversos tipus de dades numèriques. Totes les dades següents es classifiquen com a dades numèriques:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Tipus de dadaDescripció
<integer>Un <integer> és un nombre enter, com ara 1024 o -55.
<number>Un <number> representa un nombre decimal: pot tenir o no un punt de separació de xifres decimals, per exemple 0.255, 128 o -1.2.
<dimension>Una <dimension> és un valor <number> amb una unitat associada, per exemple 45deg (graus), 5s (segons) o 10px (píxels). <dimension> és una categoria «paraigua» que inclou els tipus <length>, <angle>, <time> i <resolution>.
<percentage>Un <percentage> representa una proporció d'algun altre valor, per exemple el 50%. Els valors de percentatge sempre són relatius a una altra quantitat, per exemple, la longitud d'un element en percentatge és relativa a la longitud de l'element pare.
- -

Longituds

- -

El tipus numèric que es troba amb més freqüència és <length>, per exemple 10px (píxels) o 30em. En CSS s'utilitzen dos tipus de longituds: relatives i absolutes. És important conèixer-ne la diferència per a entendre quines mides pot atènyer un element.

- -

Unitats de longitud absolutes

- -

Totes les unitats que es mostren a continuació són unitats de longitud absolutes: no són relatives a cap altre element i es considera que tenen sempre la mateixa mida.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UnitatNomEquival a
cmCentímetres1cm = 96px/2,54
mmMil·límetres1 mm = 1/10 d'1cm
QQuarts de mil·límetre1T = 1/40 d'1cm
inPolzades1in = 2,54cm = 96px
pcPiques1pc = 1/16 d'1"
ptPunts1pt = 1/72a d'1"
pxPíxels1px = 1/96a d'1"
- -

La majoria d'aquests valors són més útils quan s'utilitzen en una sortida en format imprès, més que no en una sortida per pantalla. Per exemple, la pantalla no s’acostuma a mesurar en cm (centímetres). Normalment, les úniques unitats que es fan servir per a la pantalla són els píxels (px).

- -

Unitats de longitud relatives

- -

Les unitats de longitud relatives són unitats que es prenen en relació amb un altre element, potser la mida de la lletra o la mida de la finestra gràfica. L’avantatge d’utilitzar unitats relatives és que amb una planificació acurada pots definir a escala la mida del text o d’altres elements de la pàgina. A la taula següent pots trobar algunes de les unitats que són més útils per al desenvolupament web.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UnitatRelativa a
em -

La mida de la lletra de l’element pare, en el cas de propietats tipogràfiques como ara {{cssxref("font-size")}}, i la mida de la font del propi element, en el cas d'altres propietats com {{cssxref("width")}}.

-
exL’altura x de la lletra de l'element.
chLa mesura d'avanç (amplada) del glif «0» del tipus de lletra de l'element.
remLa mida de la lletra de l’element arrel.
lhL’alçada de línia de l’element.
vwL’1% de l'amplada de la finestra gràfica.
vhL’1% de l'alçada de la finestra gràfica.
vminL’1% de la dimensió més petita de la finestra gràfica.
vmaxL’1% de la dimensió més gran de la finestra gràfica.
- -

Un exemple il·lustratiu

- -

En l'exemple següent pots observar com es comporten algunes unitats de longitud relativa i absoluta. La primera caixa té una amplada ({{cssxref("width")}}), establerta en píxels. Com que és una unitat absoluta, aquesta amplada roman sempre igual, independentment d’altres canvis.

- -

La segona caixa té una amplada fixa establerta en unitats vw (amplada de la finestra gràfica). Aquest valor és relatiu a l'amplada de la finestra gràfica; així, 10vw és un 10 per cent de l'amplada de la finestra gràfica. Si canvia l’amplada de la finestra del navegador, la mida de la caixa ha de canviar, però aquí no et funcionarà perquè aquest exemple està incrustat a la pàgina amb <iframe>. Si vols veure-ho en acció, has d’obrir l’exemple en una pestanya nova del teu navegador.

- -

La tercera caixa utilitza unitats em. Aquestes unitats són relatives a la mida de la lletra. Hem establert una mida de lletra d'1em en l’element {{htmlelement("div")}} que conté una classe .wrapper. Canvia aquest valor per 1,5em i observa que la mida de la lletra de tots els elements augmenta, però només augmenta l’amplada de l’últim element, perquè l’amplada és relativa a la mida de la lletra.

- -

Després de seguir les instruccions anteriors, juga una mica més amb els valors i observa què hi obtens.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}

- -

Unitats em i rem

- -

Les unitats em i rem són les dues longituds relatives que és probable que et trobis amb més freqüència per a dimensionar elements, des de caixes fins a text. Val la pena entendre com funcionen i en què es diferencien, sobretot quan comences a introduir-te en temes més complexos, com ara aplicar estil al text o el disseny de pàgines web amb CSS. T’ho mostrem a continuació amb un exemple.

- -

L’HTML d’aquest exemple consisteix en dos blocs de llistes imbricades: hi ha tres llistes en total i tots dos blocs tenen el mateix HTML. L’única diferència és que en el primer bloc hi ha una classe em, i en el segon una classe rem.

- -

Per començar, establim la mida de la lletra de l’element <html> a 16px.

- -

Breument, la unitat em fa referència a «la mida de lletra de l'element pare». Els elements {{htmlelement("li")}} que hi ha dins dels elements {{htmlelement("ul")}} amb una classe em hereten la mida de l’element pare, de manera que en cada nivell d’imbricació successiu la mida de la lletra augmenta progressivament perquè en cadascun hi ha una mida de lletra establerta en 1.3em (1,3 vegades la mida de la lletra de l’element pare).

- -

Breument, la unitat rem fa referència a «la mida de lletra de l'element arrel» (els rem estàndard es corresponen amb l’em de l’arrel). Els elements {{htmlelement("li")}} dins dels elements {{htmlelement("ul")}} amb una classe rem prenen la mida de l'element arrel (<html>). Això significa que no augmenten en cada nivell d’imbricació successiu.

- -

Tanmateix, observa que si canvies la mida de la lletra (font-size) de l’element <html> amb el CSS, canvia tot el que hi està relacionat, tant els rem com els em.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} 

- -

Percentatges

- -

En molts casos, un percentatge és tractat de la mateixa manera que una longitud. La qüestió amb els percentatges és que sempre es defineixen en relació amb algun altre valor. Per exemple, si defineixes la mida de la lletra (font-size) d'un element com un percentatge, aquesta serà un percentatge del valor de font-size de l’element pare. Si fas servir un percentatge per a un valor de l’amplada (width), serà un percentatge del valor de width de l’element pare.

- -

En l'exemple següent, les dues caixes amb la mida especificada en unitats de percentatge i les dues caixes amb la mida especificada en unitats de píxel tenen els mateixos noms de classe. Tots dos conjunts de caixes tenen 200px i un 40% d’amplada, respectivament.

- -

La diferència és que el segon conjunt de dues caixes es troba dins d’un contenidor de 400 píxels d’amplada. La segona caixa de 200px d'amplada té la mateixa amplada que la primera, però la segona caixa del 40% ara és el 40% de 400px, molt més estreta que la primera.

- -

Canvia l'amplada del contenidor o el valor en percentatge i observa què passa.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} 

- -

L’exemple següent mostra les mides de lletra en percentatges. Cada element de llista <li> té una mida de lletra font-size del 80%; per tant, la lletra dels elements de llista imbricats és cada cop més petita a mesura que la mida de lletra s’hereta de l’element pare.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} 

- -

Observa que molts valors accepten unitats de longitud i de percentatge, però n’hi ha que només accepten unitats de longitud. Consulta quins valors s’accepten en les pàgines de referència de cada propietat de MDN. Si el valor permès inclou <length-percentage>, pots utilitzar una longitud o un percentatge. Si el valor permès només inclou <length> no s’admet l’ús de percentatges.

- -

Nombres

- -

Hi ha valors que accepten nombres sense unitat. Un exemple de propietat que accepta un nombre sense unitat és la propietat opacity, que controla l’opacitat d’un element (el nivell de transparència). Aquesta propietat accepta un nombre entre el 0 (totalment transparent) i l’1 (totalment opac).

- -

En l’exemple següent, canvia el valor opacity per diversos valors decimals entre el 0 i l’1 i observa com la caixa i el contingut es tornen més o menys opacs.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} 

- -
-

Nota: Si en CSS fas servir un nombre com a valor, no l’has de posar entre cometes.

-
- -

Color

- -

Hi ha moltes maneres d’especificar el color en CSS, i algunes s’han implementat més recentment que d’altres. El CSS pot utilitzar els mateixos valors de color per a qualsevol element, ja sigui per a especificar el color del text com el color del fons, o qualsevol altra cosa.

- -

El sistema de colors estàndard disponible en els equips moderns és de 24 bits, que permet la visualització d’uns 16,7 milions de colors diferents mitjançant una combinació de diferents canals vermell, verd i blau amb 256 valors diferents per a cada canal (256 x 256 x 256 = 16.777.216). Observa algunes de les maneres com podem especificar colors amb el CSS.

- -
-

Nota: En aquest tutorial analitzarem els mètodes habituals per a especificar el color que tenen una bona compatibilitat amb els navegadors. N’hi ha d’altres, que no tenen una bona compatibilitat amb els navegadors i són menys habituals.

-
- -

Paraules clau per als colors

- -

Molt sovint en els exemples de la nostra secció d’aprenentatge o en alguna altra pàgina de MDN veuràs que utilitzem paraules clau de colors, perquè són una manera senzilla i comprensible d’especificar un color. Hi ha moltes paraules clau, i algunes tenen noms força curiosos. En pots veure una llista completa a la pàgina dedicada al valor <color>.

- -

Juga amb diferents valors de color en els exemples en viu que et presentem a continuació per a entendre més bé com funcionen.

- -

Els valors RGB hexadecimals

- -

El tipus de valor de color següent que probablement trobaràs més sovint són els codis hexadecimals. Cada valor hexadecimal consisteix en un símbol hashtag/coixinet (#) seguit de sis nombres hexadecimals, cadascun dels quals pot prendre un dels 16 valors que van del 0 a la f (que representa el 15), és a dir: 0123456789abcdef. Cada parell de valors representa un dels canals (vermell, verd i blau) i permet especificar qualsevol dels 256 valors disponibles per a cada un (16 x 16 = 256).

- -

Aquests valors són una mica més complexos i menys fàcils d’entendre, però són molt més versàtils que les paraules clau: amb els valors hexadecimals pots representar qualsevol color que vulguis per a la teva paleta de colors.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} 

- -

Canvia un cop més els valors i observa com varien els colors.

- -

Valors RGB i RGBA

- -

El tercer sistema de què parlarem aquí és RGB. Un valor RGB és una funció rgb() que proporciona tres paràmetres que representen els valors dels canals vermell, verd i blau dels colors, igual que els valors hexadecimals. La diferència amb RGB és que els canals no estan representats per dos dígits hexadecimals, sinó per un nombre decimal entre 0 i 255, que sembla una mica més fàcil d’entendre.

- -

Reescrivim el nostre darrer exemple adaptat amb l’ús de colors RGB:

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} 

- -

També pots utilitzar colors RGBA: funcionen exactament igual que els colors RGB, de manera que pots utilitzar qualsevol valor RGB, però s’hi afegeix un quart valor que representa el canal alfa del color, que en controla l'opacitat. Si estableixes aquest valor a 0, el color és totalment transparent, mentre que 1 el fas totalment opac. Els valors que hi ha entremig proporcionen diferents nivells de transparència.

- -
-

Nota: Entre establir un canal alfa per a un color o utilitzar la propietat {cssxref("opacity")}} que hem vist abans hi ha una diferència fonamental. Quan empres l'opacitat, l’element i tot el que té a l’interior són opacs, mentre que amb l’ús de colors RGBA, només es torna opac el color que especifiques.

-
- -

En l'exemple següent hem afegit una imatge de fons al bloc que conté les nostres caixes de colors. A continuació, hem configurat les caixes perquè tinguin valors d'opacitat diferents: observa que el fons es veu més quan el valor del canal alfa és més petit.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}

- -

Canvia els valors del canal alfa en aquest exemple i observa com això afecta la sortida del color.

- -
-

Nota: En algun moment els navegadors moderns es van actualitzar perquè rgba() i rgb(), i també hsl() i hsla() (els veurem més avall) fossin àlies purs els uns dels altres i es comportessin exactament igual. Així, per exemple, tant rgba() com rgb() accepten colors amb valors de canal alfa i sense. Prova de canviar en l'exemple anterior les funcions rgba() per rgb() i comprova si els colors encara funcionen. Tot i que és decisió teva la manera com aplicar estil, fer servir funcions diferents que separin les definicions dels colors transparents de les dels que no ho són proporciona una compatibilitat (una mica) més bona amb els navegadors i pot servir d’indicador visual de quins colors del teu codi estan definits amb transparència.

-
- -

Els valors HSL i HSLA

- -

Una mica menys de compatibilitat que RGB presenta el model de color HSL (no és compatible amb versions antigues d’Internet Explorer), que es va implementar després de molta insistència per part dels dissenyadors. En lloc dels valors vermell, verd i blau, la funció hsl() accepta valors de tonalitat, saturació i lluminositat, que distingeixen els 16,7 milions de colors, però d'una manera diferent:

- - - -

Podem adaptar l'exemple RGB amb colors HSL, d’aquesta manera:

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} 

- -

De la mateixa manera que RGB té RGBA, HSL té un equivalent HSLA, que et proporciona la mateixa funció d’especificació del canal alfa. Ho mostrem a continuació canviant el nostre exemple RGBA adaptat amb colors HSLA.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} 

- -

Pots utilitzar qualsevol d'aquests valors de color en els teus projectes. En la majoria de casos és probable que et triïs una paleta de colors (i el mètode que escullis per a especificar el color), que faràs servir al llarg de tot el projecte. Pots fer combinacions de colors i barreges, però per coherència acostuma a ser millor si tot el teu projecte empra el mateix model de colors.

- -

Imatges

- -

El tipus de dades <image> utilitza valors permesos que són imatges. Poden ser tant fitxers d'imatge enllaçats des d'una funció url(), com degradats.

- -

En l'exemple següent presentem una imatge i un degradat emprats com a valors de la propietat CSS background-image.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} 

- -
-

Nota: hi ha altres valors possibles per a <image>, però són més recents i encara tenen poca compatibilitat amb els navegadors. Si vols saber-ne més, dona una ullada a la pàgina que MDN dedica al tipus de dada <image>.

-
- -

Posició

- -

El tipus de dades <position> representa un conjunt de coordenades 2D que s’utilitzen per a posicionar un element, com ara una imatge de fons (amb background-position). Pot prendre paraules clau com top, left, bottom, right i center per a alinear els elements amb límits específics d’una caixa 2D, i també longituds, que representen desplaçaments respecte de les vores superior i esquerra de la caixa.

- -

Un valor de posició típic consta de dos valors: el primer estableix la posició horitzontal, i el segon la vertical. Si només especifiques el valor per a un eix, l’altre utilitza center per defecte.

- -

En l’exemple següent hem posicionat una imatge de fons a 40px de la part superior dreta del contenidor amb una paraula clau.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} 

- -

Juga amb aquests valors i observa com pots anar desplaçant la imatge.

- -

Cadenes i identificadors

- -

Al llarg dels exemples anteriors hem vist que es fan servir paraules clau com a valors (per exemple, les paraules clau de <color> com ara red, black, rebeccapurple i goldenrod). Aquestes paraules clau s’anomenen més precisament identificadors, i són valors especials que el CSS entén. Per tant, no s'escriuen entre cometes (és a dir, no es tracten com cadenes alfanumèriques).

- -

En alguns casos en CSS s’utilitzen cadenes alfanumèriques, per exemple en especificar contingut generat. En aquests casos, aquest valor es posa entre cometes per a denotar que es tracta d’una cadena alfanumèrica. En l'exemple següent utilitzem paraules clau de color, que s’escriuen sense cometes, i una cadena de contingut generat, escrita entre cometes.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} 

- -

Funcions

- -

L'últim tipus de valor que analitzarem és el grup de valors coneguts com a funcions. En programació, una funció és un bloc de codi reutilitzable que es pot executar diverses vegades per completar una tasca repetitiva amb un esforç mínim tant per part del desenvolupador com de l’ordinador. Les funcions normalment s’associen a idiomes com JavaScript, Python o C++, però també n’hi ha en CSS, com a valors de propietats. Ja hem vist funcions en acció en l’article sobre els colors: rgb(), hsl(), etc. El valor que retorna una imatge des d'un fitxer, url(), també és una funció.

- -

Un valor que es comporta més com les funcions que pots trobar en un llenguatge de programació tradicional és la funció calc() de CSS. Aquesta funció et permet fer càlculs senzills dins del CSS. És útil sobretot quan vols calcular valors que no pots definir quan escrius el CSS del teu projecte perquè necessites que el navegador te’ls proporcioni en temps d'execució.

- -

Per exemple, a continuació fem servir la funció calc() per a assignar a una caixa una amplada d’un 20% + 100px. El 20% es calcula a partir de l’amplada de l’element pare contenidor .wrapper, i canvia si en canvia l’amplada. Aquest càlcul no es pot fer prèviament perquè no sabem quin serà el 20% de l’element pare, de manera que demanem al navegador que ens ho calculi amb la funció calc().

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}

- -

Posa a prova el teu coneixement

- -

Hem vist molt de contingut en aquest article. En recordes la informació més important? Trobaràs més proves per comprovar si has retingut aquesta informació abans de seguir a Test your skills: Values and units.

- -

Resum

- -

Hem fet una passada ràpida pels tipus de valors i unitats més habituals amb què et pots trobar. Pots consultar tots els diferents tipus a la pàgina de referència Valors i unitats en CSS; molts d’ells els faràs servir a mesura que avances per aquests articles.

- -

L’important és que recordis que cada propietat té una llista determinada de valors permesos, i que cada valor té una definició que explica quins en són els subvalors. Aleshores, pots consultar-ne les dades específiques aquí, a les pàgines d’MDN.

- -

Per exemple, és útil saber que <image> també et permet crear un degradat de color, però potser no és obvi.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}

- -

En aquest mòdul

- -
    -
  1. La cascada i l'herència
    2. -
  2. Els selectors CSS - -
    3. -
  3. El model de caixes
    4. -
  4. Fons i vores
    5. -
  5. El tractament del text en diverses direccions
    6. -
  6. El desbordament dels continguts
    7. -
  7. Valors i unitats
    8. -
  8. Dimensionar elements amb el CSS
    9. -
  9. Imatges, mèdia i elements de formulari
    10. -
  10. Aplicar estil a les taules
    11. -
  11. Depura el teu CSS
    12. -
  12. Organitza el teu CSS
    13. -
diff --git a/files/ca/learn/css/building_blocks/values_and_units/index.html b/files/ca/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..b754bd27ac --- /dev/null +++ b/files/ca/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,394 @@ +--- +title: Valors i unitats CSS +slug: Learn/CSS/Building_blocks/Valors_i_unitats_CSS +translation_of: Learn/CSS/Building_blocks/Values_and_units +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
+ +

Totes les propietats CSS tenen assignats un valor o un conjunt de valors permesos; donar una ullada a qualsevol pàgina de propietats de MDN t'ajudarà a comprendre els valors que admet una propietat concreta. En aquest article veurem uns quants dels valors i unitats que són d’ús més habitual.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de treballar amb fitxers i d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Adquirir informació sobre els diferents tipus de valors i unitats que s’utilitzen en les propietats CSS.
+ +

Què és un valor CSS

+ +

En les especificacions CSS i en les pàgines de propietat d'aquest projecte MDN pots identificar amb facilitat els valors perquè estan escrits entre parèntesis angulars (brackets), per exemple <color> o <length>. Si veus que per a una propietat és vàlid el valor <color>, vol dir que per a aquesta propietat pots utilitzar com a valor qualsevol dels colors vàlids que apareixen a la pàgina de referència de la propietat <color>.

+ +
+

Nota: Observa que també es fa referència als valors CSS com tipus de dades. Bàsicament són termes intercanviables: el terme tipus de dada és en realitat una altra manera de dir valor.

+
+ +
+

Nota: Els valors CSS solen denotar-se entre parèntesis angulars per a diferenciar-los de les propietats CSS (per exemple, la propietat {{cssxref("color")}} i el tipus de dada <color>). Encara que tant els tipus de dades CSS com els elements d’HTML es denoten entre parèntesis angulars, és poc probable que et confonguis perquè s'utilitzen en contextos molt diferents.

+
+ +

En l'exemple següent hem establert el color del nostre títol de capçalera amb una paraula clau, i el fons amb la funció rgb():

+ +
h1 {
+  color: black;
+  background-color: rgb(197,93,161);
+} 
+
+ +

Un valor en CSS és una manera de definir una col·lecció de subvalors permesos. Això vol dir que si <color> és un valor permès, no t'has de demanar quins dels diferents tipus de valor del color es poden utilitzar: les paraules clau, els valors hexadecimals, les funcions rgb(), etc. Pots utilitzar qualsevol valor <color> disponible, sempre que sigui compatible amb el navegador. La pàgina de MDN et dona informació sobre la compatibilitat de cada valor amb els navegadors. Per exemple, consulta la pàgina <color> i observa que en la secció de compatibilitat dels navegadors s’enumeren diferents tipus de valors de color i la compatibilitat que tenen amb els diferents navegadors.

+ +

A continuació donem una ullada a uns quants dels tipus de valors i unitats amb què et pots trobar habitualment, amb exemples perquè facis proves amb diferents valors possibles.

+ +

Nombres, longituds i percentatges

+ +

En CSS pots trobar diversos tipus de dades numèriques. Totes les dades següents es classifiquen com a dades numèriques:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipus de dadaDescripció
<integer>Un <integer> és un nombre enter, com ara 1024 o -55.
<number>Un <number> representa un nombre decimal: pot tenir o no un punt de separació de xifres decimals, per exemple 0.255, 128 o -1.2.
<dimension>Una <dimension> és un valor <number> amb una unitat associada, per exemple 45deg (graus), 5s (segons) o 10px (píxels). <dimension> és una categoria «paraigua» que inclou els tipus <length>, <angle>, <time> i <resolution>.
<percentage>Un <percentage> representa una proporció d'algun altre valor, per exemple el 50%. Els valors de percentatge sempre són relatius a una altra quantitat, per exemple, la longitud d'un element en percentatge és relativa a la longitud de l'element pare.
+ +

Longituds

+ +

El tipus numèric que es troba amb més freqüència és <length>, per exemple 10px (píxels) o 30em. En CSS s'utilitzen dos tipus de longituds: relatives i absolutes. És important conèixer-ne la diferència per a entendre quines mides pot atènyer un element.

+ +

Unitats de longitud absolutes

+ +

Totes les unitats que es mostren a continuació són unitats de longitud absolutes: no són relatives a cap altre element i es considera que tenen sempre la mateixa mida.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitatNomEquival a
cmCentímetres1cm = 96px/2,54
mmMil·límetres1 mm = 1/10 d'1cm
QQuarts de mil·límetre1T = 1/40 d'1cm
inPolzades1in = 2,54cm = 96px
pcPiques1pc = 1/16 d'1"
ptPunts1pt = 1/72a d'1"
pxPíxels1px = 1/96a d'1"
+ +

La majoria d'aquests valors són més útils quan s'utilitzen en una sortida en format imprès, més que no en una sortida per pantalla. Per exemple, la pantalla no s’acostuma a mesurar en cm (centímetres). Normalment, les úniques unitats que es fan servir per a la pantalla són els píxels (px).

+ +

Unitats de longitud relatives

+ +

Les unitats de longitud relatives són unitats que es prenen en relació amb un altre element, potser la mida de la lletra o la mida de la finestra gràfica. L’avantatge d’utilitzar unitats relatives és que amb una planificació acurada pots definir a escala la mida del text o d’altres elements de la pàgina. A la taula següent pots trobar algunes de les unitats que són més útils per al desenvolupament web.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitatRelativa a
em +

La mida de la lletra de l’element pare, en el cas de propietats tipogràfiques como ara {{cssxref("font-size")}}, i la mida de la font del propi element, en el cas d'altres propietats com {{cssxref("width")}}.

+
exL’altura x de la lletra de l'element.
chLa mesura d'avanç (amplada) del glif «0» del tipus de lletra de l'element.
remLa mida de la lletra de l’element arrel.
lhL’alçada de línia de l’element.
vwL’1% de l'amplada de la finestra gràfica.
vhL’1% de l'alçada de la finestra gràfica.
vminL’1% de la dimensió més petita de la finestra gràfica.
vmaxL’1% de la dimensió més gran de la finestra gràfica.
+ +

Un exemple il·lustratiu

+ +

En l'exemple següent pots observar com es comporten algunes unitats de longitud relativa i absoluta. La primera caixa té una amplada ({{cssxref("width")}}), establerta en píxels. Com que és una unitat absoluta, aquesta amplada roman sempre igual, independentment d’altres canvis.

+ +

La segona caixa té una amplada fixa establerta en unitats vw (amplada de la finestra gràfica). Aquest valor és relatiu a l'amplada de la finestra gràfica; així, 10vw és un 10 per cent de l'amplada de la finestra gràfica. Si canvia l’amplada de la finestra del navegador, la mida de la caixa ha de canviar, però aquí no et funcionarà perquè aquest exemple està incrustat a la pàgina amb <iframe>. Si vols veure-ho en acció, has d’obrir l’exemple en una pestanya nova del teu navegador.

+ +

La tercera caixa utilitza unitats em. Aquestes unitats són relatives a la mida de la lletra. Hem establert una mida de lletra d'1em en l’element {{htmlelement("div")}} que conté una classe .wrapper. Canvia aquest valor per 1,5em i observa que la mida de la lletra de tots els elements augmenta, però només augmenta l’amplada de l’últim element, perquè l’amplada és relativa a la mida de la lletra.

+ +

Després de seguir les instruccions anteriors, juga una mica més amb els valors i observa què hi obtens.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}

+ +

Unitats em i rem

+ +

Les unitats em i rem són les dues longituds relatives que és probable que et trobis amb més freqüència per a dimensionar elements, des de caixes fins a text. Val la pena entendre com funcionen i en què es diferencien, sobretot quan comences a introduir-te en temes més complexos, com ara aplicar estil al text o el disseny de pàgines web amb CSS. T’ho mostrem a continuació amb un exemple.

+ +

L’HTML d’aquest exemple consisteix en dos blocs de llistes imbricades: hi ha tres llistes en total i tots dos blocs tenen el mateix HTML. L’única diferència és que en el primer bloc hi ha una classe em, i en el segon una classe rem.

+ +

Per començar, establim la mida de la lletra de l’element <html> a 16px.

+ +

Breument, la unitat em fa referència a «la mida de lletra de l'element pare». Els elements {{htmlelement("li")}} que hi ha dins dels elements {{htmlelement("ul")}} amb una classe em hereten la mida de l’element pare, de manera que en cada nivell d’imbricació successiu la mida de la lletra augmenta progressivament perquè en cadascun hi ha una mida de lletra establerta en 1.3em (1,3 vegades la mida de la lletra de l’element pare).

+ +

Breument, la unitat rem fa referència a «la mida de lletra de l'element arrel» (els rem estàndard es corresponen amb l’em de l’arrel). Els elements {{htmlelement("li")}} dins dels elements {{htmlelement("ul")}} amb una classe rem prenen la mida de l'element arrel (<html>). Això significa que no augmenten en cada nivell d’imbricació successiu.

+ +

Tanmateix, observa que si canvies la mida de la lletra (font-size) de l’element <html> amb el CSS, canvia tot el que hi està relacionat, tant els rem com els em.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} 

+ +

Percentatges

+ +

En molts casos, un percentatge és tractat de la mateixa manera que una longitud. La qüestió amb els percentatges és que sempre es defineixen en relació amb algun altre valor. Per exemple, si defineixes la mida de la lletra (font-size) d'un element com un percentatge, aquesta serà un percentatge del valor de font-size de l’element pare. Si fas servir un percentatge per a un valor de l’amplada (width), serà un percentatge del valor de width de l’element pare.

+ +

En l'exemple següent, les dues caixes amb la mida especificada en unitats de percentatge i les dues caixes amb la mida especificada en unitats de píxel tenen els mateixos noms de classe. Tots dos conjunts de caixes tenen 200px i un 40% d’amplada, respectivament.

+ +

La diferència és que el segon conjunt de dues caixes es troba dins d’un contenidor de 400 píxels d’amplada. La segona caixa de 200px d'amplada té la mateixa amplada que la primera, però la segona caixa del 40% ara és el 40% de 400px, molt més estreta que la primera.

+ +

Canvia l'amplada del contenidor o el valor en percentatge i observa què passa.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} 

+ +

L’exemple següent mostra les mides de lletra en percentatges. Cada element de llista <li> té una mida de lletra font-size del 80%; per tant, la lletra dels elements de llista imbricats és cada cop més petita a mesura que la mida de lletra s’hereta de l’element pare.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} 

+ +

Observa que molts valors accepten unitats de longitud i de percentatge, però n’hi ha que només accepten unitats de longitud. Consulta quins valors s’accepten en les pàgines de referència de cada propietat de MDN. Si el valor permès inclou <length-percentage>, pots utilitzar una longitud o un percentatge. Si el valor permès només inclou <length> no s’admet l’ús de percentatges.

+ +

Nombres

+ +

Hi ha valors que accepten nombres sense unitat. Un exemple de propietat que accepta un nombre sense unitat és la propietat opacity, que controla l’opacitat d’un element (el nivell de transparència). Aquesta propietat accepta un nombre entre el 0 (totalment transparent) i l’1 (totalment opac).

+ +

En l’exemple següent, canvia el valor opacity per diversos valors decimals entre el 0 i l’1 i observa com la caixa i el contingut es tornen més o menys opacs.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} 

+ +
+

Nota: Si en CSS fas servir un nombre com a valor, no l’has de posar entre cometes.

+
+ +

Color

+ +

Hi ha moltes maneres d’especificar el color en CSS, i algunes s’han implementat més recentment que d’altres. El CSS pot utilitzar els mateixos valors de color per a qualsevol element, ja sigui per a especificar el color del text com el color del fons, o qualsevol altra cosa.

+ +

El sistema de colors estàndard disponible en els equips moderns és de 24 bits, que permet la visualització d’uns 16,7 milions de colors diferents mitjançant una combinació de diferents canals vermell, verd i blau amb 256 valors diferents per a cada canal (256 x 256 x 256 = 16.777.216). Observa algunes de les maneres com podem especificar colors amb el CSS.

+ +
+

Nota: En aquest tutorial analitzarem els mètodes habituals per a especificar el color que tenen una bona compatibilitat amb els navegadors. N’hi ha d’altres, que no tenen una bona compatibilitat amb els navegadors i són menys habituals.

+
+ +

Paraules clau per als colors

+ +

Molt sovint en els exemples de la nostra secció d’aprenentatge o en alguna altra pàgina de MDN veuràs que utilitzem paraules clau de colors, perquè són una manera senzilla i comprensible d’especificar un color. Hi ha moltes paraules clau, i algunes tenen noms força curiosos. En pots veure una llista completa a la pàgina dedicada al valor <color>.

+ +

Juga amb diferents valors de color en els exemples en viu que et presentem a continuació per a entendre més bé com funcionen.

+ +

Els valors RGB hexadecimals

+ +

El tipus de valor de color següent que probablement trobaràs més sovint són els codis hexadecimals. Cada valor hexadecimal consisteix en un símbol hashtag/coixinet (#) seguit de sis nombres hexadecimals, cadascun dels quals pot prendre un dels 16 valors que van del 0 a la f (que representa el 15), és a dir: 0123456789abcdef. Cada parell de valors representa un dels canals (vermell, verd i blau) i permet especificar qualsevol dels 256 valors disponibles per a cada un (16 x 16 = 256).

+ +

Aquests valors són una mica més complexos i menys fàcils d’entendre, però són molt més versàtils que les paraules clau: amb els valors hexadecimals pots representar qualsevol color que vulguis per a la teva paleta de colors.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} 

+ +

Canvia un cop més els valors i observa com varien els colors.

+ +

Valors RGB i RGBA

+ +

El tercer sistema de què parlarem aquí és RGB. Un valor RGB és una funció rgb() que proporciona tres paràmetres que representen els valors dels canals vermell, verd i blau dels colors, igual que els valors hexadecimals. La diferència amb RGB és que els canals no estan representats per dos dígits hexadecimals, sinó per un nombre decimal entre 0 i 255, que sembla una mica més fàcil d’entendre.

+ +

Reescrivim el nostre darrer exemple adaptat amb l’ús de colors RGB:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} 

+ +

També pots utilitzar colors RGBA: funcionen exactament igual que els colors RGB, de manera que pots utilitzar qualsevol valor RGB, però s’hi afegeix un quart valor que representa el canal alfa del color, que en controla l'opacitat. Si estableixes aquest valor a 0, el color és totalment transparent, mentre que 1 el fas totalment opac. Els valors que hi ha entremig proporcionen diferents nivells de transparència.

+ +
+

Nota: Entre establir un canal alfa per a un color o utilitzar la propietat {cssxref("opacity")}} que hem vist abans hi ha una diferència fonamental. Quan empres l'opacitat, l’element i tot el que té a l’interior són opacs, mentre que amb l’ús de colors RGBA, només es torna opac el color que especifiques.

+
+ +

En l'exemple següent hem afegit una imatge de fons al bloc que conté les nostres caixes de colors. A continuació, hem configurat les caixes perquè tinguin valors d'opacitat diferents: observa que el fons es veu més quan el valor del canal alfa és més petit.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}

+ +

Canvia els valors del canal alfa en aquest exemple i observa com això afecta la sortida del color.

+ +
+

Nota: En algun moment els navegadors moderns es van actualitzar perquè rgba() i rgb(), i també hsl() i hsla() (els veurem més avall) fossin àlies purs els uns dels altres i es comportessin exactament igual. Així, per exemple, tant rgba() com rgb() accepten colors amb valors de canal alfa i sense. Prova de canviar en l'exemple anterior les funcions rgba() per rgb() i comprova si els colors encara funcionen. Tot i que és decisió teva la manera com aplicar estil, fer servir funcions diferents que separin les definicions dels colors transparents de les dels que no ho són proporciona una compatibilitat (una mica) més bona amb els navegadors i pot servir d’indicador visual de quins colors del teu codi estan definits amb transparència.

+
+ +

Els valors HSL i HSLA

+ +

Una mica menys de compatibilitat que RGB presenta el model de color HSL (no és compatible amb versions antigues d’Internet Explorer), que es va implementar després de molta insistència per part dels dissenyadors. En lloc dels valors vermell, verd i blau, la funció hsl() accepta valors de tonalitat, saturació i lluminositat, que distingeixen els 16,7 milions de colors, però d'una manera diferent:

+ + + +

Podem adaptar l'exemple RGB amb colors HSL, d’aquesta manera:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} 

+ +

De la mateixa manera que RGB té RGBA, HSL té un equivalent HSLA, que et proporciona la mateixa funció d’especificació del canal alfa. Ho mostrem a continuació canviant el nostre exemple RGBA adaptat amb colors HSLA.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} 

+ +

Pots utilitzar qualsevol d'aquests valors de color en els teus projectes. En la majoria de casos és probable que et triïs una paleta de colors (i el mètode que escullis per a especificar el color), que faràs servir al llarg de tot el projecte. Pots fer combinacions de colors i barreges, però per coherència acostuma a ser millor si tot el teu projecte empra el mateix model de colors.

+ +

Imatges

+ +

El tipus de dades <image> utilitza valors permesos que són imatges. Poden ser tant fitxers d'imatge enllaçats des d'una funció url(), com degradats.

+ +

En l'exemple següent presentem una imatge i un degradat emprats com a valors de la propietat CSS background-image.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} 

+ +
+

Nota: hi ha altres valors possibles per a <image>, però són més recents i encara tenen poca compatibilitat amb els navegadors. Si vols saber-ne més, dona una ullada a la pàgina que MDN dedica al tipus de dada <image>.

+
+ +

Posició

+ +

El tipus de dades <position> representa un conjunt de coordenades 2D que s’utilitzen per a posicionar un element, com ara una imatge de fons (amb background-position). Pot prendre paraules clau com top, left, bottom, right i center per a alinear els elements amb límits específics d’una caixa 2D, i també longituds, que representen desplaçaments respecte de les vores superior i esquerra de la caixa.

+ +

Un valor de posició típic consta de dos valors: el primer estableix la posició horitzontal, i el segon la vertical. Si només especifiques el valor per a un eix, l’altre utilitza center per defecte.

+ +

En l’exemple següent hem posicionat una imatge de fons a 40px de la part superior dreta del contenidor amb una paraula clau.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} 

+ +

Juga amb aquests valors i observa com pots anar desplaçant la imatge.

+ +

Cadenes i identificadors

+ +

Al llarg dels exemples anteriors hem vist que es fan servir paraules clau com a valors (per exemple, les paraules clau de <color> com ara red, black, rebeccapurple i goldenrod). Aquestes paraules clau s’anomenen més precisament identificadors, i són valors especials que el CSS entén. Per tant, no s'escriuen entre cometes (és a dir, no es tracten com cadenes alfanumèriques).

+ +

En alguns casos en CSS s’utilitzen cadenes alfanumèriques, per exemple en especificar contingut generat. En aquests casos, aquest valor es posa entre cometes per a denotar que es tracta d’una cadena alfanumèrica. En l'exemple següent utilitzem paraules clau de color, que s’escriuen sense cometes, i una cadena de contingut generat, escrita entre cometes.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} 

+ +

Funcions

+ +

L'últim tipus de valor que analitzarem és el grup de valors coneguts com a funcions. En programació, una funció és un bloc de codi reutilitzable que es pot executar diverses vegades per completar una tasca repetitiva amb un esforç mínim tant per part del desenvolupador com de l’ordinador. Les funcions normalment s’associen a idiomes com JavaScript, Python o C++, però també n’hi ha en CSS, com a valors de propietats. Ja hem vist funcions en acció en l’article sobre els colors: rgb(), hsl(), etc. El valor que retorna una imatge des d'un fitxer, url(), també és una funció.

+ +

Un valor que es comporta més com les funcions que pots trobar en un llenguatge de programació tradicional és la funció calc() de CSS. Aquesta funció et permet fer càlculs senzills dins del CSS. És útil sobretot quan vols calcular valors que no pots definir quan escrius el CSS del teu projecte perquè necessites que el navegador te’ls proporcioni en temps d'execució.

+ +

Per exemple, a continuació fem servir la funció calc() per a assignar a una caixa una amplada d’un 20% + 100px. El 20% es calcula a partir de l’amplada de l’element pare contenidor .wrapper, i canvia si en canvia l’amplada. Aquest càlcul no es pot fer prèviament perquè no sabem quin serà el 20% de l’element pare, de manera que demanem al navegador que ens ho calculi amb la funció calc().

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}

+ +

Posa a prova el teu coneixement

+ +

Hem vist molt de contingut en aquest article. En recordes la informació més important? Trobaràs més proves per comprovar si has retingut aquesta informació abans de seguir a Test your skills: Values and units.

+ +

Resum

+ +

Hem fet una passada ràpida pels tipus de valors i unitats més habituals amb què et pots trobar. Pots consultar tots els diferents tipus a la pàgina de referència Valors i unitats en CSS; molts d’ells els faràs servir a mesura que avances per aquests articles.

+ +

L’important és que recordis que cada propietat té una llista determinada de valors permesos, i que cada valor té una definició que explica quins en són els subvalors. Aleshores, pots consultar-ne les dades específiques aquí, a les pàgines d’MDN.

+ +

Per exemple, és útil saber que <image> també et permet crear un degradat de color, però potser no és obvi.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Els selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament del text en diverses direccions
    6. +
  6. El desbordament dels continguts
    7. +
  7. Valors i unitats
    8. +
  8. Dimensionar elements amb el CSS
    9. +
  9. Imatges, mèdia i elements de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depura el teu CSS
    12. +
  12. Organitza el teu CSS
    13. +
diff --git a/files/ca/learn/css/caixes_estil/caixa_aspecte_interessant/index.html b/files/ca/learn/css/caixes_estil/caixa_aspecte_interessant/index.html deleted file mode 100644 index 3a4df8a2b2..0000000000 --- a/files/ca/learn/css/caixes_estil/caixa_aspecte_interessant/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Una caixa d'aspecte interessant -slug: Learn/CSS/Caixes_estil/Caixa_aspecte_interessant -tags: - - Assessment - - Beginner - - CSS - - Learn - - backgrounds - - borders - - box - - box model - - effects -translation_of: Learn/CSS/Building_blocks/A_cool_looking_box ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
- -

En aquesta avaluació, obtindreu una mica més de pràctica a l'hora de crear caixes d'aspecte interessant, intentant crear una caixa atractiva.

- - - - - - - - - - - - -
Rrequisits previs:Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.
Objectiu:Provar la comprensió del model de caixa CSS i altres característiques relacionades amb la caixa, com ara les vores i els fons.
- -

Punt de partida

- -

Per començar aquesta avaluació, heu de:

- - - -
-

Nota: Com a alternativa, podeu utilitzar un lloc com JSBin o Thimble per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia. Si l'editor en línia que esteu utilitzant no té cap panell CSS independent, no dubteu a posar-lo en un element <style> al capdavant del document.

-
- -

Resum del projecte

- -

La vostra tasca és crear una caixa genial i de luxe i explorar que  podem tenir de divertit amb CSS.

- -

Tasques generals

- - - -

L'estil de la caixa

- -

Ens agradaria que dissenyéssiu
- el {{htmlelement("p")}} proporcionat, donant-li el següent:

- - - -

Exemple

- -

La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:

- -

- -

Avaluació

- -

Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema en el fil de conversa en l'àrea d'aprenentatge, o en el canal IRC #mdn en Mozilla IRC. Intenteu primer l'exercici - no es guanya res fent trampes!

- -

{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

diff --git "a/files/ca/learn/css/caixes_estil/creaci\303\263_carta/index.html" "b/files/ca/learn/css/caixes_estil/creaci\303\263_carta/index.html" deleted file mode 100644 index 2623d6d0dd..0000000000 --- "a/files/ca/learn/css/caixes_estil/creaci\303\263_carta/index.html" +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Creació d'una carta amb encapçalat de fantasia -slug: Learn/CSS/Caixes_estil/Creació_carta -tags: - - Assessment - - Background - - Beginner - - CSS - - CodingScripting - - border - - borderBoxes - - letter - - letterhead - - letterheaded - - paper -translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}
- -

Si voleu fer una impressió correcta, escriviu una carta amb un bon paper i una capçalera agradable pot ser un començament realment bo. En aquesta avaluació, us desafiarem a crear una plantilla en línia per aconseguir-ho.

- - - - - - - - - - - - -
Requisits previs:Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.
Objectiu:Provar la comprensió del model de caixa CSS i altres característiques relacionades amb la caixa, com ara la implementació de fons.
- -

Punt de partida

- -

Per començar aquesta avaluació, heu de:

- - - -
-

Nota: Com a alternativa, podeu utilitzar un lloc com JSBin o Thimble per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia. Si l'editor en línia que esteu utilitzant no té cap panell CSS independent, no dubteu a posar-lo en un element <style> al capdavant del document.

-
- -

Resum del projecte

- -

Se us ha donat els fitxers necessaris per crear una plantilla de paper amb capçalera. Només cal que col·loqueu els fitxers junts. Per arribar-hi, heu de:

- -

La carta principal

- - - -

El logotip

- - - -

Consells i suggeriments

- - - -

Exemple

- -

La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:

- -

- -

 

- -

Avaluació

- -

Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema en el fil de conversa en l'àrea d'aprenentatge, o en el canal IRC #mdn en Mozilla IRC. Intenteu primer l'exercici - no es guanya res fent trampes!

- -

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}

diff --git a/files/ca/learn/css/css_layout/flexbox/index.html b/files/ca/learn/css/css_layout/flexbox/index.html new file mode 100644 index 0000000000..37f31f619b --- /dev/null +++ b/files/ca/learn/css/css_layout/flexbox/index.html @@ -0,0 +1,330 @@ +--- +title: Flexbox +slug: Learn/CSS/Disseny_CSS/Flexbox +tags: + - Article + - Beginner + - CSS + - CSS layouts + - CodingScripting + - Flexible Boxes + - Guide + - Layout + - Layouts + - Learn + - flexbox +translation_of: Learn/CSS/CSS_layout/Flexbox +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
+ +

Flexbox és un mètode de disseny de pàgina web unidimensional que distribueix els elements de la pàgina web en files o en columnes. Els elements són «flexibles» i omplen tot l’espai de més o s’encongeixen per caber en espais més petits. Aquest article n’explica els fonaments.

+ + + + + + + + + + + + +
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a l’HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS).
Objectiu:Aprendre a utilitzar el sistema de disseny de pàgines web Flexbox.
+ +

Per què Flexbox?

+ +

Durant molt de temps, les úniques eines fiables compatibles amb els navegadors, disponibles per crear dissenys de pàgina web amb CSS eren mètodes com ara els elements flotants (floats) i el posicionament. Estan bé i funcionen, però d'alguna manera també són més limitats i frustrants.

+ +

Uns requisits senzills de disseny de pàgina web com els que enumerem a continuació són difícils o impossibles d'aconseguir amb aquestes eines d’una manera còmoda i flexible:

+ + + +

Com veureu en les properes seccions, Flexbox facilita moltes tasques de disseny de pàgina web. Aprofundim-hi!

+ +

Un exemple senzill

+ +

En aquest article, et farem treballar en un seguit d'exercicis que t’ajudaran a entendre com funciona Flexbox. Per començar, fes una còpia local del primer fitxer d'inici, flexbox0.html, que trobaràs en el nostre repositori de GitHub; carrega’l en un navegador modern (com Firefox o Chrome) i consulta’n el codi en el teu editor. També ho pots veure en viu aquí.

+ +

Observa que hi ha un element {{htmlelement("header")}} amb un títol d’encapçalament de nivell superior i un element {{htmlelement("section")}} que conté tres elements {{htmlelement("article")}}. Els farem servir per a crear un disseny de tres columnes força habitual.

+ +

+ +

Especificar els elements flexbox

+ +

Per començar hem de decidir quins elements volem configurar perquè es comportin com caixes flexibles. Per tal de fer-ho, establim un valor especial de {{cssxref("display")}} en l'element pare dels elements als quals afectarà. En aquest cas, volem que siguin els elements {{htmlelement("article")}}, per la qual cosa ho configurem en l’element {{htmlelement("section")}}:

+ +
section {
+  display: flex;
+}
+ +

Això fa que l'element <section> esdevingui un contenidor flexible i els seus fills ítems flexibles. El resultat d'això hauria de presentar un aspecte semblant a això:

+ +

+ +

Per tant, aquesta declaració única, ens dona tot el que necessitem; increïble, oi? Tenim el nostre disseny de pàgina de columna múltiple amb columnes de la mateixa mida, i que tenen la mateixa alçada. Això és perquè els valors predeterminats que s’han donat als elements flex (els fills del contenidor flex) estan dissenyats per a resoldre problemes comuns com aquest.

+ +

Per deixar-ho clar, reiterem el que passa aquí. L’element al qual hem donat un valor de {{cssxref("display")}} de flex actua com un element de nivell de bloc en termes de com interactua amb la resta de la pàgina, però els seus fills es presenten com a elements flexibles. La següent secció explicarà amb més detall què significa això. Fixeu-vos també que podeu utilitzar un valor de display d'inline-flex si voleu disposar els fills d'un element com a elements flexibles, però que aquest element es comporti com un element en línia.

+ +

El model flex

+ +

Els elements que es disposen com caixes flexibles, es distribueixen al llarg de dos eixos:

+ +

flex_terms.png

+ + + +

Tingues present aquesta terminologia a mesura que avances en les seccions. Sempre pots tornar enrere si en algun moment l’ús d’aquests termes et genera confusions.

+ +

Columnes o files?

+ +

Flexbox proporciona una propietat anomenada {{cssxref("flex-direction")}}, que especifica en quina direcció discorre l'eix principal (en quina direcció es disposen les caixes flexibles fill); per defecte, està definida en row, que fa que els elements flexibles es disposin en una fila en la direcció de l'idioma predeterminat amb què funciona el teu navegador (d'esquerra a dreta, en el cas d'un navegador en català).

+ +

Prova d'afegir a la teva regla <section> la declaració següent:

+ +
flex-direction: column;
+ +

Observa que això posa de nou els elements en una disposició en columna, igual que estaven abans d’afegir-hi el CSS. Abans de continuar, elimina aquesta declaració del teu exemple.

+ +
+

Nota: També pots disposar elements flexibles en direcció inversa amb els valors row-reverse i column-reverse. Experimenta també amb aquests valors.

+
+ +

Ajust

+ +

Un problema que sorgeix quan tens un disseny de pàgina amb una amplada o una alçada fixa és que els fills de l’element flexbox poden desbordar el contenidor i trencar el disseny de la pàgina. Fes un cop d'ull al nostre exemple flexbox-wrap0.html i mira’l en directe (fes primer una còpia local d'aquest fitxer, si vols seguir amb aquest exemple):

+ +

+ +

Aquí observem que els fills desborden el contenidor. Una manera de solucionar això és afegir a la teva regla <section> la declaració següent:

+ +
flex-wrap: wrap;
+ +

Afegeix també la declaració següent a la teva regla <article>

+ +
flex: 200px;
+ +

Ara prova-ho; observa que el disseny es veu força més bé ara que hi has inclòs això:

+ +

Ara hi ha diverses files, i a cada fila hi ha tantes elements fill flexbox com és raonable que hi hagi, i si hi ha cap desbordament, es genera una altra línia. La declaració flex: 200px que hem establer per als elements <article> significa que cada article tindrà com a mínim una amplada de 200px; més endavant parlarem d'aquesta propietat amb més detall. També pots observar que els últims fills de l'última fila s’han fet més amples, de manera que la fila està igualment tota plena.

+ +

Però encara hi podem fer més. Primer de tot, prova de canviar el valor de la propietat {{cssxref("flex-direction")}} a row-reverse; observa que encara tens el disseny de files múltiples, però ara comença des de la cantonada oposada de la finestra del navegador i flueix en sentit invers.

+ +

La propietat flex-flow abreujada

+ +

En aquest punt, val la pena observar que hi ha una propietat abreujada per a {{cssxref("flex-direction")}} i {{cssxref("flex-wrap")}}, que és: {{cssxref("flex-flow")}}. Per exemple, pots substituir:

+ +
flex-direction: row;
+flex-wrap: wrap;
+ +

per

+ +
flex-flow: row wrap;
+ +

Dimensió flexible dels elements flexibles

+ +

Tornem ara al nostre primer exemple i observem com podem controlar quina proporció d'espai poden ocupar els elements flexibles. Fes servir la teva còpia local de flexbox0.html, o fes una còpia de flexbox1.html com a punt de partida nou (també el pots veure en viu).

+ +

Primer, afegeix la regla següent al final del teu CSS:

+ +
article {
+  flex: 1;
+}
+ +

Es tracta d'un valor de proporció sense unitat que determina quina quantitat de l'espai disponible al llarg de l'eix principal ocupa cada element flexible. En aquest cas donem a cada element {{htmlelement("article")}} un valor de 1, que significa que tots ocuparan una quantitat igual de l'espai que sobri després que s'hagin establert elements com ara l’àrea de farciment i el marge. És una proporció, que significa que donar a cada element flexible un valor de 400.000 tindria exactament el mateix efecte.

+ +

A continuació, afegeix la regla següent a sota de l'anterior:

+ +
article:nth-of-type(3) {
+  flex: 2;
+}
+ +

Aleshores, actualitza. Observa que el tercer element {{htmlelement("article")}} ocupa el doble de l'amplada disponible que els altres dos; perquè ara hi ha en total quatre unitats proporcionals disponibles. Els dos primers elements flexibles en tenen una cadascun, i prenen 1/4 de l'espai disponible cadascun. El tercer té dues unitats, de manera que ocupa 2/4 de l'espai disponible (o el que és el mateix, la meitat).

+ +

També pots especificar un valor de mida mínima per al valor flex. Actualitza les teves regles per als elements <article>, així:

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}
+ +

Això bàsicament estableix que «Es dona a cada element flexible primer 200px de l'espai disponible. A continuació, la resta de l'espai disponible es reparteix segons les unitats de proporció». Actualitza i observa com es reparteix l'espai ara.

+ +

+ +

El valor real de flexbox es pot apreciar en la flexibilitat / capacitat de resposta; si canvies la mida de la finestra del navegador o afegeixes un altre element {{htmlelement("article")}}, el disseny de pàgina encara funciona.

+ +

Propietat flex abreujada o no abreujada

+ +

{{Cssxref("flex")}} és una propietat de abreujada que pot especificar fins a tres valors diferents:

+ + + +

Recomanem evitar l'ús de les propietats flex no abreujades, si no és que t’és realment necessari (per exemple, perquè has de substituir alguna configuració anterior). Comporta escriure una gran quantitat de codi addicional, i pot acabar sent una mica confús.

+ +

Alineació horitzontal i vertical

+ +

També pots utilitzar funcions flexbox per a alinear elements flexibles al llarg dels eixos principals o transversals. Ho expliquem amb un nou exemple, flex-align0.html (també el pots veure en viu), que convertirem en una bonica barra d'eines/botons flexible. De moment, observa aquesta barra de menú horitzontal amb alguns botons agrupats a la cantonada superior esquerra.

+ +

+ +

Primer, fes una còpia local d'aquest exemple.

+ +

A continuació, afegeix a la part inferior del CSS de l'exemple el codi següent:

+ +
div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

Actualitza la pàgina i observa que els botons estan ben centrats, horitzontalment i verticalment. Ho hem fet amb dues propietats noves.

+ +

El control {{cssxref("align-items")}} disposa els elements flexibles sobre l'eix transversal.

+ + + +

Pots anul·lar el comportament {{cssxref("align-items")}} per a elements flexibles individuals amb la propietat {{cssxref("align-self")}}. Per exemple, afegeix al teu CSS el codi el següent:

+ +
button:first-child {
+  align-self: flex-end;
+}
+ +

Dona un cop d'ull a l'efecte que hi produeix i retira de nou aquest codi quan hagis acabat.

+ +

La propietat {{cssxref("justify-content")}} controla on s’ubiquen els elements flexibles sobre l'eix principal.

+ + + +

T’animem a jugar amb aquests valors i veure com funcionen abans de continuar.

+ +

Ordena els elements flexibles

+ +

Flexbox també té una característica que canvia l'ordre de disposició dels elements flexibles sense afectar l'ordre d'origen. Aquesta és una altra característica que és impossible de fer amb els mètodes tradicionals de disseny de pàgines web.

+ +

El codi per a això és senzill: afegeix al codi d'exemple de la barra de botons el codi CSS següent:

+ +
button:first-child {
+  order: 1;
+}
+ +

Actualitza, i observa que ara el botó «Smile» s'ha mogut al final de l'eix principal. Parlarem de com això funciona amb una mica més detall:

+ + + +

Pots establir valors d'ordre negatius i fer que els elements apareguin abans que els elements amb un ordre 0. Per exemple, pots fer que el botó «Blush» aparegui al principi de l'eix principal amb la següent regla:

+ +
button:last-child {
+  order: -1;
+}
+ +

Caixes flexibles imbricades

+ +

Amb flexbox és possible crear dissenys força complexos. És del tot correcte establir que un element flexible sigui també un contenidor flexible, de manera que els elements fills també es disposin com caixes flexibles. Dona un cop d'ull a complex-flexbox.html (o també el pots veure en viu).

+ +

+ +

L'HTML d’això és força senzill. Hi ha un element {{htmlelement("section")}} que conté tres elements {{htmlelement("article")}}. El tercer element {{htmlelement("article")}} conté tres elements {{htmlelement("div")}}:

+ +
section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button
+ +

Observa el codi que hem utilitzat per al disseny.

+ +

En primer lloc, establim que els fills de {{htmlelement("section")}} es disposin com caixes flexibles.

+ +
section {
+  display: flex;
+}
+ +

A continuació, establim alguns valors flex en els propis elements {{htmlelement("article")}}. Aquí cal tenir en compte la 2a regla; configurem el tercer element {{htmlelement("article")}} de manera que els seus elements fills es disposin també com elements flexibles, però aquesta vegada en columna.

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+
+ +

A continuació, seleccionem el primer element {{htmlelement("div")}}. Utilitzem la declaració flex: 1 100px; perquè hi doni efectivament una alçada mínima de 100px, aleshores en configurem els elements fills (els elements {{htmlelement("button")}}) perquè també siguin elements flexibles. Els distribuïm en fila perquè ocupin tot l’espai amb la propietat wrap i els alineem al centre de l'espai disponible, com hem fet en l'exemple del botó individual que hem vist abans.

+ +
article:nth-of-type(3) div:first-child {
+  flex: 1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

Finalment, establim les dimensions del botó, però la qüestió interessant és que hi donem un valor de flex de 1. Això té un efecte molt interessant, que pots observar si canvies la mida de l'amplada de la finestra del navegador. Els botons ocuparan tant d’espai com puguin i es disposaran sobre la mateixa línia tant com sigui possible, però quan ja no càpiguen amb comoditat a la mateixa línia, cauran a la línia següent.

+ +
button {
+  flex: 1;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}
+ +

Compatibilitat amb altres navegadors

+ +

Flexbox és compatible amb la majoria de navegadors nous: Firefox, Chrome, Opera, Microsoft Edge i IE 11, i les versions més noves d'Android/iOS, etc. No obstant això, cal tenir en compte que encara hi ha navegadors antics en ús que no admeten Flexbox (o bé n’admeten una versió antiga i desactualitzada).

+ +

Mentre ets en procés d’aprendre i experimentar, això no importa gaire; però si consideres l'ús de flexbox en un lloc web real, has de fer proves i assegurar-te que la teva experiència d'usuari continua sent acceptable en el màxim nombre de navegadors possible.

+ +

Flexbox és una mica més complicat que altres característiques CSS. Per exemple, si un navegador no té ombres CSS, probablement el lloc web serà encara usable. En canvi, la no-compatibilitat amb les característiques de flexbox probablement trencarà del tot el disseny i inutilitzarà el lloc web.

+ +

En un altre mòdul parlarem de les estratègies per a superar els complexos problemes de compatibilitat dels navegadors.

+ +

Posa a prova les teves habilitats

+ +

Hem vist moltes coses en aquest article. En recordes la informació més important? Trobaràs més tests per poder comprovar si has retingut la informació abans de seguir a Test your skills: Flexbox.

+ +

Resum

+ +

Això clou el nostre recorregut pels fonaments de flexbox. Esperem que t’hagis divertit i que sàpigues jugar-hi mentre continues endavant amb el teu aprenentatge. A continuació, veurem un altre aspecte important dels dissenys CSS, els sistemes de graella.

+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
diff --git a/files/ca/learn/css/css_layout/floats/index.html b/files/ca/learn/css/css_layout/floats/index.html new file mode 100644 index 0000000000..25d2fe01a6 --- /dev/null +++ b/files/ca/learn/css/css_layout/floats/index.html @@ -0,0 +1,516 @@ +--- +title: Flotadors (Floats) +slug: Learn/CSS/Disseny_CSS/Flotadors +tags: + - Article + - Beginner + - CSS + - Clearing + - CodingScripting + - Floats + - Guide + - Layout + - columns + - multi-column +translation_of: Learn/CSS/CSS_layout/Floats +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}
+ +

Originalment pensada per a flotar imatges dins de blocs de text, la propietat {{cssxref("float")}} va esdevenir una de les eines més utilitzades per a crear dissenys multicolumna a les pàgines web. Amb l'arribada de Flexbox i Grid ha tornat ara al seu propòsit original, tal com s'explica en aquest article.

+ + + + + + + + + + + + +
Requisits previs:HTML bàsic (vegeu Introducció a l'HTML), i una idea de com funciona CSS (vegeu Introducció a CSS.)
Objectiu:Aprendre a crear elements flotants a les pàgines web, i a fer servir la propietat clear i altres mètodes per a netejar els elements flotants.
+ +

La història dels elements flotants

+ +

La propietat {{cssxref("float")}} fou introduïda per a permetre als desenvolupadors implementar dissenys senzills que incloguessin una imatge flotant dins d'una columna de text, amb el text envoltant la part esquerra o dreta de la imatge. El tipus de cosa que trobes habitualment en el disseny d'un diari.

+ +

Però els desenvoupadors web aviat s'adonaren que podien flotar qualsevol cosa, i no només les imatges, pel que el seu ús s'amplià, per exemple, creant efectes de disseny divertits com els d'aquestes caplletres.

+ +

Els elements flotants han estat utitlitzats habitualment per a crear dissenys web complets amb múltiples columnes situades l'una al costat de l'altra (el comportament per defecte seria que les columnes se situessin les unes sota les altres, en el mateix ordre en què apareixen al codi font). Ara hi ha disponibles tècniques més modernes i millors, que explorarem més endavant en aquest mòdul, per la qual cosa l'ús de {{cssxref("float")}} d'aquesta manera s'hauria de contemplar com una tècnica antiquada.

+ +

En aquest article ens centrarem en l'ús apropiat de la propietat {{cssxref("float")}}.

+ +

Un exemple de float simple

+ +

Explorem com utilitzar els float. Començarem amb un exemple realment simple que inclou un bloc de text flotant al voltant d'un element. Pots acompanyar-nos creant un fitxer index.html al teu ordinador, omplint-lo amb una plantilla HTML simple, i inserint el codi següent als llocs adequats. Al final de la secció podràs veure un exemple en viu de com hauria de ser el codi final.

+ +

Primer, comencem amb una mica d'HTML simple — afegeix el següent al cos del teu HTML, eliminant qualsevol altra cosa que hi hagués abans:

+ +
<h1>Exemple simple de caixa flotant</h1>
+
+<div class="box">Caixa flotant</div>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p>
+
+<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+
+<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+ +

Ara aplica el següent CSS al teu HTML (fent servir un element {{htmlelement("style")}} o un {{htmlelement("link")}} per a separar el fitxer .css  — tu tries):

+ +
body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+ +

Si deses y recarregues la pàgina, veuràs quelcom semblant a allò que esperaries: la caixa es troba per sobre del text, en un flux normal. Per a flotar el text al voltant, afegeix les propietats {{cssxref("float")}} i {{cssxref("margin-right")}} a la regla .box:

+ +
.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+ +

Ara, si deses i recarregues, podràs veure alguna cosa semblant a això:

+ +
+ +
+ +

{{ EmbedLiveSample('Float_1', '100%', 500) }}

+ +

Analitzem ara com funciona el float — l'element amb el float aplicat (l'element {{htmlelement("div")}} en aquest cas) és extret del flux normal del document i està enganxat al costat esquerre del seu element contenidor pare ({{htmlelement("body")}}, en aquest cas). Qualsevol contingut que estigui per sota de l'element flotat en el flux normal, ara l'envoltarà, omplint l'espai a la dreta fins a la part superior de l'element flotant. Allà s'aturarà.

+ +

Flotar el contingut a la dreta té exactament el mateix efecte, però a la inversa — l'element flotat s'enganxarà a la dreta, i el contingut l'envoltarà per l'esquerra. Prova de canviar el valor de la propietat float a right i substitueix {{cssxref("margin-right")}} per {{cssxref("margin-left")}} al darrer conjunt de regles per veure el resultat.

+ +

Tot i que podem afegir un marge a l'element flotant per alunyar el text, no podem afegir un marge al text per allunyar-lo del flotant. Això es deu al fet que un element flotant s'extreu del flux normal i les caixes dels següents elements segueixen per darrera del flotador. Pots comprovar-ho fent alguns canvis a l'exemple.

+ +

Afegeix una clase special al primer paràgraf de text, el que succeeix immediatament a la caixa flotant, i després afegeix al teu CSS les següents regles. Això li donarà al paràgraf següent un color de fons.

+ +
.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+ +

Per tal que l'efecte sigui més fàcil de veure, canvia el margin-right del teu element flotant a margin, per obtener espai al voltant de l'element flotant. Veuràs que el fons del paràgraf passa just per sota de la caixa flotant, com en l'exemple inferior.

+ +
+ +
+ +

{{ EmbedLiveSample('Float_2', '100%', 500) }}

+ +

Els quadres de línia del següent element s'han escurçat perquè el text discorri al voltant del flotador, però com que el flotador s'ha eliminat del flux normal, el quadre al voltant del paràgraf encara manté l'ample complet.

+ +

Netejant floats

+ +

Hem vist que el flotador s'elimina del flux normal i que els altres elements es mostraran al seu costat. Per tant, si volem evitar que un element a continuació es mogui cap amunt, hem de netejar el float. Això s'aconsegueix amb la propietat {{cssxref ("clear")}}.

+ +

En l'HTML de l'exemple anterior, afegeix una classe cleared al segon paràgraf sota de l'element flotant. Després, afegeix això al teu CSS:

+ +
.cleared {
+  clear: left;
+}
+
+ +
+ +
+ +

{{ EmbedLiveSample('Float_3', '100%', 600) }}

+ +

Hauries de veure que el següent paràgraf neteja l'element flotant i ja no apareix al seu costat. La propietat clear accepta els següents valors:

+ + + +

Netejar la caixa contenidora d'un float

+ +

Ara ja saps com netejar un element que es troba a continuació d'un element flotant, però observa el que succeeix si tens un flotant alt i un paràgraf curt, amb una caixa convenidora que envolta ambdós elements. Modifica el teu document per tal que el primer paràgraf i la caixa flotant es trobin dins d'un {{htmlelement("div")}} amb una classe wrapper.

+ +
<div class="wrapper">
+  <div class="box">Caixa flotant</div>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p>
+</div>
+
+ +

Al teu CSS, afegeix la següent regla per a la teva classe .wrapper i després recarrega la pàgina:

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+ +

A més, elimina la classe .cleared anterior:

+ +
.cleared {
+    clear: left;
+}
+ +

Veuràs que, como en l'exemple on hem posat un color de fons al paràgraf, el color de fons passa per darrere de l'element flotant.

+ +
+ +
+ +

{{ EmbedLiveSample('Float_4', '100%', 600) }}

+ +

Un cop més, això és així perquè el flotador s'ha extret del flux normal. Netejar el següent elemento no ajuda a resoldre aquest problema de neteja de la caixa, on volem que la part inferior de la caixa envolti l'element flotant i que envolti el contingut fins i tot si el coningut és més curt. Hi ha tres maneres posssibles de resoldre això, dues que funcionen en tots els navegadors, però que tenen una mica de truc, i una tercera, nova manera de resoldre aquesta situació correctament.

+ +

El hack clearfix

+ +

La forma com aquesta situació s'ha tractat tradicionalment és utilitzant un truc conegut com el "truc clearfix". Això implica inserir algun contingut generat després de la caixa que conté el contingut flotant i envolvent, i configurar-lo per netejar ambdós.

+ +

Afefeix el següent CSS a l'exemple:

+ +
.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}
+ +

Ara recarrega la pàgina i la caixa hauria de netejar-se. Això és bàsicament el mateix que si haguessis afegit un element HTML com un <div> a sota dels elements i li haguessis afegit la propietat clear: both.

+ +
+ +
+ +

{{ EmbedLiveSample('Float_5', '100%', 600) }}

+ +

Fent servir overflow

+ +

Un mètode alternatiu és establir la propietat {{cssxref("overflow")}} de l'element contenidor amb un valor diferent de visible.

+ +

Elimina el CSS clearfix que has afegit en l'anterior secció i, en el seu lloc, afegeix overflow: auto a les regles de la caixa contenidora. Altre cop, la caixa hauria de netejar-se.

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Float_6', '100%', 600) }}

+ +

Aquest exemple funciona creant el que s'anomena un block formatting context (BFC) o context de format de bloc. És com un petit disseny dins de la nostra pàgina (dins la qual tot està contingut, per tant, el nostre element flotant està contingut dins del BFC i el fons es troba darrere d'ambdós elements. Això generalment funcionarà. Això no obstant, en certs casos, és possible que et trobis amb barres de desplaçament no desitjades o ombres retallades com a conseqüències no desitjades de l'ús del desbordament..

+ +

display: flow-root

+ +

La manera moderna de resoldre aquest problema és fer servir el valor flow-root de la propietat display. Això existeix només per a crear un BFC sense fer servir trucs; no hi haurà conseqüències no desitjades quan el facis servir. Elimina overflow: auto de la regla .wrapper i afegeix display: flow-root. Assumint que el teu navegador sigui compatible, la caixa es netejarà.

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Float_7', '100%', 600) }}

+ +

Resum

+ +

Ara ja saps tot el que has de saber sobre els flotadors en el desenvolupament web modern. Consulta l'article sobre els mètodes de disseny antiquats per obtenir informació de com es feien servir, cosa que pot ser-te útil si has de treballar en projectes antics.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}

+ +

En aquest mòdul

+ + diff --git a/files/ca/learn/css/css_layout/grids/index.html b/files/ca/learn/css/css_layout/grids/index.html new file mode 100644 index 0000000000..af97c6f989 --- /dev/null +++ b/files/ca/learn/css/css_layout/grids/index.html @@ -0,0 +1,699 @@ +--- +title: Graelles (Grids) +slug: Learn/CSS/Disseny_CSS/Graelles +tags: + - Article + - Beginner + - CSS + - CSS Grids + - CodingScripting + - Grids + - Guide + - Layout + - Learn + - Tutorial + - grid design + - grid framework + - grid system +translation_of: Learn/CSS/CSS_layout/Grids +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Assessment", "Learn/CSS/CSS_layout")}}
+ +

Les graelles són una eina de disseny de pàgines web consolidada i molts dissenys de pàgines web moderns basen els seus dissenys de pàgina web en una graella regular. En aquest article analitzarem el disseny de pàgines web basats en graella i com es pot utilitzar CSS per a crear graelles, tant amb les eines presents com amb les noves tecnologies que comencen a estar disponibles en els navegadors.

+ + + + + + + + + + + + +
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS i Aplicar estil a les caixes.)
Objectiu:Entendre els conceptes fonamentals que hi ha darrere dels sistemes de disseny de pàgines web amb graella i la manera com implementar un disseny de pàgina web basat en graella.
+ +

Què és el disseny de pàgines web basat en graella?

+ +

Una graella és senzillament una col·lecció de línies horitzontals i verticals que creen un patró que ens serveix per a alinear els elements del disseny d’una pàgina web. Ens ajuden a crear dissenys en què els elements no es mouen ni canvien d'amplada a mesura que naveguem de pàgina en pàgina, i proporcionen més coherència als nostres llocs web.

+ +

Normalment, una graella té columnes (columns), files (rows) i espais entre cada fila i columna, que anomenem comunament canals (gutters).

+ +

+ +

Crear la teva graella en CSS

+ +

Després d'haver decidit la graella que necessita el vostre disseny, podeu utilitzar el disseny de graella (o grid) de CSS per crear aquesta quadrícula a CSS i col·locar-hi elements. Primer veurem les característiques bàsiques del disseny de quadrícula i després explorarem com crear un sistema de quadrícula simple per al vostre projecte.

+ +

Com a punt de partida, descarregueu i obriu el fitxer del punt de partida a l’editor de text i al navegador (també el podeu veure en directe aquí). Veureu un exemple amb un contenidor que conté alguns elements secundaris. Per defecte, es mostren en un flux normal, de manera que els quadres es mostren un sota l’altre. Treballarem amb aquest fitxer durant la primera part d’aquesta lliçó, fent canvis per veure com es comporta la quadrícula.

+ +

Per definir una graella utilitzem el valor grid de la propietat display. Com passa amb Flexbox, això activa el disseny de graella i tots els fills directes del contenidor es converteixen en elements de la quadrícula. Afegiu això al CSS del vostre fitxer:

+ +
.container {
+    display: grid;
+}
+ +

A diferència de flexbox, els articles no tindran cap aspecte immediatament diferent. Declarar display: grid  us dona una quadrícula d'una columna, de manera que els vostres articles continuaran mostrant-se un per sota de l'altre tal com ho fan en el flux normal.

+ +

Per veure alguna cosa que sembli més una graella, haurem d’afegir algunes columnes a la quadrícula. Afegim aquí tres columnes de 200 píxels. Podeu utilitzar qualsevol unitat de longitud o percentatges per crear aquestes pistes de columna.

+ +
.container {
+    display: grid;
+    grid-template-columns: 200px 200px 200px;
+}
+ +

Afegiu la segona declaració a la vostra regla CSS i, a continuació, torneu a carregar la pàgina i hauríeu de veure que els elements s'han reordenat un a cada cel·la de la quadrícula creada.

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_1', '100%', 400) }}

+ +

Graelles flexibles amb la unitat fr

+ +

A més de crear quadrícules amb longituds i percentatges, podem utilitzar la unitat fr per dimensionar de manera flexible les files i les columnes de la quadrícula. Aquesta unitat representa una fracció de l'espai disponible al contenidor de la quadrícula.

+ +

Canvieu el llistat de pistes a la següent definició, creant tres pistes d'1fr.

+ +
.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+ +

Ara hauríeu de veure que teniu pistes flexibles. La unitat fr distribueix espai proporcionalment, per tant, podeu donar diferents valors positius a les vostres pistes, per exemple, si canvieu la definició així:

+ +
.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+}
+ +

La primera pista ara té 2fr de l’espai disponible i les altres dues pistes 1fr, fent que la primera pista sigui més gran. Podeu barrejar unitats de fr i pistes de longitud fixa; en aquest cas, l’espai necessari per a les pistes fixes s’elimina abans de distribuir l’espai a les altres pistes.

+ +

+

+ +
+ + +

{{ EmbedLiveSample('Grid_2', '100%', 400) }}

+ +
+

Nota: La unitat fr distribueix l'espai disponible, no tot l'espai. Per tant, si una de les vostres pistes té alguna cosa gran al seu interior, hi haurà menys espai lliure per compartir.

+
+ +

Espais entre pistes

+ +

Per crear espais entre pistes, fem servir les propietats {{cssxref ("grid-column-gap")}} per a espais entre columnes, {{cssxref ("grid-row-gap")}} per a espais entre files i {{ cssxref ("grid-gap")}} per establir tots dos alhora.

+ +
.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    grid-gap: 20px;
+}
+ +

Aquests buits poden especificar-se en qualsevol unitat de longitud o percentatge, però no en unitats fr.

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_3', '100%', 400) }}

+ +
+

Nota: Les propietats *gap solien portar el prefix grid-, però això s'ha canviat a l'especificació, ja que la intenció és fer-les útils en diversos mètodes de disseny. Les versions prefixades es mantindran com a àlies, de manera que es podran utilitzar amb seguretat durant algun temps. Per estar segur, podeu duplicar i afegir les dues propietats per fer el vostre codi més a prova de bales.

+
+ +
.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 20px;
+  gap: 20px;
+}
+ +

Repetició de llistes de pistes

+ +

Podeu repetir tot o una secció de la vostra llista de pistes mitjançant la notació de repetició. Canvieu la llista de pistes pel següent:

+ +
.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+}
+ +

Ara tindreu 3 pistes d’1fr igual que abans. El primer valor que es passa a la funció de repetició és el nombre de vegades que voleu que es repeteixi el llistat, mentre que el segon valor és un llistat de pistes, que consisteix d’una o més pistes que vulgueu repetir.

+ +

La quadrícula implícita i explícita

+ +

Fins ara, només hem especificat pistes de columnes i, tot i això, s’estan creant files per contenir el nostre contingut. Aquest és un exemple de la quadrícula explícita contra la quadrícula implícita. La quadrícula explícita és la que creeu utilitzant grid-template-columns o grid-template-rows. La quadrícula implícita es crea quan el contingut es col·loca fora d’aquesta, com ara a les nostres files. Les quadrícules explícites i implícites són anàlogues als eixos flexbox principal i transversal.

+ +

Per defecte, les pistes creades a la quadrícula implícita tenen una mida auto, cosa que en general vol dir que són prou grans per adaptar-se al seu contingut. Si voleu donar una mida implícita a les pistes de quadrícula, podeu utilitzar les propietats {{cssxref ("grid-auto-rows")}} i {{cssxref ("grid-auto-columns")}}. Si afegiu grid-auto-rows amb un valor de 100px al vostre CSS, veureu que aquestes files creades ara tenen una alçada de 100 píxels.

+ +
+ + +
.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 20px;
+}
+ +

{{ EmbedLiveSample('Grid_4', '100%', 400) }}

+ +

La funció minmax()

+ +

Les nostres pistes de 100 píxels d’alçada no seran molt útils si afegim contingut a les pistes de més de 100 píxels, ja que aquest cas provocaria un desbordament. Podria ser millor tenir pistes de com a mínim 100 píxels d’alçada i que es puguin expandir si hi entra més contingut. Un fet bastant bàsic sobre el web és que mai no se sap realment la mida que tindrà alguna cosa; contingut addicional o mides de lletra més grans poden causar problemes amb els dissenys que intenten ser perfectes en píxels en totes les dimensions.

+ +

La funció {{cssxref ("minmax")}} ens permet establir una mida mínima i màxima per a una pista, per exemple, minmax(100 px, auto). La mida mínima és de 100 píxels, però la màxima és automàtica, i s’ampliarà per adaptar-se al contingut. Proveu de canviar grid-auto-rows per utilitzar un valor min-max:

+ +
.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-gap: 20px;
+}
+ +

Si afegiu contingut addicional, veureu que la pista s'expandeix per permetre que encaixi. Tingueu en compte que l'expansió es produeix al llarg de la fila.

+ +

Tantes columnes com encaixin

+ +

Podem combinar algunes de les coses que hem après sobre el llistat de pistes, la notació de repetició i {{cssxref ("minmax")}} per crear un patró útil. De vegades, és útil poder demanar a la quadrícula que creï tantes columnes com càpiguen al contenidor. Ho fem establint el valor de grid-template-columns mitjançant la notació {{cssxref ("repeat")}}}), però en lloc de passar un número, introduïu la paraula clau auto-fill. Per al segon paràmetre de la funció utilitzem minmax(), amb un valor mínim igual a la mida mínima de la pista que ens agradaria tenir i un màxim de 1fr.

+ +

Proveu-ho ara al vostre fitxer amb el CSS següent:

+ +
+ + +
.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-auto-rows: minmax(100px, auto);
+  grid-gap: 20px;
+}
+
+ +

{{ EmbedLiveSample('Grid_5', '100%', 400) }}

+ +

Això funciona perquè Grid crea tantes columnes de 200 píxels com càpiguen al contenidor i, a continuació, comparteix l’espai que sobri entre totes les columnes: el màxim és 1fr que, com ja sabem, distribueix l’espai de manera uniforme entre les pistes.

+ +

Ubicació basada en línies

+ +

Ara passem de crear una graella a col·locar coses a la quadrícula. La nostra quadrícula sempre té línies, que comencen per 1 i es relacionen amb el mode d’escriptura del document. Per tant, en anglès, la línia de columna 1 es troba a la part esquerra de la quadrícula i la línia de fila 1 a la part superior. En àrab, la línia 1 de la columna estaria a la dreta, ja que l'àrab s'escriu de dreta a esquerra.

+ +

Podem situar les coses segons aquestes línies especificant la línia inicial i final. Ho fem utilitzant les propietats següents:

+ + + +

Totes aquestes propietats poden tenir un número de línia com a valor. També podeu utilitzar les propietats abreujades:

+ +

    {{cssxref ("grid-column")}}
+     {{cssxref ("grid-row")}}

+ +

Aquests us permeten especificar les línies inicial i final alhora, separades per un /, un caràcter de barra inclinada cap endavant.

+ +

Descarregueu aquest fitxer com a punt de partida o vegeu-lo en directe aquí. Ja té una quadrícula definida i article senzill. Podeu veure que la col·locació automàtica col·loca elements un a cada cel·la de la quadrícula que hem creat.

+ +

En lloc d'això, col·locarem tots els elements del nostre lloc a la quadrícula, mitjançant les línies de la quadrícula. Afegiu les regles següents a la part inferior del vostre CSS:

+ +
header {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 3;
+  grid-row: 3;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Grid_6', '100%', 400) }}

+ +
+

Nota: també podeu utilitzar el valor -1 per referir-vos a la columna o la línia final i comptar cap a l'interior des del final mitjançant valors negatius. Tanmateix, això només funciona per a la quadrícula explícita. El valor -1 no es referirà a la línia final de la quadrícula implícita.

+
+ +

Posicionament amb grid-template-areas

+ +

Una forma alternativa de col·locar elements a la quadrícula és fer servir la propietat {{cssxref ("grid-template-areas")}} i donar un nom als diversos elements del vostre disseny.

+ +

Traieu el posicionament basat en línies de l'últim exemple (o torneu a descarregar el fitxer per tenir un punt de partida nou) i afegiu el CSS següent.

+ +
.container {
+  display: grid;
+  grid-template-areas:
+      "header header"
+      "sidebar content"
+      "footer footer";
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
+}
+
+header {
+  grid-area: header;
+}
+
+article {
+  grid-area: content;
+}
+
+aside {
+  grid-area: sidebar;
+}
+
+footer {
+  grid-area: footer;
+}
+ +

Torneu a carregar la pàgina i veureu que els vostres articles s'han col·locat igual que abans, sense que hàgim d'utilitzar cap número de línia!

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_7', '100%', 400) }}

+ +

Les regles per a les grid-template-areas són les següents:

+ + + +

Podeu jugar amb el nostre disseny canviant el peu de pàgina per situar-se només a sota del contingut i la barra lateral, per exemple, per abastar fins a baix de tot. Aquesta és una manera molt agradable de descriure un disseny, ja que és obvi a partir del CSS exactament el que està passant.

+ +

Un framework de graella amb CSS Grid

+ +

Els "frameworks" de quadrícula tendeixen a basar-se al voltant de 12 o 16 quadrícules i, amb CSS Grid, no necessiteu cap eina de tercers que us proporcioni aquest framework: ja hi és, a l’especificació.

+ +

Descarregueu el fitxer de punt de partida. Conté un contenidor amb una quadrícula de 12 columnes definida i el mateix marcatge que hem utilitzat en els dos exemples anteriors. Ara podem utilitzar la ubicació basada en línies per col·locar el nostre contingut a la quadrícula de 12 columnes.

+ +
header {
+  grid-column: 1 / 13;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 4 / 13;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1 / 4;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 13;
+  grid-row: 3;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Grid_8', '100%', 400) }}

+ +

Si feu servir el Firefox Grid Inspector per superposar les línies de quadrícula del vostre disseny, podreu veure com funciona la nostra quadrícula de 12 columnes.

+ +

+
+ +

Posa a prova els teus coneixements

+ +

Hem arribat al final de l'article. Recordes la informació més rellevant? Trobaràs més proves per comprovar si retens aquesta informació abans de seguir a Test your skills: Grids.

+ +

Resum

+ +

Després de la lectura d’aquest article, hauries de ser capaç d’entendre com funcionen els dissenys de pàgina web amb CSS Grid. Per aprofundir en l'especificació, llegeix les nostres guies sobre Disposició amb Grid, que trobaràs a continuació.

+ +

Veieu també

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Assessment", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/css_layout/index.html b/files/ca/learn/css/css_layout/index.html new file mode 100644 index 0000000000..e74e5da0b9 --- /dev/null +++ b/files/ca/learn/css/css_layout/index.html @@ -0,0 +1,66 @@ +--- +title: Disseny CSS +slug: Learn/CSS/Disseny_CSS +tags: + - Beginner + - CSS + - Floating + - Grids + - Guide + - Landing + - Layout + - Learn + - Module + - Multiple column + - Positioning + - flexbox + - float +translation_of: Learn/CSS/CSS_layout +--- +
{{LearnSidebar}}
+ +

En aquest punt, ja hem examinat els fonaments de CSS, com l'estil del text, i l'estil i la manipulació de les caixes en el que estroba dins el contingut. Ara és hora de veure com col·locar les caixes al lloc correcte en relació amb la finestra de visualització, entre elles. Hem cobert els requisits previs necessaris de manera que ara podem aprofundir en el disseny CSS, provant diferents paràmetres de visualització, mètodes tradicionals de disseny que inclouen flotants i posicionament, i noves eines de disseny modernas, com flexbox.

+ +

Requisits previs

+ +

Abans de començar aquest mòdul, ja hauríeu de:

+ +
    +
  1. Estar familiaritzats amb els principis bàsics d' HTML, tal com es descriu en el mòdul Introducció a HTML.
    2. +
  2. Sentir-vos còmodes amb els fonaments CSS, tal com s'ha tractat a la Introducció a CSS.
    3. +
  3. Entendre com fer caixes d'estil.
    4. +
+ +
+

Nota: Si esteu treballant en un ordinador/tauleta/altre dispositiu on no té la capacitat de crear els vostres propis fitxers, podeu provar (la majoria) d'exemples de codi, en un programa de codificació en línia com JSBin o Thimble.

+
+ +

Guies

+ +

Aquests articles proporcionaran instruccions sobre les eines i tècniques fonamentals de disseny, disponibles a CSS.

+ +
+
Introducció al disseny CSS
+
Aquest article recapitularà algunes de les característiques de disseny de CSS que ja hem tocat en els mòduls anteriors, com els diferents valors de {{cssxref("display")}} - i introduïm alguns dels conceptes que cobrirem al llarg d'aquest mòdul.
+
Flotants
+
Originalment per a imatges flotants dins dels blocs de text, la propietat {{cssxref("float")}} s'ha convertit en una de les eines més utilitzades per crear diversos dissenys de columnes a les pàgines web. Aquest article ho explica tot.
+
Posicionament
+
El posicionament us permet treure elements del flux normal de disseny del document, i fer que es comportin de manera diferent, per exemple, asseguts un damunt de l'altre o quedant sempre al mateix lloc dins de la finestra de visualització del navegador. Aquest article explica els diferents valors de {{cssxref("position")}}, i com utilitzar-los.
+
Exemples pràctics de posicionament
+
Amb els conceptes bàsics de posicionament coberts en l'últim article, veurem, ara, com construir un parell d'exemples del món real per il·lustrar quin tipus de coses podeu fer amb el posicionament.
+
Flexbox
+
Una nova tecnologia, però amb suport, ara, bastant estès en tots els navegadors, Flexbox està començant a estar preparat per a un ús generalitzat. Flexbox proporciona eines que permeten crear ràpidament dissenys complexos i flexibles i característiques que històricament resulten difícils amb CSS. Aquest article explica tots els fonaments.
+
Graelles
+
Els sistemes de graella són una altra característica molt comuna que s'utilitza en els dissenys de CSS, que solen implementar-se mitjançant flotadors o altres característiques de disseny. Imagineu el disseny com un nombre establert de columnes (p. Ex. 4, 6 o 12) i, a continuació, ajusteu les columnes de contingut dins d'aquestes columnes imaginàries. En aquest article explorarem la idea bàsica sobre la creació d'un sistema de graella, mireu l'ús d'un sistema de graella confeccionat per un marc (framework) de graella i finalitzeu l'experimentació amb les Graelles CSS - una incipient nova funció de navegador fa que l'implementació de disseny de graella a la Web sigui molt més fàcil.
+
+ +

Avaluacions

+ +

Les següents avaluacions posaran a prova la vostra capacitat per dissenyar pàgines web amb CSS.

+ +
+
Creació d'un disseny flexible multicolumna (TBD)
+
Aquesta avaluació provarà la vostra capacitat per crear un disseny estàndard de diverses columnes, amb algunes característiques interessants.
+
Creació d'un widget de control fix (TBD)
+
Aquesta avaluació desafia la vostra comprensió del posicionament, demanant-vos que creeu un widget de control de posició fix que permeti a l'usuari accedir als controls d'una aplicació web independentment d'on es desplaci.
+
diff --git a/files/ca/learn/css/css_layout/introduction/index.html b/files/ca/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..88a924dc00 --- /dev/null +++ b/files/ca/learn/css/css_layout/introduction/index.html @@ -0,0 +1,700 @@ +--- +title: Introducció al disseny CSS +slug: Learn/CSS/Disseny_CSS/Introduccio_disseny_CSS +tags: + - Article + - Beginner + - CSS + - Floats + - Grids + - Introduction + - Layout + - Learn + - Positioning + - Tables + - flexbox + - flow +translation_of: Learn/CSS/CSS_layout/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}
+ +

Aquest article recapitula algunes de les característiques de disseny CSS que ja hem tocat en els mòduls anteriors, com els diferents valors de {{cssxref ("display")}}, i introdueix alguns dels conceptes que exposem al llarg d'aquest mòdul.

+ + + + + + + + + + + + +
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS).
Objectiu:Adquirir una visió general de les tècniques de disseny de pàgines web amb CSS. Cada tècnica es pot aprendre amb més detall en tutorials posteriors.
+ +

Les tècniques de disseny de pàgina web amb CSS ens permeten prendre els elements que hi ha en una pàgina web i controlar on estan posicionats en relació amb la seva posició predeterminada en el flux de disseny normal, els altres elements del voltant, l’element pare contenidor o la finestra de visualització / finestra principal. Les tècniques de disseny de pàgines que exposem amb més detall en aquest mòdul són:

+ + + +

Cada tècnica té els seus usos, avantatges i inconvenients, i cap tècnica s'ha dissenyat per utilitzar-se aïllada. Entenent per a què s’ha dissenyat cada mètode estaràs en una bona posició per entendre quina és la millor disposició per a cada tasca.

+ +

Flux normal

+ +

El flux normal és la manera com el navegador estableix les pàgines HTML de manera predeterminada quan no es fa res per controlar el disseny de pàgina. Vegem-ne un exemple HTML ràpid:

+ +
<p>I love my cat.</p>
+
+<ul>
+  <li>Buy cat food</li>
+  <li>Exercise</li>
+  <li>Cheer up friend</li>
+</ul>
+
+<p>The end!</p>
+ +

Per defecte, el navegador mostra aquest codi de la manera següent:

+ +

{{ EmbedLiveSample('Normal_flow', '100%', 200) }}

+ +

Tingues en compte que aquí l'HTML es mostra en l'ordre exacte en què apareix en el codi d’origen, amb elements apilats l’un sobre l’altre: el primer paràgraf, seguit de la llista no ordenada, seguit del segon paràgraf.

+ +

Per a molts dels elements de la pàgina el flux normal crea exactament la disposició que cal, però per dissenys més complexos et farà falta alterar aquest comportament per defecte fent ús d'alguna de les eines disponibles en CSS. Començar amb un document HTML ben estructurat és molt important, donat que així pots treballar amb com les coses es disposen per defecte, en comptes de barallar-t'hi.

+ +

Les tècniques de disseny tendeixen a substituir aquest comportament predeterminat, utilitzant les tècniques següents:

+ + + +

La propietat display

+ +

Els mètodes principals per aconseguir un disseny de pàgina amb CSS són tots els valors de la propietat display (visualització). Aquesta propietat ens permet canviar la manera per defecte com es mostren les coses. Tot el que hi ha al flux normal té un valor de display, que s'utilitza com la forma per defecte en què es comporten els elements que hi estan configurats. Per exemple, el fet que els paràgrafs en català es mostrin un per sota de l’altre es deu al fet que s’estilen amb display: block. Si creeu un enllaç al voltant d'un text dins d'un paràgraf, aquest enllaç romandrà en línia amb la resta del text i no es dividirà en cap línia nova. Això es deu al fet que l'element {{htmlelement("a")}} és display: inline per defecte.

+ +

Pots canviar aquest comportament de visualització per defecte. Per exemple, l'element {{htmlelement("li")}} és display: block per defecte, és a dir, que els elements de la llista es mostren l'un a sota de l'altre al nostre document en català. Si canviem el valor de display a inline, ara es mostraran un al costat de l’altre, com ho farien les paraules en una frase. El fet que puguis canviar el valor de display de qualsevol element significa que pots triar elements HTML pel seu significat semàntic, sense preocupar-te de com quedaran. La seva aparença és una cosa que es pot canviar.

+ +

A més de poder canviar la presentació predeterminada, canviant un element de block a inline i viceversa, hi ha alguns mètodes de disseny més grans que comencen com amb un valor de display. Tanmateix, quan els feu servir, generalment haureu d'invocar propietats addicionals. Els dos valors més importants per als nostres propòsits a l’hora de parlar del disseny són display: flex i display: grid.

+ +

Caixes flexibles (Flexbox)

+ +

Flexbox és el nom breu del mòdul de disseny de caixa flexible, dissenyat per facilitar-nos la distribució de les coses en una dimensió, sigui com a fila o com a columna. Per utilitzar flexbox, apliqueu display: flex a l'element pare dels elements que vulgueu disposar; tots els seus fills directes es converteixen en ítems flexibles. Ho podem veure en un exemple senzill.

+ +

L'etiquetatge HTML següent ens proporciona un element contenidor, amb una classe wrapper, dins del qual hi ha tres elements {{htmlelement("div")}}. Per defecte, es mostrarien com a elements de bloc, un a sota de l’altre, al nostre document.

+ +

Tanmateix, si afegim display: flex al pare, els tres elements ara es disposen en columnes. Això es deu al fet que es converteixen en ítems flexibles (flex items) i es veuen afectats per alguns valors inicials que flexbox estableix al contenidor flex. Es mostren en una fila, perquè el valor inicial de {{cssxref("flex-direction")}} establert al seu pare és row. Tots semblen estirar-se fins a l’alçada de l’element més alt, perquè el valor inicial de la propietat {{cssxref("align-items")}} establert al seu pare és stretch. Això significa que els ítems s’estenen fins a l’alçada del contenidor flex, que en aquest cas està definida per l’element més alt. Tots els articles s’alineen a l’inici del contenidor, deixant qualsevol espai addicional al final de la fila.

+ +
+ + +
.wrapper {
+  display: flex;
+}
+
+ +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_1', '300', '200') }}

+ +

A més de les propietats anteriors que es poden aplicar al contenidor flex, hi ha propietats que es poden aplicar als ítems flex. Aquestes propietats, entre altres coses, poden canviar la manera com es “flexionen” els ítems, cosa que els permet expandir-se i contraure’s per adaptar-se a l’espai disponible.

+ +

Com a exemple senzill d'això, podem afegir la propietat {{cssxref ("flex")}} a tots els nostres elements fill, amb un valor d'1. Això farà que tots els ítems creixin i omplin el contenidor, en comptes de deixar espai al final. Si hi ha més espai, els elements s’ampliaran; si hi ha menys espai es tornaran més estrets. A més, si afegiu un altre element al marcatge, tots els elements es faran més petits per fer-hi espai; ajustaran la seva mida per ocupar la mateixa quantitat d’espai, sigui quin sigui.

+ +
+ + +
.wrapper {
+    display: flex;
+}
+
+.wrapper > div {
+    flex: 1;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">One</div>
+    <div class="box2">Two</div>
+    <div class="box3">Three</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_2', '300', '200') }}

+ +
+

Nota: Aquesta ha estat una molt breu introducció al que és possible amb Flexbox. Per obtenir més informació, consulteu el nostre article de Flexbox.

+
+ +

Disposició en graella (Grid)

+ +

Mentre que Flexbox està dissenyat per al disseny unidimensional, el disseny de quadrícula està pensat per a dues dimensions: alinear les coses en files i columnes.

+ +

Una vegada més, podeu activar el disseny de quadrícula amb un valor específic de display - display: grid. L'exemple següent utilitza un marcatge similar a l'exemple de flex, amb un contenidor i alguns elements fills. A més d’utilitzar display: grid, també definim files i columnes al pare mitjançant les propietats {{cssxref("grid-template-rows")}} i {{cssxref("grid-template-columns")}}, respectivament. Hem definit tres columnes cadascuna d'1fr i dues files de 100px. No necessito posar cap regla sobre els elements infantils; es col·loquen automàticament a les cel·les que ha creat la nostra graella.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">One</div>
+    <div class="box2">Two</div>
+    <div class="box3">Three</div>
+    <div class="box4">Four</div>
+    <div class="box5">Five</div>
+    <div class="box6">Six</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_1', '300', '330') }}

+ +

Un cop tingueu una graella, podeu col·locar-hi explícitament els elements, en lloc de confiar en el comportament de la ubicació automàtica que acabem de veure. Al segon exemple que teniu a continuació hem definit la mateixa graella, però aquesta vegada amb tres elements fills. Hem definit la línia inicial i final de cada element mitjançant les propietats {{cssxref("grid-column")}} i {{cssxref("grid-row")}}. Això fa que els elements abastin diverses pistes.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+.box1 {
+    grid-column: 2 / 4;
+    grid-row: 1;
+}
+
+.box2 {
+    grid-column: 1;
+    grid-row: 1 / 3;
+}
+
+.box3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">One</div>
+    <div class="box2">Two</div>
+    <div class="box3">Three</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_2', '300', '330') }}

+ +
+

Nota: Aquests dos exemples són només una petita part de la potència del disseny de graella; per obtenir més informació, consulteu el nostre article sobre Graelles (Grids).

+
+ +

La resta d'aquesta guia cobreix altres mètodes de disseny, que són menys importants per a les principals estructures de disseny de la pàgina, però que poden ajudar-vos a realitzar tasques específiques. En comprendre la naturalesa de cada tasca de disseny, aviat trobareu que, quan mireu un component concret del vostre disseny, el tipus de disseny més adequat sovint serà clar.

+ +

Elements flotants (Floats)

+ +

Flotar un element canvia el comportament d’aquest element i dels elements de nivell de bloc que el segueixen en un flux normal. L'element es mou cap a l'esquerra o cap a la dreta i s'elimina del flux normal i el contingut circumdant flota al voltant de l'element flotat.

+ +

La propietat {{cssxref("float")}} té quatre valors possibles:

+ + + +

A l'exemple següent, flotem un <div> a l'esquerra i li donem un {{cssxref("margin")}}} per la dreta per apartar el text de l'element. Això ens dona l’efecte del text rodejant aquesta caixa i és la major part del que heu de saber sobre els elements flotants tal com s’utilitzen en el disseny web modern.

+ +
+ + +
<h1>Simple float example</h1>
+
+<div class="box">Float</div>
+
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+
+
+ +
+.box {
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-right: 30px;
+}
+
+
+ +

{{ EmbedLiveSample('Float_1', '100%', 600) }}

+ +
+

Nota: Els floats s’expliquen completament a la nostra lliçó sobre les propietats float i clear. Abans de tècniques com Flexbox i Grid es feien servir floats com a mètode per crear dissenys de columnes. És possible que encara trobeu aquests mètodes al web; els tractarem a la lliçó sobre mètodes de disseny heretats.

+
+ +

Tècniques de posicionament

+ +

El posicionament us permet moure un element des d'on es col·locaria quan estigués en un flux normal a una altra ubicació. El posicionament no és un mètode per crear el disseny principal de la pàgina, sinó que es tracta més de gestionar i ajustar la posició d’elements específics de la pàgina.

+ +

Tot i això, hi ha tècniques útils per a certs patrons de disseny que depenen de la propietat {{cssxref("position")}}. La comprensió del posicionament també ajuda a entendre el flux normal, i què significa moure un element fora del flux normal.

+ +

Hi ha cinc tipus de posicionament principals, que hauries de conèixer:

+ + + +

Un exemple senzill de posicionament

+ +

Per familiaritzar-te amb aquestes tècniques de disseny de pàgina, el mostrem un parell d'exemples ràpids. Tots els nostres exemples tenen el mateix codi HTML, que és el següent:

+ +
<h1>Positioning</h1>
+
+<p>I am a basic block level element.</p>
+<p class="positioned">I am a basic block level element.</p>
+<p>I am a basic block level element.</p>
+ +

Apliquem a aquest codi HTML un estil predeterminat amb el codi CSS següent:

+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+ +

La sortida que dona és la següent:

+ +

{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}

+ +

Posicionament Relatiu (Relative positioning)

+ +

El posicionament relatiu et permet desplaçar un element de la posició que tindria per defecte en flux normal. Això vol dir que pots assolir una tasca com ara moure una icona cap avall de manera que quedi alineada amb una etiqueta de text. Per fer-ho, podríem afegir la següent regla per afegir un posicionament relatiu:

+ +
.positioned {
+  position: relative;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}
+ +

Aquí hem donat al nostre paràgraf del mig un valor {{cssxref("position")}} de relative; això no fa res per si mateix, de manera que també afegim les propietats {{cssxref("top")}} i {{cssxref("left")}}, que serveixen per a moure l'element afectat cap avall i cap a la dreta; això podria semblar el contrari del que s'esperava, però cal pensar que l'element és empès des dels costats esquerre i superior, cosa que fa que es mogui cap a la dreta i avall.

+ +

Si afegeixes aquest codi, es mostra el resultat següent:

+ + + +

{{ EmbedLiveSample('Relative_positioning_example', '100%', 300) }}

+ +

Posicionament absolut (Absolute)

+ +

El posicionament absolut s’utilitza per eliminar completament un element del flux normal i col·locar-lo mitjançant desplaçaments des de les vores d’un bloc contenidor.

+ +

Tornant al nostre exemple original no posicionat, podríem afegir la regla CSS següent per a implementar el posicionament absolut:

+ +
.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}
+ +

Aquí hem donat al nostre paràgraf del mig un valor {{cssxref("position")}} d'absolute, i les mateixes propietats {{cssxref("top")}} i {{cssxref("left")}}, com abans. L'addició d'aquest codi, però, dona el resultat següent:

+ + + +

{{ EmbedLiveSample('Absolute_positioning_example', '100%', 300) }}

+ +

Això és molt diferent. L'element ha quedat totalment separat de la resta del disseny de la pàgina i s’hi ha col·locat a sobre en l’extrem superior. Els altres dos paràgrafs ara es disposen junts, com si el germà posicionat no existís. Les propietats {{cssxref("top")}} i {{cssxref("left")}} tenen un efecte diferent sobre elements amb posicionament absolut que sobre elements amb posicionament relatiu. En aquest cas, s'especifica la distància a la qual l'element s’ha de situar dels costats superior i esquerre de la pàgina. És possible canviar l'element pare que es converteix en aquest contenidor i ho veurem a la lliçó sobre posicionament.

+ +

Posicionament fix (fixed positioning)

+ +

El posicionament fix elimina el nostre element del flux de documents de la mateixa manera que el posicionament absolut. Tanmateix, en lloc d'aplicar els desplaçaments des del contenidor, s'apliquen des de la finestra gràfica. Com que l'element es manté fix en relació amb la finestra gràfica, podem crear efectes com un menú que es manté fix a mesura que la pàgina es desplaça per sota.

+ +

Per a aquest exemple, el nostre HTML inclou tres paràgrafs de text, per tal que puguem fer que la pàgina es desplaci, i un quadre al qual donarem position: fixed.

+ +
<h1>Fixed positioning</h1>
+
+<div class="positioned">Fixed</div>
+
+<p>Paragraph 1.</p>
+<p>Paragraph 2.</p>
+<p>Paragraph 3.</p>
+
+ +
+ + +
.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Fixed_1', '100%', 200) }}

+ +

Posicionament enganxós (sticky positioning)

+ +

El posicionament enganxós és el mètode de posicionament final que tenim a la nostra disposició. Combina el posicionament estàtic per defecte amb el posicionament fix. Quan un element té position: sticky, es desplaçarà en flux normal fins que arribi al desplaçament sobre la finestra de visualització del navegador que definit. En aquest moment es queda "enganxat" com si tingués position: fixed aplicat.

+ +
+ + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

+ +
+

Nota: per aprendre més sobre posicionament, aneu a l'article sobre posicionament.

+
+ +

Taules CSS

+ +

Les taules HTML són perfectes per a mostrar dades tabulades, però fa molts anys, fins i tot abans que el CSS bàsic fos compatible de manera fiable entre els navegadors, els desenvolupadors web solien utilitzar taules per als dissenys de pàgines web senceres; col·locaven els encapçalaments, els peus de pàgina, les diferents columnes, etc., en files i columnes d’una taula. Això va funcionar en el moment, però presenta molts problemes: els dissenys de taules no són flexibles, l’etiquetatge és feixuc, són difícils de depurar, i són semànticament erronis (els usuaris de lectors de pantalla, per exemple, tenen problemes per navegar en dissenys de pàgina web amb taules).

+ +

La forma en què es mostra una taula en una pàgina web quan utilitzeu el marcatge de taula es deu a un conjunt de propietats CSS que defineixen el disseny de la taula. Aquestes propietats es poden utilitzar per disposar elements que no són taules, un ús que de vegades es descriu com "utilitzar taules CSS".

+ +

L'exemple següent mostra un d'aquests usos; L'ús de taules CSS per al disseny s'hauria de considerar un mètode heretat en aquest moment, per a aquelles situacions en què tingueu navegadors molt antics sense compatibilitat amb Flexbox o Grid.

+ +

Vegem-ne un exemple. Primer, un marcatge senzill que crea un formulari HTML. Cada element d'entrada té una etiqueta i també hem inclòs un text dins d'un paràgraf. Cada parell label/input està envoltat d'un element {{htmlelement("div")}}, amb finalitats de disseny.

+ +
<form>
+  <p>First of all, tell us your name and age.</p>
+  <div>
+    <label for="fname">First name:</label>
+    <input type="text" id="fname">
+  </div>
+  <div>
+    <label for="lname">Last name:</label>
+    <input type="text" id="lname">
+  </div>
+  <div>
+    <label for="age">Age:</label>
+    <input type="text" id="age">
+  </div>
+</form>
+ +

Ara afegim el CSS al nostre exemple. La major part del CSS és bastant comú, excepte els usos de la propietat {{cssxref("display")}}. A l’element {{htmlelement("form")}} i als elements {{htmlelement("div")}}, {{htmlelement("label")}} i {{htmlelement("input")}} se'ls hi ha dit que es mostrin com una taula, files de la taula i cel·les de la taula, respectivament; bàsicament actuaran com un marcatge de taula HTML que alinea les etiquetes de text i les entrades de manera predeterminada. Tot el que hem de fer és afegir una mica de mida, marges, etc. perquè tot es vegi una mica més agradable, i ja haurem acabat.

+ +

Observa que s’ha assignat al paràgraf de descripció (caption) la declaració display: table-caption;, que fa que aquest paràgraf actuï com un títol de taula ({{htmlelement("caption")}}), i també caption-side: bottom;, que indica que el títol es posa a la part inferior de la taula amb finalitats d'estil, encara que va abans de les entrades de la taula en l’ordre del codi d’origen. Això permet una mica de flexibilitat.

+ +
html {
+  font-family: sans-serif;
+}
+
+form {
+  display: table;
+  margin: 0 auto;
+}
+
+form div {
+  display: table-row;
+}
+
+form label, form input {
+  display: table-cell;
+  margin-bottom: 10px;
+}
+
+form label {
+  width: 200px;
+  padding-right: 5%;
+  text-align: right;
+}
+
+form input {
+  width: 300px;
+}
+
+form p {
+  display: table-caption;
+  caption-side: bottom;
+  width: 300px;
+  color: #999;
+  font-style: italic;
+}
+ +

Això ens dona el resultat següent:

+ +

{{ EmbedLiveSample('CSS_tables', '100%', '170') }}

+ +

També pots veure aquest exemple en viu en el fitxer css-tables-example.html (i també consultar-ne el codi d’origen).

+ +

Disseny multicolumna

+ +

El mòdul de disseny de múltiples columnes ens proporciona una manera de distribuir contingut en columnes, de manera similar a com flueix el text en un diari. Tot i que la lectura de columnes cap amunt i cap avall és menys útil en un context web, ja que no voleu obligar els usuaris a desplaçar-se cap amunt i cap avall, la disposició del contingut en columnes pot ser una tècnica útil.

+ +

Per convertir un bloc en un contenidor multicolumna, utilitzem la propietat {{cssxref("column-count")}}, que indica al navegador quantes columnes voldríem tenir o bé {{cssxref("column-width" )}}, que indica al navegador que ompli el contenidor amb tantes columnes d'almenys aquesta amplada.

+ +

A l'exemple següent, comencem amb un bloc d'HTML dins d'un element <div> que conté una classe de container.

+ +
<div class="container">
+    <h1>Multi-column layout</h1>
+
+    <p>Paragraph 1.</p>
+    <p>Paragraph 2.</p>
+
+</div>
+ +

Utilitzem una column-width (amplada de columna) de 200 píxels en aquest contenidor, cosa que provoca que el navegador creï tantes columnes de 200 píxels com càpiguen al contenidor i, a continuació, comparteixi l’espai restant entre les columnes creades.

+ +
+ + +
    .container {
+        column-width: 200px;
+    }
+
+ +

{{ EmbedLiveSample('Multicol_1', '100%', 200) }}

+ +

Resum

+ +

Aquest article ha proporcionat un breu resum de totes les tecnologies de disseny que has de conèixer. Continua llegint per a obtenir més informació sobre cadascuna d’aquestes tecnologies!

+ +

{{NextMenu("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/css_layout/normal_flow/index.html b/files/ca/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..ac44f6a95a --- /dev/null +++ b/files/ca/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,95 @@ +--- +title: Flux normal +slug: Learn/CSS/Disseny_CSS/Flux_normal +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

Aquest article explica el flux normal o la manera com es disposen els elements de la pàgina web si tu no en canvies la disposició.

+ + + + + + + + + + + + +
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS (consulta la Introducció al CSS).
Objectiu:Entendre la manera com els navegadors disposen per defecte els elements en les pàgines web abans que l'usuari comenci a fer-hi canvis.
+ +

Com es detalla en l’últim article d’introducció al disseny de pàgines web, els elements d’una pàgina web es distribueixen segons el flux normal si no s'hi aplica CSS que en canviï el comportament. Com ja hem començat a veure, pots canviar la manera com es comporten els elements, bé ajustant-ne la posició dins d’aquest flux normal, o bé suprimint-los-en del tot. Un document sòlid i ben estructurat que sigui llegible en el sentit del flux normal és la millor manera de començar qualsevol pàgina web. Garanteix que el contingut serà llegible, fins i tot si l’usuari fa servir un navegador molt limitat o un dispositiu com un lector de pantalla, que llegeix el contingut de la pàgina. A més, com que el flux normal està dissenyat per a fer llegible un document, començar d'aquesta manera significa que treballes amb el document en lloc de lluitar-hi en contra perquè hi fas canvis d’ordre.

+ +

Abans d’aprofundir més en diferents mètodes de disseny, val la pena revisar algunes de les qüestions que has estudiat en mòduls anteriors pel que fa al flux normal dels documents.

+ +

Com es disposen per defecte els elements?

+ +

Primer de tot s'agafa el contingut dels elements de les caixes, i a continuació s’hi afegeixen l'àrea de farciment, les vores i els marges al voltant. Es tracta del model de caixes, que ja coneixem.

+ +

De manera predeterminada, el contingut d'un element de nivell de bloc és del 100% de l'amplada de l’element pare, i l‘alçada està determinada pel contingut. Els elements de línia tenen l’amplada i l’alçada determinades pel contingut. En els elements de línia no pots establir l’amplada i l’alçada, senzillament s’inclouen dins del contingut d’elements de nivell de bloc. Si vols controlar la mida d'un element de línia d'aquesta manera, has de configurar-lo perquè es comporti com un element de nivell de bloc amb display: block; (o fins i tot, display: inline-block;, que barreja característiques de tots dos).

+ +

Això pel que fa a elements individuals; però què passa amb la manera com interactuen els elements entre ells? El flux normal del disseny d’una pàgina web (que s’esmenta en l’article d’introducció al disseny de pàgines web) és el sistema pel qual els elements s’ubiquen dins de la finestra gràfica del navegador. Per defecte, els elements de nivell de bloc estan configurats en la direcció del flux dels blocs, en funció del mode d'escriptura de l’element pare (inicialment: en horitzontal): cada element de bloc apareix en una línia nova per sota de l’anterior i estan separats per qualsevol marge que s’hi hagi establert. Per tant, en català, o en qualsevol altre sistema d'escriptura horitzontal i de dalt a baix, els elements de nivell de bloc es disposen verticalment.

+ +

Els elements de línia es comporten de manera diferent: no es disposen en línies noves; en lloc d’això, es disposen sobre la mateixa línia que l’anterior i que qualsevol contingut textual contigu (o que el delimiti), mentre hi hagi espai dins de l’amplada de l’element pare de nivell de bloc. Quan ja no hi ha espai, el text o els elements que desborden passen a una línia nova.

+ +

Si dos elements adjacents tenen configurat un marge i els marges dels dos es toquen, predomina el que és més gran, i el més petit desapareix; es diu que els marges col·lapsen, i això també ho coneixem.

+ +

Vegem un exemple senzill que il·lustra tot això:

+ +
+
<h1>Flux bàsic d’un document</h1>
+
+<p>Sóc un element de nivell de bloc bàsic. Els meus elements de nivell de bloc adjacents es distribueixen en línies noves per sota meu.</p>
+
+<p>Per defecte ocupem el 100% de l'amplada de l'element pare i som tan alts com el contingut dels nostres elements fill. L‘amplada i l’alçada total són el nostre contingut + l’àrea de farciment + l’amplada/alçada de la vora.</p>
+
+<p>Tenim marges que ens separen. Però pel col·lapse dels marges, ens separa només l'amplada d'un dels dos marges, però no l’amplada dels dos.</p>
+
+<p>Els elements de línia <span> com aquest </span> i <span> aquest </span> es disposen sobre la mateixa línia que els altres i que els nodes de text adjacents, si hi ha espai en la mateixa línia. Quan els elements de línia desborden, <span>continuen per la línia següent, si és possible (com el que conté aquest text)</span>; o si no és possible, passen a una línia nova, com és el cas d’aquesta imatge: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}
+
+ +

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

+ +

Resum

+ +

Ara que saps com funciona el flux normal del disseny de pàgina i quines són les opcions que el navegador estableix per defecte, avança i descobreix com pots canviar aquesta visualització per defecte i crear la composició de pàgina que necessita el teu disseny de pàgina web.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

En aquest mòdul

+ + diff --git a/files/ca/learn/css/css_layout/positioning/index.html b/files/ca/learn/css/css_layout/positioning/index.html new file mode 100644 index 0000000000..213293ff4e --- /dev/null +++ b/files/ca/learn/css/css_layout/positioning/index.html @@ -0,0 +1,467 @@ +--- +title: Posicionament +slug: Learn/CSS/Disseny_CSS/Posicionament +tags: + - Article + - Beginner + - CSS + - CodingScripting + - Guide + - Layout + - Positioning + - absolute + - fixed + - relative +translation_of: Learn/CSS/CSS_layout/Positioning +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}
+ +

El posicionament permet treure elements del flux normal de disseny del document, i fer que es comportin de manera diferent, per exemple, asseient-se un damunt de l'altre o mantenint-se sempre al mateix lloc dins de la finestra de visualització del navegador. Aquest article explica els diferents valors de {{cssxref("position")}}, i com utilitzar-los.

+ + + + + + + + + + + + +
Requisits previs:Conceptes bàsics d'HTML (estudi Introducció a HTML), i una idea de com funciona CSS (estudi Introducció a CSS).
Objectiu:Aprendre com funciona el posicionament CSS.
+ +

Flux del document

+ +

El posicionament és un tema bastant complex, per tant, abans de submergir-nos en el codi, anem a revisar i ampliar una mica de teoria de disseny per donar-nos una idea de com funciona això.

+ +

En primer lloc, les caixes d'elements individuals es defineixen tenint en compte el contingut dels elements, afegint-hi qualsevol farciment, vora i marge al voltant d'ells - és a dir, aquell model de caixa nou, que vam mirar abans. Per defecte, el contingut d'un element de nivell de bloc és del 100% de l'ample de l'element pare i tan alt com el seu contingut. Els elements en línia són tan alts  i tan amples com el seu contingut. No es pot definir l'ample o alçada en elements en línia - simplement s'assenten dins del contingut dels elements de nivell de bloc. Si es vol controlar la mida d'un element en línia d'aquesta manera, s'ha d'establir perquè es comporti com un element de nivell de bloc amb display: block;.

+ +

Això explica els elements individuals, però què passa amb els elements que interactuen els uns amb els altres? El flux de disseny normal (esmentat en l'article de presentació de disseny) és el sistema mitjançant el qual es col·loquen els elements dins de la finestra de visualització del navegador. De manera predeterminada, els elements de nivell de bloc es distribueixen verticalment a la finestra de visualització: cadascun d'ells apareixerà en una nova línia,per sota d l'última i se separaran per qualsevol marge que s'estableixi en ells.

+ +

Els elements en línia es comporten de manera diferent - no apareixen en noves línies; en canvi, s'assenten en la mateixa línia que els altres i amb qualsevol contingut de text adjacent (o embolicat), sempre que hi hagi espai perquè ho facin dins de l'amplada de l'element a nivell de bloc pare. Si no hi ha espai, el text desbordat o els elements es desplacen cap a una nova línia.

+ +

Si dos elements adjacents tenen un marge establert i els dos marges es toquen, el més gran dels dos es queda i el més petit desapareix - això es diu col.lapsació del marge, i també ho hem conegut abans.

+ +

Vegem un exemple senzill que expliqui tot això:

+ +
<h1>Basic document flow</h1>
+
+<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
+
+<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
+
+<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
+
+<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+ +

{{ EmbedLiveSample('Document_flow', '100%', 500) }}

+ +

Revisarem aquest exemple diverses vegades al llarg d'aquest article, ja que mostrarem els efectes de les diferents opcions de posicionament disponibles per a nosaltres.

+ +

Ens agradaria que seguíssiu els exercicis en el vostre ordinador, si és possible - agafeu una còpia de 0_basic-flow.html del nostre repositori de Github (codi font aquí) i utilitzeu-lo com a punt de partida.

+ +

Introducció al posicionament

+ +

Tota la idea del posicionament és permetre'ns anul·lar el comportament bàsic del flux de documents descrit anteriorment, per produir efectes interessants. Què passa si voleu canviar lleugerament la posició d'algunes caixes dins d'un disseny des de la seva posició de flux de disseny per defecte, per donar-li un toc lleugerament peculiar i molest? El posicionament és la vostra eina. O si voleu crear un element d'interfície d'usuari que floti a la part superior d'altres parts de la pàgina i/o sempre es trobi al mateix lloc dins de la finestra del navegador, sense importar quant es desplaça la pàgina? El posicionament fa possible aquest treball de disseny.

+ +

Hi ha una sèrie de diferents tipus de posicionament que podeu implementar en elements HTML. Per fer un tipus específic de posicionament actiu en un element, utilitzem la propietat {{cssxref("position")}}.

+ +

Posicionament estàtic (Static)

+ +

El posicionament estàtic és el valor predeterminat que cada element obté - significa "posar l'element en la seva posició normal en el flux del disseny del document - res especial per veure aquí".

+ +

Per demostrar això i preparar el vostre exemple per a futures seccions, primer afegiu una class de positioned al segon {{htmlelement("p")}} en l'HTML:

+ +
<p class="positioned"> ... </p>
+ +

Ara afegiu la següent regla a la part inferior del vostre CSS:

+ +
.positioned {
+   position: static;
+  background: yellow;
+}
+ +

Si ara deseu i actualitzeu, no veureu cap diferència en absolut, excepte el color de fons actualitzat del segon paràgraf. Està bé - com hem dit abans, el posicionament estàtic és el comportament predeterminat!

+ +
+

Nota: Podeu veure l'exemple en aquest moment en directe a 1_static-positioning.html (vegeu el codi font).

+
+ +

Posicionament relatiu (Relative)

+ +

El posicionament relatiu és el primer tipus de posició que veurem. Això és molt semblant al posicionament estàtic, tret que una vegada que l'element posicionat ha tingut el seu lloc en el flux de disseny normal, podeu modificar la seva posició final, incloent-hi la superposició d'altres elements a la pàgina. Seguiu i actualitzeu la declaració de posició del vostre codi:

+ +
position: relative;
+ +

Si deseu i actualitzeu en aquesta etapa, no veureu cap canvi en el resultat en absolut, així, com modifiqem la posició de l'element? Heu d'utilitzar les propietats {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} , Que explicarem en la següent secció.

+ +

Introduir top, bottom, left i right

+ +

{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} s'utilitzen juntament amb {{cssxref("position")}} per especificar exactament a on moure l'element posicionat. Per provar-ho, afegiu les següents declaracions a la regla .positioned al vostre CSS:

+ +
top: 30px;
+left: 30px;
+ +
+

Nota: Els valors d'aquestes propietats pot prendre totes les unitats que s'esperaria lògicament - píxels, mm, rems,%, etc.

+
+ +

Si ara deseu i actualitzeu, obtindreu un resultat com aquest:

+ + + +

{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}

+ +

Genial, eh? D'acord, aixó es probablement el que no esperaves: per què s'ha mogut a la part inferior i la dreta si s'especificat a dalt i a l'esquerra? Pot sonar Il·lògic inicialment, però aquesta és la forma en què funciona el posicionament relatiu: cal pensar en una força invisible que empeny el costat de la caixa posicionada, movent-la en la direcció oposada. Així, per exemple, si especifiqueu un top: 30px;, una força empeny la part superior de la caixa, fent que es mogui cap avall en 30px.

+ +
+

Nota: Podeu veure l'exemple en aquest moment en directe a 2_relative-positioning.html (vegeu el codi font).

+
+ +

Posicionament absolut (Absolute)

+ +

El posicionament absolut porta resultats molt diferents. Intenteu canviar la declaració de posició del vostre de la manera següent:

+ +
position: absolute;
+ +

Si ara deseu i actualitzeu, obtindreu un resultat com aquest:

+ + + +

{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}

+ +

En primer lloc, tingueu en compte que el buit on l'element posicionat hauria d'estar en el flux del document ja no hi és - el primer i el tercer element s'han tancat junts, com que ja no existeix!. Bé, en certa manera, això és cert. Un element absolutament posicionat ja no existeix en el flux de disseny normal del document. En lloc d'això, s'asseu a la seva pròpia capa separada de tota la resta. Això és molt útil - vol dir que podem crear funcions d'interfície d'usuari aïllades que no interfereixin amb la posició d'altres elements de la pàgina - per exemple, les caixes d'informació emergents i els menús de control, els panells de rollover, les funcions d'interfície d'usuari que es poden arrossegar i deixar anar a qualsevol lloc en la pàgina, i així successivament.

+ +

En segon lloc, observeu que la posició de l'element ha canviat - això es deu al fet que {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} es comporten d'una manera diferent amb el posicionament absolut. En lloc d'especificar la direcció en què l'element s'ha de moure, especifiquen la distància que ha de tenir l'element en cada costat dels elements que contingui. Així que, en aquest cas, estem dient que l'element absolutament posicionat hauria de situar-se 30px des de la part superior del "element que conté" i 30px des de l'esquerra.

+ +
+

Nota: Podeu utilitzar {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} per canviar la mida dels elements si és necessari. Intenteu establir top: 0; bottom: 0; left: 0; right: 0; and margin: 0; en els elements posicionats i veureu què passa! Torneu a posar-ho de nou després...

+
+ +
+

Nota: Sí, els marges encara afecten els elements posicionats. Tanmateix, el col·lapse de marges no existeix.

+
+ +
+

Nota: Podeu veure l'exemple en aquest moment en directe a 3_absolute-positioning.html (vegeu el codi font).

+
+ +

Contextos de posicionament

+ +

Quin element és el "element que conté" un element absolutament posicionat? Per defecte, és l'element {{htmlelement("html")}} - l'element posicionat està niat dins del {{htmlelement("body")}} en la font HTML, però en el disseny final, es troba a 30px de distància des de la part superior i esquerra de la vora de la pàgina, que és l'element {{htmlelement("html")}}. Això s'anomena més exactament com a context de posicionament de l'element.

+ +

Podem canviar el context de posicionament - quin element posiciona l'element absolutament posicionat en relació a. Això es fa establint el posicionament en un dels altres avantpassats del element - un dels elements que està niat a l'interior (no es pot col·locar en relació amb un element que no està niat a l'interior). Per demostrar-ho, afegiu la següent declaració a la regla del cos:

+ +
position: relative;
+ +

Això hauria de donar el següent resultat:

+ + + +

{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}

+ +

L'element posicionat ara es troba en relació amb l'element {{htmlelement("body")}}.

+ +
+

Nota: Podeu veure l'exemple en aquest moment en directe a 4_positioning-context.html (vegeu el codi font).

+
+ +

Introducció a z-index

+ +

Tot aquest posicionament absolut és una bona diversió, però hi ha una altra cosa que encara no hem considerat - quan els elements comencen a superposar-se, què determina que uns elements apareguin sobre quins altres elements? En l'exemple que hem vist fins ara, només tenim un element posicionat en el context de posicionament, i apareix a la part superior, ja que els elements posicionats guanyen elements no posicionats. Què passa quan tenim més d'un?

+ +

Intenteu afegir el següent, al vostre CSS, perquè el primer paràgraf estigui absolutament posicionat també:

+ +
p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}
+ +

En aquest punt, veureu el primer paràgraf de color verd, desplaçat del flux del document i colocat una mica per sobre d'on era originalment. També s'apil·la a sota del paràgraf original .positioned, on els dos es superposen. Això és degut a que el paràgraf .positioned és el segon paràgraf de l'ordre d'origen, i els elements posicionats més endavant en l'ordre d'origen guanyen sobre els elements posicionats anteriorment en l'ordre d'origen.

+ +

Es pot canviar l'ordre d'apilament? Sí, podeu fer-ho, utilitzant la propietat {{cssxref("z-index")}}. "z-index" és una referència a l'eix z. Recordareu que en punts anteriors, en la font, parlàvem de la utilització en pàgines web de coordenades horitzontals (eixos x) i verticals (eixos-y) per tal de determinar el posicionament de coses com ara imatges de fons i desplaçaments d'ombra. (0,0) es troba a la part superior esquerra de la pàgina (o element), i els eixos x i y es desplaçan cap a la dreta i avall de la pàgina (per als idiomes d'esquerra a dreta, de totes maneres).

+ +

Les pàgines web també tenen un eix z - una línia imaginària que s'estén des de la superfície de la pantalla, cap a la nostra cara (o el que vulgueu tenir davant de la pantalla). Els valors de {{cssxref("z-index")}} afecten on els elements posicionats se situen en aquest eix; els valors positius els mouen més amunt per la pila, i els valors negatius els mouen més avall a la pila. De manera predeterminada, els elements posicionats tenen un z-index d'auto, que és efectivament 0.

+ +

Per canviar l'ordre d'apilament, proveu d'afegir la següent declaració a la vostra regla p:nth-of-type(1):

+ +
z-index: 1;
+ +

Ara hauríeu de veure l'exemple acabat:

+ + + +

{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}

+ +

Tingueu en compte que z-index només accepta valors d'índex, sense unitat; No podeu especificar que desitgeu que un element tingui 23 píxels a dalt de l'eix Z - no funciona així. Els valors més alts van per sobre dels valors inferiors, i depèn de vosaltres quins valors utilitzar. L'ús de 2 i 3 donaria el mateix efecte que 300 i 40000.

+ +

Tingueu en compte que aquí només hem tractat un únic context de posicionament. Si tinguéssiu dos conjunts separats d'elements posicionats a la mateixa pàgina, i volguéssiu que es  superposessin i que l'ordre d'apilament funcionés d'una manera específica, les coses es complicarien. Afortunadament, molt poques vegades trobareu tal complexitat amb z-index. Si voleu llegir amb molt més detall sobre com funciona exactament z-index, consulteu la Web Standards Curriculum z-index writeup. En aquest article us hem proporcionat tot el que necessiteu saber en aquesta etapa del vostre aprenentatge.

+ +
+

Note: Podeu veure l'exemple en aquest moment en directe a 5_z-index.html (vegeu el codi font).

+
+ +

Posicionament Fixa (Fixed)

+ +

Hi ha un altre tipus de posicionament a cobrir - fixed. Això funciona exactament igual que el posicionament absolut, amb una diferència clau - mentre que el posicionament absolut fixa un element en el lloc en relació amb l'element {{htmlelement("html")}} o seu més proper avantpassat posicionat, el posicionament fix fixa un element en el lloc en relació a la finestra de visualització del navegador. Això vol dir que podeu crear elements útils de la interfície d'usuari que es fixen en el lloc, com ara menús de navegació persistents.

+ +

Fem un exemple senzill per mostrar el que volem dir. Abans de res, elimineu les regles existents p:nth-of-type(1) i .positioned del vostre CSS.

+ +

Ara, actualitzeu la regla del cos per eliminar la declaració position: relative; i afegiu una alçada fixa, com aixó:

+ +
body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+ +

Ara donarem a l'element {{htmlelement("h1")}} position: fixed;, i aconseguirem que s'assegui en el centre superior de la finestra de visualització. Afegiu la regla següent al vostre CSS:

+ +
h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}
+ +

El top: 0; és necesari per fer que s'adhereixi a la part superior de la pantalla; Donem a l'encapçalament el mateix ample que la columna de contingut i utilitzarem el fidel antic margin: 0 auto; com a truc per centrar-ho. A continuació, li donem un fons blanc i algun farcit, de manera que el contingut no estigui visible per sota d'ell.

+ +

Si deseu i actualitzeu ara, veureu un petit efecte divertit pel qual l'encapçalament es manté fix, i el contingut apareix en desplaçar-se cap amunt i desaparèixer per sota d'ell. Però podríem millorar més, això - de moment, alguns dels continguts començan per sota de l'encapçalament, perquè el encapçalament posicionat ja no apareix en el flux del document, de manera que la resta del contingut es mou cap amunt. Necessitem moure-ho tot cap avall una mica; podem fer-ho establint un marge superior al primer paràgraf. Afegiu-ho ara:

+ +
p:nth-of-type(1) {
+  margin-top: 60px;
+}
+ +

Ara hauríeu de veure l'exemple acabat:

+ + + +

{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}

+ +
+

Nota: Podeu veure l'exemple en aquest moment en directe a 6_fixed-positioning.html (vegeu el codi font).

+
+ +

Experimental: posició adherent (sticky)

+ +

Hi ha un nou valor de posicionament disponible anomenat position: sticky, el suport del mateix no està molt estès. Aquest és bàsicament un híbrid entre una posició relativa i una fixa, que permet que un element posicionat actuï com si estigués relativament posicionat fins que es desplaci a un determinat llindar (per ex., 10px des de la part superior de la finestra de visualització), i després es torna fix.  Vegeu la nostra entrada de referéncia de position: sticky per més detalls i un exemple.

+ +

Resum

+ +

Estic segur que us heu divertir jugant amb el posicionament bàsic - és una de les eines essencials que està darrera en le creació de complexos dissenys CSS i funcions d'interfície d'usuari. Tenint en compte això, en el proper article tindrem encara més diversió amb el posicionament, allà anirem un pas més enllà i començarem a construir algunes coses útils del món real amb ell.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/css_layout/practical_positioning_examples/index.html b/files/ca/learn/css/css_layout/practical_positioning_examples/index.html new file mode 100644 index 0000000000..dfaac7f63c --- /dev/null +++ b/files/ca/learn/css/css_layout/practical_positioning_examples/index.html @@ -0,0 +1,404 @@ +--- +title: Exemples pràctics de posicionament +slug: Learn/CSS/Disseny_CSS/Exemples_pràctics_posicionament +tags: + - Article + - Beginner + - CSS + - CodingScripting + - Guide + - Layout + - Learn + - absolute + - fixed + - relative +translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}
+ +

Amb els fonaments del posicionament coberts en l'últim article, ara veurem com crear alguns exemples del món real, per il·lustrar quin tipus de coses podeu fer amb el posicionament.

+ + + + + + + + + + + + +
Requisits previs:Conceptes bàsics d'HTML (estudi Introducció a HTML), i una idea de com funciona CSS (estudi Introducció a CSS).
Objectiu:Tenir una idea dels aspectes pràctics del posicionament
+ +

Una caixa d'informació amb pestanyes

+ +

El primer exemple que veurem és una caixa d'informació amb pestanyes clàssica - una característica molt freqüent que es fa servir quan voleu empaquetar molta informació en una petita àrea. Això inclou aplicacions de gran abast d'informació, com ara jocs d'estratègia/guerra, versions mòbils de llocs web on la pantalla és estreta i l'espai és limitat, i caixes d'informació compactes on és possible que vulgueu tenir molta informació disponible sense haver d'omplir tota la IU. El nostre senzill exemple es veurà així una vegada que hàgim acabat:

+ +

+ +
+

Nota: Podeu veure l'exemple acabat executant-ho en directa a info-box.html (codi font). Consulteu-ho per tenir una idea del que estareu construint en aquesta secció de l'article.

+
+ +

Podeu estar pensant "per què no crear les pestanyes separades com a pàgines web independents, i només les pestanyes, fent clic a través de les pàgines independents per crear l'efecte?" Aquest codi seria més senzill, sí, però cada visualització de "pàgina" per separat seria en realitat una pàgina web recentment carregada, la qual cosa faria més difícil guardar la informació entre les vistes i integrar aquesta característica en un disseny de d'interfície d'usuari més gran. A més, les anomenades "aplicacions de pàgina única" s'estan tornant molt populars - especialment per a les d'interfície d'usuari web mòbils - ja que tenir tot el que serveix com un únic arxiu redueix el nombre de sol·licituds HTTP necessàries per visualitzar tot el contingut, millorant així el rendiment.

+ +
+

Nota: Alguns desenvolupadors web porten les coses encara més lluny, només tenen una pàgina d'informació carregada alhora i canvien dinàmicament la informació que es mostra utilitzant, una funció de JavaScript com XMLHttpRequest. En aquest punt de l'aprenentatge, però, volem que les coses siguin tan simples com sigui possible. Hi ha una mica de JavaScript més endavant, però només una mica.

+
+ +

Per començar, ens agradaria que féssiu una còpia del fitxer HTML d'inici - info-box-start.html. Deseu-lo en algun lloc sensible a l'ordinador i obrir-ho en el vostre editor de text. Vegem l'HTML contingut en el cos:

+ +
<section class="info-box">
+  <ul>
+    <li><a href="#" class="active">Tab 1</a></li>
+    <li><a href="#">Tab 2</a></li>
+    <li><a href="#">Tab 3</a></li>
+  </ul>
+  <div class="panels">
+    <article class="active-panel">
+      <h2>The first tab</h2>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
+    </article>
+    <article>
+      <h2>The second tab</h2>
+
+      <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
+    </article>
+    <article>
+      <h2>The third tab</h2>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p>
+
+      <ol>
+        <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
+        <li>Aliquam ut porttitor urna.</li>
+        <li>Nulla facilisi</li>
+      </ol>
+    </article>
+  </div>
+</section>
+ +

Així que aquí tenim un element {{htmlelement("section")}} amb una class info-box, que conté un {{htmlelement("ul")}} i un {{htmlelement("div")}}. La llista desordenada conté tres elements de llista amb enllaços a l'interior, que es convertiran en les pestanyes reals per fer clic, per visualitzar els nostres panells de contingut. El div conté tres elements {{htmlelement("article")}}, que formaran els panells de contingut que corresponen a cada pestanya. Cada panell conté alguns continguts d'exemple.

+ +

La idea, aquí, és fer que l'estil de pestanyes pogui semblar-se a un menú estàndard de navegació horitzontal i donant-li estil els panells per a que s'asseguin un damunt de l'altre mitjançant el posicionament absolut. També us donarem una mica de JavaScript per incloure a la vostra pàgina, per mostrar el panell corresponent quan es pressiona una pestanya i l'estil de la pestanya en si. No necessitareu entendre el JavaScript en aquesta etapa, però haureu de pensar en aprendre una mica de JavaScript bàsic, el més aviat possible - com més complexes siguin les característiques de la vostra interfície d'usuari, més probable és que necessiteu implementar JavaScript a la vostra funcionalitat desitjada.

+ +

Configuració general

+ +

Per començar, afegiu el següent entre l'obertura i tancament de les etiquetes {{HTMLElement("style")}}:

+ +
html {
+  font-family: sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+ +

Aquesta és només una configuració general per establir una font sans-serif a la nostra pàgina, utilitzar el model border-box de {{cssxref("box-sizing")}} i desfer-se del marge predeterminat de {{htmlelement("body")}}.

+ +

A continuació, afegiu el següent just a sota del vostre CSS anterior:

+ +
.info-box {
+  width: 450px;
+  height: 400px;
+  margin: 0 auto;
+}
+ +

Això estableix un ample i alçada específic sobre el contingut i el centra a la pantalla mitjançant el antic truc margin: 0 auto;. Anteriorment en el curs, vam aconsellar no establir una alçada fixa en contenidors de contingut, si fos possible; Està bé en aquesta circumstància, perquè tenim contingut fix en les nostres pestanyes. També sembla una mica discordant tenir diferents pestanyes a diferents alçades.

+ +

Estilitzar les nostres pestanyes

+ +

Ara volem que les pestanyes d'estil semblin com a pestanyes - bàsicament, aquest és un menú de navegació horitzontal, però en comptes de carregar diferents pàgines web quan es fa clic, com hem vist prèviament al curs, fa que es mostrin panells diferents en la mateixa pàgina. Primer, afegiu la següent regla a la part inferior del vostre CSS per eliminar el valor predeterminat {{cssxref("padding-left")}} i {{cssxref("margin-top")}} de la llista no ordenada:

+ +
.info-box ul {
+  padding-left: 0;
+  margin-top: 0;
+}
+ +
+

Nota: Estem utilitzant selectors descendents amb .info-box al principi de la cadena a través d'aquest exemple - això és per poguer inserir aquesta funció en una pàgina amb un altre contingut ja en ella, sense por a interferir amb els estils aplicats a altres parts de la pàgina.

+
+ +

A continuació, dissenyarem les pestanyes horitzontals - els elements de la llista es flotant tots cap a l'esquerra per fer que s'asseguin en una sola línia, el seu {{cssxref("list-style-type")}} s'estableix a none per desfer-se de les vinyetes i el seu {{cssxref("width")}} s'estableix a 150px perquè s'ajusti còmodament a través de la caixa d'informació (info-box). Els elements {{htmlelement("a")}} estan configurats en {{cssxref("display")}} inline-block, perquè s'asseguin en una línia però que encara siguin estilitzables, i estiguin dissenyats adequadament per als botons de pestanya, usant una varietat d'altres propietats.

+ +

Afegiu el següent CSS:

+ +
.info-box li {
+  float: left;
+  list-style-type: none;
+  width: 150px;
+}
+
+.info-box li a {
+  display: inline-block;
+  text-decoration: none;
+  width: 100%;
+  line-height: 3;
+  background-color: red;
+  color: black;
+  text-align: center;
+}
+ +

Finalment, per a aquesta secció, establirem alguns estils als estats de l'enllaç. En primer lloc, configurarem els estats :focus i :hover de les pestanyes, perquè es vegin diferents quan estan enfocats/planejats, oferint als usuaris alguna infomació visual. En segon lloc, establirem una regla que posi el mateix estil en una de les pestanyes quan hi hagi una class active present en ella. Definirem això mitjançant JavaScript quan es faci clic a una pestanya. Col·loqueu els següents CSS per sota dels altres estils:

+ +
.info-box li a:focus, .info-box li a:hover {
+  background-color: #a60000;
+  color: white;
+}
+
+.info-box li a.active {
+  background-color: #a60000;
+  color: white;
+}
+ +

Estilitzar els panells

+ +

El següent treball és dissenyar els nostres panells. Anem a engegar-ho!

+ +

Primer de tot, afegiu la següent regla per dissenyar el contenidor .panels {{htmlelement("div")}}. Aquí, simplement, hem establert un {{cssxref("height")}} fix per assegurar-nos que els panells s'ajustin bé a l'interior de la caixa d'informació, {{cssxref("position")}} relative pel que fa a {{htmlelement("div" )}} com a context de posicionament, de manera que podeu col·locar elements fills posicionats relatius a ell i no a l'element {{htmlelement("html")}} i finalment el flotador {{cssxref("clear")}} establert en el CSS anterior perquè no interfereixi amb la resta del disseny.

+ +
.info-box .panels {
+  height: 352px;
+  position: relative;
+  clear: both;
+}
+ +

Finalment, per a aquesta secció, dissenyarem els elements individuals {{htmlelement("article")}} que componen els nostres panells. La primera regla que afegirem serà {{cssxref("position")}} absolute dels panells, i farà que tots quedin asseguts, alineats a {{cssxref("top")}} i {{cssxref("left")}} del seu contenidor {{htmlelement ("div")}} - aquesta part és absolutament clau per a tota aquesta característica de disseny, ja que fa que els panells s'asseguin uns sobre els altres. La regla també proporciona als panells la mateixa alçada de conjunt que el contenidor, i dóna al contingut un farciment, un text {{cssxref("color")}} i un {{cssxref("background-color")}}.

+ +

La segona regla que afegirem aquí fa que un panell amb una class active-panel, establert en ell, tindrà un {{cssxref("z-index")}} d'1, que se li aplicarà, la qual cosa farà que s'asseguin per sobre dels altres panells (els elements posicionats tenen un z-index de 0 per defecte, la qual cosa els posaria a continuació). Una vegada més, afegirem aquesta classe utilitzant JavaScript en el moment adequat.

+ +
.info-box article {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 352px;
+  padding: 10px;
+  color: white;
+  background-color: #a60000;
+}
+
+.info-box .active-panel {
+  z-index: 1;
+}
+ +

Afegir el nostre JavaScript

+ +

L'últim pas per fer funcionar aquesta característica és afegir JavaScript. Col·loqueu el següent bloc de codi, exactament com s'escriu, entre les etiquetes d'obertura i tancament {{htmlelement("script")}} (trobareu aquestes a sota del contingut HTML):

+ +
var tabs = document.querySelectorAll('.info-box li a');
+var panels = document.querySelectorAll('.info-box article');
+
+for(i = 0; i < tabs.length; i++) {
+  var tab = tabs[i];
+  setTabHandler(tab, i);
+}
+
+function setTabHandler(tab, tabPos) {
+  tab.onclick = function() {
+    for(i = 0; i < tabs.length; i++) {
+      tabs[i].className = '';
+    }
+
+    tab.className = 'active';
+
+    for(i = 0; i < panels.length; i++) {
+      panels[i].className = '';
+    }
+
+    panels[tabPos].className = 'active-panel';
+  }
+}
+ +

Aquest codi fa el següent:

+ + + +

Això és tot pel primer exemple. Manteniu obert el vostre codi, ja que l'afegirem a la segona.

+ +

Una caixa d'informació amb pestanyes de posició fixa

+ +

En el nostre segon exemple, farem el nostre primer exemple - la nostra caixa d'informació - i l'afegirem al context d'una pàgina web completa. Però no només això - li donarem una posició fixa perquè es mantingui en la mateixa posició en la finestra del navegador. Quan el contingut principal es desplaci, la caixa d'informació romandrà en la mateixa posició en la pantalla. El nostre exemple acabat tindrà aquest aspecte:

+ +

+ +
+

Nota: Podeu veure l'exemple acabat, executant-ho en directe a fixed-info-box.html (codi font). Comproveu-ho per tenir una idea del que serà la construcció d'aquesta secció de l'article.

+
+ +

Com a punt de partida, podeu fer servir l'exemple complet de la primera secció de l'article o fer una còpia local de info-box.html des del nostre repositori de Github.

+ +

Addicions HTML

+ +

En primer lloc, necessitem un codi HTML addicional per representar el contingut principal del lloc web. Afegiu el següent {{htmlelement("section")}} just a sota de l'etiqueta d'apertura {{htmlelement("body")}}, just abans de la secció existent:

+ +
<section class="fake-content">
+  <h1>Fake content</h1>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+</section>
+ +
+

Nota: Us podeu sentir lliures de canviar el contingut fals per a algun contingut real si ho desitjeu.

+
+ +

Canvis al CSS existent

+ +

A continuació, hem de fer petits canvis al CSS existent, per tenir la caixa d'informació col·locada i posicionada Canvieu la regla .info-box per desfer-vos del margin: 0 auto;  (Ja no volem que la caixa d'informació estigui centrada), afegiu {{cssxref("position")}}: fixed;, i enganxeu-ho en el {{cssxref("top")}} de la finestra de visualització del navegador.

+ +

Ara ha de ser així:

+ +
.info-box {
+  width: 450px;
+  height: 400px;
+  position: fixed;
+  top: 0;
+}
+ +

Estilitzar el contingut principal

+ +

L'únic que queda per a aquest exemple és proporcionar al contingut principal amb un estil. Afegiu la següent regla sota la resta del vostre CSS:

+ +
.fake-content {
+  background-color: #a60000;
+  color: white;
+  padding: 10px;
+  height: 2000px;
+  margin-left: 470px;
+}
+ +

Per començar, donem al contingut el mateix {{cssxref("background-color")}}, {{cssxref("color")}}, i {{cssxref("padding")}} com els panells de caixa d'informació. A continuació, li donem un gran {{cssxref("margin-left")}} per moure-ho cap a la dreta, fent espai perquè la caixa d'informació s'assegui, de manera que no se superposi amb qualsevol altre cosa.

+ +

Això marca el final del segon exemple; esperem que trobeu el tercer tan interessant.

+ +

Un panell amagat lliscant

+ +

L'exemple final que presentarem aquí és un panell que es llisca des de dins i fora de la pantalla en prémer una icona - com s'ha esmentat anteriorment, això és popular per a situacions com ara dissenys de mòbils, on els espais de pantalla disponibles són petits, per la qual cosa no es desitja usar la major part d'ella, mostrant un menú o panell d'informació en lloc de contingut útil.

+ +

El nostre exemple acabat tindrà aquest aspecte:

+ +

+ +
+

Nota: Podeu veure l'exemple acabat, executant-ho en directe a hidden-info-panel.html (codi font). Comproveu-ho per tenir una idea del que serà la construcció d'aquesta secció de l'article.

+
+ +

Com a punt de partida, feu una còpia local de hidden-info-panel-start.html des del nostre repositori de Github. Això no segueix l'exemple anterior, de manera que cal un nou fitxer d'inici. Fem un cop d'ull al codi HTML del fitxer:

+ +
<label for="toggle">❔</label>
+<input type="checkbox" id="toggle">
+<aside>
+
+  ...
+
+</aside>
+ +

Per començar, tenim un element {{htmlelement("label")}} i un element {{htmlelement("input")}} - els elements <label> normalment s'utilitzen per associar una etiqueta de text amb un element de formulari amb finalitats d'accessibilitat (permetent que un usuari de pantalla vegi quina descripció fa amb quin element del formulari). Aquí s'associa amb la casella de verificació <input> amb els atributs for i id.

+ +
+

Nota: Hem posat un gran signe d'interrogació en el nostre HTML perquè actuï com la nostra icona d'informació - aquest representa el botó que es premut per mostrar/amagar el panell.

+
+ +

Aquí utilitzarem aquests elements per un propòsit lleugerament diferent - un altre efecte secundari útil dels elements <label> és que podeu fer clic a l'etiqueta de la casella de verificació per a marcar la casella de verificació, així com només la casella de verificació. Això ha portat a la coneguda checkbox hack, que proporciona una forma lliure de JavaScript per controlar un  element mitjançant la commutació d'un botó. L'element que anem a controlar és l'element {{htmlelement("aside")}} que segueix els altres dos (hem deixat el seu contingut fora del llistat del codi anterior per brevetat).

+ +

A les seccions següents explicarem com funciona tot això.

+ +

Estilitzar els elements de formulari

+ +

Primer tractarem els elements de formulari - afegiu el següent CSS entre les etiquetes {{htmlelement("style")}}:

+ +
label[for="toggle"] {
+  font-size: 3rem;
+  position: absolute;
+  top: 4px;
+  right: 5px;
+  z-index: 1;
+  cursor: pointer;
+}
+
+input[type="checkbox"] {
+  position: absolute;
+  top: -100px;
+}
+ +

La primera regla donar estil el <label>; aquí tenim:

+ + + +

La segona regla estableix {{cssxref("position")}} absolute en l'element <input> de casella de verificació real i l'oculta a la part superior de la pantalla. De fet, no volem veure això a la nostra interfície d'usuari.

+ +

Estilitzar el panell

+ +

Ara és hora de donar-li estil el propi panell lliscant. Afegiu la següent regla al final del vostre CSS:

+ +
aside {
+  background-color: #a60000;
+  color: white;
+
+  width: 340px;
+  height: 98%;
+  padding: 10px 1%;
+
+  position: fixed;
+  top: 0;
+  right: -370px;
+
+  transition: 0.6s all;
+}
+ +

Hi ha molt a fer aquí, analitzem-ho a poc a poc:

+ + + +

Seleccionar el estat marcat

+ +

Hi ha una mica de CSS per afegir - poseu el següent al final del vostre CSS:

+ +
input[type=checkbox]:checked + aside {
+  right: 0px;
+}
+ +

El selector és bastant complex aquí - estem seleccionant l'element <aside> adjacent a l'element <input>, però només quan està marcat (tingueu en compte l'ús de la pseudo-classe {{cssxref (": checked")}} per aconseguir això). Quan aquest és el cas, estem establint la propietat {{cssxref("right")}} de <aside> a 0px, el que fa que el panell aparegui novament en la pantalla (suaument a causa de la transició). En fer clic en l'etiqueta, torna a desmarcar la casella de verificació, que torna a ocultar el panell.

+ +

Així que aquí ho teniu - una manera bastant intel·ligent, lliure de Javascript, per crear un efecte de botó alternatiu. Això funcionarà en IE9 i superiors (la transició suau funcionarà en IE10 i superiors). Aquest efecte té algunes preocupacions - això és abusar una mica d'elements de forma (no estan destinats per a aquest propòsit), i l'efecte no és el millor en termes d'accessibilitat - l'etiqueta no es pot enfocar de manera predeterminada, i l'ús no semàntic dels elements de formulari pot causar problemes amb els lectors de pantalla. JavaScript i un enllaç o un botó poden ser més apropiat, però encara és divertit experimentar.

+ +

Resum

+ +

Així que arrodonim el nostre cop d'ull en el posicionament - ara com ara, heu de tenir una idea de com funciona la mecànica bàsica, així com la comprensió de com començar a aplicar-los en la construcció d'algunes característiques interessants de la interfície d'usuari. No us preocupeu sinó vau rebre tot això immediatament - el posicionament és un tema bastant avançat, i sempre podeu treballar a través dels articles de nou, per ajudar-vos en la vostra comprensió. El següent tema al que ens referirem és a Flexbox.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/css_layout/responsive_design/index.html b/files/ca/learn/css/css_layout/responsive_design/index.html new file mode 100644 index 0000000000..5bf909e6e7 --- /dev/null +++ b/files/ca/learn/css/css_layout/responsive_design/index.html @@ -0,0 +1,324 @@ +--- +title: Disseny responsiu +slug: Learn/CSS/Disseny_CSS/Disseny_responsiu +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
+ +

En els primers dies del disseny de pàgines web es creaven pàgines per a una mida de pantalla determinada. Si l’usuari tenia una pantalla més gran o més petita que la que el dissenyador s’esperava, els resultats anaven des de barres de desplaçament no desitjades fins a línies excessivament llargues i un mal ús de l’espai. A mesura que apareixien mides de pantalla més diverses, va aparéixer el concepte de disseny web responsiu (RWD o responsive web design), un conjunt de pràctiques que permeten a les pàgines web alterar el disseny i l’aparença per a adaptar-se a diferents amplades, resolucions, etc. És una idea que ha canviat la manera de dissenyar una pàgina web per a diversos dispositius, i en aquest article t’ajudarem a entendre les principals tècniques que has de conèixer per a dominar-la.

+ + + + + + + + + + + + +
Prerequisits:Conceptes bàsics d’HTML (consulta la Introducció a l’HTML), i nocions de com funciona el CSS (consulta els Primers passos amb el CSS i els elements bàsics del CSS).
Objectiu:Entendre els conceptes fonamentals i la història del disseny responsiu.
+ +

Història dels dissenys de pàgina web

+ +

En un moment de la història, només tenies dues opcions a l’hora de dissenyar un lloc web:

+ + + +

Aquests dos enfocaments tenien com a resultat un lloc web que s’adequava essencialment a la pantalla de la persona que havia dissenyat el lloc web. El lloc web líquid donava un disseny aixafat en pantalles més petites (com es pot veure a continuació), i línies molt llargues que costaven molt de llegir en les pantalles grans.

+ +
Una disposició amb dues columnes aixafades en una finestra de visualització de la mida d’un dispositiu mòbil. +
+
+ +
+

Nota: Observa aquest disseny de pàgina web líquid senzill: exemple, codi d’origen. Amplia o redueix la finestra del navegador i observa com en canvia l’aspecte segons les diferents mides.

+
+ +

Amb llocs web amb amplada fixa es corria el risc d’aparició d’una barra de desplaçament horitzontal en les pantalles que eren més petites que l’amplada del lloc web (com es pot veure a continuació) i de molta superfície blanca a les vores del disseny en les pantalles que eren més grans.

+ +
Disseny amb barra de desplaçament horitzontal en una finestra de visualització de la mida d’un dispositiu mòbil. +
+
+ +
+

Nota: Observa aquest disseny de pàgina web senzill d’amplada fixa: exemple, codi d’origen. Un cop més, canvia la mida de la finestra del navegador i observa’n el resultat.

+
+ +
+

Nota: Les captures de pantalla de dalt es fan amb el mode de disseny responsiu de les DevTools de Firefox.

+
+ +

A mesura que la web per a dispositius mòbils va començar a esdevenir una realitat amb els primers telèfons mòbils, les companyies que volien adherir-se en general a la tecnologia mòbil creaven una versió del lloc web especial per a dispositius mòbils amb una URL diferent (sovint alguna cosa com ara m.example.com o example.mobi). Això volia dir que calia desenvolupar i mantenir actualitzades dues versions independents de la mateixa pàgina web.

+ +

A més, aquests llocs web per a dispositius mòbils solien oferir una experiència d’usuari molt reduïda. Com que els dispositius mòbils es van tornar més potents i van poder mostrar llocs web complets, això frustrava els usuaris de dispositius mòbils, que es trobaven atrapats en la versió mòbil del lloc web i no podien accedir a informació que sabien que hi havia en la versió d’escriptori, que incloïa totes les funcions de la pàgina web.

+ +

Disseny flexible abans del disseny responsiu

+ +

Es van desenvolupar diversos enfocaments per a intentar resoldre els inconvenients dels mètodes líquids o d’amplada fixa per a crear llocs web. El 2004, Cameron Adams va escriure una publicació titulada Resolution dependent layout, on descriu un mètode per a crear un disseny de pàgina web que s’adapta a diferents resolucions de pantalla. Aquest enfocament requeria JavaScript per a detectar la resolució de la pantalla i carregar el CSS correcte.

+ +

Zoe Mickley Gillenwater va ser fonamental en la seva tasca de descriure i formalitzar les diferents maneres de crear llocs web flexibles, per a intentar trobar una situació intermèdia entre omplir tota la pantalla o tenir una mida completament fixa.

+ +

El disseny responsiu

+ +

El terme disseny responsiu va ser creat per Ethan Marcotte el 2010, que va descriure l’ús de tres tècniques combinades.

+ +
    +
  1. La primera va ser la idea de les graelles fluides, cosa que ja explorava Gillenwater, i que es pot llegir en l’article de Marcotte, Fluid grids (publicat el 2009 en A list apart).
    2. +
  2. La segona tècnica va ser la idea d’imatges fluides. Utilitzant una tècnica molt senzilla d’establir la propietat max-width al 100%, les imatges es farien més petites si la columna que les contenia es feia més estreta que la mida intrínseca de la imatge, però mai no augmentaria. D’aquesta manera, una imatge s’escala per a poder-se incloure en una columna de mida flexible sense que desbordi, però no es fa més gran i es pixela si la columna s’amplia més que la imatge.
    3. +
  3. El tercer component clau va ser la consulta de mèdia (o media query). Les consultes de mèdia habiliten el tipus de canvi de disseny de pàgina web que Cameron Adams havia explorat abans amb JavaScript, però utilitzant només CSS. En lloc de tenir un disseny de pàgina web per a cada mida de pantalla, se’n podria tenir un i canviar-ne la disposició dels elements. Es podrien fer aparèixer barres laterals per a les pantalles més petites, o es podia mostrar una navegació alternativa.
    4. +
+ +

És important entendre que el disseny web responsiu no és una tecnologia independent: és un terme que s’utilitza per a descriure un enfocament del disseny de pàgines web o un conjunt de bones pràctiques que s’utilitzen per a crear un disseny de pàgines web que pugui respondre segons el dispositiu que s’utilitza per a visualitzar el contingut. En l’exploració original de Marcotte, això va donar lloc a les graelles flexibles (amb elements flotants) i les consultes de mèdia; però en els gairebé deu anys des que es va escriure aquest article, treballar de manera responsiva s’ha convertit en la norma. Els mètodes de disseny amb CSS moderns són intrínsecament responsius, i hi ha novetats integrades a la plataforma web que faciliten el disseny de llocs web responsius.

+ +

La resta d’aquest article t’indica les diverses funcions de la plataforma web que pots utilitzar per a crear un lloc web responsiu.

+ +

Les consultes a mèdia (media queries)

+ +

El disseny responsiu només va poder sorgir a causa de les consultes a mèdia. L’especificació del nivell 3 de les consultes a mèdia es va convertir en una Candidate Recommendation el 2009, cosa que significa que es considerava llesta per a implementar-la en els navegadors. Les consultes a mèdia ens permeten fer un seguit de proves (per exemple, si la pantalla de l’usuari és més gran que una certa amplada o una determinada resolució) i aplicar CSS de manera selectiva per a dissenyar la pàgina web més adequada segons les necessitats de l’usuari.

+ +

Per exemple, la consulta als mèdia següent esbrina si la pàgina web que es mostra ho fa com una pantalla (per tant, no és un document imprès), i si la finestra té almenys 800 píxels d’ample. El CSS per al selector .container només s’aplica si aquestes dues coses són certes.

+ +
@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} 
+
+ +

Pots afegir diverses consultes a mèdia dins d’un full d’estil, i ajustar el disseny sencer o només unes parts perquè s’adapti més bé a les diverses mides de pantalla. Els punts en què s’introdueix una consulta de mèdia i es canvia la disposició dels elements de la pàgina web es coneixen com punts de ruptura.

+ +

Un enfocament habitual quan s’utilitzen les consultes als mèdia és crear un disseny senzill d’una sola columna per a dispositius de pantalla estreta (per exemple, telèfons mòbils), després comprovar si hi ha pantalles més grans i implementar una disposició en múltiples columnes quan saps que tens prou amplada de pantalla per a fer-ho. Sovint es descriu com disseny mobile first.

+ +

Trobaràs més informació en la documentació de MDN per a les consultes als mèdia.

+ +

Graelles flexibles

+ +

Els llocs responsius no només canvien la distribució entre punts de ruptura, sinó que es basen en graelles flexibles. Una graella flexible significa que no cal delimitar el lloc web a totes les mides possibles de dispositius que hi ha i crear un disseny en píxels perfecte. Aquest plantejament seria impossible, atès el gran nombre de dispositius de mida diferent que hi ha, i del fet que, com a mínim en la versió d’escriptori, la finestra del navegador no sempre es maximitza.

+ +

Si fas servir una graella flexible, només has d’afegir un punt de ruptura i canviar el disseny en el punt en què el contingut es comença a veure malament. Per exemple, si les longituds de les línies es fan il·legibles a mesura que augmenta la mida de la pantalla, o si una caixa s’encongeix fins a una amplada de dues paraules en cada línia a mesura que la mida de la pantalla es redueix.

+ +

En els primers dies del disseny responsiu, l’única opció per a dissenyar pàgines web era utilitzar elements flotants. Els dissenys de pantalla amb elements flotants flexibles s’aconseguien donant a cada element una amplada en percentatge i assegurar-se que no s’atenyia més del 100% per a tota la pàgina. En la seva obra original sobre graelles flexibles, Marcotte va detallar una fórmula per a convertir en percentatges un disseny de pàgina dissenyat en píxels.

+ +
target / context = result 
+
+ +

Per exemple, si la mida de la nostra columna de destinació és de 60 píxels i el context (o contenidor) en què es troba és de 960 píxels, dividim 60 per 960 i obtenim un valor que podem utilitzar en el nostre CSS, després de traslladar el punt decimal dos llocs a la dreta.

+ +
.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} 
+
+ +

Avui dia trobaràs aquest enfocament en molts llocs web, i també el trobaràs documentat aquí, en la secció dedicada al disseny de l’article de mètodes heretats de disseny de pàgines web. És probable que en el transcurs del teu treball et trobis amb llocs web que usen aquest enfocament, de manera que val la pena entendre’l, tot i que no construiràs un lloc modern amb una graella flexible basada en elements flotants.

+ +

L’exemple següent mostra un disseny senzill i sensible amb consultes a mèdia i una graella flexible. En pantalles estretes, el disseny mostra les caixes apilades les unes sobre les altres:

+ +
Una vista d’un dispositiu mòbil amb una disposició de caixes apilades verticalment l’una sobre l’altra. +
+
+ +

En pantalles més amples es passa a dues columnes:

+ +
Una vista d’un dispositiu d’escriptori d’un disseny amb dues columnes. +
+
+ +
+

Nota: Pots trobar l’exemple en viu i el codi d’origen d’aquest exemple a GitHub.

+
+ +

Tecnologies modernes de disseny de pàgines web

+ +

De manera predeterminada, els mètodes moderns de disseny de pàgines web com ara el disseny en múltiples columnes, el Flexbox i el Grid són responsius per defecte. Tots aquests mètodes parteixen de la base que vols crear una graella flexible i et proporcionen les maneres de fer-ho més fàcils.

+ +

Multicol

+ +

El més antic d’aquests mètodes de disseny de pàgines web és multicol: quan especifiques un nombre de columnes (column-count), indiques en quantes columnes vols dividir el contingut. El navegador llavors calcula la mida d’aquestes columnes, que canvia d’acord amb la mida de la pantalla.

+ +
.container {
+  column-count: 3;
+} 
+
+ +

Si en lloc d’això estableixes l’atribut column-width, especifiques una amplada mínima. El navegador crea tantes columnes d’aquesta amplada com càpiguen còmodament en el contenidor, i reparteix l’espai entre totes les columnes. Per tant, el nombre de columnes canvia segons la quantitat d’espai que hi ha.

+ +
.container {
+  column-width: 10em;
+} 
+
+ +

Flexbox

+ +

Amb la tecnologia Flexbox, els elements flexibles es redueixen i distribueixen l’espai entre els elements d’acord amb l’espai que hi ha en el contenidor segons el comportament inicial que tenen predeterminat. Si canvies els valors de flex-grow i flex-shrink, pots indicar com vols que es comportin els elements quan hi ha més o menys espai al voltant.

+ +

En l’exemple següent, els elements flexibles ocupen cada un la mateixa quantitat d’espai en el contenidor flexible, mitjançant la propietat abreviada flex: 1, com es descriu en l’article Flexbox: Dimensions flexibles d’elements flex.

+ +
.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} 
+
+ +
+

Nota: Com a exemple hem reconstruït el disseny responsiu senzill anterior, aquest cop amb Flexbox. Pots veure que ja no cal fer servir valors percentuals estranys per a calcular la mida de les columnes: exemple, codi d’origen.

+
+ +

Graella CSS

+ +

En el disseny de pàgines web amb graella CSS, la unitat fr permet distribuir l’espai disponible en les traces d’una graella. L’exemple següent crea un contenidor de graella amb tres traces de mida 1fr. Es creen tres traces de columna, i cadascuna ocupa una part de l’espai disponible en el contenidor. Pots obtenir més informació sobre aquest enfocament per a crear una graella en la secció Aprendre a dissenyar graelles, de l’article Graelles flexibles amb la unitat fr.

+ +
.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} 
+
+ +
+

Nota: La versió del disseny de pàgines web amb graella és encara més senzilla, perquè permet definir les columnes amb .wrapper: exemple, codi d’origen.

+
+ +

Imatges responsives

+ +

L’enfocament més senzill de les imatges responsives es va descriure en els primers articles de Marcotte sobre el disseny de pàgines web responsiu. Bàsicament, agafes una imatge de la mida més gran que puguis necessitar, i la redueixes. Aquest és encara un enfocament emprat avui, i en la majoria de fulls d’estil trobaràs en algun lloc el CSS següent:

+ +
img {
+  max-width: 100%:
+} 
+
+ +

Hi ha inconvenients evidents en aquest enfocament. És possible que la imatge es mostri molt més petita que la seva mida intrínseca, i això representa una pèrdua d’amplada de banda: un usuari de dispositiu mòbil pot acabar descarregant una imatge que és diverses vegades de la mida del que realment veu a la finestra del navegador. A més, pot ser que no vulguis la mateixa relació d’aspecte de la imatge al mòbil i a l’escriptori. Per exemple, pot ser bo tenir una imatge quadrada per a mòbils, i mostrar la mateixa imatge en format apaïsat a l’escriptori. O bé, tenint en compte la mida més petita del dispositiu mòbil, pot ser que hi vulguis mostrar una imatge diferent, que s’entengui més fàcilment en una pantalla petita. Aquestes coses no es poden aconseguir simplement reduint una imatge.

+ +

Les imatges responsives, amb l’element {{htmlelement("picture")}} i els atributs srcset i sizes de {{htmlelement("img")}} resolen tots dos problemes. Pots proporcionar diverses mides, juntament amb «suggeriments» (metadades que descriuen la mida de la pantalla i la resolució a la qual s’adapta la imatge), i el navegador tria la imatge més adequada per a cada dispositiu i procura que l’usuari descarregui la mida adequada de la imatge en el dispositiu que utilitza.

+ +

També pots usar imatges de director artístic, que proporcionen un retall o una imatge completament diferent per a diferents mides de pantalla.

+ +

Pots trobar una guia detallada sobre Imatges responsives en el mòdul Aprendre HTML de MDN.

+ +

Tipografia responsiva

+ +

Un element de disseny responsiu que encara no hem tractat en articles anteriors és la idea de la tipografia responsiva. Aquest concepte descriu essencialment el fet de canviar la mida de lletra segons l’espai de pantalla que reflecteixen les consultes a mèdia.

+ +

En aquest exemple, volem establir el nostre títol d’encapçalament de nivell 1 en 4rem, és a dir, que serà quatre vegades la mida de la nostra lletra base. És un títol molt gran! Només volem aquest títol d’encapçalament tan gran en mides de pantalla grans, per tant, primer creem un títol d’encapçalament més petit i després utilitzem les consultes a mèdia per a sobreescriure’l amb la mida més gran si sabem que l’usuari té una mida de pantalla d’almenys 1200px.

+ +
html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} 
+
+ +

Hem editat el nostre exemple de graella responsiva per a incloure el tipus responsiu amb el mètode descrit. Pots veure com el títol d’encapçalament canvia de mida a mesura que el disseny canvia a la versió de dues columnes.

+ +

En el dispositiu mòbil, el títol d’encapçalament és més petit:

+ +
Un esquema apilat amb una mida de títol d’encapçalament petita. +
+
+ +

Tanmateix, en el dispositiu d’escriptori veiem la mida del títol d’encapçalament més gran:

+ +
Un disseny de dues columnes amb un títol d’encapçalament gran. +
+
+ +
+

Nota: Observa aquest exemple en acció: exemple, codi d’origen.

+
+ +

Tal com mostra aquest enfocament de la tipografia, no cal restringir les consultes a mèdia a canviar només el disseny de pàgina web. Es poden utilitzar per a ajustar qualsevol element i fer-lo més útil o atractiu a les diverses mides de pantalla.

+ +

L’ús d’unitats de finestra de visualització per a tipografies responsives

+ +

Un enfocament interessant és utilitzar la unitat vw de finestra de visualització per a habilitar la tipografia responsiva. 1vw és igual a un 1 per cent de l’amplada de la visualització, cosa que significa que si defineixes la mida de la lletra amb vw, sempre es relacionarà amb la mida de la finestra de visualització.

+ +
h1 {
+  font-size: 6vw;
+}
+ +

El problema de fer servir la unitat vw és que l’usuari perd la capacitat d’ampliar un bloc de text, perquè aquest text sempre està relacionat amb la mida de la finestra de visualització. Per tant, mai no hauries de definir text fent servir només les unitats de finestra de visualització.

+ +

Hi ha una solució, que implica l’ús de calc(). Si afegeixes la unitat vw a un conjunt de valors amb una mida fixa com em o rem, encara es pot fer zoom del text. Essencialment, la unitat vw s’afegeix a sobre d’aquest valor ampliat:

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

Això vol dir que només hem d’especificar la mida de la lletra per al títol d’encapçalament, en lloc de configurar-la per a dispositius mòbils i redefinir-la segons les consultes a mèdia. A continuació, la lletra augmenta gradualment a mesura que augmenta la mida de la finestra de visualització.

+ +
+

Observa aquest exemple en acció: exemple, codi d’origen.

+
+ +

L’etiqueta meta de la finestra de visualització

+ +

Si observes el tipus de lletra d’una pàgina HTML responsiva, normalment trobaràs l’etiqueta {{htmlelement("meta")}} a la capçalera (<head>) del document.

+ +
<meta name="viewport" content="width=device-width,initial-scale=1">
+
+ +

Aquesta etiqueta meta indica als navegadors dels dispositius mòbils que han d’establir l’amplada de la finestra de visualització a l’amplada del dispositiu i escalar el document al 100% de la mida prevista, cosa que mostra el document a la mida optimitzada per a dispositius mòbils.

+ +

Per què cal, això? Perquè els navegadors dels dispositius mòbils tendeixen a mentir sobre l’amplada de la finestra de visualització.

+ +

Aquesta etiqueta meta existeix perquè quan es va llançar l’iPhone original i la gent va començar a veure llocs web en una petita pantalla de telèfon, la majoria dels llocs web no estaven optimitzats per a dispositius mòbils. Per tant, el navegador del dispositiu mòbil establia l’amplada de la visualització a 960 píxels, la representava a aquella amplada i mostrava el resultat com la versió ampliada del disseny per al dispositiu d’escriptori. Altres navegadors de dispositius mòbils (per exemple, el de Google Android) van fer el mateix. Els usuaris podien fer zoom i desplaçar-se per la web per a veure els fragments que els interessaven, però allò no era còmode. Encara ho podràs veure si tens la mala sort d’anar a parar a un lloc web que no té un disseny responsiu.

+ +

El problema és que el teu disseny responsiu amb punts de ruptura i consultes a mèdia no funciona tal com es preveu per als navegadors mòbils. Si tens un disseny de pantalla estret que s’inicia amb una amplada de visualització de 480px o menys i la ruptura s’estableix a 960px, mai no veuràs la disposició de pantalla estreta al dispositiu mòbil. En canvi, si defineixes width=device-width, sobreescrius l’amplada predeterminada d’Apple width=960px amb l’amplada real del dispositiu, de manera que les consultes a mèdia permetran que funcioni com es preveu.

+ +

Per tant, sempre has d’incloure la línia HTML anterior a la capçalera dels teus documents.

+ +

Hi ha altres opcions de configuració que pots utilitzar amb l’etiqueta meta de la finestra de visualització, però, en general, t’anirà bé utilitzar la línia anterior.

+ + + +

Has d’evitar l’ús de minimum-scale, maximum-scale, i en particular la configuració de user-scalable en no. Els usuaris haurien de poder fer zoom en la mesura que necessitin; impedir això genera problemes d’accessibilitat.

+ +
+

Nota: Hi ha una @rule CSS dissenyada per a substituir l’etiqueta meta de la finestra de visualització (@viewport), però té una compatibilitat de navegadors deficient. Es va implementar a Internet Explorer i Edge, però un cop entri en funcionament Edge basat en Chromium, deixarà de formar part del navegador Edge.

+
+ +

Resum

+ +

El disseny responsiu es refereix a un disseny de lloc o d’aplicació que respon a l’entorn en què es visualitza. Comprèn diverses funcions i tècniques CSS i HTML, i ara és essencialment l’única manera com construïm els llocs web per defecte. Tingues en compte els llocs web que visites amb el dispositiu mòbil: probablement és poc habitual trobar-te amb un lloc que és la versió reduïda de la d’escriptori, o en què cal desplaçar-se de costat per a trobar-hi coses. Això és perquè la xarxa web s’ha orientat cap a aquest enfocament de disseny responsiu.

+ +

També ha estat molt més fàcil aconseguir dissenys responsius amb l’ajuda dels mètodes de disseny que has après en aquests articles. Si ets nou en el desenvolupament web, avui tens moltes més eines a la teva disposició que en els primers dies del disseny responsiu. Per tant, val la pena comprovar la data dels materials de referència que consultes. Tot i que els articles històrics continuen sent útils, l’ús modern de CSS i HTML facilita molt la creació de dissenys elegants i útils, i independents del dispositiu del visitant.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}

+ +

En aquest mòdul

+ + diff --git a/files/ca/learn/css/css_layout/supporting_older_browsers/index.html b/files/ca/learn/css/css_layout/supporting_older_browsers/index.html new file mode 100644 index 0000000000..5a689b6437 --- /dev/null +++ b/files/ca/learn/css/css_layout/supporting_older_browsers/index.html @@ -0,0 +1,237 @@ +--- +title: Suport en navegadors antics +slug: Learn/CSS/Disseny_CSS/Suport_en_navegadors_antics +translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

En aquest mòdul et recomanem que utilitzis els mètodes Flexbox i Grid com a eines principals per als teus dissenys. Tot i això, hi haurà visitants del teu lloc web que utilitzin navegadors més antics o navegadors que no admetin els mètodes que has utilitzat. Això sempre serà així a la xarxa: a mesura que es desenvolupen funcions noves, els diferents navegadors prioritzen coses diferents. Aquest article explica com utilitzar tècniques web modernes sense perjudicar els usuaris que empren una tecnologia més antiga.

+ + + + + + + + + + + + +
Prerequisits:Els conceptes bàsics d'HTML (consulta la Introducció a l'HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS i Aplicar estil a les caixes).
Objectiu:Entendre com proporcionar assistència per als dissenys en navegadors antics que potser no són compatibles amb les funcions que vols utilitzar.
+ +

El panorama de compatibilitat dels navegadors per al teu lloc web?

+ +

Cada lloc web és diferent en termes de públic objectiu. Abans de decidir l’enfocament que cal adoptar, esbrina el nombre de visitants que accedeixen al teu lloc web amb navegadors més antics. Això és senzill si ja tens un lloc web que simplement modifiques o reemplaces, perquè probablement tinguis analítiques que t'indiquin la tecnologia que utilitzen les persones que hi accedeixen. Si no tens analítiques o es tracta un lloc web totalment nou, hi ha llocs com ara Statcounter que poden proporcionar estadístiques filtrades segons la ubicació.

+ +

També has de considerar el tipus de dispositius i la manera com la gent utilitza el teu lloc web; per exemple, potser esperes un nombre de dispositius mòbils superior a la mitjana. Sempre s’ha de tenir en compte l’accessibilitat i les persones que utilitzen tecnologia d’assistència, però per a alguns llocs pot ser encara més crític. Segons experiència pròpia, els desenvolupadors sovint es preocupen massa per l’experiència de l’1% d’usuaris en una versió antiga d’Internet Explorer, i no consideren del tot el nombre molt més gran d'usuaris que tenen necessitats d’accessibilitat especials.

+ +

La compatibilitat de les funcions que empres

+ +

Un cop coneixes els navegadors que accedeixen al teu lloc web, pots valorar qualsevol tecnologia que vulguis utilitzar segons la compatibilitat que presenten i la facilitat amb què pots proporcionar una alternativa als visitants que no tenen aquesta tecnologia disponible. Intentem facilitar-te aquesta experiència proporcionant informació de compatibilitat dels navegadors en cadascuna de les pàgines que detallen una propietat CSS. Per exemple, consulta la pàgina de {{cssxref("grid-template-columns")}}. Al final d'aquesta pàgina hi ha una taula que mostra els navegadors principals juntament amb la versió que va començar a admetre aquesta propietat.

+ +

+ +

Una altra manera més popular d'esbrinar què és compatible amb una funció és el lloc web Can I Use. Aquest lloc web enumera la majoria de funcions de la plataforma web amb informació sobre l'estat de compatibilitat del navegador. Pots veure les estadístiques d’ús per ubicació, fet que resulta útil si treballes en un lloc que té usuaris d'una àrea del món determinada. Fins i tot pots enllaçar el teu compte de Google Analytics per a obtenir anàlisis basades en les teves dades d’usuari.

+ +

Entendre la tecnologia que tenen els teus usuaris i les compatibilitats de les funcions que potser vulguis fer servir et proporciona una bona base per a prendre totes les decisions i saber quina és la millor manera de donar suport a tots els teus usuaris.

+ +

Compatibilitat no significa «veure's igual»

+ +

És possible que un lloc web no es vegi de la mateixa manera a tots els navegadors, perquè alguns dels teus usuaris accediran al lloc web des d’un dispositiu mòbil i d’altres des de l'ordinador de taula. De la mateixa manera, alguns dels teus usuaris tindran una versió antiga del navegador, i d'altres una de més nova. És possible que alguns dels teus usuaris n’escoltin el contingut amb un lector de pantalla o hagin fet zoom a la pàgina per a poder-la llegir. Donar suport a tothom significa servir una versió del contingut dissenyada estratègicament, de manera que es vegi genial en els navegadors moderns, però que encara puguin utilitzar a un nivell bàsic els usuaris de navegadors més antics.

+ +

Un nivell bàsic de compatibilitat prové d’estructurar bé el contingut perquè el flux normal de la pàgina tingui sentit. Pot ser que un usuari amb un telèfon mòbil amb funcions molt limitades no obtingui gran part del teu CSS, però el contingut fluirà de manera que faciliti la lectura. Per tant, un document HTML ben estructurat hauria de ser sempre el punt de partida. El teu contingut té sentit si suprimeixes el full d’estil?

+ +

Una opció és deixar aquesta visió senzilla del lloc web com a alternativa per a les persones que utilitzen navegadors molt antics o limitats. Si tens un nombre reduït de persones que visiten el lloc amb aquests navegadors, és possible que no tingui sentit comercial dedicar temps a intentar donar-los una experiència similar a la gent que utilitza navegadors moderns. Seria millor dedicar temps a coses que facin més accessible el lloc web, perquè així dones servei a molts més usuaris. Hi ha un punt intermedi entre una pàgina HTML simple i tots aquests recursos, i el CSS ha permès que la creació d'aquestes alternatives sigui bastant senzilla.

+ +

La creació d’alternatives d'emergència amb CSS

+ +

Les especificacions CSS contenen informació que explica què fa el navegador quan s'apliquen dos mètodes de disseny al mateix element. Això vol dir que hi ha una definició per a què passa si un element flotant, per exemple, també és un element de graella que utilitza disseny de graella CSS. Combina aquesta informació amb el fet que els navegadors ignoren el CSS que no entenen, i tens una manera de crear dissenys senzills amb les tècniques heretades que ja hem explicat, que després se sobreescriuen amb el teu disseny de graella en els navegadors moderns que l’entenen.

+ +

En l'exemple següent hem especificat que tres elements de flotació <div> es mostrin en fila. Qualsevol navegador que no admeti el disseny de graella CSS veurà la fila de caixes com un disseny amb el mètode de flotació. Un element de flotació que es converteix en un element de graella perd el comportament de flotació, i això significa que si convertim l'embolcall en un contenidor de graella, els elements de flotació es converteixen en elements de graella. Si el navegador admet el disseny de graella, mostrarà la pàgina en forma de graella; si no l’admet, ignorarà les propietats relacionades amb el disseny de graella i utilitzarà el disseny de flotació.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+ +
<div class="wrapper">
+  <div class="item">Primer element</div>
+  <div class="item">Segon element</div>
+  <div class="item">Tercer element</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example1', '100%', '200') }}

+
+ +
+

Nota: La propietat {{cssxref("clear")}} tampoc té cap efecte un cop l'element es converteix en un element de graella, de manera que pots tenir un composició amb un peu de pàgina esborrat, que es convertirà en un disseny de graella.

+
+ +

Mètodes de les solucions alternatives

+ +

Hi ha diversos mètodes de disseny que es poden utilitzar de manera similar a aquest exemple de flotació. Pots triar el que tingui més sentit per al patró de disseny que has de crear.

+ +
+
Float i clear
+
Com s'ha mostrat abans, les propietats float i clear deixen d'afectar el disseny si els elements que passen a ser de flotació o els esborrats es converteixen en elements flexibles o de graella.
+
display: inline-block
+
Aquest mètode es pot utilitzar per a crear dissenys de columnes si un element té display: inline-block, però si després es converteix en un element de disseny de tipus flexible o de graella, el comportament inline-block s'ignora.
+
display: table
+
El mètode per a crear taules CSS que es descriu en la introducció d'aquests articles es pot utilitzar com a mètode de solució alternativa. Els elements que estiguin configurats en la taula CSS perdran aquest comportament si es converteixen en elements Flexbox o Grid. Però és important destacar que les caixes sense nom que s’han creat per a corregir l'estructura de la taula, no es creen.
+
Disseny en diverses columnes
+
Pots utilitzar multi-col com a solució alternativa en certs dissenys; si el teu contenidor té definida alguna propietat column-* i es converteix en un contenidor amb comportament de graella, s'anul·la el comportament en columnes.
+
Flexbox com a solució alternativa a la graella
+
Flexbox té una compatibilitat de navegador més gran que Grid perquè ha rebut el suport d’Internet Explorer 10 i 11, tot i que et recomanem que comprovis la informació que trobaràs més endavant en aquest article sobre la compatibilitat força irregular i confusa de Flexbox en navegadors més antics. Si converteixes un contenidor flexible en un contenidor de graella, s'ignorarà qualsevol propietat flex aplicada als descendents.
+
+ +

Observa que si fas servir el CSS d'aquesta manera pots proporcionar una experiència d'usuari decent per ajustar moltes compaginacions en navegadors antics. Afegim un disseny més senzill basat en tècniques més antigues i amb bona compatibilitat, i després utilitzem el CSS més recent per a crear el disseny que veurà més del 90% del públic. Hi ha casos, però, en què el codi alternatiu haurà d’incloure alguna cosa que els navegadors nous també interpretaran. Un bon exemple d’això és si afegim amplades percentuals als nostres elements de flotació per aconseguir que les columnes s’assemblin més a la visualització de graella i s’estirin per omplir el contenidor.

+ +

En el disseny de flotació, el percentatge es calcula a partir del contenidor: el 33,333% és un terç de l'amplada del contenidor. Tanmateix, a la graella es calcula que el 33,333% es calcula a partir de l’àrea de la graella en què es troba l’element, de manera que es converteix en un terç de la mida que volem un cop introduït el disseny de graella.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+ +
<div class="wrapper">
+  <div class="item">Primer element</div>
+  <div class="item">Segon element</div>
+  <div class="item">Tercer element</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example2', '100%', '200') }}

+
+ +

Per resoldre aquest problema, hem de tenir una manera de detectar si la graella és compatible i, per tant, si anul·larà l'amplada. El CSS té una solució.

+ +

Consultar les propietats

+ +

Consultar les propietats et permet provar si un navegador admet alguna funció CSS en concret. Això vol dir que pots escriure algun CSS per a navegadors que no admetin una característica determinada, i a continuació comprovar si el navegador és compatible i introduir el teu disseny.

+ +

Si afegim una consulta de propietats en l’exemple anterior, podem utilitzar-la per a configurar les amplades dels nostres articles de manera automàtica (auto) si sabem que hi ha compatibilitat amb el disseny de graella.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+@supports (display: grid) {
+  .item {
+      width: auto;
+  }
+}
+
+ +
<div class="wrapper">
+  <div class="item">Primer element</div>
+  <div class="item">Segon element</div>
+  <div class="item">Tercer element</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example3', '100%', '200') }}

+
+ +

La compatibilitat per a la consulta de propietats és molt bona en tots els navegadors moderns, però cal tenir en compte que són els navegadors que no admeten la graella CSS els que tampoc no admeten la consulta de propietats. Això significa que per a aquells navegadors funcionarà un enfocament com el que es detalla més amunt. El que fem és escriure primer el nostre CSS anterior, sense fer cap consulta de propietats. Els navegadors que no admeten la graella i no admeten la consulta de propietats faran servir la informació de disseny que poden comprendre i ignoraran completament la resta. Els navegadors que admeten la consulta de propietats també admeten la graella, i per tant executaran el codi de graella i el codi de la consulta de propietats.

+ +

L'especificació per a la consulta de propietats també inclou la possibilitat de comprovar si un navegador no admet una propietat; això només és útil si el navegador admet consultes de propietats. En el futur tindrà sentit un enfocament que comprovi la falta de compatibilitats, perquè ja no existiran els navegadors que no disposen de compatibilitats per a la consulta. Ara, però, utilitza l’enfocament de fer servir el CSS anterior i sobreescriure'l per a obtenir la millor compatibilitat.

+ +

Les versions anteriors de Flexbox

+ +

En versions anteriors dels navegadors, pots trobar versions anteriors de l'especificació Flexbox. En el moment d’escriure això, es tracta principalment d’un problema amb Internet Explorer 10, que utilitza el prefix -ms- per a Flexbox. Això també significa que hi ha articles i tutorials obsolets; aquesta guia útil t'ajuda a comprovar el que busques, i també pot ajudar-te si necessites compatibilitat Flexbox en navegadors molt antics.

+ +

La versió prefixada de graella de l’Internet Explorer 10 i 11

+ +

L'especificació de graella CSS es va prototipar inicialment en Internet Explorer 10; això vol dir que, tot i que IE10 i IE11 no disposen de compatibilitat de graella moderna, sí que tenen una versió de disseny de graella molt útil, tot i que diferent de l’especificació moderna que documentem en aquest lloc. Les implementacions d’IE10 i 11 tenen el prefix -ms-, que significa que les pots utilitzar per a aquests navegadors i que s'ignoraran en els navegadors que no formin part de Microsoft. Tanmateix, Edge encara entén la sintaxi antiga, així que tingues cura que tot es sobreescrigui de manera segura al teu CSS de graella moderna.

+ +

La guia per a la Millora progressiva del disseny de graella et pot ajudar a comprendre la versió de la graella d’Internet Explorer, i hem inclòs alguns enllaços útils addicionals al final d'aquest article. Tanmateix, a menys que tinguis un nombre molt elevat de visitants en versions d’Internet Explorer més antigues, potser és millor centrar-te en la creació d’una alternativa que funcioni per a tots els navegadors no compatibles.

+ +

Proves amb navegadors antics

+ +

Atès que la majoria de navegadors admeten Flexbox i la graella, pot ser raonablement difícil fer proves amb navegadors més antics. Una de les maneres és utilitzar una eina de prova en línia com Sauce Labs, tal i com es detalla en el mòdul de comprovació de compatibilitat entre navegadors.

+ +

També pots descarregar i instal·lar màquines virtuals i executar versions anteriors de navegadors en un entorn contingut en el teu ordinador. Tenir accés a versions anteriors d’Internet Explorer és especialment útil, i amb aquest propòsit Microsoft ha posat a disposició dels usuaris una varietat de màquines virtuals de descàrrega gratuïta. Estan disponibles per als sistemes operatius Mac, Windows i Linux, i per tant són una bona manera de fer proves en navegadors Windows antics i moderns, encara que no utilitzis un ordinador amb sistema operatiu de Windows.

+ +

Resum

+ +

Ara tens el coneixement per utilitzar tècniques de confiança com ara Grid i Flexbox, crear solucions alternatives per a navegadors més antics i utilitzar qualsevol tècnica nova que pugui aparèixer en el futur.

+ +

Consulta també

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

En aquest mòdul

+ + diff --git a/files/ca/learn/css/disseny_css/disseny_responsiu/index.html b/files/ca/learn/css/disseny_css/disseny_responsiu/index.html deleted file mode 100644 index 5bf909e6e7..0000000000 --- a/files/ca/learn/css/disseny_css/disseny_responsiu/index.html +++ /dev/null @@ -1,324 +0,0 @@ ---- -title: Disseny responsiu -slug: Learn/CSS/Disseny_CSS/Disseny_responsiu -translation_of: Learn/CSS/CSS_layout/Responsive_Design ---- -
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
- -

En els primers dies del disseny de pàgines web es creaven pàgines per a una mida de pantalla determinada. Si l’usuari tenia una pantalla més gran o més petita que la que el dissenyador s’esperava, els resultats anaven des de barres de desplaçament no desitjades fins a línies excessivament llargues i un mal ús de l’espai. A mesura que apareixien mides de pantalla més diverses, va aparéixer el concepte de disseny web responsiu (RWD o responsive web design), un conjunt de pràctiques que permeten a les pàgines web alterar el disseny i l’aparença per a adaptar-se a diferents amplades, resolucions, etc. És una idea que ha canviat la manera de dissenyar una pàgina web per a diversos dispositius, i en aquest article t’ajudarem a entendre les principals tècniques que has de conèixer per a dominar-la.

- - - - - - - - - - - - -
Prerequisits:Conceptes bàsics d’HTML (consulta la Introducció a l’HTML), i nocions de com funciona el CSS (consulta els Primers passos amb el CSS i els elements bàsics del CSS).
Objectiu:Entendre els conceptes fonamentals i la història del disseny responsiu.
- -

Història dels dissenys de pàgina web

- -

En un moment de la història, només tenies dues opcions a l’hora de dissenyar un lloc web:

- - - -

Aquests dos enfocaments tenien com a resultat un lloc web que s’adequava essencialment a la pantalla de la persona que havia dissenyat el lloc web. El lloc web líquid donava un disseny aixafat en pantalles més petites (com es pot veure a continuació), i línies molt llargues que costaven molt de llegir en les pantalles grans.

- -
Una disposició amb dues columnes aixafades en una finestra de visualització de la mida d’un dispositiu mòbil. -
-
- -
-

Nota: Observa aquest disseny de pàgina web líquid senzill: exemple, codi d’origen. Amplia o redueix la finestra del navegador i observa com en canvia l’aspecte segons les diferents mides.

-
- -

Amb llocs web amb amplada fixa es corria el risc d’aparició d’una barra de desplaçament horitzontal en les pantalles que eren més petites que l’amplada del lloc web (com es pot veure a continuació) i de molta superfície blanca a les vores del disseny en les pantalles que eren més grans.

- -
Disseny amb barra de desplaçament horitzontal en una finestra de visualització de la mida d’un dispositiu mòbil. -
-
- -
-

Nota: Observa aquest disseny de pàgina web senzill d’amplada fixa: exemple, codi d’origen. Un cop més, canvia la mida de la finestra del navegador i observa’n el resultat.

-
- -
-

Nota: Les captures de pantalla de dalt es fan amb el mode de disseny responsiu de les DevTools de Firefox.

-
- -

A mesura que la web per a dispositius mòbils va començar a esdevenir una realitat amb els primers telèfons mòbils, les companyies que volien adherir-se en general a la tecnologia mòbil creaven una versió del lloc web especial per a dispositius mòbils amb una URL diferent (sovint alguna cosa com ara m.example.com o example.mobi). Això volia dir que calia desenvolupar i mantenir actualitzades dues versions independents de la mateixa pàgina web.

- -

A més, aquests llocs web per a dispositius mòbils solien oferir una experiència d’usuari molt reduïda. Com que els dispositius mòbils es van tornar més potents i van poder mostrar llocs web complets, això frustrava els usuaris de dispositius mòbils, que es trobaven atrapats en la versió mòbil del lloc web i no podien accedir a informació que sabien que hi havia en la versió d’escriptori, que incloïa totes les funcions de la pàgina web.

- -

Disseny flexible abans del disseny responsiu

- -

Es van desenvolupar diversos enfocaments per a intentar resoldre els inconvenients dels mètodes líquids o d’amplada fixa per a crear llocs web. El 2004, Cameron Adams va escriure una publicació titulada Resolution dependent layout, on descriu un mètode per a crear un disseny de pàgina web que s’adapta a diferents resolucions de pantalla. Aquest enfocament requeria JavaScript per a detectar la resolució de la pantalla i carregar el CSS correcte.

- -

Zoe Mickley Gillenwater va ser fonamental en la seva tasca de descriure i formalitzar les diferents maneres de crear llocs web flexibles, per a intentar trobar una situació intermèdia entre omplir tota la pantalla o tenir una mida completament fixa.

- -

El disseny responsiu

- -

El terme disseny responsiu va ser creat per Ethan Marcotte el 2010, que va descriure l’ús de tres tècniques combinades.

- -
    -
  1. La primera va ser la idea de les graelles fluides, cosa que ja explorava Gillenwater, i que es pot llegir en l’article de Marcotte, Fluid grids (publicat el 2009 en A list apart).
    2. -
  2. La segona tècnica va ser la idea d’imatges fluides. Utilitzant una tècnica molt senzilla d’establir la propietat max-width al 100%, les imatges es farien més petites si la columna que les contenia es feia més estreta que la mida intrínseca de la imatge, però mai no augmentaria. D’aquesta manera, una imatge s’escala per a poder-se incloure en una columna de mida flexible sense que desbordi, però no es fa més gran i es pixela si la columna s’amplia més que la imatge.
    3. -
  3. El tercer component clau va ser la consulta de mèdia (o media query). Les consultes de mèdia habiliten el tipus de canvi de disseny de pàgina web que Cameron Adams havia explorat abans amb JavaScript, però utilitzant només CSS. En lloc de tenir un disseny de pàgina web per a cada mida de pantalla, se’n podria tenir un i canviar-ne la disposició dels elements. Es podrien fer aparèixer barres laterals per a les pantalles més petites, o es podia mostrar una navegació alternativa.
    4. -
- -

És important entendre que el disseny web responsiu no és una tecnologia independent: és un terme que s’utilitza per a descriure un enfocament del disseny de pàgines web o un conjunt de bones pràctiques que s’utilitzen per a crear un disseny de pàgines web que pugui respondre segons el dispositiu que s’utilitza per a visualitzar el contingut. En l’exploració original de Marcotte, això va donar lloc a les graelles flexibles (amb elements flotants) i les consultes de mèdia; però en els gairebé deu anys des que es va escriure aquest article, treballar de manera responsiva s’ha convertit en la norma. Els mètodes de disseny amb CSS moderns són intrínsecament responsius, i hi ha novetats integrades a la plataforma web que faciliten el disseny de llocs web responsius.

- -

La resta d’aquest article t’indica les diverses funcions de la plataforma web que pots utilitzar per a crear un lloc web responsiu.

- -

Les consultes a mèdia (media queries)

- -

El disseny responsiu només va poder sorgir a causa de les consultes a mèdia. L’especificació del nivell 3 de les consultes a mèdia es va convertir en una Candidate Recommendation el 2009, cosa que significa que es considerava llesta per a implementar-la en els navegadors. Les consultes a mèdia ens permeten fer un seguit de proves (per exemple, si la pantalla de l’usuari és més gran que una certa amplada o una determinada resolució) i aplicar CSS de manera selectiva per a dissenyar la pàgina web més adequada segons les necessitats de l’usuari.

- -

Per exemple, la consulta als mèdia següent esbrina si la pàgina web que es mostra ho fa com una pantalla (per tant, no és un document imprès), i si la finestra té almenys 800 píxels d’ample. El CSS per al selector .container només s’aplica si aquestes dues coses són certes.

- -
@media screen and (min-width: 800px) {
-  .container {
-    margin: 1em 2em;
-  }
-} 
-
- -

Pots afegir diverses consultes a mèdia dins d’un full d’estil, i ajustar el disseny sencer o només unes parts perquè s’adapti més bé a les diverses mides de pantalla. Els punts en què s’introdueix una consulta de mèdia i es canvia la disposició dels elements de la pàgina web es coneixen com punts de ruptura.

- -

Un enfocament habitual quan s’utilitzen les consultes als mèdia és crear un disseny senzill d’una sola columna per a dispositius de pantalla estreta (per exemple, telèfons mòbils), després comprovar si hi ha pantalles més grans i implementar una disposició en múltiples columnes quan saps que tens prou amplada de pantalla per a fer-ho. Sovint es descriu com disseny mobile first.

- -

Trobaràs més informació en la documentació de MDN per a les consultes als mèdia.

- -

Graelles flexibles

- -

Els llocs responsius no només canvien la distribució entre punts de ruptura, sinó que es basen en graelles flexibles. Una graella flexible significa que no cal delimitar el lloc web a totes les mides possibles de dispositius que hi ha i crear un disseny en píxels perfecte. Aquest plantejament seria impossible, atès el gran nombre de dispositius de mida diferent que hi ha, i del fet que, com a mínim en la versió d’escriptori, la finestra del navegador no sempre es maximitza.

- -

Si fas servir una graella flexible, només has d’afegir un punt de ruptura i canviar el disseny en el punt en què el contingut es comença a veure malament. Per exemple, si les longituds de les línies es fan il·legibles a mesura que augmenta la mida de la pantalla, o si una caixa s’encongeix fins a una amplada de dues paraules en cada línia a mesura que la mida de la pantalla es redueix.

- -

En els primers dies del disseny responsiu, l’única opció per a dissenyar pàgines web era utilitzar elements flotants. Els dissenys de pantalla amb elements flotants flexibles s’aconseguien donant a cada element una amplada en percentatge i assegurar-se que no s’atenyia més del 100% per a tota la pàgina. En la seva obra original sobre graelles flexibles, Marcotte va detallar una fórmula per a convertir en percentatges un disseny de pàgina dissenyat en píxels.

- -
target / context = result 
-
- -

Per exemple, si la mida de la nostra columna de destinació és de 60 píxels i el context (o contenidor) en què es troba és de 960 píxels, dividim 60 per 960 i obtenim un valor que podem utilitzar en el nostre CSS, després de traslladar el punt decimal dos llocs a la dreta.

- -
.col {
-  width: 6.25%; /* 60 / 960 = 0.0625 */
-} 
-
- -

Avui dia trobaràs aquest enfocament en molts llocs web, i també el trobaràs documentat aquí, en la secció dedicada al disseny de l’article de mètodes heretats de disseny de pàgines web. És probable que en el transcurs del teu treball et trobis amb llocs web que usen aquest enfocament, de manera que val la pena entendre’l, tot i que no construiràs un lloc modern amb una graella flexible basada en elements flotants.

- -

L’exemple següent mostra un disseny senzill i sensible amb consultes a mèdia i una graella flexible. En pantalles estretes, el disseny mostra les caixes apilades les unes sobre les altres:

- -
Una vista d’un dispositiu mòbil amb una disposició de caixes apilades verticalment l’una sobre l’altra. -
-
- -

En pantalles més amples es passa a dues columnes:

- -
Una vista d’un dispositiu d’escriptori d’un disseny amb dues columnes. -
-
- -
-

Nota: Pots trobar l’exemple en viu i el codi d’origen d’aquest exemple a GitHub.

-
- -

Tecnologies modernes de disseny de pàgines web

- -

De manera predeterminada, els mètodes moderns de disseny de pàgines web com ara el disseny en múltiples columnes, el Flexbox i el Grid són responsius per defecte. Tots aquests mètodes parteixen de la base que vols crear una graella flexible i et proporcionen les maneres de fer-ho més fàcils.

- -

Multicol

- -

El més antic d’aquests mètodes de disseny de pàgines web és multicol: quan especifiques un nombre de columnes (column-count), indiques en quantes columnes vols dividir el contingut. El navegador llavors calcula la mida d’aquestes columnes, que canvia d’acord amb la mida de la pantalla.

- -
.container {
-  column-count: 3;
-} 
-
- -

Si en lloc d’això estableixes l’atribut column-width, especifiques una amplada mínima. El navegador crea tantes columnes d’aquesta amplada com càpiguen còmodament en el contenidor, i reparteix l’espai entre totes les columnes. Per tant, el nombre de columnes canvia segons la quantitat d’espai que hi ha.

- -
.container {
-  column-width: 10em;
-} 
-
- -

Flexbox

- -

Amb la tecnologia Flexbox, els elements flexibles es redueixen i distribueixen l’espai entre els elements d’acord amb l’espai que hi ha en el contenidor segons el comportament inicial que tenen predeterminat. Si canvies els valors de flex-grow i flex-shrink, pots indicar com vols que es comportin els elements quan hi ha més o menys espai al voltant.

- -

En l’exemple següent, els elements flexibles ocupen cada un la mateixa quantitat d’espai en el contenidor flexible, mitjançant la propietat abreviada flex: 1, com es descriu en l’article Flexbox: Dimensions flexibles d’elements flex.

- -
.container {
-  display: flex;
-}
-
-.item {
-  flex: 1;
-} 
-
- -
-

Nota: Com a exemple hem reconstruït el disseny responsiu senzill anterior, aquest cop amb Flexbox. Pots veure que ja no cal fer servir valors percentuals estranys per a calcular la mida de les columnes: exemple, codi d’origen.

-
- -

Graella CSS

- -

En el disseny de pàgines web amb graella CSS, la unitat fr permet distribuir l’espai disponible en les traces d’una graella. L’exemple següent crea un contenidor de graella amb tres traces de mida 1fr. Es creen tres traces de columna, i cadascuna ocupa una part de l’espai disponible en el contenidor. Pots obtenir més informació sobre aquest enfocament per a crear una graella en la secció Aprendre a dissenyar graelles, de l’article Graelles flexibles amb la unitat fr.

- -
.container {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-} 
-
- -
-

Nota: La versió del disseny de pàgines web amb graella és encara més senzilla, perquè permet definir les columnes amb .wrapper: exemple, codi d’origen.

-
- -

Imatges responsives

- -

L’enfocament més senzill de les imatges responsives es va descriure en els primers articles de Marcotte sobre el disseny de pàgines web responsiu. Bàsicament, agafes una imatge de la mida més gran que puguis necessitar, i la redueixes. Aquest és encara un enfocament emprat avui, i en la majoria de fulls d’estil trobaràs en algun lloc el CSS següent:

- -
img {
-  max-width: 100%:
-} 
-
- -

Hi ha inconvenients evidents en aquest enfocament. És possible que la imatge es mostri molt més petita que la seva mida intrínseca, i això representa una pèrdua d’amplada de banda: un usuari de dispositiu mòbil pot acabar descarregant una imatge que és diverses vegades de la mida del que realment veu a la finestra del navegador. A més, pot ser que no vulguis la mateixa relació d’aspecte de la imatge al mòbil i a l’escriptori. Per exemple, pot ser bo tenir una imatge quadrada per a mòbils, i mostrar la mateixa imatge en format apaïsat a l’escriptori. O bé, tenint en compte la mida més petita del dispositiu mòbil, pot ser que hi vulguis mostrar una imatge diferent, que s’entengui més fàcilment en una pantalla petita. Aquestes coses no es poden aconseguir simplement reduint una imatge.

- -

Les imatges responsives, amb l’element {{htmlelement("picture")}} i els atributs srcset i sizes de {{htmlelement("img")}} resolen tots dos problemes. Pots proporcionar diverses mides, juntament amb «suggeriments» (metadades que descriuen la mida de la pantalla i la resolució a la qual s’adapta la imatge), i el navegador tria la imatge més adequada per a cada dispositiu i procura que l’usuari descarregui la mida adequada de la imatge en el dispositiu que utilitza.

- -

També pots usar imatges de director artístic, que proporcionen un retall o una imatge completament diferent per a diferents mides de pantalla.

- -

Pots trobar una guia detallada sobre Imatges responsives en el mòdul Aprendre HTML de MDN.

- -

Tipografia responsiva

- -

Un element de disseny responsiu que encara no hem tractat en articles anteriors és la idea de la tipografia responsiva. Aquest concepte descriu essencialment el fet de canviar la mida de lletra segons l’espai de pantalla que reflecteixen les consultes a mèdia.

- -

En aquest exemple, volem establir el nostre títol d’encapçalament de nivell 1 en 4rem, és a dir, que serà quatre vegades la mida de la nostra lletra base. És un títol molt gran! Només volem aquest títol d’encapçalament tan gran en mides de pantalla grans, per tant, primer creem un títol d’encapçalament més petit i després utilitzem les consultes a mèdia per a sobreescriure’l amb la mida més gran si sabem que l’usuari té una mida de pantalla d’almenys 1200px.

- -
html {
-  font-size: 1em;
-}
-
-h1 {
-  font-size: 2rem;
-}
-
-@media (min-width: 1200px) {
-  h1 {
-    font-size: 4rem;
-  }
-} 
-
- -

Hem editat el nostre exemple de graella responsiva per a incloure el tipus responsiu amb el mètode descrit. Pots veure com el títol d’encapçalament canvia de mida a mesura que el disseny canvia a la versió de dues columnes.

- -

En el dispositiu mòbil, el títol d’encapçalament és més petit:

- -
Un esquema apilat amb una mida de títol d’encapçalament petita. -
-
- -

Tanmateix, en el dispositiu d’escriptori veiem la mida del títol d’encapçalament més gran:

- -
Un disseny de dues columnes amb un títol d’encapçalament gran. -
-
- -
-

Nota: Observa aquest exemple en acció: exemple, codi d’origen.

-
- -

Tal com mostra aquest enfocament de la tipografia, no cal restringir les consultes a mèdia a canviar només el disseny de pàgina web. Es poden utilitzar per a ajustar qualsevol element i fer-lo més útil o atractiu a les diverses mides de pantalla.

- -

L’ús d’unitats de finestra de visualització per a tipografies responsives

- -

Un enfocament interessant és utilitzar la unitat vw de finestra de visualització per a habilitar la tipografia responsiva. 1vw és igual a un 1 per cent de l’amplada de la visualització, cosa que significa que si defineixes la mida de la lletra amb vw, sempre es relacionarà amb la mida de la finestra de visualització.

- -
h1 {
-  font-size: 6vw;
-}
- -

El problema de fer servir la unitat vw és que l’usuari perd la capacitat d’ampliar un bloc de text, perquè aquest text sempre està relacionat amb la mida de la finestra de visualització. Per tant, mai no hauries de definir text fent servir només les unitats de finestra de visualització.

- -

Hi ha una solució, que implica l’ús de calc(). Si afegeixes la unitat vw a un conjunt de valors amb una mida fixa com em o rem, encara es pot fer zoom del text. Essencialment, la unitat vw s’afegeix a sobre d’aquest valor ampliat:

- -
h1 {
-  font-size: calc(1.5rem + 3vw);
-}
- -

Això vol dir que només hem d’especificar la mida de la lletra per al títol d’encapçalament, en lloc de configurar-la per a dispositius mòbils i redefinir-la segons les consultes a mèdia. A continuació, la lletra augmenta gradualment a mesura que augmenta la mida de la finestra de visualització.

- -
-

Observa aquest exemple en acció: exemple, codi d’origen.

-
- -

L’etiqueta meta de la finestra de visualització

- -

Si observes el tipus de lletra d’una pàgina HTML responsiva, normalment trobaràs l’etiqueta {{htmlelement("meta")}} a la capçalera (<head>) del document.

- -
<meta name="viewport" content="width=device-width,initial-scale=1">
-
- -

Aquesta etiqueta meta indica als navegadors dels dispositius mòbils que han d’establir l’amplada de la finestra de visualització a l’amplada del dispositiu i escalar el document al 100% de la mida prevista, cosa que mostra el document a la mida optimitzada per a dispositius mòbils.

- -

Per què cal, això? Perquè els navegadors dels dispositius mòbils tendeixen a mentir sobre l’amplada de la finestra de visualització.

- -

Aquesta etiqueta meta existeix perquè quan es va llançar l’iPhone original i la gent va començar a veure llocs web en una petita pantalla de telèfon, la majoria dels llocs web no estaven optimitzats per a dispositius mòbils. Per tant, el navegador del dispositiu mòbil establia l’amplada de la visualització a 960 píxels, la representava a aquella amplada i mostrava el resultat com la versió ampliada del disseny per al dispositiu d’escriptori. Altres navegadors de dispositius mòbils (per exemple, el de Google Android) van fer el mateix. Els usuaris podien fer zoom i desplaçar-se per la web per a veure els fragments que els interessaven, però allò no era còmode. Encara ho podràs veure si tens la mala sort d’anar a parar a un lloc web que no té un disseny responsiu.

- -

El problema és que el teu disseny responsiu amb punts de ruptura i consultes a mèdia no funciona tal com es preveu per als navegadors mòbils. Si tens un disseny de pantalla estret que s’inicia amb una amplada de visualització de 480px o menys i la ruptura s’estableix a 960px, mai no veuràs la disposició de pantalla estreta al dispositiu mòbil. En canvi, si defineixes width=device-width, sobreescrius l’amplada predeterminada d’Apple width=960px amb l’amplada real del dispositiu, de manera que les consultes a mèdia permetran que funcioni com es preveu.

- -

Per tant, sempre has d’incloure la línia HTML anterior a la capçalera dels teus documents.

- -

Hi ha altres opcions de configuració que pots utilitzar amb l’etiqueta meta de la finestra de visualització, però, en general, t’anirà bé utilitzar la línia anterior.

- - - -

Has d’evitar l’ús de minimum-scale, maximum-scale, i en particular la configuració de user-scalable en no. Els usuaris haurien de poder fer zoom en la mesura que necessitin; impedir això genera problemes d’accessibilitat.

- -
-

Nota: Hi ha una @rule CSS dissenyada per a substituir l’etiqueta meta de la finestra de visualització (@viewport), però té una compatibilitat de navegadors deficient. Es va implementar a Internet Explorer i Edge, però un cop entri en funcionament Edge basat en Chromium, deixarà de formar part del navegador Edge.

-
- -

Resum

- -

El disseny responsiu es refereix a un disseny de lloc o d’aplicació que respon a l’entorn en què es visualitza. Comprèn diverses funcions i tècniques CSS i HTML, i ara és essencialment l’única manera com construïm els llocs web per defecte. Tingues en compte els llocs web que visites amb el dispositiu mòbil: probablement és poc habitual trobar-te amb un lloc que és la versió reduïda de la d’escriptori, o en què cal desplaçar-se de costat per a trobar-hi coses. Això és perquè la xarxa web s’ha orientat cap a aquest enfocament de disseny responsiu.

- -

També ha estat molt més fàcil aconseguir dissenys responsius amb l’ajuda dels mètodes de disseny que has après en aquests articles. Si ets nou en el desenvolupament web, avui tens moltes més eines a la teva disposició que en els primers dies del disseny responsiu. Per tant, val la pena comprovar la data dels materials de referència que consultes. Tot i que els articles històrics continuen sent útils, l’ús modern de CSS i HTML facilita molt la creació de dissenys elegants i útils, i independents del dispositiu del visitant.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}

- -

En aquest mòdul

- - diff --git "a/files/ca/learn/css/disseny_css/exemples_pr\303\240ctics_posicionament/index.html" "b/files/ca/learn/css/disseny_css/exemples_pr\303\240ctics_posicionament/index.html" deleted file mode 100644 index dfaac7f63c..0000000000 --- "a/files/ca/learn/css/disseny_css/exemples_pr\303\240ctics_posicionament/index.html" +++ /dev/null @@ -1,404 +0,0 @@ ---- -title: Exemples pràctics de posicionament -slug: Learn/CSS/Disseny_CSS/Exemples_pràctics_posicionament -tags: - - Article - - Beginner - - CSS - - CodingScripting - - Guide - - Layout - - Learn - - absolute - - fixed - - relative -translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}
- -

Amb els fonaments del posicionament coberts en l'últim article, ara veurem com crear alguns exemples del món real, per il·lustrar quin tipus de coses podeu fer amb el posicionament.

- - - - - - - - - - - - -
Requisits previs:Conceptes bàsics d'HTML (estudi Introducció a HTML), i una idea de com funciona CSS (estudi Introducció a CSS).
Objectiu:Tenir una idea dels aspectes pràctics del posicionament
- -

Una caixa d'informació amb pestanyes

- -

El primer exemple que veurem és una caixa d'informació amb pestanyes clàssica - una característica molt freqüent que es fa servir quan voleu empaquetar molta informació en una petita àrea. Això inclou aplicacions de gran abast d'informació, com ara jocs d'estratègia/guerra, versions mòbils de llocs web on la pantalla és estreta i l'espai és limitat, i caixes d'informació compactes on és possible que vulgueu tenir molta informació disponible sense haver d'omplir tota la IU. El nostre senzill exemple es veurà així una vegada que hàgim acabat:

- -

- -
-

Nota: Podeu veure l'exemple acabat executant-ho en directa a info-box.html (codi font). Consulteu-ho per tenir una idea del que estareu construint en aquesta secció de l'article.

-
- -

Podeu estar pensant "per què no crear les pestanyes separades com a pàgines web independents, i només les pestanyes, fent clic a través de les pàgines independents per crear l'efecte?" Aquest codi seria més senzill, sí, però cada visualització de "pàgina" per separat seria en realitat una pàgina web recentment carregada, la qual cosa faria més difícil guardar la informació entre les vistes i integrar aquesta característica en un disseny de d'interfície d'usuari més gran. A més, les anomenades "aplicacions de pàgina única" s'estan tornant molt populars - especialment per a les d'interfície d'usuari web mòbils - ja que tenir tot el que serveix com un únic arxiu redueix el nombre de sol·licituds HTTP necessàries per visualitzar tot el contingut, millorant així el rendiment.

- -
-

Nota: Alguns desenvolupadors web porten les coses encara més lluny, només tenen una pàgina d'informació carregada alhora i canvien dinàmicament la informació que es mostra utilitzant, una funció de JavaScript com XMLHttpRequest. En aquest punt de l'aprenentatge, però, volem que les coses siguin tan simples com sigui possible. Hi ha una mica de JavaScript més endavant, però només una mica.

-
- -

Per començar, ens agradaria que féssiu una còpia del fitxer HTML d'inici - info-box-start.html. Deseu-lo en algun lloc sensible a l'ordinador i obrir-ho en el vostre editor de text. Vegem l'HTML contingut en el cos:

- -
<section class="info-box">
-  <ul>
-    <li><a href="#" class="active">Tab 1</a></li>
-    <li><a href="#">Tab 2</a></li>
-    <li><a href="#">Tab 3</a></li>
-  </ul>
-  <div class="panels">
-    <article class="active-panel">
-      <h2>The first tab</h2>
-
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
-    </article>
-    <article>
-      <h2>The second tab</h2>
-
-      <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
-    </article>
-    <article>
-      <h2>The third tab</h2>
-
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p>
-
-      <ol>
-        <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
-        <li>Aliquam ut porttitor urna.</li>
-        <li>Nulla facilisi</li>
-      </ol>
-    </article>
-  </div>
-</section>
- -

Així que aquí tenim un element {{htmlelement("section")}} amb una class info-box, que conté un {{htmlelement("ul")}} i un {{htmlelement("div")}}. La llista desordenada conté tres elements de llista amb enllaços a l'interior, que es convertiran en les pestanyes reals per fer clic, per visualitzar els nostres panells de contingut. El div conté tres elements {{htmlelement("article")}}, que formaran els panells de contingut que corresponen a cada pestanya. Cada panell conté alguns continguts d'exemple.

- -

La idea, aquí, és fer que l'estil de pestanyes pogui semblar-se a un menú estàndard de navegació horitzontal i donant-li estil els panells per a que s'asseguin un damunt de l'altre mitjançant el posicionament absolut. També us donarem una mica de JavaScript per incloure a la vostra pàgina, per mostrar el panell corresponent quan es pressiona una pestanya i l'estil de la pestanya en si. No necessitareu entendre el JavaScript en aquesta etapa, però haureu de pensar en aprendre una mica de JavaScript bàsic, el més aviat possible - com més complexes siguin les característiques de la vostra interfície d'usuari, més probable és que necessiteu implementar JavaScript a la vostra funcionalitat desitjada.

- -

Configuració general

- -

Per començar, afegiu el següent entre l'obertura i tancament de les etiquetes {{HTMLElement("style")}}:

- -
html {
-  font-family: sans-serif;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-}
- -

Aquesta és només una configuració general per establir una font sans-serif a la nostra pàgina, utilitzar el model border-box de {{cssxref("box-sizing")}} i desfer-se del marge predeterminat de {{htmlelement("body")}}.

- -

A continuació, afegiu el següent just a sota del vostre CSS anterior:

- -
.info-box {
-  width: 450px;
-  height: 400px;
-  margin: 0 auto;
-}
- -

Això estableix un ample i alçada específic sobre el contingut i el centra a la pantalla mitjançant el antic truc margin: 0 auto;. Anteriorment en el curs, vam aconsellar no establir una alçada fixa en contenidors de contingut, si fos possible; Està bé en aquesta circumstància, perquè tenim contingut fix en les nostres pestanyes. També sembla una mica discordant tenir diferents pestanyes a diferents alçades.

- -

Estilitzar les nostres pestanyes

- -

Ara volem que les pestanyes d'estil semblin com a pestanyes - bàsicament, aquest és un menú de navegació horitzontal, però en comptes de carregar diferents pàgines web quan es fa clic, com hem vist prèviament al curs, fa que es mostrin panells diferents en la mateixa pàgina. Primer, afegiu la següent regla a la part inferior del vostre CSS per eliminar el valor predeterminat {{cssxref("padding-left")}} i {{cssxref("margin-top")}} de la llista no ordenada:

- -
.info-box ul {
-  padding-left: 0;
-  margin-top: 0;
-}
- -
-

Nota: Estem utilitzant selectors descendents amb .info-box al principi de la cadena a través d'aquest exemple - això és per poguer inserir aquesta funció en una pàgina amb un altre contingut ja en ella, sense por a interferir amb els estils aplicats a altres parts de la pàgina.

-
- -

A continuació, dissenyarem les pestanyes horitzontals - els elements de la llista es flotant tots cap a l'esquerra per fer que s'asseguin en una sola línia, el seu {{cssxref("list-style-type")}} s'estableix a none per desfer-se de les vinyetes i el seu {{cssxref("width")}} s'estableix a 150px perquè s'ajusti còmodament a través de la caixa d'informació (info-box). Els elements {{htmlelement("a")}} estan configurats en {{cssxref("display")}} inline-block, perquè s'asseguin en una línia però que encara siguin estilitzables, i estiguin dissenyats adequadament per als botons de pestanya, usant una varietat d'altres propietats.

- -

Afegiu el següent CSS:

- -
.info-box li {
-  float: left;
-  list-style-type: none;
-  width: 150px;
-}
-
-.info-box li a {
-  display: inline-block;
-  text-decoration: none;
-  width: 100%;
-  line-height: 3;
-  background-color: red;
-  color: black;
-  text-align: center;
-}
- -

Finalment, per a aquesta secció, establirem alguns estils als estats de l'enllaç. En primer lloc, configurarem els estats :focus i :hover de les pestanyes, perquè es vegin diferents quan estan enfocats/planejats, oferint als usuaris alguna infomació visual. En segon lloc, establirem una regla que posi el mateix estil en una de les pestanyes quan hi hagi una class active present en ella. Definirem això mitjançant JavaScript quan es faci clic a una pestanya. Col·loqueu els següents CSS per sota dels altres estils:

- -
.info-box li a:focus, .info-box li a:hover {
-  background-color: #a60000;
-  color: white;
-}
-
-.info-box li a.active {
-  background-color: #a60000;
-  color: white;
-}
- -

Estilitzar els panells

- -

El següent treball és dissenyar els nostres panells. Anem a engegar-ho!

- -

Primer de tot, afegiu la següent regla per dissenyar el contenidor .panels {{htmlelement("div")}}. Aquí, simplement, hem establert un {{cssxref("height")}} fix per assegurar-nos que els panells s'ajustin bé a l'interior de la caixa d'informació, {{cssxref("position")}} relative pel que fa a {{htmlelement("div" )}} com a context de posicionament, de manera que podeu col·locar elements fills posicionats relatius a ell i no a l'element {{htmlelement("html")}} i finalment el flotador {{cssxref("clear")}} establert en el CSS anterior perquè no interfereixi amb la resta del disseny.

- -
.info-box .panels {
-  height: 352px;
-  position: relative;
-  clear: both;
-}
- -

Finalment, per a aquesta secció, dissenyarem els elements individuals {{htmlelement("article")}} que componen els nostres panells. La primera regla que afegirem serà {{cssxref("position")}} absolute dels panells, i farà que tots quedin asseguts, alineats a {{cssxref("top")}} i {{cssxref("left")}} del seu contenidor {{htmlelement ("div")}} - aquesta part és absolutament clau per a tota aquesta característica de disseny, ja que fa que els panells s'asseguin uns sobre els altres. La regla també proporciona als panells la mateixa alçada de conjunt que el contenidor, i dóna al contingut un farciment, un text {{cssxref("color")}} i un {{cssxref("background-color")}}.

- -

La segona regla que afegirem aquí fa que un panell amb una class active-panel, establert en ell, tindrà un {{cssxref("z-index")}} d'1, que se li aplicarà, la qual cosa farà que s'asseguin per sobre dels altres panells (els elements posicionats tenen un z-index de 0 per defecte, la qual cosa els posaria a continuació). Una vegada més, afegirem aquesta classe utilitzant JavaScript en el moment adequat.

- -
.info-box article {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 352px;
-  padding: 10px;
-  color: white;
-  background-color: #a60000;
-}
-
-.info-box .active-panel {
-  z-index: 1;
-}
- -

Afegir el nostre JavaScript

- -

L'últim pas per fer funcionar aquesta característica és afegir JavaScript. Col·loqueu el següent bloc de codi, exactament com s'escriu, entre les etiquetes d'obertura i tancament {{htmlelement("script")}} (trobareu aquestes a sota del contingut HTML):

- -
var tabs = document.querySelectorAll('.info-box li a');
-var panels = document.querySelectorAll('.info-box article');
-
-for(i = 0; i < tabs.length; i++) {
-  var tab = tabs[i];
-  setTabHandler(tab, i);
-}
-
-function setTabHandler(tab, tabPos) {
-  tab.onclick = function() {
-    for(i = 0; i < tabs.length; i++) {
-      tabs[i].className = '';
-    }
-
-    tab.className = 'active';
-
-    for(i = 0; i < panels.length; i++) {
-      panels[i].className = '';
-    }
-
-    panels[tabPos].className = 'active-panel';
-  }
-}
- -

Aquest codi fa el següent:

- - - -

Això és tot pel primer exemple. Manteniu obert el vostre codi, ja que l'afegirem a la segona.

- -

Una caixa d'informació amb pestanyes de posició fixa

- -

En el nostre segon exemple, farem el nostre primer exemple - la nostra caixa d'informació - i l'afegirem al context d'una pàgina web completa. Però no només això - li donarem una posició fixa perquè es mantingui en la mateixa posició en la finestra del navegador. Quan el contingut principal es desplaci, la caixa d'informació romandrà en la mateixa posició en la pantalla. El nostre exemple acabat tindrà aquest aspecte:

- -

- -
-

Nota: Podeu veure l'exemple acabat, executant-ho en directe a fixed-info-box.html (codi font). Comproveu-ho per tenir una idea del que serà la construcció d'aquesta secció de l'article.

-
- -

Com a punt de partida, podeu fer servir l'exemple complet de la primera secció de l'article o fer una còpia local de info-box.html des del nostre repositori de Github.

- -

Addicions HTML

- -

En primer lloc, necessitem un codi HTML addicional per representar el contingut principal del lloc web. Afegiu el següent {{htmlelement("section")}} just a sota de l'etiqueta d'apertura {{htmlelement("body")}}, just abans de la secció existent:

- -
<section class="fake-content">
-  <h1>Fake content</h1>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-</section>
- -
-

Nota: Us podeu sentir lliures de canviar el contingut fals per a algun contingut real si ho desitjeu.

-
- -

Canvis al CSS existent

- -

A continuació, hem de fer petits canvis al CSS existent, per tenir la caixa d'informació col·locada i posicionada Canvieu la regla .info-box per desfer-vos del margin: 0 auto;  (Ja no volem que la caixa d'informació estigui centrada), afegiu {{cssxref("position")}}: fixed;, i enganxeu-ho en el {{cssxref("top")}} de la finestra de visualització del navegador.

- -

Ara ha de ser així:

- -
.info-box {
-  width: 450px;
-  height: 400px;
-  position: fixed;
-  top: 0;
-}
- -

Estilitzar el contingut principal

- -

L'únic que queda per a aquest exemple és proporcionar al contingut principal amb un estil. Afegiu la següent regla sota la resta del vostre CSS:

- -
.fake-content {
-  background-color: #a60000;
-  color: white;
-  padding: 10px;
-  height: 2000px;
-  margin-left: 470px;
-}
- -

Per començar, donem al contingut el mateix {{cssxref("background-color")}}, {{cssxref("color")}}, i {{cssxref("padding")}} com els panells de caixa d'informació. A continuació, li donem un gran {{cssxref("margin-left")}} per moure-ho cap a la dreta, fent espai perquè la caixa d'informació s'assegui, de manera que no se superposi amb qualsevol altre cosa.

- -

Això marca el final del segon exemple; esperem que trobeu el tercer tan interessant.

- -

Un panell amagat lliscant

- -

L'exemple final que presentarem aquí és un panell que es llisca des de dins i fora de la pantalla en prémer una icona - com s'ha esmentat anteriorment, això és popular per a situacions com ara dissenys de mòbils, on els espais de pantalla disponibles són petits, per la qual cosa no es desitja usar la major part d'ella, mostrant un menú o panell d'informació en lloc de contingut útil.

- -

El nostre exemple acabat tindrà aquest aspecte:

- -

- -
-

Nota: Podeu veure l'exemple acabat, executant-ho en directe a hidden-info-panel.html (codi font). Comproveu-ho per tenir una idea del que serà la construcció d'aquesta secció de l'article.

-
- -

Com a punt de partida, feu una còpia local de hidden-info-panel-start.html des del nostre repositori de Github. Això no segueix l'exemple anterior, de manera que cal un nou fitxer d'inici. Fem un cop d'ull al codi HTML del fitxer:

- -
<label for="toggle">❔</label>
-<input type="checkbox" id="toggle">
-<aside>
-
-  ...
-
-</aside>
- -

Per començar, tenim un element {{htmlelement("label")}} i un element {{htmlelement("input")}} - els elements <label> normalment s'utilitzen per associar una etiqueta de text amb un element de formulari amb finalitats d'accessibilitat (permetent que un usuari de pantalla vegi quina descripció fa amb quin element del formulari). Aquí s'associa amb la casella de verificació <input> amb els atributs for i id.

- -
-

Nota: Hem posat un gran signe d'interrogació en el nostre HTML perquè actuï com la nostra icona d'informació - aquest representa el botó que es premut per mostrar/amagar el panell.

-
- -

Aquí utilitzarem aquests elements per un propòsit lleugerament diferent - un altre efecte secundari útil dels elements <label> és que podeu fer clic a l'etiqueta de la casella de verificació per a marcar la casella de verificació, així com només la casella de verificació. Això ha portat a la coneguda checkbox hack, que proporciona una forma lliure de JavaScript per controlar un  element mitjançant la commutació d'un botó. L'element que anem a controlar és l'element {{htmlelement("aside")}} que segueix els altres dos (hem deixat el seu contingut fora del llistat del codi anterior per brevetat).

- -

A les seccions següents explicarem com funciona tot això.

- -

Estilitzar els elements de formulari

- -

Primer tractarem els elements de formulari - afegiu el següent CSS entre les etiquetes {{htmlelement("style")}}:

- -
label[for="toggle"] {
-  font-size: 3rem;
-  position: absolute;
-  top: 4px;
-  right: 5px;
-  z-index: 1;
-  cursor: pointer;
-}
-
-input[type="checkbox"] {
-  position: absolute;
-  top: -100px;
-}
- -

La primera regla donar estil el <label>; aquí tenim:

- - - -

La segona regla estableix {{cssxref("position")}} absolute en l'element <input> de casella de verificació real i l'oculta a la part superior de la pantalla. De fet, no volem veure això a la nostra interfície d'usuari.

- -

Estilitzar el panell

- -

Ara és hora de donar-li estil el propi panell lliscant. Afegiu la següent regla al final del vostre CSS:

- -
aside {
-  background-color: #a60000;
-  color: white;
-
-  width: 340px;
-  height: 98%;
-  padding: 10px 1%;
-
-  position: fixed;
-  top: 0;
-  right: -370px;
-
-  transition: 0.6s all;
-}
- -

Hi ha molt a fer aquí, analitzem-ho a poc a poc:

- - - -

Seleccionar el estat marcat

- -

Hi ha una mica de CSS per afegir - poseu el següent al final del vostre CSS:

- -
input[type=checkbox]:checked + aside {
-  right: 0px;
-}
- -

El selector és bastant complex aquí - estem seleccionant l'element <aside> adjacent a l'element <input>, però només quan està marcat (tingueu en compte l'ús de la pseudo-classe {{cssxref (": checked")}} per aconseguir això). Quan aquest és el cas, estem establint la propietat {{cssxref("right")}} de <aside> a 0px, el que fa que el panell aparegui novament en la pantalla (suaument a causa de la transició). En fer clic en l'etiqueta, torna a desmarcar la casella de verificació, que torna a ocultar el panell.

- -

Així que aquí ho teniu - una manera bastant intel·ligent, lliure de Javascript, per crear un efecte de botó alternatiu. Això funcionarà en IE9 i superiors (la transició suau funcionarà en IE10 i superiors). Aquest efecte té algunes preocupacions - això és abusar una mica d'elements de forma (no estan destinats per a aquest propòsit), i l'efecte no és el millor en termes d'accessibilitat - l'etiqueta no es pot enfocar de manera predeterminada, i l'ús no semàntic dels elements de formulari pot causar problemes amb els lectors de pantalla. JavaScript i un enllaç o un botó poden ser més apropiat, però encara és divertit experimentar.

- -

Resum

- -

Així que arrodonim el nostre cop d'ull en el posicionament - ara com ara, heu de tenir una idea de com funciona la mecànica bàsica, així com la comprensió de com començar a aplicar-los en la construcció d'algunes característiques interessants de la interfície d'usuari. No us preocupeu sinó vau rebre tot això immediatament - el posicionament és un tema bastant avançat, i sempre podeu treballar a través dels articles de nou, per ajudar-vos en la vostra comprensió. El següent tema al que ens referirem és a Flexbox.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/disseny_css/flexbox/index.html b/files/ca/learn/css/disseny_css/flexbox/index.html deleted file mode 100644 index 37f31f619b..0000000000 --- a/files/ca/learn/css/disseny_css/flexbox/index.html +++ /dev/null @@ -1,330 +0,0 @@ ---- -title: Flexbox -slug: Learn/CSS/Disseny_CSS/Flexbox -tags: - - Article - - Beginner - - CSS - - CSS layouts - - CodingScripting - - Flexible Boxes - - Guide - - Layout - - Layouts - - Learn - - flexbox -translation_of: Learn/CSS/CSS_layout/Flexbox ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
- -

Flexbox és un mètode de disseny de pàgina web unidimensional que distribueix els elements de la pàgina web en files o en columnes. Els elements són «flexibles» i omplen tot l’espai de més o s’encongeixen per caber en espais més petits. Aquest article n’explica els fonaments.

- - - - - - - - - - - - -
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a l’HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS).
Objectiu:Aprendre a utilitzar el sistema de disseny de pàgines web Flexbox.
- -

Per què Flexbox?

- -

Durant molt de temps, les úniques eines fiables compatibles amb els navegadors, disponibles per crear dissenys de pàgina web amb CSS eren mètodes com ara els elements flotants (floats) i el posicionament. Estan bé i funcionen, però d'alguna manera també són més limitats i frustrants.

- -

Uns requisits senzills de disseny de pàgina web com els que enumerem a continuació són difícils o impossibles d'aconseguir amb aquestes eines d’una manera còmoda i flexible:

- - - -

Com veureu en les properes seccions, Flexbox facilita moltes tasques de disseny de pàgina web. Aprofundim-hi!

- -

Un exemple senzill

- -

En aquest article, et farem treballar en un seguit d'exercicis que t’ajudaran a entendre com funciona Flexbox. Per començar, fes una còpia local del primer fitxer d'inici, flexbox0.html, que trobaràs en el nostre repositori de GitHub; carrega’l en un navegador modern (com Firefox o Chrome) i consulta’n el codi en el teu editor. També ho pots veure en viu aquí.

- -

Observa que hi ha un element {{htmlelement("header")}} amb un títol d’encapçalament de nivell superior i un element {{htmlelement("section")}} que conté tres elements {{htmlelement("article")}}. Els farem servir per a crear un disseny de tres columnes força habitual.

- -

- -

Especificar els elements flexbox

- -

Per començar hem de decidir quins elements volem configurar perquè es comportin com caixes flexibles. Per tal de fer-ho, establim un valor especial de {{cssxref("display")}} en l'element pare dels elements als quals afectarà. En aquest cas, volem que siguin els elements {{htmlelement("article")}}, per la qual cosa ho configurem en l’element {{htmlelement("section")}}:

- -
section {
-  display: flex;
-}
- -

Això fa que l'element <section> esdevingui un contenidor flexible i els seus fills ítems flexibles. El resultat d'això hauria de presentar un aspecte semblant a això:

- -

- -

Per tant, aquesta declaració única, ens dona tot el que necessitem; increïble, oi? Tenim el nostre disseny de pàgina de columna múltiple amb columnes de la mateixa mida, i que tenen la mateixa alçada. Això és perquè els valors predeterminats que s’han donat als elements flex (els fills del contenidor flex) estan dissenyats per a resoldre problemes comuns com aquest.

- -

Per deixar-ho clar, reiterem el que passa aquí. L’element al qual hem donat un valor de {{cssxref("display")}} de flex actua com un element de nivell de bloc en termes de com interactua amb la resta de la pàgina, però els seus fills es presenten com a elements flexibles. La següent secció explicarà amb més detall què significa això. Fixeu-vos també que podeu utilitzar un valor de display d'inline-flex si voleu disposar els fills d'un element com a elements flexibles, però que aquest element es comporti com un element en línia.

- -

El model flex

- -

Els elements que es disposen com caixes flexibles, es distribueixen al llarg de dos eixos:

- -

flex_terms.png

- - - -

Tingues present aquesta terminologia a mesura que avances en les seccions. Sempre pots tornar enrere si en algun moment l’ús d’aquests termes et genera confusions.

- -

Columnes o files?

- -

Flexbox proporciona una propietat anomenada {{cssxref("flex-direction")}}, que especifica en quina direcció discorre l'eix principal (en quina direcció es disposen les caixes flexibles fill); per defecte, està definida en row, que fa que els elements flexibles es disposin en una fila en la direcció de l'idioma predeterminat amb què funciona el teu navegador (d'esquerra a dreta, en el cas d'un navegador en català).

- -

Prova d'afegir a la teva regla <section> la declaració següent:

- -
flex-direction: column;
- -

Observa que això posa de nou els elements en una disposició en columna, igual que estaven abans d’afegir-hi el CSS. Abans de continuar, elimina aquesta declaració del teu exemple.

- -
-

Nota: També pots disposar elements flexibles en direcció inversa amb els valors row-reverse i column-reverse. Experimenta també amb aquests valors.

-
- -

Ajust

- -

Un problema que sorgeix quan tens un disseny de pàgina amb una amplada o una alçada fixa és que els fills de l’element flexbox poden desbordar el contenidor i trencar el disseny de la pàgina. Fes un cop d'ull al nostre exemple flexbox-wrap0.html i mira’l en directe (fes primer una còpia local d'aquest fitxer, si vols seguir amb aquest exemple):

- -

- -

Aquí observem que els fills desborden el contenidor. Una manera de solucionar això és afegir a la teva regla <section> la declaració següent:

- -
flex-wrap: wrap;
- -

Afegeix també la declaració següent a la teva regla <article>

- -
flex: 200px;
- -

Ara prova-ho; observa que el disseny es veu força més bé ara que hi has inclòs això:

- -

Ara hi ha diverses files, i a cada fila hi ha tantes elements fill flexbox com és raonable que hi hagi, i si hi ha cap desbordament, es genera una altra línia. La declaració flex: 200px que hem establer per als elements <article> significa que cada article tindrà com a mínim una amplada de 200px; més endavant parlarem d'aquesta propietat amb més detall. També pots observar que els últims fills de l'última fila s’han fet més amples, de manera que la fila està igualment tota plena.

- -

Però encara hi podem fer més. Primer de tot, prova de canviar el valor de la propietat {{cssxref("flex-direction")}} a row-reverse; observa que encara tens el disseny de files múltiples, però ara comença des de la cantonada oposada de la finestra del navegador i flueix en sentit invers.

- -

La propietat flex-flow abreujada

- -

En aquest punt, val la pena observar que hi ha una propietat abreujada per a {{cssxref("flex-direction")}} i {{cssxref("flex-wrap")}}, que és: {{cssxref("flex-flow")}}. Per exemple, pots substituir:

- -
flex-direction: row;
-flex-wrap: wrap;
- -

per

- -
flex-flow: row wrap;
- -

Dimensió flexible dels elements flexibles

- -

Tornem ara al nostre primer exemple i observem com podem controlar quina proporció d'espai poden ocupar els elements flexibles. Fes servir la teva còpia local de flexbox0.html, o fes una còpia de flexbox1.html com a punt de partida nou (també el pots veure en viu).

- -

Primer, afegeix la regla següent al final del teu CSS:

- -
article {
-  flex: 1;
-}
- -

Es tracta d'un valor de proporció sense unitat que determina quina quantitat de l'espai disponible al llarg de l'eix principal ocupa cada element flexible. En aquest cas donem a cada element {{htmlelement("article")}} un valor de 1, que significa que tots ocuparan una quantitat igual de l'espai que sobri després que s'hagin establert elements com ara l’àrea de farciment i el marge. És una proporció, que significa que donar a cada element flexible un valor de 400.000 tindria exactament el mateix efecte.

- -

A continuació, afegeix la regla següent a sota de l'anterior:

- -
article:nth-of-type(3) {
-  flex: 2;
-}
- -

Aleshores, actualitza. Observa que el tercer element {{htmlelement("article")}} ocupa el doble de l'amplada disponible que els altres dos; perquè ara hi ha en total quatre unitats proporcionals disponibles. Els dos primers elements flexibles en tenen una cadascun, i prenen 1/4 de l'espai disponible cadascun. El tercer té dues unitats, de manera que ocupa 2/4 de l'espai disponible (o el que és el mateix, la meitat).

- -

També pots especificar un valor de mida mínima per al valor flex. Actualitza les teves regles per als elements <article>, així:

- -
article {
-  flex: 1 200px;
-}
-
-article:nth-of-type(3) {
-  flex: 2 200px;
-}
- -

Això bàsicament estableix que «Es dona a cada element flexible primer 200px de l'espai disponible. A continuació, la resta de l'espai disponible es reparteix segons les unitats de proporció». Actualitza i observa com es reparteix l'espai ara.

- -

- -

El valor real de flexbox es pot apreciar en la flexibilitat / capacitat de resposta; si canvies la mida de la finestra del navegador o afegeixes un altre element {{htmlelement("article")}}, el disseny de pàgina encara funciona.

- -

Propietat flex abreujada o no abreujada

- -

{{Cssxref("flex")}} és una propietat de abreujada que pot especificar fins a tres valors diferents:

- - - -

Recomanem evitar l'ús de les propietats flex no abreujades, si no és que t’és realment necessari (per exemple, perquè has de substituir alguna configuració anterior). Comporta escriure una gran quantitat de codi addicional, i pot acabar sent una mica confús.

- -

Alineació horitzontal i vertical

- -

També pots utilitzar funcions flexbox per a alinear elements flexibles al llarg dels eixos principals o transversals. Ho expliquem amb un nou exemple, flex-align0.html (també el pots veure en viu), que convertirem en una bonica barra d'eines/botons flexible. De moment, observa aquesta barra de menú horitzontal amb alguns botons agrupats a la cantonada superior esquerra.

- -

- -

Primer, fes una còpia local d'aquest exemple.

- -

A continuació, afegeix a la part inferior del CSS de l'exemple el codi següent:

- -
div {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-}
- -

Actualitza la pàgina i observa que els botons estan ben centrats, horitzontalment i verticalment. Ho hem fet amb dues propietats noves.

- -

El control {{cssxref("align-items")}} disposa els elements flexibles sobre l'eix transversal.

- - - -

Pots anul·lar el comportament {{cssxref("align-items")}} per a elements flexibles individuals amb la propietat {{cssxref("align-self")}}. Per exemple, afegeix al teu CSS el codi el següent:

- -
button:first-child {
-  align-self: flex-end;
-}
- -

Dona un cop d'ull a l'efecte que hi produeix i retira de nou aquest codi quan hagis acabat.

- -

La propietat {{cssxref("justify-content")}} controla on s’ubiquen els elements flexibles sobre l'eix principal.

- - - -

T’animem a jugar amb aquests valors i veure com funcionen abans de continuar.

- -

Ordena els elements flexibles

- -

Flexbox també té una característica que canvia l'ordre de disposició dels elements flexibles sense afectar l'ordre d'origen. Aquesta és una altra característica que és impossible de fer amb els mètodes tradicionals de disseny de pàgines web.

- -

El codi per a això és senzill: afegeix al codi d'exemple de la barra de botons el codi CSS següent:

- -
button:first-child {
-  order: 1;
-}
- -

Actualitza, i observa que ara el botó «Smile» s'ha mogut al final de l'eix principal. Parlarem de com això funciona amb una mica més detall:

- - - -

Pots establir valors d'ordre negatius i fer que els elements apareguin abans que els elements amb un ordre 0. Per exemple, pots fer que el botó «Blush» aparegui al principi de l'eix principal amb la següent regla:

- -
button:last-child {
-  order: -1;
-}
- -

Caixes flexibles imbricades

- -

Amb flexbox és possible crear dissenys força complexos. És del tot correcte establir que un element flexible sigui també un contenidor flexible, de manera que els elements fills també es disposin com caixes flexibles. Dona un cop d'ull a complex-flexbox.html (o també el pots veure en viu).

- -

- -

L'HTML d’això és força senzill. Hi ha un element {{htmlelement("section")}} que conté tres elements {{htmlelement("article")}}. El tercer element {{htmlelement("article")}} conté tres elements {{htmlelement("div")}}:

- -
section - article
-          article
-          article - div - button
-                    div   button
-                    div   button
-                          button
-                          button
- -

Observa el codi que hem utilitzat per al disseny.

- -

En primer lloc, establim que els fills de {{htmlelement("section")}} es disposin com caixes flexibles.

- -
section {
-  display: flex;
-}
- -

A continuació, establim alguns valors flex en els propis elements {{htmlelement("article")}}. Aquí cal tenir en compte la 2a regla; configurem el tercer element {{htmlelement("article")}} de manera que els seus elements fills es disposin també com elements flexibles, però aquesta vegada en columna.

- -
article {
-  flex: 1 200px;
-}
-
-article:nth-of-type(3) {
-  flex: 3 200px;
-  display: flex;
-  flex-flow: column;
-}
-
- -

A continuació, seleccionem el primer element {{htmlelement("div")}}. Utilitzem la declaració flex: 1 100px; perquè hi doni efectivament una alçada mínima de 100px, aleshores en configurem els elements fills (els elements {{htmlelement("button")}}) perquè també siguin elements flexibles. Els distribuïm en fila perquè ocupin tot l’espai amb la propietat wrap i els alineem al centre de l'espai disponible, com hem fet en l'exemple del botó individual que hem vist abans.

- -
article:nth-of-type(3) div:first-child {
-  flex: 1 100px;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  justify-content: space-around;
-}
- -

Finalment, establim les dimensions del botó, però la qüestió interessant és que hi donem un valor de flex de 1. Això té un efecte molt interessant, que pots observar si canvies la mida de l'amplada de la finestra del navegador. Els botons ocuparan tant d’espai com puguin i es disposaran sobre la mateixa línia tant com sigui possible, però quan ja no càpiguen amb comoditat a la mateixa línia, cauran a la línia següent.

- -
button {
-  flex: 1;
-  margin: 5px;
-  font-size: 18px;
-  line-height: 1.5;
-}
- -

Compatibilitat amb altres navegadors

- -

Flexbox és compatible amb la majoria de navegadors nous: Firefox, Chrome, Opera, Microsoft Edge i IE 11, i les versions més noves d'Android/iOS, etc. No obstant això, cal tenir en compte que encara hi ha navegadors antics en ús que no admeten Flexbox (o bé n’admeten una versió antiga i desactualitzada).

- -

Mentre ets en procés d’aprendre i experimentar, això no importa gaire; però si consideres l'ús de flexbox en un lloc web real, has de fer proves i assegurar-te que la teva experiència d'usuari continua sent acceptable en el màxim nombre de navegadors possible.

- -

Flexbox és una mica més complicat que altres característiques CSS. Per exemple, si un navegador no té ombres CSS, probablement el lloc web serà encara usable. En canvi, la no-compatibilitat amb les característiques de flexbox probablement trencarà del tot el disseny i inutilitzarà el lloc web.

- -

En un altre mòdul parlarem de les estratègies per a superar els complexos problemes de compatibilitat dels navegadors.

- -

Posa a prova les teves habilitats

- -

Hem vist moltes coses en aquest article. En recordes la informació més important? Trobaràs més tests per poder comprovar si has retingut la informació abans de seguir a Test your skills: Flexbox.

- -

Resum

- -

Això clou el nostre recorregut pels fonaments de flexbox. Esperem que t’hagis divertit i que sàpigues jugar-hi mentre continues endavant amb el teu aprenentatge. A continuació, veurem un altre aspecte important dels dissenys CSS, els sistemes de graella.

- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
diff --git a/files/ca/learn/css/disseny_css/flotadors/index.html b/files/ca/learn/css/disseny_css/flotadors/index.html deleted file mode 100644 index 25d2fe01a6..0000000000 --- a/files/ca/learn/css/disseny_css/flotadors/index.html +++ /dev/null @@ -1,516 +0,0 @@ ---- -title: Flotadors (Floats) -slug: Learn/CSS/Disseny_CSS/Flotadors -tags: - - Article - - Beginner - - CSS - - Clearing - - CodingScripting - - Floats - - Guide - - Layout - - columns - - multi-column -translation_of: Learn/CSS/CSS_layout/Floats ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}
- -

Originalment pensada per a flotar imatges dins de blocs de text, la propietat {{cssxref("float")}} va esdevenir una de les eines més utilitzades per a crear dissenys multicolumna a les pàgines web. Amb l'arribada de Flexbox i Grid ha tornat ara al seu propòsit original, tal com s'explica en aquest article.

- - - - - - - - - - - - -
Requisits previs:HTML bàsic (vegeu Introducció a l'HTML), i una idea de com funciona CSS (vegeu Introducció a CSS.)
Objectiu:Aprendre a crear elements flotants a les pàgines web, i a fer servir la propietat clear i altres mètodes per a netejar els elements flotants.
- -

La història dels elements flotants

- -

La propietat {{cssxref("float")}} fou introduïda per a permetre als desenvolupadors implementar dissenys senzills que incloguessin una imatge flotant dins d'una columna de text, amb el text envoltant la part esquerra o dreta de la imatge. El tipus de cosa que trobes habitualment en el disseny d'un diari.

- -

Però els desenvoupadors web aviat s'adonaren que podien flotar qualsevol cosa, i no només les imatges, pel que el seu ús s'amplià, per exemple, creant efectes de disseny divertits com els d'aquestes caplletres.

- -

Els elements flotants han estat utitlitzats habitualment per a crear dissenys web complets amb múltiples columnes situades l'una al costat de l'altra (el comportament per defecte seria que les columnes se situessin les unes sota les altres, en el mateix ordre en què apareixen al codi font). Ara hi ha disponibles tècniques més modernes i millors, que explorarem més endavant en aquest mòdul, per la qual cosa l'ús de {{cssxref("float")}} d'aquesta manera s'hauria de contemplar com una tècnica antiquada.

- -

En aquest article ens centrarem en l'ús apropiat de la propietat {{cssxref("float")}}.

- -

Un exemple de float simple

- -

Explorem com utilitzar els float. Començarem amb un exemple realment simple que inclou un bloc de text flotant al voltant d'un element. Pots acompanyar-nos creant un fitxer index.html al teu ordinador, omplint-lo amb una plantilla HTML simple, i inserint el codi següent als llocs adequats. Al final de la secció podràs veure un exemple en viu de com hauria de ser el codi final.

- -

Primer, comencem amb una mica d'HTML simple — afegeix el següent al cos del teu HTML, eliminant qualsevol altra cosa que hi hagués abans:

- -
<h1>Exemple simple de caixa flotant</h1>
-
-<div class="box">Caixa flotant</div>
-
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p>
-
-<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
- -

Ara aplica el següent CSS al teu HTML (fent servir un element {{htmlelement("style")}} o un {{htmlelement("link")}} per a separar el fitxer .css  — tu tries):

- -
body {
-  width: 90%;
-  max-width: 900px;
-  margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
-}
-
-.box {
-  width: 150px;
-  height: 100px;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-}
- -

Si deses y recarregues la pàgina, veuràs quelcom semblant a allò que esperaries: la caixa es troba per sobre del text, en un flux normal. Per a flotar el text al voltant, afegeix les propietats {{cssxref("float")}} i {{cssxref("margin-right")}} a la regla .box:

- -
.box {
-  float: left;
-  margin-right: 15px;
-  width: 150px;
-  height: 100px;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-}
- -

Ara, si deses i recarregues, podràs veure alguna cosa semblant a això:

- -
- -
- -

{{ EmbedLiveSample('Float_1', '100%', 500) }}

- -

Analitzem ara com funciona el float — l'element amb el float aplicat (l'element {{htmlelement("div")}} en aquest cas) és extret del flux normal del document i està enganxat al costat esquerre del seu element contenidor pare ({{htmlelement("body")}}, en aquest cas). Qualsevol contingut que estigui per sota de l'element flotat en el flux normal, ara l'envoltarà, omplint l'espai a la dreta fins a la part superior de l'element flotant. Allà s'aturarà.

- -

Flotar el contingut a la dreta té exactament el mateix efecte, però a la inversa — l'element flotat s'enganxarà a la dreta, i el contingut l'envoltarà per l'esquerra. Prova de canviar el valor de la propietat float a right i substitueix {{cssxref("margin-right")}} per {{cssxref("margin-left")}} al darrer conjunt de regles per veure el resultat.

- -

Tot i que podem afegir un marge a l'element flotant per alunyar el text, no podem afegir un marge al text per allunyar-lo del flotant. Això es deu al fet que un element flotant s'extreu del flux normal i les caixes dels següents elements segueixen per darrera del flotador. Pots comprovar-ho fent alguns canvis a l'exemple.

- -

Afegeix una clase special al primer paràgraf de text, el que succeeix immediatament a la caixa flotant, i després afegeix al teu CSS les següents regles. Això li donarà al paràgraf següent un color de fons.

- -
.special {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-}
-
- -

Per tal que l'efecte sigui més fàcil de veure, canvia el margin-right del teu element flotant a margin, per obtener espai al voltant de l'element flotant. Veuràs que el fons del paràgraf passa just per sota de la caixa flotant, com en l'exemple inferior.

- -
- -
- -

{{ EmbedLiveSample('Float_2', '100%', 500) }}

- -

Els quadres de línia del següent element s'han escurçat perquè el text discorri al voltant del flotador, però com que el flotador s'ha eliminat del flux normal, el quadre al voltant del paràgraf encara manté l'ample complet.

- -

Netejant floats

- -

Hem vist que el flotador s'elimina del flux normal i que els altres elements es mostraran al seu costat. Per tant, si volem evitar que un element a continuació es mogui cap amunt, hem de netejar el float. Això s'aconsegueix amb la propietat {{cssxref ("clear")}}.

- -

En l'HTML de l'exemple anterior, afegeix una classe cleared al segon paràgraf sota de l'element flotant. Després, afegeix això al teu CSS:

- -
.cleared {
-  clear: left;
-}
-
- -
- -
- -

{{ EmbedLiveSample('Float_3', '100%', 600) }}

- -

Hauries de veure que el següent paràgraf neteja l'element flotant i ja no apareix al seu costat. La propietat clear accepta els següents valors:

- - - -

Netejar la caixa contenidora d'un float

- -

Ara ja saps com netejar un element que es troba a continuació d'un element flotant, però observa el que succeeix si tens un flotant alt i un paràgraf curt, amb una caixa convenidora que envolta ambdós elements. Modifica el teu document per tal que el primer paràgraf i la caixa flotant es trobin dins d'un {{htmlelement("div")}} amb una classe wrapper.

- -
<div class="wrapper">
-  <div class="box">Caixa flotant</div>
-
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p>
-</div>
-
- -

Al teu CSS, afegeix la següent regla per a la teva classe .wrapper i després recarrega la pàgina:

- -
.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-}
- -

A més, elimina la classe .cleared anterior:

- -
.cleared {
-    clear: left;
-}
- -

Veuràs que, como en l'exemple on hem posat un color de fons al paràgraf, el color de fons passa per darrere de l'element flotant.

- -
- -
- -

{{ EmbedLiveSample('Float_4', '100%', 600) }}

- -

Un cop més, això és així perquè el flotador s'ha extret del flux normal. Netejar el següent elemento no ajuda a resoldre aquest problema de neteja de la caixa, on volem que la part inferior de la caixa envolti l'element flotant i que envolti el contingut fins i tot si el coningut és més curt. Hi ha tres maneres posssibles de resoldre això, dues que funcionen en tots els navegadors, però que tenen una mica de truc, i una tercera, nova manera de resoldre aquesta situació correctament.

- -

El hack clearfix

- -

La forma com aquesta situació s'ha tractat tradicionalment és utilitzant un truc conegut com el "truc clearfix". Això implica inserir algun contingut generat després de la caixa que conté el contingut flotant i envolvent, i configurar-lo per netejar ambdós.

- -

Afefeix el següent CSS a l'exemple:

- -
.wrapper::after {
-  content: "";
-  clear: both;
-  display: block;
-}
- -

Ara recarrega la pàgina i la caixa hauria de netejar-se. Això és bàsicament el mateix que si haguessis afegit un element HTML com un <div> a sota dels elements i li haguessis afegit la propietat clear: both.

- -
- -
- -

{{ EmbedLiveSample('Float_5', '100%', 600) }}

- -

Fent servir overflow

- -

Un mètode alternatiu és establir la propietat {{cssxref("overflow")}} de l'element contenidor amb un valor diferent de visible.

- -

Elimina el CSS clearfix que has afegit en l'anterior secció i, en el seu lloc, afegeix overflow: auto a les regles de la caixa contenidora. Altre cop, la caixa hauria de netejar-se.

- -
.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-  overflow: auto;
-}
- -
- -
- -

{{ EmbedLiveSample('Float_6', '100%', 600) }}

- -

Aquest exemple funciona creant el que s'anomena un block formatting context (BFC) o context de format de bloc. És com un petit disseny dins de la nostra pàgina (dins la qual tot està contingut, per tant, el nostre element flotant està contingut dins del BFC i el fons es troba darrere d'ambdós elements. Això generalment funcionarà. Això no obstant, en certs casos, és possible que et trobis amb barres de desplaçament no desitjades o ombres retallades com a conseqüències no desitjades de l'ús del desbordament..

- -

display: flow-root

- -

La manera moderna de resoldre aquest problema és fer servir el valor flow-root de la propietat display. Això existeix només per a crear un BFC sense fer servir trucs; no hi haurà conseqüències no desitjades quan el facis servir. Elimina overflow: auto de la regla .wrapper i afegeix display: flow-root. Assumint que el teu navegador sigui compatible, la caixa es netejarà.

- -
.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-  display: flow-root;
-}
- -
- -
- -

{{ EmbedLiveSample('Float_7', '100%', 600) }}

- -

Resum

- -

Ara ja saps tot el que has de saber sobre els flotadors en el desenvolupament web modern. Consulta l'article sobre els mètodes de disseny antiquats per obtenir informació de com es feien servir, cosa que pot ser-te útil si has de treballar en projectes antics.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}

- -

En aquest mòdul

- - diff --git a/files/ca/learn/css/disseny_css/flux_normal/index.html b/files/ca/learn/css/disseny_css/flux_normal/index.html deleted file mode 100644 index ac44f6a95a..0000000000 --- a/files/ca/learn/css/disseny_css/flux_normal/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Flux normal -slug: Learn/CSS/Disseny_CSS/Flux_normal -translation_of: Learn/CSS/CSS_layout/Normal_Flow ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

Aquest article explica el flux normal o la manera com es disposen els elements de la pàgina web si tu no en canvies la disposició.

- - - - - - - - - - - - -
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a l'HTML) i nocions de com funciona el CSS (consulta la Introducció al CSS).
Objectiu:Entendre la manera com els navegadors disposen per defecte els elements en les pàgines web abans que l'usuari comenci a fer-hi canvis.
- -

Com es detalla en l’últim article d’introducció al disseny de pàgines web, els elements d’una pàgina web es distribueixen segons el flux normal si no s'hi aplica CSS que en canviï el comportament. Com ja hem començat a veure, pots canviar la manera com es comporten els elements, bé ajustant-ne la posició dins d’aquest flux normal, o bé suprimint-los-en del tot. Un document sòlid i ben estructurat que sigui llegible en el sentit del flux normal és la millor manera de començar qualsevol pàgina web. Garanteix que el contingut serà llegible, fins i tot si l’usuari fa servir un navegador molt limitat o un dispositiu com un lector de pantalla, que llegeix el contingut de la pàgina. A més, com que el flux normal està dissenyat per a fer llegible un document, començar d'aquesta manera significa que treballes amb el document en lloc de lluitar-hi en contra perquè hi fas canvis d’ordre.

- -

Abans d’aprofundir més en diferents mètodes de disseny, val la pena revisar algunes de les qüestions que has estudiat en mòduls anteriors pel que fa al flux normal dels documents.

- -

Com es disposen per defecte els elements?

- -

Primer de tot s'agafa el contingut dels elements de les caixes, i a continuació s’hi afegeixen l'àrea de farciment, les vores i els marges al voltant. Es tracta del model de caixes, que ja coneixem.

- -

De manera predeterminada, el contingut d'un element de nivell de bloc és del 100% de l'amplada de l’element pare, i l‘alçada està determinada pel contingut. Els elements de línia tenen l’amplada i l’alçada determinades pel contingut. En els elements de línia no pots establir l’amplada i l’alçada, senzillament s’inclouen dins del contingut d’elements de nivell de bloc. Si vols controlar la mida d'un element de línia d'aquesta manera, has de configurar-lo perquè es comporti com un element de nivell de bloc amb display: block; (o fins i tot, display: inline-block;, que barreja característiques de tots dos).

- -

Això pel que fa a elements individuals; però què passa amb la manera com interactuen els elements entre ells? El flux normal del disseny d’una pàgina web (que s’esmenta en l’article d’introducció al disseny de pàgines web) és el sistema pel qual els elements s’ubiquen dins de la finestra gràfica del navegador. Per defecte, els elements de nivell de bloc estan configurats en la direcció del flux dels blocs, en funció del mode d'escriptura de l’element pare (inicialment: en horitzontal): cada element de bloc apareix en una línia nova per sota de l’anterior i estan separats per qualsevol marge que s’hi hagi establert. Per tant, en català, o en qualsevol altre sistema d'escriptura horitzontal i de dalt a baix, els elements de nivell de bloc es disposen verticalment.

- -

Els elements de línia es comporten de manera diferent: no es disposen en línies noves; en lloc d’això, es disposen sobre la mateixa línia que l’anterior i que qualsevol contingut textual contigu (o que el delimiti), mentre hi hagi espai dins de l’amplada de l’element pare de nivell de bloc. Quan ja no hi ha espai, el text o els elements que desborden passen a una línia nova.

- -

Si dos elements adjacents tenen configurat un marge i els marges dels dos es toquen, predomina el que és més gran, i el més petit desapareix; es diu que els marges col·lapsen, i això també ho coneixem.

- -

Vegem un exemple senzill que il·lustra tot això:

- -
-
<h1>Flux bàsic d’un document</h1>
-
-<p>Sóc un element de nivell de bloc bàsic. Els meus elements de nivell de bloc adjacents es distribueixen en línies noves per sota meu.</p>
-
-<p>Per defecte ocupem el 100% de l'amplada de l'element pare i som tan alts com el contingut dels nostres elements fill. L‘amplada i l’alçada total són el nostre contingut + l’àrea de farciment + l’amplada/alçada de la vora.</p>
-
-<p>Tenim marges que ens separen. Però pel col·lapse dels marges, ens separa només l'amplada d'un dels dos marges, però no l’amplada dels dos.</p>
-
-<p>Els elements de línia <span> com aquest </span> i <span> aquest </span> es disposen sobre la mateixa línia que els altres i que els nodes de text adjacents, si hi ha espai en la mateixa línia. Quan els elements de línia desborden, <span>continuen per la línia següent, si és possible (com el que conté aquest text)</span>; o si no és possible, passen a una línia nova, com és el cas d’aquesta imatge: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-  background: rgba(255,84,104,0.3);
-  border: 2px solid rgb(255,84,104);
-  padding: 10px;
-  margin: 10px;
-}
-
-span {
-  background: white;
-  border: 1px solid black;
-}
-
- -

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

- -

Resum

- -

Ara que saps com funciona el flux normal del disseny de pàgina i quines són les opcions que el navegador estableix per defecte, avança i descobreix com pots canviar aquesta visualització per defecte i crear la composició de pàgina que necessita el teu disseny de pàgina web.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

En aquest mòdul

- - diff --git a/files/ca/learn/css/disseny_css/graelles/index.html b/files/ca/learn/css/disseny_css/graelles/index.html deleted file mode 100644 index af97c6f989..0000000000 --- a/files/ca/learn/css/disseny_css/graelles/index.html +++ /dev/null @@ -1,699 +0,0 @@ ---- -title: Graelles (Grids) -slug: Learn/CSS/Disseny_CSS/Graelles -tags: - - Article - - Beginner - - CSS - - CSS Grids - - CodingScripting - - Grids - - Guide - - Layout - - Learn - - Tutorial - - grid design - - grid framework - - grid system -translation_of: Learn/CSS/CSS_layout/Grids ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Assessment", "Learn/CSS/CSS_layout")}}
- -

Les graelles són una eina de disseny de pàgines web consolidada i molts dissenys de pàgines web moderns basen els seus dissenys de pàgina web en una graella regular. En aquest article analitzarem el disseny de pàgines web basats en graella i com es pot utilitzar CSS per a crear graelles, tant amb les eines presents com amb les noves tecnologies que comencen a estar disponibles en els navegadors.

- - - - - - - - - - - - -
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS i Aplicar estil a les caixes.)
Objectiu:Entendre els conceptes fonamentals que hi ha darrere dels sistemes de disseny de pàgines web amb graella i la manera com implementar un disseny de pàgina web basat en graella.
- -

Què és el disseny de pàgines web basat en graella?

- -

Una graella és senzillament una col·lecció de línies horitzontals i verticals que creen un patró que ens serveix per a alinear els elements del disseny d’una pàgina web. Ens ajuden a crear dissenys en què els elements no es mouen ni canvien d'amplada a mesura que naveguem de pàgina en pàgina, i proporcionen més coherència als nostres llocs web.

- -

Normalment, una graella té columnes (columns), files (rows) i espais entre cada fila i columna, que anomenem comunament canals (gutters).

- -

- -

Crear la teva graella en CSS

- -

Després d'haver decidit la graella que necessita el vostre disseny, podeu utilitzar el disseny de graella (o grid) de CSS per crear aquesta quadrícula a CSS i col·locar-hi elements. Primer veurem les característiques bàsiques del disseny de quadrícula i després explorarem com crear un sistema de quadrícula simple per al vostre projecte.

- -

Com a punt de partida, descarregueu i obriu el fitxer del punt de partida a l’editor de text i al navegador (també el podeu veure en directe aquí). Veureu un exemple amb un contenidor que conté alguns elements secundaris. Per defecte, es mostren en un flux normal, de manera que els quadres es mostren un sota l’altre. Treballarem amb aquest fitxer durant la primera part d’aquesta lliçó, fent canvis per veure com es comporta la quadrícula.

- -

Per definir una graella utilitzem el valor grid de la propietat display. Com passa amb Flexbox, això activa el disseny de graella i tots els fills directes del contenidor es converteixen en elements de la quadrícula. Afegiu això al CSS del vostre fitxer:

- -
.container {
-    display: grid;
-}
- -

A diferència de flexbox, els articles no tindran cap aspecte immediatament diferent. Declarar display: grid  us dona una quadrícula d'una columna, de manera que els vostres articles continuaran mostrant-se un per sota de l'altre tal com ho fan en el flux normal.

- -

Per veure alguna cosa que sembli més una graella, haurem d’afegir algunes columnes a la quadrícula. Afegim aquí tres columnes de 200 píxels. Podeu utilitzar qualsevol unitat de longitud o percentatges per crear aquestes pistes de columna.

- -
.container {
-    display: grid;
-    grid-template-columns: 200px 200px 200px;
-}
- -

Afegiu la segona declaració a la vostra regla CSS i, a continuació, torneu a carregar la pàgina i hauríeu de veure que els elements s'han reordenat un a cada cel·la de la quadrícula creada.

- -
- -
- -

{{ EmbedLiveSample('Grid_1', '100%', 400) }}

- -

Graelles flexibles amb la unitat fr

- -

A més de crear quadrícules amb longituds i percentatges, podem utilitzar la unitat fr per dimensionar de manera flexible les files i les columnes de la quadrícula. Aquesta unitat representa una fracció de l'espai disponible al contenidor de la quadrícula.

- -

Canvieu el llistat de pistes a la següent definició, creant tres pistes d'1fr.

- -
.container {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-}
- -

Ara hauríeu de veure que teniu pistes flexibles. La unitat fr distribueix espai proporcionalment, per tant, podeu donar diferents valors positius a les vostres pistes, per exemple, si canvieu la definició així:

- -
.container {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
-}
- -

La primera pista ara té 2fr de l’espai disponible i les altres dues pistes 1fr, fent que la primera pista sigui més gran. Podeu barrejar unitats de fr i pistes de longitud fixa; en aquest cas, l’espai necessari per a les pistes fixes s’elimina abans de distribuir l’espai a les altres pistes.

- -

-

- -
- - -

{{ EmbedLiveSample('Grid_2', '100%', 400) }}

- -
-

Nota: La unitat fr distribueix l'espai disponible, no tot l'espai. Per tant, si una de les vostres pistes té alguna cosa gran al seu interior, hi haurà menys espai lliure per compartir.

-
- -

Espais entre pistes

- -

Per crear espais entre pistes, fem servir les propietats {{cssxref ("grid-column-gap")}} per a espais entre columnes, {{cssxref ("grid-row-gap")}} per a espais entre files i {{ cssxref ("grid-gap")}} per establir tots dos alhora.

- -
.container {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
-    grid-gap: 20px;
-}
- -

Aquests buits poden especificar-se en qualsevol unitat de longitud o percentatge, però no en unitats fr.

- -
- -
- -

{{ EmbedLiveSample('Grid_3', '100%', 400) }}

- -
-

Nota: Les propietats *gap solien portar el prefix grid-, però això s'ha canviat a l'especificació, ja que la intenció és fer-les útils en diversos mètodes de disseny. Les versions prefixades es mantindran com a àlies, de manera que es podran utilitzar amb seguretat durant algun temps. Per estar segur, podeu duplicar i afegir les dues propietats per fer el vostre codi més a prova de bales.

-
- -
.container {
-  display: grid;
-  grid-template-columns: 2fr 1fr 1fr;
-  grid-gap: 20px;
-  gap: 20px;
-}
- -

Repetició de llistes de pistes

- -

Podeu repetir tot o una secció de la vostra llista de pistes mitjançant la notació de repetició. Canvieu la llista de pistes pel següent:

- -
.container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 20px;
-}
- -

Ara tindreu 3 pistes d’1fr igual que abans. El primer valor que es passa a la funció de repetició és el nombre de vegades que voleu que es repeteixi el llistat, mentre que el segon valor és un llistat de pistes, que consisteix d’una o més pistes que vulgueu repetir.

- -

La quadrícula implícita i explícita

- -

Fins ara, només hem especificat pistes de columnes i, tot i això, s’estan creant files per contenir el nostre contingut. Aquest és un exemple de la quadrícula explícita contra la quadrícula implícita. La quadrícula explícita és la que creeu utilitzant grid-template-columns o grid-template-rows. La quadrícula implícita es crea quan el contingut es col·loca fora d’aquesta, com ara a les nostres files. Les quadrícules explícites i implícites són anàlogues als eixos flexbox principal i transversal.

- -

Per defecte, les pistes creades a la quadrícula implícita tenen una mida auto, cosa que en general vol dir que són prou grans per adaptar-se al seu contingut. Si voleu donar una mida implícita a les pistes de quadrícula, podeu utilitzar les propietats {{cssxref ("grid-auto-rows")}} i {{cssxref ("grid-auto-columns")}}. Si afegiu grid-auto-rows amb un valor de 100px al vostre CSS, veureu que aquestes files creades ara tenen una alçada de 100 píxels.

- -
- - -
.container {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-  grid-gap: 20px;
-}
- -

{{ EmbedLiveSample('Grid_4', '100%', 400) }}

- -

La funció minmax()

- -

Les nostres pistes de 100 píxels d’alçada no seran molt útils si afegim contingut a les pistes de més de 100 píxels, ja que aquest cas provocaria un desbordament. Podria ser millor tenir pistes de com a mínim 100 píxels d’alçada i que es puguin expandir si hi entra més contingut. Un fet bastant bàsic sobre el web és que mai no se sap realment la mida que tindrà alguna cosa; contingut addicional o mides de lletra més grans poden causar problemes amb els dissenys que intenten ser perfectes en píxels en totes les dimensions.

- -

La funció {{cssxref ("minmax")}} ens permet establir una mida mínima i màxima per a una pista, per exemple, minmax(100 px, auto). La mida mínima és de 100 píxels, però la màxima és automàtica, i s’ampliarà per adaptar-se al contingut. Proveu de canviar grid-auto-rows per utilitzar un valor min-max:

- -
.container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-auto-rows: minmax(100px, auto);
-    grid-gap: 20px;
-}
- -

Si afegiu contingut addicional, veureu que la pista s'expandeix per permetre que encaixi. Tingueu en compte que l'expansió es produeix al llarg de la fila.

- -

Tantes columnes com encaixin

- -

Podem combinar algunes de les coses que hem après sobre el llistat de pistes, la notació de repetició i {{cssxref ("minmax")}} per crear un patró útil. De vegades, és útil poder demanar a la quadrícula que creï tantes columnes com càpiguen al contenidor. Ho fem establint el valor de grid-template-columns mitjançant la notació {{cssxref ("repeat")}}}), però en lloc de passar un número, introduïu la paraula clau auto-fill. Per al segon paràmetre de la funció utilitzem minmax(), amb un valor mínim igual a la mida mínima de la pista que ens agradaria tenir i un màxim de 1fr.

- -

Proveu-ho ara al vostre fitxer amb el CSS següent:

- -
- - -
.container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  grid-auto-rows: minmax(100px, auto);
-  grid-gap: 20px;
-}
-
- -

{{ EmbedLiveSample('Grid_5', '100%', 400) }}

- -

Això funciona perquè Grid crea tantes columnes de 200 píxels com càpiguen al contenidor i, a continuació, comparteix l’espai que sobri entre totes les columnes: el màxim és 1fr que, com ja sabem, distribueix l’espai de manera uniforme entre les pistes.

- -

Ubicació basada en línies

- -

Ara passem de crear una graella a col·locar coses a la quadrícula. La nostra quadrícula sempre té línies, que comencen per 1 i es relacionen amb el mode d’escriptura del document. Per tant, en anglès, la línia de columna 1 es troba a la part esquerra de la quadrícula i la línia de fila 1 a la part superior. En àrab, la línia 1 de la columna estaria a la dreta, ja que l'àrab s'escriu de dreta a esquerra.

- -

Podem situar les coses segons aquestes línies especificant la línia inicial i final. Ho fem utilitzant les propietats següents:

- - - -

Totes aquestes propietats poden tenir un número de línia com a valor. També podeu utilitzar les propietats abreujades:

- -

    {{cssxref ("grid-column")}}
-     {{cssxref ("grid-row")}}

- -

Aquests us permeten especificar les línies inicial i final alhora, separades per un /, un caràcter de barra inclinada cap endavant.

- -

Descarregueu aquest fitxer com a punt de partida o vegeu-lo en directe aquí. Ja té una quadrícula definida i article senzill. Podeu veure que la col·locació automàtica col·loca elements un a cada cel·la de la quadrícula que hem creat.

- -

En lloc d'això, col·locarem tots els elements del nostre lloc a la quadrícula, mitjançant les línies de la quadrícula. Afegiu les regles següents a la part inferior del vostre CSS:

- -
header {
-  grid-column: 1 / 3;
-  grid-row: 1;
-}
-
-article {
-  grid-column: 2;
-  grid-row: 2;
-}
-
-aside {
-  grid-column: 1;
-  grid-row: 2;
-}
-
-footer {
-  grid-column: 1 / 3;
-  grid-row: 3;
-}
- -
- -
- -

{{ EmbedLiveSample('Grid_6', '100%', 400) }}

- -
-

Nota: també podeu utilitzar el valor -1 per referir-vos a la columna o la línia final i comptar cap a l'interior des del final mitjançant valors negatius. Tanmateix, això només funciona per a la quadrícula explícita. El valor -1 no es referirà a la línia final de la quadrícula implícita.

-
- -

Posicionament amb grid-template-areas

- -

Una forma alternativa de col·locar elements a la quadrícula és fer servir la propietat {{cssxref ("grid-template-areas")}} i donar un nom als diversos elements del vostre disseny.

- -

Traieu el posicionament basat en línies de l'últim exemple (o torneu a descarregar el fitxer per tenir un punt de partida nou) i afegiu el CSS següent.

- -
.container {
-  display: grid;
-  grid-template-areas:
-      "header header"
-      "sidebar content"
-      "footer footer";
-  grid-template-columns: 1fr 3fr;
-  grid-gap: 20px;
-}
-
-header {
-  grid-area: header;
-}
-
-article {
-  grid-area: content;
-}
-
-aside {
-  grid-area: sidebar;
-}
-
-footer {
-  grid-area: footer;
-}
- -

Torneu a carregar la pàgina i veureu que els vostres articles s'han col·locat igual que abans, sense que hàgim d'utilitzar cap número de línia!

- -
- -
- -

{{ EmbedLiveSample('Grid_7', '100%', 400) }}

- -

Les regles per a les grid-template-areas són les següents:

- - - -

Podeu jugar amb el nostre disseny canviant el peu de pàgina per situar-se només a sota del contingut i la barra lateral, per exemple, per abastar fins a baix de tot. Aquesta és una manera molt agradable de descriure un disseny, ja que és obvi a partir del CSS exactament el que està passant.

- -

Un framework de graella amb CSS Grid

- -

Els "frameworks" de quadrícula tendeixen a basar-se al voltant de 12 o 16 quadrícules i, amb CSS Grid, no necessiteu cap eina de tercers que us proporcioni aquest framework: ja hi és, a l’especificació.

- -

Descarregueu el fitxer de punt de partida. Conté un contenidor amb una quadrícula de 12 columnes definida i el mateix marcatge que hem utilitzat en els dos exemples anteriors. Ara podem utilitzar la ubicació basada en línies per col·locar el nostre contingut a la quadrícula de 12 columnes.

- -
header {
-  grid-column: 1 / 13;
-  grid-row: 1;
-}
-
-article {
-  grid-column: 4 / 13;
-  grid-row: 2;
-}
-
-aside {
-  grid-column: 1 / 4;
-  grid-row: 2;
-}
-
-footer {
-  grid-column: 1 / 13;
-  grid-row: 3;
-}
- -
- -
- -

{{ EmbedLiveSample('Grid_8', '100%', 400) }}

- -

Si feu servir el Firefox Grid Inspector per superposar les línies de quadrícula del vostre disseny, podreu veure com funciona la nostra quadrícula de 12 columnes.

- -

-
- -

Posa a prova els teus coneixements

- -

Hem arribat al final de l'article. Recordes la informació més rellevant? Trobaràs més proves per comprovar si retens aquesta informació abans de seguir a Test your skills: Grids.

- -

Resum

- -

Després de la lectura d’aquest article, hauries de ser capaç d’entendre com funcionen els dissenys de pàgina web amb CSS Grid. Per aprofundir en l'especificació, llegeix les nostres guies sobre Disposició amb Grid, que trobaràs a continuació.

- -

Veieu també

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Assessment", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/disseny_css/index.html b/files/ca/learn/css/disseny_css/index.html deleted file mode 100644 index e74e5da0b9..0000000000 --- a/files/ca/learn/css/disseny_css/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Disseny CSS -slug: Learn/CSS/Disseny_CSS -tags: - - Beginner - - CSS - - Floating - - Grids - - Guide - - Landing - - Layout - - Learn - - Module - - Multiple column - - Positioning - - flexbox - - float -translation_of: Learn/CSS/CSS_layout ---- -
{{LearnSidebar}}
- -

En aquest punt, ja hem examinat els fonaments de CSS, com l'estil del text, i l'estil i la manipulació de les caixes en el que estroba dins el contingut. Ara és hora de veure com col·locar les caixes al lloc correcte en relació amb la finestra de visualització, entre elles. Hem cobert els requisits previs necessaris de manera que ara podem aprofundir en el disseny CSS, provant diferents paràmetres de visualització, mètodes tradicionals de disseny que inclouen flotants i posicionament, i noves eines de disseny modernas, com flexbox.

- -

Requisits previs

- -

Abans de començar aquest mòdul, ja hauríeu de:

- -
    -
  1. Estar familiaritzats amb els principis bàsics d' HTML, tal com es descriu en el mòdul Introducció a HTML.
    2. -
  2. Sentir-vos còmodes amb els fonaments CSS, tal com s'ha tractat a la Introducció a CSS.
    3. -
  3. Entendre com fer caixes d'estil.
    4. -
- -
-

Nota: Si esteu treballant en un ordinador/tauleta/altre dispositiu on no té la capacitat de crear els vostres propis fitxers, podeu provar (la majoria) d'exemples de codi, en un programa de codificació en línia com JSBin o Thimble.

-
- -

Guies

- -

Aquests articles proporcionaran instruccions sobre les eines i tècniques fonamentals de disseny, disponibles a CSS.

- -
-
Introducció al disseny CSS
-
Aquest article recapitularà algunes de les característiques de disseny de CSS que ja hem tocat en els mòduls anteriors, com els diferents valors de {{cssxref("display")}} - i introduïm alguns dels conceptes que cobrirem al llarg d'aquest mòdul.
-
Flotants
-
Originalment per a imatges flotants dins dels blocs de text, la propietat {{cssxref("float")}} s'ha convertit en una de les eines més utilitzades per crear diversos dissenys de columnes a les pàgines web. Aquest article ho explica tot.
-
Posicionament
-
El posicionament us permet treure elements del flux normal de disseny del document, i fer que es comportin de manera diferent, per exemple, asseguts un damunt de l'altre o quedant sempre al mateix lloc dins de la finestra de visualització del navegador. Aquest article explica els diferents valors de {{cssxref("position")}}, i com utilitzar-los.
-
Exemples pràctics de posicionament
-
Amb els conceptes bàsics de posicionament coberts en l'últim article, veurem, ara, com construir un parell d'exemples del món real per il·lustrar quin tipus de coses podeu fer amb el posicionament.
-
Flexbox
-
Una nova tecnologia, però amb suport, ara, bastant estès en tots els navegadors, Flexbox està començant a estar preparat per a un ús generalitzat. Flexbox proporciona eines que permeten crear ràpidament dissenys complexos i flexibles i característiques que històricament resulten difícils amb CSS. Aquest article explica tots els fonaments.
-
Graelles
-
Els sistemes de graella són una altra característica molt comuna que s'utilitza en els dissenys de CSS, que solen implementar-se mitjançant flotadors o altres característiques de disseny. Imagineu el disseny com un nombre establert de columnes (p. Ex. 4, 6 o 12) i, a continuació, ajusteu les columnes de contingut dins d'aquestes columnes imaginàries. En aquest article explorarem la idea bàsica sobre la creació d'un sistema de graella, mireu l'ús d'un sistema de graella confeccionat per un marc (framework) de graella i finalitzeu l'experimentació amb les Graelles CSS - una incipient nova funció de navegador fa que l'implementació de disseny de graella a la Web sigui molt més fàcil.
-
- -

Avaluacions

- -

Les següents avaluacions posaran a prova la vostra capacitat per dissenyar pàgines web amb CSS.

- -
-
Creació d'un disseny flexible multicolumna (TBD)
-
Aquesta avaluació provarà la vostra capacitat per crear un disseny estàndard de diverses columnes, amb algunes característiques interessants.
-
Creació d'un widget de control fix (TBD)
-
Aquesta avaluació desafia la vostra comprensió del posicionament, demanant-vos que creeu un widget de control de posició fix que permeti a l'usuari accedir als controls d'una aplicació web independentment d'on es desplaci.
-
diff --git a/files/ca/learn/css/disseny_css/introduccio_disseny_css/index.html b/files/ca/learn/css/disseny_css/introduccio_disseny_css/index.html deleted file mode 100644 index 88a924dc00..0000000000 --- a/files/ca/learn/css/disseny_css/introduccio_disseny_css/index.html +++ /dev/null @@ -1,700 +0,0 @@ ---- -title: Introducció al disseny CSS -slug: Learn/CSS/Disseny_CSS/Introduccio_disseny_CSS -tags: - - Article - - Beginner - - CSS - - Floats - - Grids - - Introduction - - Layout - - Learn - - Positioning - - Tables - - flexbox - - flow -translation_of: Learn/CSS/CSS_layout/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}
- -

Aquest article recapitula algunes de les característiques de disseny CSS que ja hem tocat en els mòduls anteriors, com els diferents valors de {{cssxref ("display")}}, i introdueix alguns dels conceptes que exposem al llarg d'aquest mòdul.

- - - - - - - - - - - - -
Prerequisits:Conceptes bàsics d'HTML (consulta la Introducció a HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS).
Objectiu:Adquirir una visió general de les tècniques de disseny de pàgines web amb CSS. Cada tècnica es pot aprendre amb més detall en tutorials posteriors.
- -

Les tècniques de disseny de pàgina web amb CSS ens permeten prendre els elements que hi ha en una pàgina web i controlar on estan posicionats en relació amb la seva posició predeterminada en el flux de disseny normal, els altres elements del voltant, l’element pare contenidor o la finestra de visualització / finestra principal. Les tècniques de disseny de pàgines que exposem amb més detall en aquest mòdul són:

- - - -

Cada tècnica té els seus usos, avantatges i inconvenients, i cap tècnica s'ha dissenyat per utilitzar-se aïllada. Entenent per a què s’ha dissenyat cada mètode estaràs en una bona posició per entendre quina és la millor disposició per a cada tasca.

- -

Flux normal

- -

El flux normal és la manera com el navegador estableix les pàgines HTML de manera predeterminada quan no es fa res per controlar el disseny de pàgina. Vegem-ne un exemple HTML ràpid:

- -
<p>I love my cat.</p>
-
-<ul>
-  <li>Buy cat food</li>
-  <li>Exercise</li>
-  <li>Cheer up friend</li>
-</ul>
-
-<p>The end!</p>
- -

Per defecte, el navegador mostra aquest codi de la manera següent:

- -

{{ EmbedLiveSample('Normal_flow', '100%', 200) }}

- -

Tingues en compte que aquí l'HTML es mostra en l'ordre exacte en què apareix en el codi d’origen, amb elements apilats l’un sobre l’altre: el primer paràgraf, seguit de la llista no ordenada, seguit del segon paràgraf.

- -

Per a molts dels elements de la pàgina el flux normal crea exactament la disposició que cal, però per dissenys més complexos et farà falta alterar aquest comportament per defecte fent ús d'alguna de les eines disponibles en CSS. Començar amb un document HTML ben estructurat és molt important, donat que així pots treballar amb com les coses es disposen per defecte, en comptes de barallar-t'hi.

- -

Les tècniques de disseny tendeixen a substituir aquest comportament predeterminat, utilitzant les tècniques següents:

- - - -

La propietat display

- -

Els mètodes principals per aconseguir un disseny de pàgina amb CSS són tots els valors de la propietat display (visualització). Aquesta propietat ens permet canviar la manera per defecte com es mostren les coses. Tot el que hi ha al flux normal té un valor de display, que s'utilitza com la forma per defecte en què es comporten els elements que hi estan configurats. Per exemple, el fet que els paràgrafs en català es mostrin un per sota de l’altre es deu al fet que s’estilen amb display: block. Si creeu un enllaç al voltant d'un text dins d'un paràgraf, aquest enllaç romandrà en línia amb la resta del text i no es dividirà en cap línia nova. Això es deu al fet que l'element {{htmlelement("a")}} és display: inline per defecte.

- -

Pots canviar aquest comportament de visualització per defecte. Per exemple, l'element {{htmlelement("li")}} és display: block per defecte, és a dir, que els elements de la llista es mostren l'un a sota de l'altre al nostre document en català. Si canviem el valor de display a inline, ara es mostraran un al costat de l’altre, com ho farien les paraules en una frase. El fet que puguis canviar el valor de display de qualsevol element significa que pots triar elements HTML pel seu significat semàntic, sense preocupar-te de com quedaran. La seva aparença és una cosa que es pot canviar.

- -

A més de poder canviar la presentació predeterminada, canviant un element de block a inline i viceversa, hi ha alguns mètodes de disseny més grans que comencen com amb un valor de display. Tanmateix, quan els feu servir, generalment haureu d'invocar propietats addicionals. Els dos valors més importants per als nostres propòsits a l’hora de parlar del disseny són display: flex i display: grid.

- -

Caixes flexibles (Flexbox)

- -

Flexbox és el nom breu del mòdul de disseny de caixa flexible, dissenyat per facilitar-nos la distribució de les coses en una dimensió, sigui com a fila o com a columna. Per utilitzar flexbox, apliqueu display: flex a l'element pare dels elements que vulgueu disposar; tots els seus fills directes es converteixen en ítems flexibles. Ho podem veure en un exemple senzill.

- -

L'etiquetatge HTML següent ens proporciona un element contenidor, amb una classe wrapper, dins del qual hi ha tres elements {{htmlelement("div")}}. Per defecte, es mostrarien com a elements de bloc, un a sota de l’altre, al nostre document.

- -

Tanmateix, si afegim display: flex al pare, els tres elements ara es disposen en columnes. Això es deu al fet que es converteixen en ítems flexibles (flex items) i es veuen afectats per alguns valors inicials que flexbox estableix al contenidor flex. Es mostren en una fila, perquè el valor inicial de {{cssxref("flex-direction")}} establert al seu pare és row. Tots semblen estirar-se fins a l’alçada de l’element més alt, perquè el valor inicial de la propietat {{cssxref("align-items")}} establert al seu pare és stretch. Això significa que els ítems s’estenen fins a l’alçada del contenidor flex, que en aquest cas està definida per l’element més alt. Tots els articles s’alineen a l’inici del contenidor, deixant qualsevol espai addicional al final de la fila.

- -
- - -
.wrapper {
-  display: flex;
-}
-
- -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Flex_1', '300', '200') }}

- -

A més de les propietats anteriors que es poden aplicar al contenidor flex, hi ha propietats que es poden aplicar als ítems flex. Aquestes propietats, entre altres coses, poden canviar la manera com es “flexionen” els ítems, cosa que els permet expandir-se i contraure’s per adaptar-se a l’espai disponible.

- -

Com a exemple senzill d'això, podem afegir la propietat {{cssxref ("flex")}} a tots els nostres elements fill, amb un valor d'1. Això farà que tots els ítems creixin i omplin el contenidor, en comptes de deixar espai al final. Si hi ha més espai, els elements s’ampliaran; si hi ha menys espai es tornaran més estrets. A més, si afegiu un altre element al marcatge, tots els elements es faran més petits per fer-hi espai; ajustaran la seva mida per ocupar la mateixa quantitat d’espai, sigui quin sigui.

- -
- - -
.wrapper {
-    display: flex;
-}
-
-.wrapper > div {
-    flex: 1;
-}
-
- -
<div class="wrapper">
-    <div class="box1">One</div>
-    <div class="box2">Two</div>
-    <div class="box3">Three</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Flex_2', '300', '200') }}

- -
-

Nota: Aquesta ha estat una molt breu introducció al que és possible amb Flexbox. Per obtenir més informació, consulteu el nostre article de Flexbox.

-
- -

Disposició en graella (Grid)

- -

Mentre que Flexbox està dissenyat per al disseny unidimensional, el disseny de quadrícula està pensat per a dues dimensions: alinear les coses en files i columnes.

- -

Una vegada més, podeu activar el disseny de quadrícula amb un valor específic de display - display: grid. L'exemple següent utilitza un marcatge similar a l'exemple de flex, amb un contenidor i alguns elements fills. A més d’utilitzar display: grid, també definim files i columnes al pare mitjançant les propietats {{cssxref("grid-template-rows")}} i {{cssxref("grid-template-columns")}}, respectivament. Hem definit tres columnes cadascuna d'1fr i dues files de 100px. No necessito posar cap regla sobre els elements infantils; es col·loquen automàticament a les cel·les que ha creat la nostra graella.

- -
- - -
.wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 100px 100px;
-    grid-gap: 10px;
-}
-
- -
<div class="wrapper">
-    <div class="box1">One</div>
-    <div class="box2">Two</div>
-    <div class="box3">Three</div>
-    <div class="box4">Four</div>
-    <div class="box5">Five</div>
-    <div class="box6">Six</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Grid_1', '300', '330') }}

- -

Un cop tingueu una graella, podeu col·locar-hi explícitament els elements, en lloc de confiar en el comportament de la ubicació automàtica que acabem de veure. Al segon exemple que teniu a continuació hem definit la mateixa graella, però aquesta vegada amb tres elements fills. Hem definit la línia inicial i final de cada element mitjançant les propietats {{cssxref("grid-column")}} i {{cssxref("grid-row")}}. Això fa que els elements abastin diverses pistes.

- -
- - -
.wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 100px 100px;
-    grid-gap: 10px;
-}
-
-.box1 {
-    grid-column: 2 / 4;
-    grid-row: 1;
-}
-
-.box2 {
-    grid-column: 1;
-    grid-row: 1 / 3;
-}
-
-.box3 {
-    grid-row: 2;
-    grid-column: 3;
-}
-
- -
<div class="wrapper">
-    <div class="box1">One</div>
-    <div class="box2">Two</div>
-    <div class="box3">Three</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Grid_2', '300', '330') }}

- -
-

Nota: Aquests dos exemples són només una petita part de la potència del disseny de graella; per obtenir més informació, consulteu el nostre article sobre Graelles (Grids).

-
- -

La resta d'aquesta guia cobreix altres mètodes de disseny, que són menys importants per a les principals estructures de disseny de la pàgina, però que poden ajudar-vos a realitzar tasques específiques. En comprendre la naturalesa de cada tasca de disseny, aviat trobareu que, quan mireu un component concret del vostre disseny, el tipus de disseny més adequat sovint serà clar.

- -

Elements flotants (Floats)

- -

Flotar un element canvia el comportament d’aquest element i dels elements de nivell de bloc que el segueixen en un flux normal. L'element es mou cap a l'esquerra o cap a la dreta i s'elimina del flux normal i el contingut circumdant flota al voltant de l'element flotat.

- -

La propietat {{cssxref("float")}} té quatre valors possibles:

- - - -

A l'exemple següent, flotem un <div> a l'esquerra i li donem un {{cssxref("margin")}}} per la dreta per apartar el text de l'element. Això ens dona l’efecte del text rodejant aquesta caixa i és la major part del que heu de saber sobre els elements flotants tal com s’utilitzen en el disseny web modern.

- -
- - -
<h1>Simple float example</h1>
-
-<div class="box">Float</div>
-
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-
- -
-.box {
-    float: left;
-    width: 150px;
-    height: 150px;
-    margin-right: 30px;
-}
-
-
- -

{{ EmbedLiveSample('Float_1', '100%', 600) }}

- -
-

Nota: Els floats s’expliquen completament a la nostra lliçó sobre les propietats float i clear. Abans de tècniques com Flexbox i Grid es feien servir floats com a mètode per crear dissenys de columnes. És possible que encara trobeu aquests mètodes al web; els tractarem a la lliçó sobre mètodes de disseny heretats.

-
- -

Tècniques de posicionament

- -

El posicionament us permet moure un element des d'on es col·locaria quan estigués en un flux normal a una altra ubicació. El posicionament no és un mètode per crear el disseny principal de la pàgina, sinó que es tracta més de gestionar i ajustar la posició d’elements específics de la pàgina.

- -

Tot i això, hi ha tècniques útils per a certs patrons de disseny que depenen de la propietat {{cssxref("position")}}. La comprensió del posicionament també ajuda a entendre el flux normal, i què significa moure un element fora del flux normal.

- -

Hi ha cinc tipus de posicionament principals, que hauries de conèixer:

- - - -

Un exemple senzill de posicionament

- -

Per familiaritzar-te amb aquestes tècniques de disseny de pàgina, el mostrem un parell d'exemples ràpids. Tots els nostres exemples tenen el mateix codi HTML, que és el següent:

- -
<h1>Positioning</h1>
-
-<p>I am a basic block level element.</p>
-<p class="positioned">I am a basic block level element.</p>
-<p>I am a basic block level element.</p>
- -

Apliquem a aquest codi HTML un estil predeterminat amb el codi CSS següent:

- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-  background: aqua;
-  border: 3px solid blue;
-  padding: 10px;
-  margin: 10px;
-}
-
-span {
-  background: red;
-  border: 1px solid black;
-}
- -

La sortida que dona és la següent:

- -

{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}

- -

Posicionament Relatiu (Relative positioning)

- -

El posicionament relatiu et permet desplaçar un element de la posició que tindria per defecte en flux normal. Això vol dir que pots assolir una tasca com ara moure una icona cap avall de manera que quedi alineada amb una etiqueta de text. Per fer-ho, podríem afegir la següent regla per afegir un posicionament relatiu:

- -
.positioned {
-  position: relative;
-  background: yellow;
-  top: 30px;
-  left: 30px;
-}
- -

Aquí hem donat al nostre paràgraf del mig un valor {{cssxref("position")}} de relative; això no fa res per si mateix, de manera que també afegim les propietats {{cssxref("top")}} i {{cssxref("left")}}, que serveixen per a moure l'element afectat cap avall i cap a la dreta; això podria semblar el contrari del que s'esperava, però cal pensar que l'element és empès des dels costats esquerre i superior, cosa que fa que es mogui cap a la dreta i avall.

- -

Si afegeixes aquest codi, es mostra el resultat següent:

- - - -

{{ EmbedLiveSample('Relative_positioning_example', '100%', 300) }}

- -

Posicionament absolut (Absolute)

- -

El posicionament absolut s’utilitza per eliminar completament un element del flux normal i col·locar-lo mitjançant desplaçaments des de les vores d’un bloc contenidor.

- -

Tornant al nostre exemple original no posicionat, podríem afegir la regla CSS següent per a implementar el posicionament absolut:

- -
.positioned {
-  position: absolute;
-  background: yellow;
-  top: 30px;
-  left: 30px;
-}
- -

Aquí hem donat al nostre paràgraf del mig un valor {{cssxref("position")}} d'absolute, i les mateixes propietats {{cssxref("top")}} i {{cssxref("left")}}, com abans. L'addició d'aquest codi, però, dona el resultat següent:

- - - -

{{ EmbedLiveSample('Absolute_positioning_example', '100%', 300) }}

- -

Això és molt diferent. L'element ha quedat totalment separat de la resta del disseny de la pàgina i s’hi ha col·locat a sobre en l’extrem superior. Els altres dos paràgrafs ara es disposen junts, com si el germà posicionat no existís. Les propietats {{cssxref("top")}} i {{cssxref("left")}} tenen un efecte diferent sobre elements amb posicionament absolut que sobre elements amb posicionament relatiu. En aquest cas, s'especifica la distància a la qual l'element s’ha de situar dels costats superior i esquerre de la pàgina. És possible canviar l'element pare que es converteix en aquest contenidor i ho veurem a la lliçó sobre posicionament.

- -

Posicionament fix (fixed positioning)

- -

El posicionament fix elimina el nostre element del flux de documents de la mateixa manera que el posicionament absolut. Tanmateix, en lloc d'aplicar els desplaçaments des del contenidor, s'apliquen des de la finestra gràfica. Com que l'element es manté fix en relació amb la finestra gràfica, podem crear efectes com un menú que es manté fix a mesura que la pàgina es desplaça per sota.

- -

Per a aquest exemple, el nostre HTML inclou tres paràgrafs de text, per tal que puguem fer que la pàgina es desplaci, i un quadre al qual donarem position: fixed.

- -
<h1>Fixed positioning</h1>
-
-<div class="positioned">Fixed</div>
-
-<p>Paragraph 1.</p>
-<p>Paragraph 2.</p>
-<p>Paragraph 3.</p>
-
- -
- - -
.positioned {
-    position: fixed;
-    top: 30px;
-    left: 30px;
-}
-
- -

{{ EmbedLiveSample('Fixed_1', '100%', 200) }}

- -

Posicionament enganxós (sticky positioning)

- -

El posicionament enganxós és el mètode de posicionament final que tenim a la nostra disposició. Combina el posicionament estàtic per defecte amb el posicionament fix. Quan un element té position: sticky, es desplaçarà en flux normal fins que arribi al desplaçament sobre la finestra de visualització del navegador que definit. En aquest moment es queda "enganxat" com si tingués position: fixed aplicat.

- -
- - -
.positioned {
-  position: sticky;
-  top: 30px;
-  left: 30px;
-}
-
- -

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

- -
-

Nota: per aprendre més sobre posicionament, aneu a l'article sobre posicionament.

-
- -

Taules CSS

- -

Les taules HTML són perfectes per a mostrar dades tabulades, però fa molts anys, fins i tot abans que el CSS bàsic fos compatible de manera fiable entre els navegadors, els desenvolupadors web solien utilitzar taules per als dissenys de pàgines web senceres; col·locaven els encapçalaments, els peus de pàgina, les diferents columnes, etc., en files i columnes d’una taula. Això va funcionar en el moment, però presenta molts problemes: els dissenys de taules no són flexibles, l’etiquetatge és feixuc, són difícils de depurar, i són semànticament erronis (els usuaris de lectors de pantalla, per exemple, tenen problemes per navegar en dissenys de pàgina web amb taules).

- -

La forma en què es mostra una taula en una pàgina web quan utilitzeu el marcatge de taula es deu a un conjunt de propietats CSS que defineixen el disseny de la taula. Aquestes propietats es poden utilitzar per disposar elements que no són taules, un ús que de vegades es descriu com "utilitzar taules CSS".

- -

L'exemple següent mostra un d'aquests usos; L'ús de taules CSS per al disseny s'hauria de considerar un mètode heretat en aquest moment, per a aquelles situacions en què tingueu navegadors molt antics sense compatibilitat amb Flexbox o Grid.

- -

Vegem-ne un exemple. Primer, un marcatge senzill que crea un formulari HTML. Cada element d'entrada té una etiqueta i també hem inclòs un text dins d'un paràgraf. Cada parell label/input està envoltat d'un element {{htmlelement("div")}}, amb finalitats de disseny.

- -
<form>
-  <p>First of all, tell us your name and age.</p>
-  <div>
-    <label for="fname">First name:</label>
-    <input type="text" id="fname">
-  </div>
-  <div>
-    <label for="lname">Last name:</label>
-    <input type="text" id="lname">
-  </div>
-  <div>
-    <label for="age">Age:</label>
-    <input type="text" id="age">
-  </div>
-</form>
- -

Ara afegim el CSS al nostre exemple. La major part del CSS és bastant comú, excepte els usos de la propietat {{cssxref("display")}}. A l’element {{htmlelement("form")}} i als elements {{htmlelement("div")}}, {{htmlelement("label")}} i {{htmlelement("input")}} se'ls hi ha dit que es mostrin com una taula, files de la taula i cel·les de la taula, respectivament; bàsicament actuaran com un marcatge de taula HTML que alinea les etiquetes de text i les entrades de manera predeterminada. Tot el que hem de fer és afegir una mica de mida, marges, etc. perquè tot es vegi una mica més agradable, i ja haurem acabat.

- -

Observa que s’ha assignat al paràgraf de descripció (caption) la declaració display: table-caption;, que fa que aquest paràgraf actuï com un títol de taula ({{htmlelement("caption")}}), i també caption-side: bottom;, que indica que el títol es posa a la part inferior de la taula amb finalitats d'estil, encara que va abans de les entrades de la taula en l’ordre del codi d’origen. Això permet una mica de flexibilitat.

- -
html {
-  font-family: sans-serif;
-}
-
-form {
-  display: table;
-  margin: 0 auto;
-}
-
-form div {
-  display: table-row;
-}
-
-form label, form input {
-  display: table-cell;
-  margin-bottom: 10px;
-}
-
-form label {
-  width: 200px;
-  padding-right: 5%;
-  text-align: right;
-}
-
-form input {
-  width: 300px;
-}
-
-form p {
-  display: table-caption;
-  caption-side: bottom;
-  width: 300px;
-  color: #999;
-  font-style: italic;
-}
- -

Això ens dona el resultat següent:

- -

{{ EmbedLiveSample('CSS_tables', '100%', '170') }}

- -

També pots veure aquest exemple en viu en el fitxer css-tables-example.html (i també consultar-ne el codi d’origen).

- -

Disseny multicolumna

- -

El mòdul de disseny de múltiples columnes ens proporciona una manera de distribuir contingut en columnes, de manera similar a com flueix el text en un diari. Tot i que la lectura de columnes cap amunt i cap avall és menys útil en un context web, ja que no voleu obligar els usuaris a desplaçar-se cap amunt i cap avall, la disposició del contingut en columnes pot ser una tècnica útil.

- -

Per convertir un bloc en un contenidor multicolumna, utilitzem la propietat {{cssxref("column-count")}}, que indica al navegador quantes columnes voldríem tenir o bé {{cssxref("column-width" )}}, que indica al navegador que ompli el contenidor amb tantes columnes d'almenys aquesta amplada.

- -

A l'exemple següent, comencem amb un bloc d'HTML dins d'un element <div> que conté una classe de container.

- -
<div class="container">
-    <h1>Multi-column layout</h1>
-
-    <p>Paragraph 1.</p>
-    <p>Paragraph 2.</p>
-
-</div>
- -

Utilitzem una column-width (amplada de columna) de 200 píxels en aquest contenidor, cosa que provoca que el navegador creï tantes columnes de 200 píxels com càpiguen al contenidor i, a continuació, comparteixi l’espai restant entre les columnes creades.

- -
- - -
    .container {
-        column-width: 200px;
-    }
-
- -

{{ EmbedLiveSample('Multicol_1', '100%', 200) }}

- -

Resum

- -

Aquest article ha proporcionat un breu resum de totes les tecnologies de disseny que has de conèixer. Continua llegint per a obtenir més informació sobre cadascuna d’aquestes tecnologies!

- -

{{NextMenu("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/disseny_css/posicionament/index.html b/files/ca/learn/css/disseny_css/posicionament/index.html deleted file mode 100644 index 213293ff4e..0000000000 --- a/files/ca/learn/css/disseny_css/posicionament/index.html +++ /dev/null @@ -1,467 +0,0 @@ ---- -title: Posicionament -slug: Learn/CSS/Disseny_CSS/Posicionament -tags: - - Article - - Beginner - - CSS - - CodingScripting - - Guide - - Layout - - Positioning - - absolute - - fixed - - relative -translation_of: Learn/CSS/CSS_layout/Positioning ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}
- -

El posicionament permet treure elements del flux normal de disseny del document, i fer que es comportin de manera diferent, per exemple, asseient-se un damunt de l'altre o mantenint-se sempre al mateix lloc dins de la finestra de visualització del navegador. Aquest article explica els diferents valors de {{cssxref("position")}}, i com utilitzar-los.

- - - - - - - - - - - - -
Requisits previs:Conceptes bàsics d'HTML (estudi Introducció a HTML), i una idea de com funciona CSS (estudi Introducció a CSS).
Objectiu:Aprendre com funciona el posicionament CSS.
- -

Flux del document

- -

El posicionament és un tema bastant complex, per tant, abans de submergir-nos en el codi, anem a revisar i ampliar una mica de teoria de disseny per donar-nos una idea de com funciona això.

- -

En primer lloc, les caixes d'elements individuals es defineixen tenint en compte el contingut dels elements, afegint-hi qualsevol farciment, vora i marge al voltant d'ells - és a dir, aquell model de caixa nou, que vam mirar abans. Per defecte, el contingut d'un element de nivell de bloc és del 100% de l'ample de l'element pare i tan alt com el seu contingut. Els elements en línia són tan alts  i tan amples com el seu contingut. No es pot definir l'ample o alçada en elements en línia - simplement s'assenten dins del contingut dels elements de nivell de bloc. Si es vol controlar la mida d'un element en línia d'aquesta manera, s'ha d'establir perquè es comporti com un element de nivell de bloc amb display: block;.

- -

Això explica els elements individuals, però què passa amb els elements que interactuen els uns amb els altres? El flux de disseny normal (esmentat en l'article de presentació de disseny) és el sistema mitjançant el qual es col·loquen els elements dins de la finestra de visualització del navegador. De manera predeterminada, els elements de nivell de bloc es distribueixen verticalment a la finestra de visualització: cadascun d'ells apareixerà en una nova línia,per sota d l'última i se separaran per qualsevol marge que s'estableixi en ells.

- -

Els elements en línia es comporten de manera diferent - no apareixen en noves línies; en canvi, s'assenten en la mateixa línia que els altres i amb qualsevol contingut de text adjacent (o embolicat), sempre que hi hagi espai perquè ho facin dins de l'amplada de l'element a nivell de bloc pare. Si no hi ha espai, el text desbordat o els elements es desplacen cap a una nova línia.

- -

Si dos elements adjacents tenen un marge establert i els dos marges es toquen, el més gran dels dos es queda i el més petit desapareix - això es diu col.lapsació del marge, i també ho hem conegut abans.

- -

Vegem un exemple senzill que expliqui tot això:

- -
<h1>Basic document flow</h1>
-
-<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
-
-<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
-
-<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
-
-<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-  background: aqua;
-  border: 3px solid blue;
-  padding: 10px;
-  margin: 10px;
-}
-
-span {
-  background: red;
-  border: 1px solid black;
-}
- -

{{ EmbedLiveSample('Document_flow', '100%', 500) }}

- -

Revisarem aquest exemple diverses vegades al llarg d'aquest article, ja que mostrarem els efectes de les diferents opcions de posicionament disponibles per a nosaltres.

- -

Ens agradaria que seguíssiu els exercicis en el vostre ordinador, si és possible - agafeu una còpia de 0_basic-flow.html del nostre repositori de Github (codi font aquí) i utilitzeu-lo com a punt de partida.

- -

Introducció al posicionament

- -

Tota la idea del posicionament és permetre'ns anul·lar el comportament bàsic del flux de documents descrit anteriorment, per produir efectes interessants. Què passa si voleu canviar lleugerament la posició d'algunes caixes dins d'un disseny des de la seva posició de flux de disseny per defecte, per donar-li un toc lleugerament peculiar i molest? El posicionament és la vostra eina. O si voleu crear un element d'interfície d'usuari que floti a la part superior d'altres parts de la pàgina i/o sempre es trobi al mateix lloc dins de la finestra del navegador, sense importar quant es desplaça la pàgina? El posicionament fa possible aquest treball de disseny.

- -

Hi ha una sèrie de diferents tipus de posicionament que podeu implementar en elements HTML. Per fer un tipus específic de posicionament actiu en un element, utilitzem la propietat {{cssxref("position")}}.

- -

Posicionament estàtic (Static)

- -

El posicionament estàtic és el valor predeterminat que cada element obté - significa "posar l'element en la seva posició normal en el flux del disseny del document - res especial per veure aquí".

- -

Per demostrar això i preparar el vostre exemple per a futures seccions, primer afegiu una class de positioned al segon {{htmlelement("p")}} en l'HTML:

- -
<p class="positioned"> ... </p>
- -

Ara afegiu la següent regla a la part inferior del vostre CSS:

- -
.positioned {
-   position: static;
-  background: yellow;
-}
- -

Si ara deseu i actualitzeu, no veureu cap diferència en absolut, excepte el color de fons actualitzat del segon paràgraf. Està bé - com hem dit abans, el posicionament estàtic és el comportament predeterminat!

- -
-

Nota: Podeu veure l'exemple en aquest moment en directe a 1_static-positioning.html (vegeu el codi font).

-
- -

Posicionament relatiu (Relative)

- -

El posicionament relatiu és el primer tipus de posició que veurem. Això és molt semblant al posicionament estàtic, tret que una vegada que l'element posicionat ha tingut el seu lloc en el flux de disseny normal, podeu modificar la seva posició final, incloent-hi la superposició d'altres elements a la pàgina. Seguiu i actualitzeu la declaració de posició del vostre codi:

- -
position: relative;
- -

Si deseu i actualitzeu en aquesta etapa, no veureu cap canvi en el resultat en absolut, així, com modifiqem la posició de l'element? Heu d'utilitzar les propietats {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} , Que explicarem en la següent secció.

- -

Introduir top, bottom, left i right

- -

{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} s'utilitzen juntament amb {{cssxref("position")}} per especificar exactament a on moure l'element posicionat. Per provar-ho, afegiu les següents declaracions a la regla .positioned al vostre CSS:

- -
top: 30px;
-left: 30px;
- -
-

Nota: Els valors d'aquestes propietats pot prendre totes les unitats que s'esperaria lògicament - píxels, mm, rems,%, etc.

-
- -

Si ara deseu i actualitzeu, obtindreu un resultat com aquest:

- - - -

{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}

- -

Genial, eh? D'acord, aixó es probablement el que no esperaves: per què s'ha mogut a la part inferior i la dreta si s'especificat a dalt i a l'esquerra? Pot sonar Il·lògic inicialment, però aquesta és la forma en què funciona el posicionament relatiu: cal pensar en una força invisible que empeny el costat de la caixa posicionada, movent-la en la direcció oposada. Així, per exemple, si especifiqueu un top: 30px;, una força empeny la part superior de la caixa, fent que es mogui cap avall en 30px.

- -
-

Nota: Podeu veure l'exemple en aquest moment en directe a 2_relative-positioning.html (vegeu el codi font).

-
- -

Posicionament absolut (Absolute)

- -

El posicionament absolut porta resultats molt diferents. Intenteu canviar la declaració de posició del vostre de la manera següent:

- -
position: absolute;
- -

Si ara deseu i actualitzeu, obtindreu un resultat com aquest:

- - - -

{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}

- -

En primer lloc, tingueu en compte que el buit on l'element posicionat hauria d'estar en el flux del document ja no hi és - el primer i el tercer element s'han tancat junts, com que ja no existeix!. Bé, en certa manera, això és cert. Un element absolutament posicionat ja no existeix en el flux de disseny normal del document. En lloc d'això, s'asseu a la seva pròpia capa separada de tota la resta. Això és molt útil - vol dir que podem crear funcions d'interfície d'usuari aïllades que no interfereixin amb la posició d'altres elements de la pàgina - per exemple, les caixes d'informació emergents i els menús de control, els panells de rollover, les funcions d'interfície d'usuari que es poden arrossegar i deixar anar a qualsevol lloc en la pàgina, i així successivament.

- -

En segon lloc, observeu que la posició de l'element ha canviat - això es deu al fet que {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} es comporten d'una manera diferent amb el posicionament absolut. En lloc d'especificar la direcció en què l'element s'ha de moure, especifiquen la distància que ha de tenir l'element en cada costat dels elements que contingui. Així que, en aquest cas, estem dient que l'element absolutament posicionat hauria de situar-se 30px des de la part superior del "element que conté" i 30px des de l'esquerra.

- -
-

Nota: Podeu utilitzar {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} per canviar la mida dels elements si és necessari. Intenteu establir top: 0; bottom: 0; left: 0; right: 0; and margin: 0; en els elements posicionats i veureu què passa! Torneu a posar-ho de nou després...

-
- -
-

Nota: Sí, els marges encara afecten els elements posicionats. Tanmateix, el col·lapse de marges no existeix.

-
- -
-

Nota: Podeu veure l'exemple en aquest moment en directe a 3_absolute-positioning.html (vegeu el codi font).

-
- -

Contextos de posicionament

- -

Quin element és el "element que conté" un element absolutament posicionat? Per defecte, és l'element {{htmlelement("html")}} - l'element posicionat està niat dins del {{htmlelement("body")}} en la font HTML, però en el disseny final, es troba a 30px de distància des de la part superior i esquerra de la vora de la pàgina, que és l'element {{htmlelement("html")}}. Això s'anomena més exactament com a context de posicionament de l'element.

- -

Podem canviar el context de posicionament - quin element posiciona l'element absolutament posicionat en relació a. Això es fa establint el posicionament en un dels altres avantpassats del element - un dels elements que està niat a l'interior (no es pot col·locar en relació amb un element que no està niat a l'interior). Per demostrar-ho, afegiu la següent declaració a la regla del cos:

- -
position: relative;
- -

Això hauria de donar el següent resultat:

- - - -

{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}

- -

L'element posicionat ara es troba en relació amb l'element {{htmlelement("body")}}.

- -
-

Nota: Podeu veure l'exemple en aquest moment en directe a 4_positioning-context.html (vegeu el codi font).

-
- -

Introducció a z-index

- -

Tot aquest posicionament absolut és una bona diversió, però hi ha una altra cosa que encara no hem considerat - quan els elements comencen a superposar-se, què determina que uns elements apareguin sobre quins altres elements? En l'exemple que hem vist fins ara, només tenim un element posicionat en el context de posicionament, i apareix a la part superior, ja que els elements posicionats guanyen elements no posicionats. Què passa quan tenim més d'un?

- -

Intenteu afegir el següent, al vostre CSS, perquè el primer paràgraf estigui absolutament posicionat també:

- -
p:nth-of-type(1) {
-  position: absolute;
-  background: lime;
-  top: 10px;
-  right: 30px;
-}
- -

En aquest punt, veureu el primer paràgraf de color verd, desplaçat del flux del document i colocat una mica per sobre d'on era originalment. També s'apil·la a sota del paràgraf original .positioned, on els dos es superposen. Això és degut a que el paràgraf .positioned és el segon paràgraf de l'ordre d'origen, i els elements posicionats més endavant en l'ordre d'origen guanyen sobre els elements posicionats anteriorment en l'ordre d'origen.

- -

Es pot canviar l'ordre d'apilament? Sí, podeu fer-ho, utilitzant la propietat {{cssxref("z-index")}}. "z-index" és una referència a l'eix z. Recordareu que en punts anteriors, en la font, parlàvem de la utilització en pàgines web de coordenades horitzontals (eixos x) i verticals (eixos-y) per tal de determinar el posicionament de coses com ara imatges de fons i desplaçaments d'ombra. (0,0) es troba a la part superior esquerra de la pàgina (o element), i els eixos x i y es desplaçan cap a la dreta i avall de la pàgina (per als idiomes d'esquerra a dreta, de totes maneres).

- -

Les pàgines web també tenen un eix z - una línia imaginària que s'estén des de la superfície de la pantalla, cap a la nostra cara (o el que vulgueu tenir davant de la pantalla). Els valors de {{cssxref("z-index")}} afecten on els elements posicionats se situen en aquest eix; els valors positius els mouen més amunt per la pila, i els valors negatius els mouen més avall a la pila. De manera predeterminada, els elements posicionats tenen un z-index d'auto, que és efectivament 0.

- -

Per canviar l'ordre d'apilament, proveu d'afegir la següent declaració a la vostra regla p:nth-of-type(1):

- -
z-index: 1;
- -

Ara hauríeu de veure l'exemple acabat:

- - - -

{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}

- -

Tingueu en compte que z-index només accepta valors d'índex, sense unitat; No podeu especificar que desitgeu que un element tingui 23 píxels a dalt de l'eix Z - no funciona així. Els valors més alts van per sobre dels valors inferiors, i depèn de vosaltres quins valors utilitzar. L'ús de 2 i 3 donaria el mateix efecte que 300 i 40000.

- -

Tingueu en compte que aquí només hem tractat un únic context de posicionament. Si tinguéssiu dos conjunts separats d'elements posicionats a la mateixa pàgina, i volguéssiu que es  superposessin i que l'ordre d'apilament funcionés d'una manera específica, les coses es complicarien. Afortunadament, molt poques vegades trobareu tal complexitat amb z-index. Si voleu llegir amb molt més detall sobre com funciona exactament z-index, consulteu la Web Standards Curriculum z-index writeup. En aquest article us hem proporcionat tot el que necessiteu saber en aquesta etapa del vostre aprenentatge.

- -
-

Note: Podeu veure l'exemple en aquest moment en directe a 5_z-index.html (vegeu el codi font).

-
- -

Posicionament Fixa (Fixed)

- -

Hi ha un altre tipus de posicionament a cobrir - fixed. Això funciona exactament igual que el posicionament absolut, amb una diferència clau - mentre que el posicionament absolut fixa un element en el lloc en relació amb l'element {{htmlelement("html")}} o seu més proper avantpassat posicionat, el posicionament fix fixa un element en el lloc en relació a la finestra de visualització del navegador. Això vol dir que podeu crear elements útils de la interfície d'usuari que es fixen en el lloc, com ara menús de navegació persistents.

- -

Fem un exemple senzill per mostrar el que volem dir. Abans de res, elimineu les regles existents p:nth-of-type(1) i .positioned del vostre CSS.

- -

Ara, actualitzeu la regla del cos per eliminar la declaració position: relative; i afegiu una alçada fixa, com aixó:

- -
body {
-  width: 500px;
-  height: 1400px;
-  margin: 0 auto;
-}
- -

Ara donarem a l'element {{htmlelement("h1")}} position: fixed;, i aconseguirem que s'assegui en el centre superior de la finestra de visualització. Afegiu la regla següent al vostre CSS:

- -
h1 {
-  position: fixed;
-  top: 0;
-  width: 500px;
-  margin: 0 auto;
-  background: white;
-  padding: 10px;
-}
- -

El top: 0; és necesari per fer que s'adhereixi a la part superior de la pantalla; Donem a l'encapçalament el mateix ample que la columna de contingut i utilitzarem el fidel antic margin: 0 auto; com a truc per centrar-ho. A continuació, li donem un fons blanc i algun farcit, de manera que el contingut no estigui visible per sota d'ell.

- -

Si deseu i actualitzeu ara, veureu un petit efecte divertit pel qual l'encapçalament es manté fix, i el contingut apareix en desplaçar-se cap amunt i desaparèixer per sota d'ell. Però podríem millorar més, això - de moment, alguns dels continguts començan per sota de l'encapçalament, perquè el encapçalament posicionat ja no apareix en el flux del document, de manera que la resta del contingut es mou cap amunt. Necessitem moure-ho tot cap avall una mica; podem fer-ho establint un marge superior al primer paràgraf. Afegiu-ho ara:

- -
p:nth-of-type(1) {
-  margin-top: 60px;
-}
- -

Ara hauríeu de veure l'exemple acabat:

- - - -

{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}

- -
-

Nota: Podeu veure l'exemple en aquest moment en directe a 6_fixed-positioning.html (vegeu el codi font).

-
- -

Experimental: posició adherent (sticky)

- -

Hi ha un nou valor de posicionament disponible anomenat position: sticky, el suport del mateix no està molt estès. Aquest és bàsicament un híbrid entre una posició relativa i una fixa, que permet que un element posicionat actuï com si estigués relativament posicionat fins que es desplaci a un determinat llindar (per ex., 10px des de la part superior de la finestra de visualització), i després es torna fix.  Vegeu la nostra entrada de referéncia de position: sticky per més detalls i un exemple.

- -

Resum

- -

Estic segur que us heu divertir jugant amb el posicionament bàsic - és una de les eines essencials que està darrera en le creació de complexos dissenys CSS i funcions d'interfície d'usuari. Tenint en compte això, en el proper article tindrem encara més diversió amb el posicionament, allà anirem un pas més enllà i començarem a construir algunes coses útils del món real amb ell.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}

diff --git a/files/ca/learn/css/disseny_css/suport_en_navegadors_antics/index.html b/files/ca/learn/css/disseny_css/suport_en_navegadors_antics/index.html deleted file mode 100644 index 5a689b6437..0000000000 --- a/files/ca/learn/css/disseny_css/suport_en_navegadors_antics/index.html +++ /dev/null @@ -1,237 +0,0 @@ ---- -title: Suport en navegadors antics -slug: Learn/CSS/Disseny_CSS/Suport_en_navegadors_antics -translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

- -

En aquest mòdul et recomanem que utilitzis els mètodes Flexbox i Grid com a eines principals per als teus dissenys. Tot i això, hi haurà visitants del teu lloc web que utilitzin navegadors més antics o navegadors que no admetin els mètodes que has utilitzat. Això sempre serà així a la xarxa: a mesura que es desenvolupen funcions noves, els diferents navegadors prioritzen coses diferents. Aquest article explica com utilitzar tècniques web modernes sense perjudicar els usuaris que empren una tecnologia més antiga.

- - - - - - - - - - - - -
Prerequisits:Els conceptes bàsics d'HTML (consulta la Introducció a l'HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS i Aplicar estil a les caixes).
Objectiu:Entendre com proporcionar assistència per als dissenys en navegadors antics que potser no són compatibles amb les funcions que vols utilitzar.
- -

El panorama de compatibilitat dels navegadors per al teu lloc web?

- -

Cada lloc web és diferent en termes de públic objectiu. Abans de decidir l’enfocament que cal adoptar, esbrina el nombre de visitants que accedeixen al teu lloc web amb navegadors més antics. Això és senzill si ja tens un lloc web que simplement modifiques o reemplaces, perquè probablement tinguis analítiques que t'indiquin la tecnologia que utilitzen les persones que hi accedeixen. Si no tens analítiques o es tracta un lloc web totalment nou, hi ha llocs com ara Statcounter que poden proporcionar estadístiques filtrades segons la ubicació.

- -

També has de considerar el tipus de dispositius i la manera com la gent utilitza el teu lloc web; per exemple, potser esperes un nombre de dispositius mòbils superior a la mitjana. Sempre s’ha de tenir en compte l’accessibilitat i les persones que utilitzen tecnologia d’assistència, però per a alguns llocs pot ser encara més crític. Segons experiència pròpia, els desenvolupadors sovint es preocupen massa per l’experiència de l’1% d’usuaris en una versió antiga d’Internet Explorer, i no consideren del tot el nombre molt més gran d'usuaris que tenen necessitats d’accessibilitat especials.

- -

La compatibilitat de les funcions que empres

- -

Un cop coneixes els navegadors que accedeixen al teu lloc web, pots valorar qualsevol tecnologia que vulguis utilitzar segons la compatibilitat que presenten i la facilitat amb què pots proporcionar una alternativa als visitants que no tenen aquesta tecnologia disponible. Intentem facilitar-te aquesta experiència proporcionant informació de compatibilitat dels navegadors en cadascuna de les pàgines que detallen una propietat CSS. Per exemple, consulta la pàgina de {{cssxref("grid-template-columns")}}. Al final d'aquesta pàgina hi ha una taula que mostra els navegadors principals juntament amb la versió que va començar a admetre aquesta propietat.

- -

- -

Una altra manera més popular d'esbrinar què és compatible amb una funció és el lloc web Can I Use. Aquest lloc web enumera la majoria de funcions de la plataforma web amb informació sobre l'estat de compatibilitat del navegador. Pots veure les estadístiques d’ús per ubicació, fet que resulta útil si treballes en un lloc que té usuaris d'una àrea del món determinada. Fins i tot pots enllaçar el teu compte de Google Analytics per a obtenir anàlisis basades en les teves dades d’usuari.

- -

Entendre la tecnologia que tenen els teus usuaris i les compatibilitats de les funcions que potser vulguis fer servir et proporciona una bona base per a prendre totes les decisions i saber quina és la millor manera de donar suport a tots els teus usuaris.

- -

Compatibilitat no significa «veure's igual»

- -

És possible que un lloc web no es vegi de la mateixa manera a tots els navegadors, perquè alguns dels teus usuaris accediran al lloc web des d’un dispositiu mòbil i d’altres des de l'ordinador de taula. De la mateixa manera, alguns dels teus usuaris tindran una versió antiga del navegador, i d'altres una de més nova. És possible que alguns dels teus usuaris n’escoltin el contingut amb un lector de pantalla o hagin fet zoom a la pàgina per a poder-la llegir. Donar suport a tothom significa servir una versió del contingut dissenyada estratègicament, de manera que es vegi genial en els navegadors moderns, però que encara puguin utilitzar a un nivell bàsic els usuaris de navegadors més antics.

- -

Un nivell bàsic de compatibilitat prové d’estructurar bé el contingut perquè el flux normal de la pàgina tingui sentit. Pot ser que un usuari amb un telèfon mòbil amb funcions molt limitades no obtingui gran part del teu CSS, però el contingut fluirà de manera que faciliti la lectura. Per tant, un document HTML ben estructurat hauria de ser sempre el punt de partida. El teu contingut té sentit si suprimeixes el full d’estil?

- -

Una opció és deixar aquesta visió senzilla del lloc web com a alternativa per a les persones que utilitzen navegadors molt antics o limitats. Si tens un nombre reduït de persones que visiten el lloc amb aquests navegadors, és possible que no tingui sentit comercial dedicar temps a intentar donar-los una experiència similar a la gent que utilitza navegadors moderns. Seria millor dedicar temps a coses que facin més accessible el lloc web, perquè així dones servei a molts més usuaris. Hi ha un punt intermedi entre una pàgina HTML simple i tots aquests recursos, i el CSS ha permès que la creació d'aquestes alternatives sigui bastant senzilla.

- -

La creació d’alternatives d'emergència amb CSS

- -

Les especificacions CSS contenen informació que explica què fa el navegador quan s'apliquen dos mètodes de disseny al mateix element. Això vol dir que hi ha una definició per a què passa si un element flotant, per exemple, també és un element de graella que utilitza disseny de graella CSS. Combina aquesta informació amb el fet que els navegadors ignoren el CSS que no entenen, i tens una manera de crear dissenys senzills amb les tècniques heretades que ja hem explicat, que després se sobreescriuen amb el teu disseny de graella en els navegadors moderns que l’entenen.

- -

En l'exemple següent hem especificat que tres elements de flotació <div> es mostrin en fila. Qualsevol navegador que no admeti el disseny de graella CSS veurà la fila de caixes com un disseny amb el mètode de flotació. Un element de flotació que es converteix en un element de graella perd el comportament de flotació, i això significa que si convertim l'embolcall en un contenidor de graella, els elements de flotació es converteixen en elements de graella. Si el navegador admet el disseny de graella, mostrarà la pàgina en forma de graella; si no l’admet, ignorarà les propietats relacionades amb el disseny de graella i utilitzarà el disseny de flotació.

- -
-
* {box-sizing: border-box;}
-
-.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  max-width: 400px;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
-.item {
-  float: left;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-}
-
- -
<div class="wrapper">
-  <div class="item">Primer element</div>
-  <div class="item">Segon element</div>
-  <div class="item">Tercer element</div>
-</div>
-
- -

{{ EmbedLiveSample('Example1', '100%', '200') }}

-
- -
-

Nota: La propietat {{cssxref("clear")}} tampoc té cap efecte un cop l'element es converteix en un element de graella, de manera que pots tenir un composició amb un peu de pàgina esborrat, que es convertirà en un disseny de graella.

-
- -

Mètodes de les solucions alternatives

- -

Hi ha diversos mètodes de disseny que es poden utilitzar de manera similar a aquest exemple de flotació. Pots triar el que tingui més sentit per al patró de disseny que has de crear.

- -
-
Float i clear
-
Com s'ha mostrat abans, les propietats float i clear deixen d'afectar el disseny si els elements que passen a ser de flotació o els esborrats es converteixen en elements flexibles o de graella.
-
display: inline-block
-
Aquest mètode es pot utilitzar per a crear dissenys de columnes si un element té display: inline-block, però si després es converteix en un element de disseny de tipus flexible o de graella, el comportament inline-block s'ignora.
-
display: table
-
El mètode per a crear taules CSS que es descriu en la introducció d'aquests articles es pot utilitzar com a mètode de solució alternativa. Els elements que estiguin configurats en la taula CSS perdran aquest comportament si es converteixen en elements Flexbox o Grid. Però és important destacar que les caixes sense nom que s’han creat per a corregir l'estructura de la taula, no es creen.
-
Disseny en diverses columnes
-
Pots utilitzar multi-col com a solució alternativa en certs dissenys; si el teu contenidor té definida alguna propietat column-* i es converteix en un contenidor amb comportament de graella, s'anul·la el comportament en columnes.
-
Flexbox com a solució alternativa a la graella
-
Flexbox té una compatibilitat de navegador més gran que Grid perquè ha rebut el suport d’Internet Explorer 10 i 11, tot i que et recomanem que comprovis la informació que trobaràs més endavant en aquest article sobre la compatibilitat força irregular i confusa de Flexbox en navegadors més antics. Si converteixes un contenidor flexible en un contenidor de graella, s'ignorarà qualsevol propietat flex aplicada als descendents.
-
- -

Observa que si fas servir el CSS d'aquesta manera pots proporcionar una experiència d'usuari decent per ajustar moltes compaginacions en navegadors antics. Afegim un disseny més senzill basat en tècniques més antigues i amb bona compatibilitat, i després utilitzem el CSS més recent per a crear el disseny que veurà més del 90% del públic. Hi ha casos, però, en què el codi alternatiu haurà d’incloure alguna cosa que els navegadors nous també interpretaran. Un bon exemple d’això és si afegim amplades percentuals als nostres elements de flotació per aconseguir que les columnes s’assemblin més a la visualització de graella i s’estirin per omplir el contenidor.

- -

En el disseny de flotació, el percentatge es calcula a partir del contenidor: el 33,333% és un terç de l'amplada del contenidor. Tanmateix, a la graella es calcula que el 33,333% es calcula a partir de l’àrea de la graella en què es troba l’element, de manera que es converteix en un terç de la mida que volem un cop introduït el disseny de graella.

- -
-
* {box-sizing: border-box;}
-
-.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  max-width: 400px;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
-.item {
-  float: left;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-  width: 33.333%;
-}
-
- -
<div class="wrapper">
-  <div class="item">Primer element</div>
-  <div class="item">Segon element</div>
-  <div class="item">Tercer element</div>
-</div>
-
- -

{{ EmbedLiveSample('Example2', '100%', '200') }}

-
- -

Per resoldre aquest problema, hem de tenir una manera de detectar si la graella és compatible i, per tant, si anul·larà l'amplada. El CSS té una solució.

- -

Consultar les propietats

- -

Consultar les propietats et permet provar si un navegador admet alguna funció CSS en concret. Això vol dir que pots escriure algun CSS per a navegadors que no admetin una característica determinada, i a continuació comprovar si el navegador és compatible i introduir el teu disseny.

- -

Si afegim una consulta de propietats en l’exemple anterior, podem utilitzar-la per a configurar les amplades dels nostres articles de manera automàtica (auto) si sabem que hi ha compatibilitat amb el disseny de graella.

- -
-
* {box-sizing: border-box;}
-
-.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  max-width: 400px;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
-.item {
-  float: left;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-  width: 33.333%;
-}
-
-@supports (display: grid) {
-  .item {
-      width: auto;
-  }
-}
-
- -
<div class="wrapper">
-  <div class="item">Primer element</div>
-  <div class="item">Segon element</div>
-  <div class="item">Tercer element</div>
-</div>
-
- -

{{ EmbedLiveSample('Example3', '100%', '200') }}

-
- -

La compatibilitat per a la consulta de propietats és molt bona en tots els navegadors moderns, però cal tenir en compte que són els navegadors que no admeten la graella CSS els que tampoc no admeten la consulta de propietats. Això significa que per a aquells navegadors funcionarà un enfocament com el que es detalla més amunt. El que fem és escriure primer el nostre CSS anterior, sense fer cap consulta de propietats. Els navegadors que no admeten la graella i no admeten la consulta de propietats faran servir la informació de disseny que poden comprendre i ignoraran completament la resta. Els navegadors que admeten la consulta de propietats també admeten la graella, i per tant executaran el codi de graella i el codi de la consulta de propietats.

- -

L'especificació per a la consulta de propietats també inclou la possibilitat de comprovar si un navegador no admet una propietat; això només és útil si el navegador admet consultes de propietats. En el futur tindrà sentit un enfocament que comprovi la falta de compatibilitats, perquè ja no existiran els navegadors que no disposen de compatibilitats per a la consulta. Ara, però, utilitza l’enfocament de fer servir el CSS anterior i sobreescriure'l per a obtenir la millor compatibilitat.

- -

Les versions anteriors de Flexbox

- -

En versions anteriors dels navegadors, pots trobar versions anteriors de l'especificació Flexbox. En el moment d’escriure això, es tracta principalment d’un problema amb Internet Explorer 10, que utilitza el prefix -ms- per a Flexbox. Això també significa que hi ha articles i tutorials obsolets; aquesta guia útil t'ajuda a comprovar el que busques, i també pot ajudar-te si necessites compatibilitat Flexbox en navegadors molt antics.

- -

La versió prefixada de graella de l’Internet Explorer 10 i 11

- -

L'especificació de graella CSS es va prototipar inicialment en Internet Explorer 10; això vol dir que, tot i que IE10 i IE11 no disposen de compatibilitat de graella moderna, sí que tenen una versió de disseny de graella molt útil, tot i que diferent de l’especificació moderna que documentem en aquest lloc. Les implementacions d’IE10 i 11 tenen el prefix -ms-, que significa que les pots utilitzar per a aquests navegadors i que s'ignoraran en els navegadors que no formin part de Microsoft. Tanmateix, Edge encara entén la sintaxi antiga, així que tingues cura que tot es sobreescrigui de manera segura al teu CSS de graella moderna.

- -

La guia per a la Millora progressiva del disseny de graella et pot ajudar a comprendre la versió de la graella d’Internet Explorer, i hem inclòs alguns enllaços útils addicionals al final d'aquest article. Tanmateix, a menys que tinguis un nombre molt elevat de visitants en versions d’Internet Explorer més antigues, potser és millor centrar-te en la creació d’una alternativa que funcioni per a tots els navegadors no compatibles.

- -

Proves amb navegadors antics

- -

Atès que la majoria de navegadors admeten Flexbox i la graella, pot ser raonablement difícil fer proves amb navegadors més antics. Una de les maneres és utilitzar una eina de prova en línia com Sauce Labs, tal i com es detalla en el mòdul de comprovació de compatibilitat entre navegadors.

- -

També pots descarregar i instal·lar màquines virtuals i executar versions anteriors de navegadors en un entorn contingut en el teu ordinador. Tenir accés a versions anteriors d’Internet Explorer és especialment útil, i amb aquest propòsit Microsoft ha posat a disposició dels usuaris una varietat de màquines virtuals de descàrrega gratuïta. Estan disponibles per als sistemes operatius Mac, Windows i Linux, i per tant són una bona manera de fer proves en navegadors Windows antics i moderns, encara que no utilitzis un ordinador amb sistema operatiu de Windows.

- -

Resum

- -

Ara tens el coneixement per utilitzar tècniques de confiança com ara Grid i Flexbox, crear solucions alternatives per a navegadors més antics i utilitzar qualsevol tècnica nova que pugui aparèixer en el futur.

- -

Consulta també

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

- -

En aquest mòdul

- - diff --git "a/files/ca/learn/css/estilitzar_text/composici\303\263_p\303\240gina_inici/index.html" "b/files/ca/learn/css/estilitzar_text/composici\303\263_p\303\240gina_inici/index.html" deleted file mode 100644 index 2619be67e7..0000000000 --- "a/files/ca/learn/css/estilitzar_text/composici\303\263_p\303\240gina_inici/index.html" +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Composició d'una pàgina d'inici de l'escola comunitaria -slug: Learn/CSS/Estilitzar_text/Composició_pàgina_inici -tags: - - Assessment - - Beginner - - CSS - - CodingScripting - - Link - - Styling text - - font - - list - - web font -translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
- -

En aquesta avaluació, comprovarem la comprensió de totes les tècniques d'estil de text que hem cobert al llarg d'aquest mòdul, que us permetrà personalitzar el text de la pàgina d'inici d'una escola comunitària. Podríeu tindra una mica de diversió durant el camí.

- - - - - - - - - - - - -
Requisits previs:Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.
Objectiu:Provar la comprensió de les tècniques d'estil de text CSS.
- -

Punt de partida

- -

Per començar aquesta avaluació, heu de:

- - - -
-

Nota: Com a alternativa, podeu utilitzar un lloc com JSBin o Thimble per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia i utilitzar aquest URL per indicar la imatge de fons. Si l'editor en línia que esteu utilitzant no té cap panell CSS separat, no dubteu a posar-lo en un element <style> a la capçalera del document.

-
- -

Resum del projecte

- -

Us hem proporcionat un codi HTML sense format per a la pàgina d'inici d'una universitat comunitària imaginària, a més d'alguns estils CSS de la pàgina en un disseny de dues columnes, proporcionant un estil rudimentari. Heu d'escriure els vostres afegits CSS a sota del comentari a la part inferior del fitxer CSS, per assegurar-vos que sigui fàcil marcar les parts que heu realitzat. No us preocupeu si alguns dels selectors són repetitius; en aquest cas us deixarem.

- -

Fonts:

- - - -

Estil de text general :

- - - -

Enllaços:

- - - -

Llistes:

- - - -

Menú de navegació

- - - -

Consells i suggeriments

- - - -

Exemple

- -

La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:

- -

- -

Avaluació

- -

Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema en el fil de conversa en l'àrea d'aprenentatge, o en el canal IRC #mdn en Mozilla IRC. Intenteu primer l'exercici - no es guanya res fent trampes!

- -

{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

diff --git "a/files/ca/learn/css/estilitzar_text/estilitzar_enlla\303\247os/index.html" "b/files/ca/learn/css/estilitzar_text/estilitzar_enlla\303\247os/index.html" deleted file mode 100644 index 448a53289d..0000000000 --- "a/files/ca/learn/css/estilitzar_text/estilitzar_enlla\303\247os/index.html" +++ /dev/null @@ -1,424 +0,0 @@ ---- -title: Aplicar estils a enllaços -slug: Learn/CSS/Estilitzar_text/Estilitzar_enllaços -translation_of: Learn/CSS/Styling_text/Styling_links ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
- -

Quan s’aplica estil a enllaços és important entendre com fer ús de les pseudoclasses per a donar estil als estats de l’enllaç d’una manera efectiva, i com donar estil als enllaços per a utilitzar-los en diverses interfícies d’usuari característiques comunes, com ara menús de navegació i pestanyes. En aquest article tractarem tots aquests temes.

- - - - - - - - - - - - -
Requisits previs:Coneixements bàsics d'informàtica, fonaments d'HTML (consulta la Introducció a l’HTML), fonaments de CSS (consulta la Introducció al CSS), fonaments d’aplicació d’estil i tipus de lletra als textos amb CSS.
Objectiu:Aprendre a dissenyar els estats d'un enllaç i a fer servir enllaços de manera efectiva en interfícies d'usuari característiques comunes, com ara els menús de navegació.
- -

Un cop d’ull a alguns enllaços

- -

En la secció Creació d’hipervincles hem vist com has d’implementar els enllaços en el teu codi HTML d'acord amb les bones pràctiques. En aquest article aprofundirem en aquest coneixement i et mostrarem les bones pràctiques que has de tenir en compte per a aplicar estil als enllaços.

- -

Els estats d'un enllaç

- -

El primer que has d'entendre és el concepte d'estats d'un enllaç; els enllaços poden tenir diversos estats, i se’ls pot aplicar estil fent servir diverses pseudoclasses:

- - - -

Estils predeterminats

- -

L’exemple següent il·lustra com es comporta un enllaç de manera predeterminada (el CSS simplement amplia i centra el text perquè destaqui més).

- -
<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>
-
- -
p {
-  font-size: 2rem;
-  text-align: center;
-}
- -

{{ EmbedLiveSample('Estils_predeterminats', '100%', 120) }}

- -
-

Nota: Tots els enllaços d'aquesta pàgina són falsos — s'ha posat un # en comptes d'un URL real. Això és perquè si incloïssim enllaços reals, fer-hi clic trencaria els exemples (acabaries amb un error, o una pàgina càrregada en l'exemple incrustat de la què no podries tornar.). # simplement enllaça a la pàgina actual.

-
- -

A mesura que exploris els estils predeterminats t’adonaràs d'algunes coses:

- - - -

Curiosament, aquests estils predeterminats són gairebé idèntics que els dels primers dies dels navegadors a mitjan anys 90. Això és perquè els usuaris coneixen aquest comportament i l’esperen; si els enllaços estiguessin dissenyats de manera diferent, molta gent es confondria. Això no vol dir en absolut que no puguis aplicar estil als enllaços, només que no t’has d'allunyar del comportament que se n’espera. Com a mínim hauries de complir el següent:

- - - -

Els estils predeterminats es poden desactivar/modificar amb les propietats CSS següents:

- - - -
-

Nota: No està limitat només a les propietats anteriors per al disseny dels enllaços; pots utilitzar qualsevol propietat que vulguis. Només procura no esbojarrar-te!

-
- -

Aplicar estil a enllaços

- -

Ara que hem examinat amb una mica de detall els estats per defecte dels enllaços, vegem un conjunt típic d'estils d'enllaç.

- -

Per començar, escriurem un conjunt de regles buides:

- -
a {
-
-}
-
-
-a:link {
-
-}
-
-a:visited {
-
-}
-
-a:focus {
-
-}
-
-a:hover {
-
-}
-
-a:active {
-
-}
- -

Aquest ordre és important perquè els estils d'enllaç es construeixen els uns sobre els altres, per exemple, els estils de la primera regla s'aplicaran a tots els subsegüents, i quan s'activa un enllaç, també s'hi passa per sobre. Si els posem en l'ordre equivocat, les coses no funcionaran correctament. Per recordar l'ordre, pots provar d'usar un mnemotècnic com LoVe Fears HAte.

- -

Ara afegim una mica més d'informació per a obtenir aplicar-hi els estils adequats:

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-size: 1.2rem;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: #265301;
-}
-
-a:visited {
-  color: #437A16;
-}
-
-a:focus {
-  border-bottom: 1px solid;
-  background: #BAE498;
-}
-
-a:hover {
-  border-bottom: 1px solid;
-  background: #CDFEAA;
-}
-
-a:active {
-  background: #265301;
-  color: #CDFEAA;
-}
- -

També et proporcionem un exemple d'HTML al qual aplicar el CSS:

- -
<p>There are several browsers available, such as <a href="https://www.mozilla.org/en-US/firefox/">Mozilla
-Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
-<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p>
- -

Si ho posem tot junt, obtenim aquest resultat:

- -

{{ EmbedLiveSample('Aplicar_estil_a_enllaços', '100%', 150) }}

- -

Què hem fet aquí? Sens dubte, això es diferent de l'estil predeterminat, però encara proporciona una experiència prou familiar perquè els usuaris sàpiguen què passa:

- - - -

Aprenentatge actiu: Fes el teu propi disseny d’enllaç

- -

En aquesta sessió d'aprenentatge actiu, et proposem que aprenguis el nostre conjunt de regles buides i hi afegeixis les teves declaracions pròpies perquè els teus enllaços llueixin fantàstics! Utilitza la imaginació, deixa't anar! Segur que pots trobar alguna cosa tan funcional com el nostre exemple, i més fresca!

- -

Si t’equivoques, sempre pots tornar a començar amb el botó Reinicia. Si t’encalles, prem el botó Mostra la solució per a inserir l'exemple mostrat a dalt.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- -

Icones en els enllaços

- -

Una pràctica comuna és incloure icones en els enllaços per a proporcionar més d'un indicador quant al tipus de contingut al qual apunta l'enllaç. Vegem-ne un exemple molt senzill, que afegeix una icona als enllaços externs (enllaços que apunten cap a altres llocs web). Aquesta icona normalment té l’aspecte d’una petita fletxa que apunta cap enfora d'una caixa: per a aquest exemple, utilitzarem aquest fantàstic exemple de icons8.com.

- -

Vegem alguns HTML i CSS, que ens donarà l'efecte que volem. En primer lloc, alguns simple HTML a l'estil:

- -
<p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
-look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
-out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>
- -

A continuació, el CSS:

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: blue;
-}
-
-a:visited {
-  color: purple;
-}
-
-a:focus, a:hover {
-  border-bottom: 1px solid;
-}
-
-a:active {
-  color: red;
-}
-
-a[href*="http"] {
-  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
-  background-size: 16px 16px;
-  padding-right: 19px;
-}
- -

{{ EmbedLiveSample('Icones_en_els_enllaços', '100%', 150) }}

- -

Què passa aquí, doncs? Ens saltarem la major part del CSS, perquè és la mateixa informació que ja has vist abans. Tanmateix, l'última regla és interessant perquè inserim una imatge de fons personalitzada en els enllaços externs d'una manera similar a com hem tractat les vinyetes personalitzades dels elements de llista de l'article anterior, però fem servir la propietat abreujada {{cssxref("background")}}, en comptes de les propietats individuals. Establim la ruta a la imatge que volem inserir i especifiquem no-repeat perquè només se’n vegi una còpia, i a continuació especifiquem la posició com al 100% a la dreta del contingut de text i a 0 píxels de l’extrem superior.

- -

També fem servir {{cssxref("background-size")}} per a especificar la mida amb què volem que es mostri la imatge de fons; és útil tenir una icona més gran i canviar-ne la mida per a propòsits de disseny de webs adaptatius. Tanmateix, això només funciona amb IE 9 i posteriors, de manera que si has de donar suport a aquests navegadors antics, només has de canviar la mida de la imatge i inserir-la tal qual.

- -

Finalment, establim una mica de {{cssxref("padding-right")}} als enllaços perquè la imatge de fons tingui espai i no es superposi amb el text.

- -

Per acabar, com etiquetem els enllaços externs? Bé, si escrius els teus enllaços HTML correctament, només has d'utilitzar URL absoluts en el codi d’etiquetatge dels enllaços externs; per enllaçar a altres parts del teu lloc web propi és més eficient utilitzar enllaços relatius. Per tant, el text «http» només hauria d'aparèixer en enllaços externs i pots etiquetar-los amb un selector d'atributs: a[href*="http"] selecciona elements {{htmlelement("a")}}, però només si tenen un atribut {{htmlattrxref("href","a")}} amb un valor que conté «http» en algun lloc.

- -

Això és tot — torna a visitar la secció d'aprenentatge actiu anterior i prova aquesta tècnica nova.

- -
-

Nota: No et preocupis si encara no tens prou familiaritat amb els fons i el disseny web adaptatiu perquè s’expliquen en altres articles.

-
- -

Enllaços amb estil de botó

- -

Les eines que has explorat fins ara en aquest article també es poden utilitzar d'altres maneres. Per exemple, els estats com el flotant (hover) es poden utilitzar per a dissenyar molts elements diferents, no només enllaços; pot ser que vulguis dissenyar estats flotants (hover) per a paràgrafs, elements de llista o altres elements.

- -

A més, és habitual aplicar estil als enllaços perquè semblin i es comportin com botons en determinades circumstàncies — el menú de navegació d’un lloc web s’acostuma a marcar com una llista que conté enllaços, i es pot configurar fàcilment perquè sembli un conjunt de botons o pestanyes de control que proporcionen a l'usuari accés a les altres parts del lloc web. Expliquem com es fa.

- -

Primer, una mica d’HTML:

- -
<ul>
-  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
-</ul>
- -

I ara, el nostre CSS:

- -
body,html {
-  margin: 0;
-  font-family: sans-serif;
-}
-
-ul {
-  padding: 0;
-  width: 100%;
-}
-
-li {
-  display: inline;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  display: inline-block;
-  width: 19.5%;
-  margin-right: 0.625%;
-  text-align: center;
-  line-height: 3;
-  color: black;
-}
-
-li:last-child a {
-  margin-right: 0;
-}
-
-a:link, a:visited, a:focus {
-  background: yellow;
-}
-
-a:hover {
-  background: orange;
-}
-
-a:active {
-  background: red;
-  color: white;
-}
- -

Això ens dona el resultat següent:

- -

{{ EmbedLiveSample('Enllaços_amb_estil_de_botó', '100%', 100) }}

- -

Expliquem què passa aquí, i ens centrem en les parts més interessants:

- - - -
-

Nota: És possible que hagis observat que en l’HTML hem col·locat tots els elements de llista en la mateixa línia; fem això perquè els espais / les línies entre els elements de línia de bloc creen espais a la pàgina, com els espais que hi ha entre les paraules, i aquests espais trencarien el disseny de menú de navegació horitzontal. De manera que hem eliminat els espais. Pots trobar més informació sobre aquest problema (i les solucions) a Fighting the space between inline block elements.

-
- -

Resum

- -

Esperem que aquest article t’hagi proporcionat tot el que has de saber sobre els enllaços, per ara. L'article final del nostre mòdul de text «Aplicació d’estils» explica com pots utilitzar tipus de lletra personalitzats en els teus llocs web o tipus de lletra per a web, com es coneixen més sovint.

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

diff --git a/files/ca/learn/css/estilitzar_text/fonts_web/index.html b/files/ca/learn/css/estilitzar_text/fonts_web/index.html deleted file mode 100644 index b4d1e8ecfd..0000000000 --- a/files/ca/learn/css/estilitzar_text/fonts_web/index.html +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: Fonts Web -slug: Learn/CSS/Estilitzar_text/Fonts_Web -tags: - - '@font-face' - - Article - - Beginner - - CSS - - Fonts - - Guide - - Learn - - font-family - - web fonts -translation_of: Learn/CSS/Styling_text/Web_fonts ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
- -

En el primer article del mòdul hem explorat les característiques bàsiques de CSS que hi ha disponibles per a aplicar estil a la lletra i el text. En aquest article anem més lluny i explorem els tipus de lletra per a web amb detall, que permeten descarregar tipus de lletra personalitzats junt amb la teva pàgina web i et proporciona més varietat i personalització en l’aplicació d’estil als textos.

- - - - - - - - - - - - -
Requisits previs:Coneixements bàsics d'informàtica, fonaments d'HTML (consulta la Introducció a l’HTML), fonaments de CSS (consulta la Introducció al CSS), fonaments d’aplicació d’estil a tipus de lletra i textos.
Objectiu:Aprendre com aplicar tipus de lletra per a web a una pàgina web utilitzant un servei de tercers o escrivint el teu codi propi.
- -

Recapitulació sobre famílies de tipus de lletra

- -

Com hem vist en l’article Fonaments d’aplicació d’estil a la lletra i els textos, pots controlar les fonts que fas servir per al teu HTML amb la propietat {{cssxref("font-family")}}. Aquesta propietat pren un o més noms de famílies de tipus de lletra i el navegador recorre la llista fins que troba un tipus de lletra que estigui disponible en el sistema en què s'executa:

- -
p {
-  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
-}
- -

Aquest sistema funciona bé, però tradicionalment les opcions de tipus de lletra per al desenvolupament web han estat limitades. Només hi ha un grapat de tipus de lletra per a les que pots garantir la disponibilitat en tots els sistemes habituals, els anomenats tipus de lletra segurs per al web (web-safe fonts). Pots especificar la llista dels tipus de lletra preferents, seguits dels tipus de lletra alternatius segurs per al web, seguits dels tipus de lletra del sistema per defecte, però això afegeix una sobrecàrrega en termes de proves per a assegurar-te que els teus dissenys de pàgina presenten un aspecte correcte amb cada tipus de lletra, etc.

- -

Tipografies web

- -

Però hi ha una alternativa, que funciona molt bé, ja des de la versió 6 d'IE. Les tipografies web són una característica CSS que et permet especificar els fitxers de tipus de lletra que vols que es descarreguin juntament amb el teu lloc web quan s’hi accedeix, i això fa que qualsevol navegador que admet tipografies web pot disposar exactament dels tipus de lletra que especifiques. Increïble! La sintaxi necessària presenta aquest aspecte:

- -

En primer lloc, hi ha un bloc de codi {{cssxref("@font-face")}} al començament del CSS, que especifica els fitxers de tipus de lletra que vols que es descarreguin:

- -
@font-face {
-  font-family: "myFont";
-  src: url("myFont.ttf");
-}
- -

A continuació pots aplicar el nom de la família del tipus de lletra personalitzada que has especificat en @font-face a qualsevol cosa que vulguis, de la manera habitual:

- -
html {
-  font-family: "Bitstream Vera Serif Bold", serif;
-}
- -

La sintaxi es comença a complicar una mica. A continuació hi entrem amb detall.

- -

Hi ha dues coses importants que cal tenir en compte sobre els tipus de lletra segurs per al web:

- -
    -
  1. Els navegadors admeten diversos formats de tipus de lletra, de manera que necessites diversos formats de tipus de lletra per a atènyer una compatibilitat de navegador decent. Per exemple, la majoria dels navegadors més moderns admeten WOFF / WOFF2 (Web Open Font Format, versions 1 i 2), el format més eficient per a tot, però les versions anteriors d'IE només admeten tipus de lletra EOT (Embedded Open Type), i és possible que hagis d'incloure una versió de tipus de lletra SVG per tenir compatibilitat amb versions anteriors dels navegadors iPhone i Android. A continuació et mostrarem com generar el codi necessari.
    2. -
  2. Normalment els tipus de lletra no són d’ús lliure. Cal pagar per a fer-los servir o assumir unes condicions de llicència, com ara acreditar el creador del tipus de lletra en el codi (o en el teu lloc web). No hauries de robar els tipus de lletra ni utilitzar-los sense donar-ne el crèdit adequat.
    3. -
- -
-

Nota: Els tipus de lletra web com a tecnologia són compatibles amb Internet Explorer des de la versió 4!

-
- -

Aprenentatge actiu: Un exemple de tipografia web

- -

Tenint en compte això, construïm un exemple bàsic de tipografia web des de zero. És difícil mostrar-ho a partir d’un exemple en viu, de manera que, en lloc d'això, seguirem els passos detallats en les seccions següents, per a tenir una idea del procés.

- -

Has d'utilitzar els fitxers web-font-start.html i web-font-start.css com a punt de partida per a afegir el codi (consulta també el codi de l’exemple en viu). Fes també una còpia d'aquests fitxers en un directori nou al teu ordinador. En el fitxer web-font-start.css hi ha una mica de CSS per tractar el disseny bàsic i la tipografia de l'exemple.

- -

Buscar tipus de lletra

- -

Per a aquest exemple, utilitzarem dos tipografies web, un per als títols d’encapçalament i un per al text del cos (body). Per començar, hem de trobar els fitxers que contenen els tipus de lletra. Els tipus de lletra es creen en estudis de disseny i s'emmagatzemen en diferents formats de fitxer. En general, hi ha tres tipus de llocs web en què pots obtenir tipus de lletra:

- - - -

Busquem ara alguns tipus de lletra! Ves a Font Squirrel i tria dos tipus de lletra, un que et resulti interessant i agradable per als títols (ppotser una bona tipografia tipus "Display" o "Slab Serif"), i un altre una mica menys cridaner i que resulti més llegible, per als paràgrafs. Quan hagis trobat cada tipus, prem el botó de descàrrega i desa el fitxer en el mateix directori que hi ha els fitxers HTML i CSS que has desat abans. No importa si són en format TTF (True Type Fonts) o OTF (Open Type Fonts).

- -

En cada cas, descomprimeix el paquet amb els tipus de lletra (les tipografies web s’acostumen a distribuir en fitxers ZIP que contenen els fitxers dels tipus de lletra i la informació de la llicència). Pots trobar diversos fitxers de tipus de lletra en el paquet —alguns tipus de lletra es distribueixen com una família, amb diverses variants disponibles, per exemple, fina, seminegreta, negreta, cursiva, cursiva fina, etc. Per a aquest exemple, només cal que et preocupis d'un únic fitxer de tipus de lletra per cada elecció.

- -
-

Nota: en la columna de la dreta de la secció «Busca tipus de lletra», pots fer clic en les diverses etiquetes, i classificacions per filtrar les opcions que es mostren.

-
- -

Generació del codi necessari

- -

Ara cal generar el codi necessari (i els formats de tipus de lletra). Per cada tipografia, segueix aquests passos:

- -
    -
  1. Assegura’t que compleixes tots els requisits de llicència si vols fer servir això en un projecte comercial o en el web.
    2. -
  2. Ves al Webfont Generator de Font Squirrel.
    3. -
  3. Carrega els dos fitxers de tipus de lletra amb el botó Upload Fonts.
    4. -
  4. Marca la casella de verificació amb el text «Sí, els tipus de lletra que carrego són legalment aptes per a la inclusió en el web».
    5. -
  5. Fes clic a Download your kit.
    6. -
- -

Un cop el generador ha acabat de processar, has d'obtenir un fitxer ZIP, descarregar-lo i desar-lo al mateix directori que els teus HTML i CSS.

- -

Implementar el codi a la teva demo

- -

En aquest punt, has de descomprimir el paquet de fitxers de tipus de lletra segurs per al web que acabes de generar. Dins del directori descomprimit, hi haurà tres elements útils:

- - - -

Per a implementar aquests tipus de lletra en el teu exemple de demostració, segueix aquests passos:

- -
    -
  1. Canvia el nom del directori descomprimit per un nom que sigui senzill i fàcil de recordar, com ara fonts.
    2. -
  2. Obre el fitxer stylesheet.css i copia-hi els blocs @font-face que conté en el teu fitxer web-font-start.css; has de posar-los a dalt de tot, abans de qualsevol bloc de CSS, perquè els tipus de lletra s’han d’importar abans de poder-los utilitzar en el teu lloc web.
    3. -
  3. Cadascuna de les funcions url() apunta a un fitxer de tipus de lletra que volem importar al nostre CSS; afegeix fonts/ al començament de cada ruta (o adapta-ho si cal) per a assegurar-te que les rutes d'accés als fitxers són correctes.
    4. -
  4. Ara pots utilitzar aquests tipus de lletra en les llistes d’arxius de tipus de lletra, igual que qualsevol tipus de lletra segur per al web o tipus de lletra predeterminat del sistema. Per exemple: - 
    font-family: 'zantrokeregular', serif;
    -
    5. -
- -

Has d'acabar amb una pàgina de demostració amb alguns tipus de lletra agradables implementats. Atès que els diferents tipus de lletra es creen amb mides diferents, és possible que hagis d'ajustar la mida, l'espaiat, etc., per a ordenar-ne l'aspecte.

- -

- -
-

Nota: Si tens problemes perquè funcioni, no dubtis de comparar la teva versió amb els nostres fitxers acabats; consulta web-font-finished.html i web-font-finished.css (executa l'exemple acabat en directe).

-
- -

Usar un servei de tipografies en línia

- -

Els serveis de tipus de lletra en línia normalment emmagatzemen i serveixen tipus de lletra per tu, de manera que no t’has de preocupar d’escriure el codi @font-face, i generalment només cal que insereixis una o dues línies de codi al teu lloc web perquè tot funcioni. Alguns exemples són: Typekit i Cloud.typography. La majoria d'aquests serveis estan basats en subscripcions, amb la notable excepció de Google Fonts, un útil servei gratuït, especialment per a fer proves ràpides i demostracions d'escriptura.

- -

La majoria d'aquests serveis són fàcils d'utilitzar, de manera que no hi entrarem amb molt de detall. Vegem ràpidament les fonts de Google, perquè puguis fer-te’n la idea. De nou, fes còpies de web-font-start.html i web-font-start.css com a punt de partida.

- -
    -
  1. Ves a Google Fonts.
    2. -
  2. Utilitza els filtres de la banda esquerra per visualitzar els tipus de lletra que vols triar i escull un parell de tipus de lletra.
    3. -
  3. Per a seleccionar un tipus de lletra, prem el botó Add to Collection que hi ha al costat.
    4. -
  4. Quan hagis escollit els tipus de lletra, prem el botó Use que hi ha a la part inferior de la pàgina.
    5. -
  5. A la pantalla resultant, primer has de copiar la línia de codi que es mostra a la secció 3 i enganxar-la al final de tot del teu fitxer HTML. Posa-la per sobre de l'element {{htmlelement("link")}} perquè el tipus de lletra s'importi abans que el teu CSS l’hagi d’utilitzar.
    6. -
  6. A continuació, has de copiar les declaracions que hi ha en la secció 4 al teu CSS, segons correspongui, per a aplicar els tipus de lletra personalitzats al teu codi HTML.
    7. -
- -
-

Nota: Pots trobar una versió completa a google-font.html i google-font.css, si et cal contrastar el teu treball amb el nostre (consulta-ho en directe).

-
- -

@font-face amb més detall

- -

Explorem la sintaxi @font-face que genera Font Squirrel. Aquest és l’aspecte que presenta un dels blocs:

- -
@font-face {
-  font-family: 'ciclefina';
-  src: url('fonts/cicle_fina-webfont.eot');
-  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
-         url('fonts/cicle_fina-webfont.woff') format('woff'),
-         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
-         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
- -

Això s'anomena «sintaxi a prova de bales @font-face» des d'una publicació de Paul Irish dels inicis, quan @font-face va començar a ser popular (Bulletproof @font-face Syntax). Passem a veure què fa:

- - - -
-

Nota: També pots especificar cada valor {{cssxref("font-variant")}} i {{cssxref("font-stretch")}} per als teus tipus de lletra segurs per al web. En els navegadors més nous també pots especificar un valor {{cssxref("unicode-range")}}, que és una gamma de caràcters específica que vols utilitzar a banda del tipus de lletra segur per al web; en els navegadors compatibles amb aquesta propietat, només es descarregaran els caràcters especificats, per a estalviar descàrregues innecessàries. Creating Custom Font Stacks with Unicode-Range, de Drew McLellan, t’ofereix unes idees útils sobre com fer-ne ús.

-
- -

Resum

- -

Ara que has treballat els nostres articles sobre els fonaments d’aplicació d'estil al text, és hora de posar a prova el que has après amb la nostra avaluació per al mòdul, Composició tipogràfica d’una pàgina d’inici per a un lloc web d’una escola de la comunitat.

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

diff --git a/files/ca/learn/css/estilitzar_text/index.html b/files/ca/learn/css/estilitzar_text/index.html deleted file mode 100644 index c815d83297..0000000000 --- a/files/ca/learn/css/estilitzar_text/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Estilitzar text -slug: Learn/CSS/Estilitzar_text -tags: - - Beginner - - CSS - - CodingScripting - - Fonts - - Landing - - Links - - Module - - Text - - font - - letter - - line - - lists - - shadow - - web fonts -translation_of: Learn/CSS/Styling_text ---- -
{{LearnSidebar}}
- -

Amb els aspectes bàsics del llenguatge CSS coberts, el següent tema CSS, per a què us concentreu, és l'estil del text - una de les coses més habituals que fareu amb CSS. Aquí observem els fonaments d'estil de text, incloent la configuració de fonts, negreta, cursiva, espaiat entre línies i lletres, ombres i altres funcions de text. Completem el mòdul examinant l'aplicació de fonts personalitzades a la vostra pàgina i llistes d'estil i enllaços.

- -

Requisits previs

- -

Abans de començar aquest mòdul, ja hauríeu de tenir una familiaritat bàsica amb l'HTML, tal com s'ha explicat en el mòdul Introducció a HTML i estar còmodes amb els fonaments CSS, tal com s'ha explicat en Introducció a CSS.

- -
-

Nota: Si esteu treballant en un ordinador/tauleta/altre dispositiu on no té la capacitat de crear els vostres propis fitxers, podeu provar (la majoria) els exemples de codi en un programa de codificació en línia com JSBin o Thimble.

-
- -

Guies

- -

Aquest mòdul conté els següents articles, que us ensenyaran tot l'essencial de l'estil del contingut de text HTML.

- -
-
Text fonamental i estil de font
-
En aquest article, es detallen tots els conceptes bàsics d'estil de text/font, incloent la configuració del pes de la font, família i estil, abreviatura de font, alineació del text i altres efectes, i espaiat entre línies i lletres.
-
Estilitzar llistes
-
Les llistes es comporten com qualsevol altre text en la seva major part, però hi ha algunes propietats CSS específiques de les llistes que necessiteu saber i algunes de les millors pràctiques a tenir en compte. Aquest article ho explica tot.
-
Estilitzar enllaços
-
En dissenyar enllaços, és important entendre com fer ús de pseudo-classes per crear estils de vincles de manera efectiva i com dissenyar vincles per utilitzar-los en característiques d'interfície variades comunes, com a menús de navegació i pestanyes. Veurem tots aquests temes en aquest article.
-
Fonts Web
-
Aquí explorarem detalladament els tipus de fonts web, que us permeten descarregar fonts personalitzades juntament amb la vostra pàgina web, per permetre un estil de text més variat i personalitzat.
-
- -

Avaluacions

- -

Les següents avaluacions posaran a prova la vostra comprensió de les tècniques d'estil de text cobertes en les guies anteriors.

- -
-
Composició d'una pàgina web d'una escola comunitaria
-
En aquesta avaluació, provarem la vostra comprensió sobre l'estil de text, que us permetrà personalitzar el text de la pàgina d'inici d'una escola comunitària.
-
diff --git a/files/ca/learn/css/estilitzar_text/llistes_estil/index.html b/files/ca/learn/css/estilitzar_text/llistes_estil/index.html deleted file mode 100644 index 6caa6e0e24..0000000000 --- a/files/ca/learn/css/estilitzar_text/llistes_estil/index.html +++ /dev/null @@ -1,382 +0,0 @@ ---- -title: Estils de llistes -slug: Learn/CSS/Estilitzar_text/Llistes_estil -tags: - - Article - - Beginner - - CSS - - Guide - - Styling - - Text - - bullets - - lists -translation_of: Learn/CSS/Styling_text/Styling_lists ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
- -

Les llistes es comporten com qualsevol altre text en la seva major part, però hi ha algunes propietats CSS específiques de les llistes que has de conèixer i algunes bones pràctiques que has de tenir en compte. Aquest article ho explica tot.

- - - - - - - - - - - - -
Requisits previs:Coneixements bàsics d'informàtica, els fonaments d'HTML (estudi Introducció a HTML ), fonaments CSS (estudi Introducció a CSS), fonaments d’aplicació d’estil i tipus de lletra a textos amb CSS.
Objectiu:Familiaritzar-se amb les bones pràctiques i propietats relacionades amb l’aplicació d'estil a les llistes .
- -

Un exemple senzill de llista

- -

Per començar, observa un exemple senzill de llista. Al llarg d'aquest article, veurem llistes no ordenades, ordenades i de descripció: totes tenen característiques d'estil similars, i algunes que són particulars per al tipus de llista concret. Tens l'exemple sense estil disponible a GitHub (consulta també el codi d’origen).

- -

El codi HTML del nostre exemple de llista té aquest aspecte:

- -
<h2>Shopping (unordered) list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<ul>
-  <li>Humous</li>
-  <li>Pitta</li>
-  <li>Green salad</li>
-  <li>Halloumi</li>
-</ul>
-
-<h2>Recipe (ordered) list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<ol>
-  <li>Toast pitta, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
-
-<h2>Ingredient description list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<dl>
-  <dt>Humous</dt>
-  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
-  <dt>Pitta</dt>
-  <dd>A soft, slightly leavened flatbread.</dd>
-  <dt>Halloumi</dt>
-  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
-  <dt>Green salad</dt>
-  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
-</dl>
- -

Si ara vas a l'exemple en directe i investigues els elements de la llista amb les eines de desenvolupador del navegador, t’adonaràs que hi ha un parell d'estils per defecte:

- - - -

Tractament dels espais en llistes

- -

Quan fas llistes d'estil, has d'ajustar-ne els estils perquè mantinguin el mateix espai vertical que els elements que l'envolten (com ara paràgrafs i imatges, que de vegades s’anomena ritme vertical), i el mateix espaiat horitzontal que la resta (observa l'exemple d'estil acabat a GitHub, i també el codi d’origen que hi trobaràs).

- -

El CSS que s’utilitza per a aplicar l'estil al text i l'espaiat és el següent:

- -
/* General styles */
-
-html {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 10px;
-}
-
-h2 {
-  font-size: 2rem;
-}
-
-ul,ol,dl,p {
-  font-size: 1.5rem;
-}
-
-li, p {
-  line-height: 1.5;
-}
-
-/* Description list styles */
-
-
-dd, dt {
-  line-height: 1.5;
-}
-
-dt {
-  font-weight: bold;
-}
-
-dd {
-  margin-bottom: 1.5rem;
-}
- - - -

Estils específics de llista

- -

Hem examinat l'espaiat general de les llistes, ara explorarem algunes propietats específiques de la llista. Per començar, hi ha tres propietats que has de conèixer, que es poden establir en els elements {{htmlelement("ul")}} o {{htmlelement("ol")}}:

- - - -

Estils de vinyeta

- -

Com s'ha comentat, la propietat {{cssxref("list-style-type")}} permet establir quin tipus de vinyeta s'usa per als punts de vinyeta. En el nostre exemple, hem establert que la llista ordenada utilitzi números romans en majúscules, amb:

- -
ol {
-  list-style-type: upper-roman;
-}
- -

Això ens dona l’aspecte següent:

- -

Una llista ordenada amb vinyetes que apareixex fora del text de l'element de llista.

- -

Podeu trobar moltes més opcions consultant la pàgina de referència {{cssxref("list-style-type")}}.

- -

Posició de la vinyeta

- -

La propietat {{cssxref("list-style-position")}} estableix si les vinyetes apareixen dins dels elements de llista, o a fora, abans de l'inici de cada element. El valor predeterminat és outside (fora), que fa que les vinyetes se situïn fora dels elements de llista, tal com hem vist.

- -

Si estableixes el valor inside (dins), les vinyetes se situen dins de les línies:

- -
ol {
-  list-style-type: upper-roman;
-  list-style-position: inside;
-}
- -

Una llista ordenada amb vinyetes que apareixex dins del text de l'element de llista.

- -

Ús d'una imatge de vinyeta personalitzada

- -

La propietat {{cssxref("list-style-image")}} et permet fer servir una imatge personalitzada per a la vinyeta. La sintaxi és bastant senzilla:

- -
ul {
-  list-style-image: url(star.svg);
-}
- -

Tanmateix, aquesta propietat és una mica limitada en termes de control de la posició, la mida, etc., de les vinyetes. És millor utilitzar la família de propietats {{cssxref("background")}}, que aprendràs amb més detall en el mòdul de Aplicar estil a les caixes. De moment, aquí en tens un tast!

- -

En el nostre exemple acabat, hem aplicat estil a la llista no ordenada d’aquesta manera (a sobre del que ja has vist abans):

- -
ul {
-  padding-left: 2rem;
-}
-
-ul li {
-  padding-left: 2rem;
-  list-style-type: none;
-  background-image: url(star.svg);
-  background-position: 0 0;
-  background-size: 1.6rem 1.6rem;
-  background-repeat: no-repeat;
-}
- -

Aquí hem fet el següent:

- - - -

Això ens dona el resultat següent:

- -

Una llista no ordenada amb vinyetes en forma de petites estrelles.

- -

La propietat abreujada list-style

- -

Les tres propietats anteriors esmentades es poden configurar amb una única propietat abreujada, {{cssxref("list-style")}}. Per exemple, el CSS següent:

- -
ul {
-  list-style-type: square;
-  list-style-image: url(example.png);
-  list-style-position: inside;
-}
- -

Podria reemplaçar-se per això:

- -
ul {
-  list-style: square url(example.png) inside;
-}
- -

Els valors es poden incloure en qualsevol ordre, i pots utilitzar-ne un, dos o els tres (els valors predeterminats que s’utilitzen per a les propietats que no s'inclouen són disc, none i outside). Si s'especifica un tipus i una imatge, el tipus s'utilitza com a alternativa si la imatge no es carrega per alguna raó.

- -

El control de la numeració de les llistes

- -

De vegades pot ser que vulguis numerar de manera diferent una llista ordenada, per exemple, que comenci a partir d'un número diferent de 1, o bé que compti enrere, o que compti en passos de més d'1. L'HTML i el CSS disposen d’algunes eines que et poden ajudar amb això.

- -

start

- -

L'atribut {{htmlattrxref("start", "ol")}} permet iniciar el recompte de la llista a partir d'un número diferent de 1. L’exemple següent:

- -
<ol start="4">
-  <li>Toast pitta, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
- -

Dona aquesta sortida:

- -

{{ EmbedLiveSample('start', '100%', 150) }}

- -

reversed

- -

L'atribut {{htmlattrxref("reversed","ol")}} inicia la llista comptant cap enrere en comptes de cap endavant. L'exemple següent

- -
<ol start="4" reversed>
-  <li>Toast pitta, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
- -

Dona aquesta sortida:

- -

{{ EmbedLiveSample('reversed', '100%', 150) }}

- -

value

- -

L'atribut {{htmlattrxref("value", "ol")}} permet establir valors numèrics específics per a cada element de llista. L’exemple següent:

- -
<ol>
-  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
-  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li value="6">Wash and chop the salad.</li>
-  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
- -

Dona aquesta sortida:

- -

{{ EmbedLiveSample('value', '100%', 150) }}

- -
-

Nota: Fins i tot si fas servir un valor de {{cssxref("list-style-type")}} no numèric, cal que utilitzis els valors numèrics equivalents per a l'atribut value.

-
- -

Aprenentatge actiu: Aplicar estil a una llista imbricada

- -

En aquesta sessió d'aprenentatge actiu, volem que prenguis allò que has après i dissenyis una llista imbricada. T’hem proporcionat un codi HTML, i volem que:

- -
    -
  1. Apliquis vinyetes quadrades als elements de llista no ordenada.
    2. -
  2. Apliquis als elements de llista no ordenada i els elements de llista ordenada una alçada de línia d'1,5 respecte de la mida de la lletra.
    3. -
  3. Apliquis als elements de llista ordenada valors de lletra minúscula.
    4. -
  4. No dubtis de jugar amb l'exemple de llistes tant com vulguis, experimenta amb els tipus de vinyeta, l’espaiat o qualsevol altra cosa que hi trobis.
    5. -
- -

Si t’equivoques, sempre pots tornar a començar amb el botó Reinicia. Si t’encalles, prem el botó Mostra la solució per veure’n una resposta possible.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- -

Vegeu també

- -

Els comptadors CSS proporcionen eines avançades per a personalitzar el recompte i l'estil de les llistes, però són bastant complexos. Et recomanem que hi facis un cop d'ull si vols ampliar la informació. Vegeu:

- - - -

Resum

- -

Resulta relativament fàcil de dominar l'aplicació d’estil a les llistes una vegada que en coneixes els principis bàsics associats i les propietats específiques. En l’article següent continuarem amb les tècniques d'estil.

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

diff --git a/files/ca/learn/css/estilitzar_text/text_fonamental/index.html b/files/ca/learn/css/estilitzar_text/text_fonamental/index.html deleted file mode 100644 index e258171ffc..0000000000 --- a/files/ca/learn/css/estilitzar_text/text_fonamental/index.html +++ /dev/null @@ -1,739 +0,0 @@ ---- -title: Text fonamental i estil de font -slug: Learn/CSS/Estilitzar_text/Text_fonamental -tags: - - Article - - Beginner - - CSS - - Guide - - Style - - Text - - alignment - - family - - font - - shorthand - - spacing - - weight -translation_of: Learn/CSS/Styling_text/Fundamentals ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
- -

En aquest article t'iniciem en el viatge cap al domini de l'aplicació d’estil a text amb {{glossary("CSS")}}. Aquí passarem amb detall per tots els fonaments bàsics de l'aplicació d’estil a textos / tipus de lletra, inclosos el gruix, la família i l'estil del tipus de lletra, les propietats abreviades per al tipus de lletra, l'alineació del text i altres efectes, i l’interlineat i l’interlletratge.

- - - - - - - - - - - - -
Requisits previs:Coneixements bàsics d'informàtica, fonaments bàsics d'HTML (consulta l’article Introducció a l’HTML), fonaments de CSS (consulta l’article Introducció al CSS).
Objectiu:Aprendre les propietats i tècniques bàsiques necessàries per a l'aplicació d’estil al text de les pàgines web.
- -

Què implica l'aplicació d’estil al text en CSS?

- -

Com ja deus conèixer d’haver treballat amb l’HTML i el CSS, el text dins d'un element es defineix dins de la caixa de contingut de l'element. Comença a la part superior esquerra de l'àrea de contingut (o a la part superior dreta, en el cas de contingut en idiomes RTL, o right-to-left, que s'escriuen de dreta a esquerra) i flueix cap al final de la línia. Quan arriba al final, passa a la línia següent i continua; i després, a la següent línia, fins que tot el contingut s'ha col·locat a la caixa. El contingut de text es comporta en efecte com un seguit d'elements en línia, es distribueix en línies adjacents entre si, i no crea salts de línia fins que s’ateny el final de la línia, o tret que s'obligui a un salt de línia manual de l'element {{htmlelement("br")}}.

- -
-

Nota: Si el paràgraf anterior et sembla confós, no t’hi amoïnis, torna enrere i fes un repàs de la teoria del model de caixa que s’explica en l’article El model de caixa abans de continuar.

-
- -

Les propietats CSS que s'utilitzen per a escriure text generalment es divideixen en dues categories, que veurem per separat en aquest article:

- - - -
-

Nota: Tingues en compte que les propietats que afecten el text dins d'un element hi actuen com una única entitat. No pots seleccionar i modificar l'estil de les subseccions de text si no les etiquetes amb un element apropiat (com ara {{htmlelement("span")}} o {{htmlelement("strong")}}) o utilitzes un pseudoelement específic per a text com ::first-letter (selecciona la primera lletra del text d'un element), ::first-line (selecciona la primera línia del text d'un element) o ::selection (selecciona el text que el cursor ressalta en aquell moment).

-
- -

Tipus de lletra

- -

Continuem endavant per veure les propietats d'estil dels tipus de lletra. En aquest exemple aplicarem algunes propietats CSS diferents a la mateixa mostra d’HTML, que té l’aspecte següent:

- -
<h1>Tommy the cat</h1>
-
-<p>I remember as if it were a meal ago...</p>
-
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
- -

Podeu trobar l'exemple acabat en GitHub (vegeu-ne també el codi font).

- -

Color

- -

La propietat {{cssxref("color")}} estableix el color del contingut de primer pla dels elements seleccionats (que normalment és el text, però també pot incloure un parell d'altres coses, com ara un subratllat o un sobreratllat en el text, amb la propietat {{cssxref("text-decoration")}}).

- -

La propietat color pot acceptar qualsevol unitat de color CSS, per exemple:

- -
p {
-  color: red;
-}
- -

Això fa que els paràgrafs es converteixin en vermells, en comptes del negre estàndard per defecte del navegador, així:

- - - -

{{ EmbedLiveSample('Color', '100%', 220) }}

- -

Famílies de tipus de lletra

- -

Per a establir un tipus de lletra diferent en el teu text, utilitza la propietat {{cssxref("font-family")}}; això et permet especificar un tipus de lletra (o una llista de tipus de lletra) perquè el navegador l'apliqui als elements seleccionats. El navegador només aplica un tipus de lletra si està disponible en la màquina amb què s’accedeix al lloc web. Si no, només usarà un {{anch("Default fonts", "tipus de lletra predeterminat")}} del navegador. Un exemple senzill és el següent:

- -
p {
-  font-family: arial;
-}
- -

Això fa que tots els paràgrafs d'una pàgina adoptin el tipus de lletra Arial, que es troba en qualsevol ordinador.

- -

Tipus de lletra segurs per a la xarxa web

- -

Parlant de la disponibilitat dels tipus de lletra, només una certa quantitat de tipus de lletra es troben generalment disponibles en tots els sistemes i, per tant, es poden utilitzar sense gaires preocupacions. Són els anomenats tipus de lletra segurs per a la xarxa web.

- -

La majoria de les vegades, com a desenvolupadors web, volem tenir un control més específic sobre els tipus de lletra que s’utilitzen per a mostrar el contingut del text. El problema és trobar una manera de saber quin tipus de lletra està disponible en l'ordinador que es fa servir per a accedir a les nostres pàgines web. No hi ha manera de saber-ho en tots els casos, però se sap que els tipus de lletra segurs per a la web estan disponibles en gairebé totes les instàncies dels sistemes operatius més utilitzats (Windows, Mac, les distribucions més habituals de Linux, Android i iOS).

- -

La llista de tipus de lletra segurs per a la xarxa web reals canvia a mesura que evolucionen els sistemes operatius, però és convenient considerar els tipus de lletra segurs per a la xarxa web següents, almenys ara com ara (molts d'ells s’han popularitzades gràcies a la iniciativa de Microsoft Tipus de lletra principals per a la xarxa web, de finals dels anys 1990 i principis dels anys 2000):

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomTipus de lletra genèricObservacions
Arialsans-serifSovint es considera una bona pràctica afegir també el tipus de lletra Helvetica com una alternativa preferent a Arial; encara que són gairebé idèntiques, es considera que Helvetica té una forma més agradable, tot i que Arial està més disponible.
Courier NewmonospaceHi ha sistemes operatius que tenen una versió alternativa (possiblement més antiga) del tipus de lletra Courier New anomenada Courier. Es considera una bona pràctica utilitzar-les totes dues, amb Courier New com l’opció preferent.
Georgiaserif
Times New RomanserifHi ha sistemes operatius que tenen una versió alternativa (possiblement més antiga) del tipus de lletra Times New Roman anomenada Times. Es considera una bona pràctica utilitzar-les totes dues, amb Times New Roman com l’opció preferent.
Trebuchet MSsans-serifHas de tenir cura amb l'ús d'aquest tipus de lletra perquè no està àmpliament disponible en sistemes operatius mòbils.
Verdanasans-serif
- -
-

Nota: Entre els diversos recursos, el lloc web cssfontstack.com manté una llista de tipus de lletra segurs per a la web disponibles en sistemes operatius Windows i macOS, que poden ajudar-te a prendre la decisió sobre el que consideris segur per al teu ús.

-
- -
-

Nota: Hi ha una manera de descarregar un tipus de lletra personalitzat juntament amb una pàgina web, que et permet personalitzar l'ús del tipus de lletra de la manera que vulguis: web fonts. Això és una mica més complex, i ho exposarem en un article separat més endavant en el mòdul.

-
- -

Tipus de lletra predeterminats

- -

CSS defineix cinc noms genèrics per als tipus de lletra: serif, sans-serif, monospace, cursive i fantasy. Són noms molt genèrics i l’aspecte exacte del tipus de lletra usat quan s'utilitzen aquests noms genèrics correspon a cada navegador i pot variar per a cada sistema operatiu amb què s'executa. Representa un pitjor escenari, en què el navegador tracta de fer el possible per a oferir almenys un tipus de lletra que es consideri adequat. serif, sans-serif i monospace són bastant previsibles i han de proporcionar alguna cosa raonable. D'altra banda, cursive i fantasy són menys previsibles i et recomanem utilitzar-les amb molta cura i provar-les cada vegada.

- -

Els cinc noms es defineixen de la manera següent:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomDefinicióExemple
serifTipus de lletra que tenen serifes (les floritures i altres petits detalls que es veuen en els extrems dels traços en algunes tipografies).My big red elephant
sans-serifTipus de lletra que no tenen serifes.My big red elephant
monospaceTipus de lletra en què cada caràcter ocupa la mateixa amplada, normalment s’utilitza en les llistes d’instruccions que constitueixen el codi informàtic.My big red elephant
cursiveTipus de lletra que tenen com a objectiu emular l'escriptura manuscrita, amb moviments fluids i connectats.My big red elephant
fantasyTipus de lletra amb intencions decoratives.My big red elephant
- -

Llistes de tipus de lletra

- -

Com que no pots garantir la disponibilitat dels tipus de lletra que vols utilitzar en les teves pàgines web (fins i tot un tipus de lletra segur per a la xarxa web podria fallar per alguna raó), pots proporcionar una llista de tipus de lletra perquè el navegador tingui diversos tipus de lletra per poder triar. Això només implica introduir un atribut font-family amb un valor que consti de diversos noms de tipus de lletra separats per comes, per exemple:

- -
p {
-  font-family: "Trebuchet MS", Verdana, sans-serif;
-}
- -

En aquest cas, el navegador comença pel principi de la llista i mira si el primer tipus de lletra està disponible en la màquina. Si és així, s'aplica aquesta font als elements seleccionats. En cas contrari, es passa al tipus de lletra següent, i així successivament.

- -

És recomanable proporcionar al final de la llista un nom de tipus de lletra genèric que sigui adequat perquè el navegador pugui almenys proporcionar alguna cosa adequada aproximada si cap dels tipus de lletra de la llista estan disponibles. Per il·lustrar aquest punt, els navegadors presenten els paràgrafs en un tipus de lletra serifa predeterminada, que normalment és Times New Roman, si no hi ha cap altra opció disponible; però això no és bo quan s’espera un tipus de lletra sans-serif!

- -
-

Nota: Els noms dels tipus de lletra que tenen més d'una paraula, com Trebuchet MS s’han d’escriure entre cometes.

-
- -

Un exemple de font-family

- -

Afegim les línies següents al nostre exemple anterior per a donar als paràgrafs un tipus de lletra sans-serif:

- -
p {
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

Això ens dona el resultat següent:

- - - -

{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}

- -

La mida de la lletra

- -

En l'article de valors i unitats en CSS del mòdul anterior, hem revisat les unitats de longitud i mida. La mida de la lletra (que s’estableix amb la propietat {{cssxref("font-size")}} pot prendre valors que es mesuren en la majoria d'aquestes unitats (i d’altres, com ara percentatges), però les unitats més comunes que faràs servir per a la mida del text són:

- - - -

L’atribut font-size d'un element s'hereta de l'element pare d'aquest element. Tot comença amb l'element arrel del document, {{htmlelement("html")}}, en què l’atribut font-size està establert en 16 px de manera estàndard en els navegadors. Qualsevol paràgraf (o un altre element que no tingui una mida diferent establerta pel navegador) de l'interior de l'element arrel tindrà una mida final de 16 px. Altres elements poden tenir mides predeterminades diferents, per exemple, un element {{htmlelement("h1")}} té una mida de 2 em establerta per defecte, de manera que tindrà una mida final de 32 píxels.

- -

Les coses es tornen més difícils quan es comença a alterar la mida del tipus de lletra dels elements imbricats. Per exemple, si en la teva pàgina hi ha un element {{htmlelement("article")}} i hi estableixes la mida del tipus de lletra en 1,5 em (que donaria una mida final de 24 px), i llavors vols que els paràgrafs de dins de l'element <article> tinguin una mida de lletra computada de 20 px, quin valor em hem d’utilitzar?

- -
<!-- document base font-size is 16px -->
-<article> <!-- If my font-size is 1.5em -->
-  <p>My paragraph</p> <!-- How do I compute to 20px font-size? -->
-</article>
- -

Hauràs d'establir el valor em en 20/24 o 0,83333333 em. Els càlculs poden complicar-se, de manera que cal tenir cura a l’hora de com aplicar estils. El millor és utilitzar unitats rem on puguis per mantenir les coses senzilles i evitar establir la mida de la lletra dels elements del contenidor quan sigui possible.

- -

Un exemple senzill de dimensionament

- -

Quan dimensiones el teu text, normalment és una bona idea establir l’atribut base font-size del document en 10 px, de manera que resulta molt més senzill de fer els càlculs, perquè llavors els valors (r)em són la mida de la lletra en píxels dividida per 10, no per 16. A continuació, pots dimensionar fàcilment els diferents tipus de text del document si ho vols. És una bona idea fer una llista de tot el conjunt de regles font-size en una zona determinada del teu full d'estil, i així són fàcils de trobar.

- -

El nostre nou resultat és així:

- - - -
html {
-  font-size: 10px;
-}
-
-h1 {
-  font-size: 2.6rem;
-}
-
-p {
-  font-size: 1.4rem;
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

{{ EmbedLiveSample('Un_exemple_senzill_de_dimensionament', '100%', 220) }}

- -

Estils i gruixos de lletra, transformacions i decoracions del text

- -

CSS proporciona quatre propietats comunes per a alterar el gruix visual / l’èmfasi del text:

- - - -

Cal tenir en compte que {{cssxref("text-decoration")}} pot acceptar diversos valors alhora, si vols afegir diverses decoracions alhora; per exemple, text-decoration: underline overline. Tingues en compte que {{cssxref("text-decoration")}} és una propietat abreujada per a {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} i {{cssxref("text-decoration-color")}}. Pots utilitzar les combinacions d'aquests valors de propietat per a crear efectes interessants, per exemple, text-decoration: line-through red wavy

- -

Observem com afegir un parell d'aquestes propietats al nostre exemple:

- -

El resultat és aquest:

- - - -
html {
-  font-size: 10px;
-}
-
-h1 {
-  font-size: 2.6rem;
-  text-transform: capitalize;
-}
-
-h1 + p {
-  font-weight: bold;
-}
-
-p {
-  font-size: 1.4rem;
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

{{ EmbedLiveSample('Estils_i_gruixos_de_lletra_transformacions_i_decoracions_del_text', '100%', 220) }}

- -

Ombres en el text

- -

Pots aplicar ombres al text amb la propietat {{cssxref("text-shadow")}}. Això involucra fins a quatre valors, com es mostra en l'exemple següent:

- -
text-shadow: 4px 4px 5px red;
- -

Les quatre propietats són:

- -
    -
  1. El desplaçament horitzontal de la silueta del text original: pot prendre la majoria de les unitats de longitud i grandària disponibles en CSS, però el més convenient és usar px. Aquest valor s'ha d'incloure.
    2. -
  2. El desplaçament vertical de la silueta del text original: es comporta bàsicament igual que el desplaçament horitzontal, excepte que mou l'ombra amunt i avall, no a dreta i esquerra. Aquest valor s'ha d'incloure.
    3. -
  3. El radi d'esborronat: un valor més alt significa que l'ombra es dispersa més àmpliament. Si aquest valor no s'inclou, el valor predeterminat és 0, que significa que no s’esborrona. Pot prendre la majoria de les unitats de longitud i grandària disponibles en CSS.
    4. -
  4. El color base de l'ombra: pot prendre qualsevol unitat de color CSS. Si no s'inclou, el valor predeterminat és black.
    5. -
- -
-

Nota: Els valors de desplaçament positius mouen l'ombra cap a la dreta i cap avall, però també pots utilitzar valors de desplaçament negatius per a moure l'ombra cap a l'esquerra i cap amunt, com per exemple -1px -1px.

-
- -

Ombres múltiples

- -

Pots aplicar diverses ombres a un mateix text si inclous més d’un valor d'ombra separats per comes, per exemple:

- -
text-shadow: -1px -1px 1px #aaa,
-             0px 4px 1px rgba(0,0,0,0.5),
-             4px 4px 5px rgba(0,0,0,0.7),
-             0px 0px 7px rgba(0,0,0,0.4);
- -

Si apliquem això a l'element {{htmlelement("h1")}} del nostre exemple de Tommy the cat, obtenim això:

- - - -

{{ EmbedLiveSample('Ombres_múltiples', '100%', 220) }}

- -
-

Nota: Pots veure més exemples interessants d'ús de text-shadow en l'article de Sitepoint Moonlighting with CSS text-shadow.

-
- -

Disseny de pàgina del text

- -

Ara que ja coneixem les propietats bàsiques dels tipus de lletra, passem a veure les propietats del text que podem utilitzar que afecten el disseny de pàgina.

- -

Alineació del text

- -

La propietat {{cssxref("text-align")}} s'utilitza per a controlar com s'alinea el text dins de la caixa que conté els continguts. Els valors disponibles són els següents i funcionen gairebé de la mateixa manera que ho fa una aplicació de processador de text normal:

- - - -

Si s'aplica text-align: center; a l’{{htmlelement("h1")}} en el nostre exemple, obtenim això:

- - - -

{{ EmbedLiveSample('Alineació_del_text', '100%', 220) }}

- -

Interlineat

- -

La propietat {{cssxref("line-height")}} estableix l'alçada que hi ha entre les línies de text. Pot prendre la majoria de les unitats de longitud i grandària, però també un valor sense unitat, que actua com un multiplicador, i generalment es considera l’opció més bona; es multiplica el valor de {{cssxref("font-size")}} i s’obté line-height. El text del body en general es veu més bé i és més fàcil de llegir si les línies estan prou separades. L'alçada de la línia recomanada és d'aproximadament 1,5-2 (doble espai). Per tant, si vols establir les línies de text a 1,6 vegades l'alçada del tipus de lletra, utilitzaries això:

- -
line-height: 1.6;
- -

Si apliques això als elements {{htmlelement("p")}} del nostre exemple, obtindràs aquest resultat:

- - - -

{{ EmbedLiveSample('Interlineat', '100%', 250) }}

- -

Espaiat entre lletres i entre paraules

- -

Les propietats {{cssxref("spacing-letter")}} i {{cssxref("word-spacing")}} permeten establir l'espaiat entre lletres i l'espaiat entre paraules en el text. No ho faràs amb gaire freqüència, però potser ho trobes útil per a obtenir un cert tipus de presentació o per millorar la llegibilitat d'un tipus de lletra especialment densa. Pot prendre la majoria de les unitats de longitud i grandària.

- -

Així, per exemple, podríem aplicar una mica d’espai entre lletres i espai entre paraules a la primera línia de cada element {{htmlelement("p")}} del nostre exemple:

- -
p::first-line {
-  letter-spacing: 4px;
-  word-spacing: 4px;
-}
- -

Afegim-ne una mica al nostre exemple, així:

- - - -

{{ EmbedLiveSample('Espaiat_entre_lletres_i_entre_paraules', '100%', 250) }}

- -

Altres propietats que convé conèixer

- -

Les propietats anteriors et donen una idea de com començar a aplicar estil al text d’una pàgina web, però hi ha moltes altres propietats que es poden utilitzar. Aquí només hem volgut exposar les més importants. Un cop t’hagis acostumat a fer-les servir, també hauries d'explorar les següents:

- -

Estils per als tipus de lletra:

- - - -

Aplicació d’estil al text per al disseny de pàgina

- - - -

Propietat abreujada per al tipus de lletra

- -

També es poden establir moltes propietats de tipus de lletra amb la propietat abreujada {{cssxref("font")}}. S’escriuen en l’ordre següent:  {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} i {{cssxref("font-family")}}.

- -

Entre totes aquestes propietats, només es requereixen font-size i font-family quan s'utilitza la propietat abreujada font.

- -

S'ha d'incloure una barra diagonal entre les propietats {{cssxref("font-size")}} i {{cssxref("line-height")}}.

- -

Un exemple complet tindria un aspecte com aquest:

- -
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
- -

Aprenentatge actiu: Jugar amb els estils de text

- -

En aquesta sessió d'aprenentatge actiu, no et proposem de fer cap exercici específic: et proposem que juguis amb algunes propietats del tipus de lletra i el text aplicades al disseny de pàgina i observis què ets capaç de crear. Pots fer-ho usant els fitxers HTML/CSS fora de línia, o pots introduir el teu codi en l'exemple editat en viu a continuació.

- -

Si t’equivoques, sempre pots tornar a l’inici amb el botó Reinicia.

- - - -

{{ EmbedLiveSample('Codi_executable', 700, 800) }}

- -

Resum

- -

Esperem que hagis gaudit jugant amb el text d’aquest article! L’article següent t’explicarà tot el que has de saber sobre l’aplicació d'estil a llistes HTML.

- -

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

diff --git "a/files/ca/learn/css/first_steps/com_comen\303\247ar_amb_css/index.html" "b/files/ca/learn/css/first_steps/com_comen\303\247ar_amb_css/index.html" deleted file mode 100644 index dfc1ae29b3..0000000000 --- "a/files/ca/learn/css/first_steps/com_comen\303\247ar_amb_css/index.html" +++ /dev/null @@ -1,254 +0,0 @@ ---- -title: Com començar amb CSS -slug: Learn/CSS/First_steps/Com_començar_amb_CSS -translation_of: Learn/CSS/First_steps/Getting_started ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
- -

En aquest article, agafarem un document HTML senzill i hi aplicarem una mica de CSS per aprendre algunes coses pràctiques sobre aquest llenguatge informàtic.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML).
Objectiu:Comprendre els fonaments bàsics d’enllaçar un document CSS a un fitxer HTML i poder crear un text simple amb CSS.
- -

Començar amb l'HTML

- -

El nostre punt de partida és un document HTML. Pots copiar el codi de sota si vols treballar al teu propi ordinador. Desa el codi de sota com a index.html en una carpeta de l'ordinador.

- -
<!doctype html>
-<html lang="ca">
-<head>
-    <meta charset="utf-8">
-    <title>Introducció al CSS</title>
-</head>
-
-<body>
-
-    <h1>Sóc un títol de nivell u</h1>
-
-    <p>Aquest és un paràgraf de text. Al text hi ha un <span>element span</span>
-i també un enllaç <a href="http://example.com">link</a>.</p>
-
-    <p>Aquest és el segon paràgraf. Conté un element <em>subratllat</em>.</p>
-
-    <ul>
-        <li>Article 1</li>
-        <li>Article 2</li>
-        <li>Article <em>tres</em></li>
-    </ul>
-
-</body>
-
-</html>
-
- -
-

Nota: Si llegeixes això en un dispositiu o en un entorn on no pots crear fitxers fàcilment, no et preocupis: a continuació es mostren editors de codi en directe per a escriure un exemple de codi aquí a la pàgina.

-
- -

Afegir CSS al nostre document

- -

El primer que hem de fer és dir al document HTML que tenim unes regles CSS que volem que utilitzi. Habitualment trobaràs tres maneres diferents d’aplicar CSS a un document HTML, però de moment examinarem la manera més comuna i útil: enllaçar el CSS des de la capçalera del document.

- -

Crea un fitxer a la mateixa carpeta que el teu document HTML i desa’l com styles.css. L’extensió .css mostra que es tracta d’un fitxer CSS.

- -

Per a enllaçar styles.css a index.html, afegeix la línia següent en algun lloc de la capçalera ({{htmlelement("head")}}) del document HTML:

- -
<link rel="stylesheet" href="styles.css">
- -

Aquest element {{htmlelement("link")}} indica al navegador que hi ha un full d'estil i utilitza l'atribut rel i la ubicació d'aquest full d'estil com a valor de l'atribut href. Pots provar si funciona el CSS afegint una regla a styles.css. Fent servir l'editor de codi, afegeix el següent al fitxer CSS:

- -
h1 {
-  color: red;
-}
- -

Desa els fitxers HTML i CSS i torna a carregar la pàgina en un navegador web. Ara el títol d’encapçalament de primer nivell a la part superior del document s'ha de veure de color vermell. Si això succeeix, enhorabona: has aplicat amb èxit una mica de CSS a un document HTML. Si això no passa, comprova ho has escrit tot correctament.

- -

Pots continuar treballant amb styles.css localment, o bé pots utilitzar el nostre editor interactiu, que trobaràs a continuació, per continuar amb aquest tutorial. L’editor interactiu actua com si el CSS del primer quadre estigués vinculat al document HTML, tal com passa amb el nostre document anterior.

- -

Aplicar estil als elements HTML

- -

En tornar el títol vermell, ja hem demostrat que podem seleccionar un element HTML i aplicar-hi estil. Ho fem delimitant un selector d’elements: un seleccionador que coincideix directament amb un nom d’element HTML. Per a seleccionar tots els paràgrafs del document, utilitzaries el selector p. Per a convertir tots els paràgrafs en verd, faries servir:

- -
p {
-  color: green;
-}
- -

Pots seleccionar diversos selectors alhora, separats amb una coma. Si volem que tots els paràgrafs i tots els elements de la llista siguin verds, la regla ha de ser la següent:

- -
p, li {
-    color: green;
-}
- -

Prova-ho a l’editor interactiu següent (edita els quadres de codi) o al teu document CSS local.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} 

- -

Canviar el comportament predeterminat dels elements

- -

Quan observem un document HTML ben marcat, fins i tot una cosa tan simple com el nostre exemple, podem veure que el navegador afegeix algun estil per defecte per fer que l’HTML sigui llegible. Els títols són grans i en lletra negreta i la nostra llista inclou vinyetes. Això passa perquè els navegadors tenen fulls d’estil interns que contenen estils predeterminats que s’apliquen per defecte a totes les pàgines; sense això no hi hauria distincions dins el text i hauríem d’aplicar estil a tot des de zero. Tots els navegadors moderns mostren el contingut HTML de la mateixa manera per defecte.

- -

Tanmateix, sovint voldràs alguna cosa que no sigui la tria que ha fet el navegador. Això es pot fer escollint només l’element HTML que vols canviar i fent servir una regla CSS per a canviar-ne l’aspecte.  Un bon exemple és <ul>, que marca una llista no ordenada. Mostra boletes en els elements de llista, però si decideixo que no les vull, les puc eliminar:

- -
li {
-  list-style-type: none;
-}
- -

Prova d’afegir això al teu CSS.

- -

És una bona opció consultar la propietat list-style-type a la pàgina de MDN per veure quins valors admet. Per provar uns valors diferents, dona una ullada a la pàgina list-style-type, on trobaràs un exemple interactiu a la part superior de la pàgina i, a continuació, es detallen tots els valors que s’admeten.

- -

Si consultes aquesta pàgina, descobriràs que, a banda d’eliminar les vinyetes de la llista, també les pots canviar: prova de canviar-les per vinyetes quadrades amb el valor square.

- -

Afegir una classe

- -

Fins al moment hem dissenyat elements basats en els seus noms en HTML. Això funciona sempre que vulguis que tots els elements d’aquest tipus del document presentin el mateix aspecte. Moltes vegades no és el cas, així que hauràs de trobar la manera de seleccionar un subconjunt dels elements sense canviar els altres. La manera més habitual de fer-ho és afegir una classe a l'element HTML i delimitar aquesta classe.

- -

Al teu document HTML, afegeix un atribut de classe al segon element de la llista. La teva llista ara es veurà així:

- -
<ul>
-  <li>Article 1</li>
-  <li class="special">Item two</li>
-  <li>Article <em>tres</em></li>
-</ul>
- -

Al teu CSS pots seleccionar la classe special creant un selector que comenci amb un punt. Afegeix el següent al teu fitxer CSS:

- -
.special {
-  color: orange;
-  font-weight: bold;
-}
- -

Desa i actualitza per veure quin és el resultat.

- -

Pots aplicar la classe special a qualsevol element de la pàgina que vulguis que tingui el mateix aspecte que aquesta llista. Per exemple, potser vols que l’element <span> del paràgraf també es vegi de color taronja i en negreta. Prova d’afegir-hi una classe special i torna a carregar la pàgina, i observa què passa.

- -

De vegades veuràs regles amb un selector que enumera el selector d’elements HTML juntament amb la classe:

- -
li.special {
-  color: orange;
-  font-weight: bold;
-}
- -

Aquesta sintaxi vol dir «selecciona qualsevol element li que tingui una classe special». Si ho fas així, ja no podràs aplicar la classe a un element <span> o qualsevol altre element simplement afegint-hi la classe; hauràs d’afegir aquest element a la llista de selectors:

- -
li.special,
-span.special {
-  color: orange;
-  font-weight: bold;
-}
- -

Com pots imaginar, algunes classes podrien aplicar-se a molts elements i no vols haver d’editar el CSS cada vegada que calgui adoptar un estil nou. Per tant, de vegades és millor deixar de banda l’element i simplement fer referència a la classe, tret que sàpigues que vols crear algunes regles especials per a un sol element i potser vols assegurar-te que no s’apliquen a altres coses.

- -

Aplicar estil en funció de la ubicació en un document

- -

Hi ha vegades que voldràs que alguna cosa sembli diferent segons el lloc en què es troba dins el document. Hi ha diversos selectors que poden ajudar en aquesta situació, però ara per ara només ens fixarem en un parell. Al nostre document hi ha dos elements <em>: un dins d’un paràgraf i l’altre dins d’una llista. Per a seleccionar només un <em> que estigui situat dins d'un element <li>, pots utilitzar un selector anomenat combinador de descendents, que simplement pren la forma d'un espai entre dos altres selectors.

- -

Afegeix la regla següent al teu full d’estil.

- -
li em {
-  color: rebeccapurple;
-}
- -

Aquest selector seleccionarà qualsevol element <em> que es trobi dins un (descendent de) <li>. Per tant, al document d’exemple, hauries de trobar que el <em> de l’element de la tercera llista és morat, però el que hi ha dins del paràgraf no canvia.

- -

Una altra cosa que potser t'agradaria provar és aplicar estil a un paràgraf que surt immediatament després d'un títol d’encapçalament del mateix nivell de jerarquia de l'HTML. Per fer-ho, col·loca un + (un combinador de germans adjacents) entre els selectors.

- -

Prova d'afegir aquesta regla al teu full d'estil, també:

- -
h1 + p {
-  font-size: 200%;
-}
- -

L'exemple en directe següent inclou les dues regles anteriors. Prova d'afegir una regla perquè un element span es mostri de color vermell si és dins d'un element paràgraf. Sabràs que ho has fet bé si element span del primer paràgraf és vermell, però el que apareix al primer element de llista no canvia de color.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}

- -
-

Nota: Com pots veure, el CSS ens ofereix diverses maneres de seleccionar elements, i fins ara només n’hem gratat la superfície! Analitzarem amb detall tots aquests selectors i molts més en els nostres articles sobre selectors que trobaràs més endavant en el curs.

-
- -

Aplicar estil en funció de l’estat

- -

El darrer tipus d’aplicació d’estil que analitzarem en aquest article és la capacitat d’aplicar estil a les coses en funció del seu estat. Un exemple senzill d’això són els enllaços. Quan dissenyem un enllaç, hem de seleccionar l’element <a> (anchor). Això té diferents estats en funció de si no s’ha visitat, s’ha visitat, s’hi passa pel damunt, se selecciona amb el teclat o s'hi fa clic (s’activa). Pots fer servir el CSS per a dirigir-te a aquests estats diferents: el CSS que trobaràs a continuació estableix els enllaços no visitats en rosa, i els visitats en verd.

- -
a:link {
-  color: pink;
-}
-
-a:visited {
-  color: green;
-}
- -

Pots canviar l'aparença de l'enllaç quan l'usuari hi col·loca el punter a sobre, per exemple, eliminar-ne el subratllat, que s'aconsegueix amb la regla següent:

- -
a:hover {
-  text-decoration: none;
-}
- -

A l’exemple en directe següent pots jugar amb diferents valors per als diversos estats d’un enllaç. Hi hem afegit les regles anteriors, i ens adonem que el color rosa és força clar i difícil de llegir; per què no el canviem per un color que vagi més bé? Es poden posar els enllaços en negreta?

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} 

- -

Hem eliminat el subratllat del nostre enllaç quan s’hi passa el punter del ratolí per sobre. Pots eliminar el subratllat de tots els estats d’un enllaç. Val la pena recordar, però, que en un lloc web real, vols que els visitants sàpiguen que un enllaç és un enllaç. Deixar el subratllat a lloc pot ser una pista important perquè la gent s’adoni que pot fer clic en un text dins d’un paràgraf; aquest és el comportament al qual estan acostumats. Com tot en CSS, amb els canvis es pot fer que el document sigui menys accessible; tractarem de posar en evidència els entrebancs potencials en els llocs adequats.

- -
-

Nota: sovint veuràs que en aquests articles i en l’MDN es menciona l'accessibilitat. Quan parlem d’accessibilitat ens referim al requisit que les nostres pàgines web siguin comprensibles i utilitzables per tothom.

- -

El teu visitant pot entrar a la pàgina web des d'un ordinador amb un ratolí o un trackpad, o des d’un telèfon amb pantalla tàctil. O potser utilitza un lector de pantalla que llegeix el contingut del document; o necessita utilitzar una mida de lletra del text molt més gran; o bé navega pel lloc web només amb el teclat.

- -

Un document HTML senzill és en general accessible per a tothom, i a l'hora d’aplicar estil a aquest document, és important que no el facis menys accessible.

-
- -

Combinar selectors i combinadors

- -

Val la pena assenyalar que pots combinar diversos selectors i combinadors. Per exemple:

- -
/* selecciona qualsevol <span> que estigui dins d'un <p>, que està dins d'un <article> */
-article p span { ... }
-
-/* Selecciona qualsevol <p> que vagi directament després d'un <ul>, que vagi directament després d'un <h1> */
-h1 + ul + p { ... }
- -

També pots combinar diversos tipus. Intenta afegir el següent al teu codi:

- -
body h1 + p .special {
-  color: yellow;
-  background-color: black;
-  padding: 5px;
-}
- -

Aplicarà estil a qualsevol element amb una classe special que es trobi dins d’un element <p>, que vingui just després d’un element <h1>> que es trobi dins del <body>. Uf!

- -

A l'HTML original que t’hem proporcionat, l'únic element amb estil és <span class="special">.

- -

No et preocupis si et sembla complicat en aquest moment, començaràs a entendre-ho ben aviat de seguida que treballis més amb el CSS.

- -

Tancant

- -

En aquest tutorial hem analitzat diverses maneres d’aplicar estil a un document amb CSS. Anirem desenvolupant aquests coneixements a mesura que avancem amb la resta d'articles. Tanmateix, ja en coneixes prou per a aplicar estil al text, aplicar CSS a partir de diferents maneres de seleccionar els elements del document i cercar propietats i valors en la documentació MDN.

- -

Al proper article analitzarem com s’estructura el CSS.

- -

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

- -

En aquest mòdul

- -
    -
  1. Què és el CSS
    2. -
  2. Primers passos amb el CSS
    3. -
  3. Com s'estructura el CSS
    4. -
  4. Com funciona el CSS
    5. -
  5. Aplica els teus nous coneixements
    6. -
diff --git a/files/ca/learn/css/first_steps/com_estructurar_el_css/index.html b/files/ca/learn/css/first_steps/com_estructurar_el_css/index.html deleted file mode 100644 index 6c216af68c..0000000000 --- a/files/ca/learn/css/first_steps/com_estructurar_el_css/index.html +++ /dev/null @@ -1,512 +0,0 @@ ---- -title: Com estructurar el CSS -slug: Learn/CSS/First_steps/Com_estructurar_el_CSS -translation_of: Learn/CSS/First_steps/How_CSS_is_structured ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
- -

Ara que tens una idea sobre què és el CSS i les bases de com fer-lo servir, és hora d’aprofundir una mica més en l’estructura pròpia del llenguatge. Ja hem vist molts dels conceptes que s'esmenten en aquest article; pots recapitular si t’entrebanques amb els conceptes que et trobes a partir d’ara.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Aprendre amb detall les estructures de sintaxi fonamentals del CSS.
- -

Aplicar CSS a l'HTML

- -

El primer que analitzarem són els tres mètodes d’aplicació del CSS a un document.

- -

Fulls d’estils externs

- -

En l’article Primers passos amb el CSS hem enllaçat un full d’estil extern a la nostra pàgina. Aquest és el mètode més comú i útil d’adjuntar CSS a un document perquè pots enllaçar el CSS a diverses pàgines, cosa que et permet d’aplicar-hi estil a totes amb el mateix full d’estil. En la majoria dels casos, les diverses pàgines d’un lloc web presentaran un aspecte molt semblant i, per tant, pots utilitzar el mateix conjunt de regles per a la presentació bàsica.

- -

Un full d’estil extern és quan el CSS està escrit en un fitxer independent amb l’extensió .css i s'hi fa referència des d’un element HTML <link>:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>El meu experiment amb CSS</title>
-    <link rel="stylesheet" href="styles.css">
-  </head>
-  <body>
-    <h1>Hola món!</h1>
-    <p>Aquest és el meu primer exemple amb CSS</p>
-  </body>
-</html>
- -

El fitxer CSS podria presentar un aspecte així:

- -
h1 {
-  color: blue;
-  background-color: yellow;
-  border: 1px solid black;
-}
-
-p {
-  color: red;
-}
- -

L'atribut href de l'element {{htmlelement ("link")}} necessita fer referència a un fitxer del sistema de fitxers.

- -

A l'exemple anterior, el fitxer CSS es troba a la mateixa carpeta que el document HTML, però el pots col·locar en un altre lloc i ajustar la ruta especificada per a adaptar-s’hi, per exemple:

- -
<!-- Dins d’un subdirector anomenat styles dins del directori actual -->
-<link rel="stylesheet" href="styles/style.css">
-
-<!-- Dins d’un subdirector anomenat general, que es troba en un subdirector anomenat styles, dins del directori actual -->
-<link rel="stylesheet" href="styles/general/style.css">
-
-<!-- Puja un nivell de directori i, a continuació, a un subdirector anomenat styles -->
-<link rel="stylesheet" href="../styles/style.css">
- -

Fulls d’estil interns

- -

Un full d’estil intern és on no hi ha cap fitxer CSS extern, sinó que el CSS se situa dins d’un element {{htmlelement("style")}} que hi ha dins de l’HTML {{htmlelement("head")}}.

- -

Així doncs, l’HTML quedaria així:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>El meu experiment amb CSS</title>
-    <style>
-      h1 {
-        color: blue;
-        background-color: yellow;
-        border: 1px solid black;
-      }
-
-      p {
-        color: red;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Hola món!</h1>
-    <p>Aquest és el meu primer exemple amb CSS</p>
-  </body>
-</html>
- -

Això pot ser útil en algunes circumstàncies (potser treballes amb un sistema de gestió de continguts en què no pots modificar els fitxers CSS directament), però no és tan eficient com els fulls d'estil externs; en un lloc web, el CSS s'hauria de canviar individualment a cada pàgina i actualitzar-se en diversos llocs si s’hi haguessin de fer canvis.

- -

Estils en línia

- -

Els estils en línia són declaracions CSS que afecten només un element, que està contingut dins d'un atribut style:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>El meu experiment amb CSS </title>
-  </head>
-  <body>
-    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hola món!</h1>
-    <p style="color:red;">Aquest és el meu primer exemple amb CSS</p>
-  </body>
-</html>
- -

Si et plau, no ho facis!, tret que realment ho hagis de fer. És molt dolent per al manteniment (potser hauràs d’actualitzar la mateixa informació diverses vegades per cada document) i també barreges la informació de presentació del CSS amb la informació d’estructuració de l’HTML, i dificultes la llegibilitat i comprensió del codi. Mantenir diferents tipus de codificació separats permet una feina molt més fàcil a tots aquells que treballen en el codi.

- -

Hi ha llocs web en què els estils en línia són més comuns, o fins i tot recomanables. Pot ser que hagis de recórrer a utilitzar-los si el teu entorn de treball és molt restrictiu (potser el teu CMS només et permet editar el cos de l'HTML). També veuràs que s’utilitzen molt al correu electrònic per a obtenir compatibilitat amb tants clients de correu electrònic com sigui possible.

- -

Jugar amb el CSS en aquest article

- -

En aquest article hi ha molt de CSS. Per fer-ho, et recomanem que creïs un directori/carpeta al teu ordinador i, a dins, hi creïs una còpia dels dos fitxers següents:

- -

index.html:

- -
<!DOCTYPE html>
-<html lang="ca">
-  <head>
-    <meta charset="utf-8">
-    <title>El meu experiment amb CSS</title>
-    <link rel="stylesheet" href="styles.css">
-  </head>
-  <body>
-
-    <p>Crea el teu HTML de prova aquí</p>
-
-  </body>
-</html>
- -

styles.css:

- -
/* Crea el teu CSS de prova aquí */
-
-p {
-  color: red;
-}
- -

Aleshores, quan vulguis experimentar amb un CSS, substitueix el contingut del <body> de l’HTML per un altre HTML, i comença per afegir el codi CSS per a donar-hi estil dins del fitxer CSS.

- -

Si no utilitzes un sistema amb què puguis crear fitxers fàcilment, pots utilitzar l'editor interactiu següent per experimentar.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}}

- -

Continua i diverteix-te!

- -

Selectors

- -

No es pot parlar de CSS sense parlar de selectors, i ja n'hem descobert diversos tipus al tutorial de Primers passos amb el CSS. Un selector és la manera amb què seleccionem alguna cosa del document HTML per a aplicar-hi estils. Si els teus estils no s’apliquen, és probable que el selector no coincideixi amb el que creus que hauria de coincidir.

- -

Cada regla CSS comença amb un selector o una llista de selectors que indica al navegador a quin element o elements han d’aplicar-se les regles. Totes les mostres següents són exemples de selectors o llistes de selectors vàlids.

- -
h1
-a:link
-.manythings
-#onething
-*
-.box p
-.box p:first-child
-h1, h2, .intro
- -

Prova de crear algunes regles CSS que utilitzin els selectors anteriors i algun codi HTML al qual aplicar-hi els estils. Si no saps què significa alguna de les sintaxis anterior, prova de buscar-la a MDN.

- -
-

Nota: Aprendràs molt més sobre els selectors als nostres tutorials Selectors CSS, al mòdul següent.

-
- -

Especificitat

- -

Sovint hi haurà escenaris en què dos selectors podrien seleccionar el mateix element HTML. Considera el full d’estil següent, en què hi ha una regla amb un selector p que mostrarà els paràgrafs de color blau, i també una classe que mostrarà els elements seleccionats de color vermell.

- -
.special {
-  color: red;
-}
-
-p {
-  color: blue;
-}
- -

Diguem que al document HTML hi ha un paràgraf amb una classe special. Totes dues regles es podrien aplicar; quina guanyaria? De quin color creus que es veurà el nostre paràgraf?

- -
<p class="special">De quin color sóc?</p>
- -

El llenguatge CSS té regles per a controlar quina regla guanyarà en cas de collisió; s'anomenen cascada i especificitat. Al bloc de codi següent hem definit dues regles per al selector p, però el paràgraf acaba sent de color blau. Això és perquè la declaració que hauria de fer que es veiés de color blau apareix més tard al full d’estil, i els estils posteriors anul·len els anteriors. És la cascada en acció.

- -
p {
-  color: red;
-}
-
-p {
-  color: blue;
-}
- -

Tanmateix, en el cas del nostre exemple anterior, amb el selector de classes i el selector d’elements, la classe guanya, i el paràgraf es veu de color vermell, encara que apareix abans en el full d’estil. Es diu que una classe és més específica, o té més especificitat, que un selector d’elements, de manera que guanya.

- -

Prova l'experiment anterior: afegeix el codi HTML al teu experiment i, a continuació, afegeix les dues regles p { ... } al teu full d'estil. A continuació, canvia el primer selector de p per .special i observa com canvia l’estil.

- -

Les regles d’especificitat i cascada poden semblar una mica complicades al principi, però són més fàcils d’entendre a mesura que s'avança amb el CSS. A l'article Cascada i herència, al qual accediràs al mòdul següent, s'explica amb més detall, entre altres coses, la manera de calcular l’especificitat. Ara per ara, només has de recordar que existeix, i que és possible que de vegades el CSS no s'apliqui tal com esperes perquè alguna cosa del full d'estil té una especificitat més alta. Identificar que hi ha més d'una regla que pot aplicar-se a un element és el primer pas per a solucionar aquests problemes.

- -

Propietats i valors

- -

El CSS consta de dos blocs de construcció bàsics:

- - - -

En la imatge següent es ressalten una sola propietat i el seu valor. El nom de la propietat és color i el valor blue.

- -

Una declaració del CSS ressaltada

- -

Una propietat emparellada amb un valor s'anomena declaració CSS. Les declaracions CSS es posen dins dels blocs de declaració CSS. Aquesta imatge següent mostra el nostre CSS amb el bloc de declaracions ressaltat.

- -

Un bloc de declaracions ressaltat

- -

Finalment, els blocs de declaració CSS es combinen amb selectors per a produir conjunts de regles CSS (o regles CSS). La nostra imatge conté dues regles, una per al selector h1 i una altra per al selector p. La regla per a h1 està ressaltada.

- -

La regla per a h1 està ressaltada

- -

Definir propietats CSS amb valors específics és la funció principal del llenguatge CSS. El motor CSS calcula quines declaracions s’apliquen a cada element d’una pàgina per tal de definir-la i donar-hi l’estil adequat.

- -
-

Important: Les propietats i valors de CSS són sensibles a majúscules i minúscules. Cada parella de propietat i valor es separa per un dos punts (:).

-
- -

Prova de cercar diferents valors de les propietats següents i escriu regles CSS que s’apliquin a diferents elements HTML:

- - - -
-

Important: Si una propietat és desconeguda o si un valor no és vàlid per a una propietat determinada, es considera que la declaració no és vàlida i el motor CSS del navegador la ignora completament.

-
- -
-

Important: En CSS (i altres estàndards web) s'ha acceptat l'ortografia nord-americana com a estàndard per a resoldre la incertesa lingüística. Per exemple, la propietat color sempre s'ha d'escriure color. Si n’escrivim la versió britànica colour, no funcionarà.

-
- -

Funcions

- -

Si bé la majoria dels valors són paraules clau o valors numèrics relativament simples, hi ha alguns valors que prenen la forma d’una funció. Un exemple seria la funció calc(). Aquesta funció permet fer operacions matemàtiques senzilles des del CSS, per exemple:

- -
-
<div class="outer"><div class="box">la caixa interior és de 90% - 30px.</div></div>
- -
.outer {
-  border: 5px solid black;
-}
-
-.box {
-  padding: 10px;
-  width: calc(90% - 30px);
-  background-color: rebeccapurple;
-  color: white;
-}
-
- -

Això es presenta així:

- -

{{EmbedLiveSample('calc_example', '100%', 200)}}

- -

Una funció consisteix en el nom de la funció i, a continuació, uns parèntesis entre els quals es col·loquen els valors permesos per a aquesta funció. En el cas de l'exemple calc() anterior, volem que l'amplada d'aquesta caixa sigui el 90% de l'amplada del bloc que la conté, menys 30 píxels. No és un valor que es pugui calcular d’antuvi i senzillament introduir-lo en el CSS corresponent, perquè no sabem quin serà aquest 90%. Com en tots els valors, en la pàgina corresponent de MDN hi ha exemples d’ús perquè puguis veure com funciona aquesta funció.

- -

Un altre exemple serien els diversos valors de {{cssxref("transform")}}, com ara rotate().

- -
-
<div class="box"></div>
- -
.box {
-  margin: 30px;
-  width: 100px;
-  height: 100px;
-  background-color: rebeccapurple;
-  transform: rotate(0.8turn)
-}
-
- -

La sortida del codi anterior és la següent:

- -

{{EmbedLiveSample('transform_example', '100%', 200)}}

- -

Prova de cercar diferents valors de les propietats següents i escriu regles CSS que s’apliquin a diferents elements HTML:

- - - -

@rules

- -

Les @rules (llegit «at-rules», en anglès) proporcionen instruccions sobre com ha de comportar-se el CSS, o quin CSS s'ha d'aplicar. Algunes @rules són senzilles i es formen només amb el nom de la regla i el valor. Per exemple, per a importar un full d’estil addicional al teu full d’estil CSS principal, pots utilitzar @import:

- -
@import 'styles2.css';
- -

Una de les @rules més comunes que trobaràs és @media, que et permet crear consultes a mèdia (o media queries, en anglès) per a aplicar CSS només quan determinades condicions són certes (per exemple, quan la resolució de la pantalla està per sobre d’una quantitat determinada, o la pantalla és més ampla que una certa amplada).

- -

Al CSS següent hi ha un full d’estil que dona a l’element <body> un color de fons rosat. Tot i això, després utilitzem @media per a crear una secció al nostre full d’estil que només s’aplicarà als navegadors amb una visualització més ampla de 30em. Si el navegador és més ample de 30em, el color de fons serà blau.

- -
body {
-  background-color: pink;
-}
-
-@media (min-width: 30em) {
-  body {
-    background-color: blue;
-  }
-}
- -

Trobaràs altres @rules al llarg d’aquests tutorials.

- -

Prova d’afegir una consulta a un mèdia al teu CSS que canviï els estils en funció de l’amplada de la visualització. Canvia l'amplada de la finestra del navegador per veure’n el resultat.

- -

Propietats abreviades

- -

Algunes propietats com {{cssxref ("font")}}, {{cssxref ("background")}}, {{cssxref ("padding")}}, {{cssxref ("border")}} i {{cssxref ("margin")}} s’anomenen propietats abreviades: això és perquè permeten establir diversos valors de propietat en una sola línia, que estalvia temps i aconsegueix que el codi es vegi més net.

- -

Per exemple, aquesta línia:

- -
/* En les propietats abreviades de 4 valors, com ara margin i padding, s'apliquen els valors
-   a la part superior, dreta, inferior, esquerra (en sentit horari des de la part superior). També hi ha altres
-   propietats abreviades, per exemple les propietats abreviades de 2 valors, que estableixen una àrea de farciment/marge
-   a la part superior/inferior, a l'esquerra/a la dreta */
-padding: 10px 15px 15px 5px;
- -

Fa el mateix que totes aquestes juntes:

- -
padding-top: 10px;
-padding-right: 15px;
-padding-bottom: 15px;
-padding-left: 5px;
- -

Mentre que aquesta línia:

- -
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
- -

Fa el mateix que totes aquestes juntes:

- -
background-color: red;
-background-image: url(bg-graphic.png);
-background-position: 10px 10px;
-background-repeat: repeat-x;
-background-scroll: fixed;
- -

No intentarem ensenyar-les de manera exhaustiva ara; trobaràs molts exemples més endavant en el curs i et recomanem que cerquis més noms de propietats abreviades clau a les nostres referències CSS per a obtenir-ne més informació.

- -

Prova d’afegir les declaracions anteriors al teu CSS per veure com afecta a l’estil del teu HTML. Prova d’experimentar amb valors diferents.

- -
-

Atenció: Mentre que les propietats abreviades sovint et permeten ometre els valors, després restabliran els valors que no incloguis als seus valors inicials. D’aquesta manera es garanteix l’ús d’un conjunt de valors coherent. Però et pot confondre si esperes que la propietat abreviada només canviï els valors que has marcat.

-
- -

Comentaris

- -

De la mateixa manera que amb l’HTML, et convidem a posar comentaris al teu CSS per a ajudar-te a comprendre com funciona el teu codi en tornar-hi al cap d’uns mesos, i per a ajudar altres que treballin sobre aquest codi.

- -

Els comentaris en CSS comencen amb /* i acaben amb */. Al bloc de codi següent hem utilitzat comentaris per marcar l'inici de diverses seccions de codi diferents. És útil per a ajudar-te a orientar-te pel codi a mesura que n’augmenta l’extensió. Cerca els comentaris al teu editor de codi.

- -
/* Manejar una aplicació d’estil als elements bàsics */
-/* -------------------------------------------------------------------------------------------- */
-body {
-  font: 1em/150% Helvetica, Arial, sans-serif;
-  padding: 1em;
-  margin: 0 auto;
-  max-width: 33em;
-}
-
-@media (min-width: 70em) {
-  /* Posem en cas especial la mida del tipus de lletra general. En una pantalla gran o en una finestra,
-     augmentem la mida de la lletra per a facilitar la lectura */
-  body {
-    font-size: 130%;
-  }
-}
-
-h1 {font-size: 1.5em;}
-
-/* Manejar elements específics que es troben al DOM */
-/* -------------------------------------------------------------------------------------------- */
-div p, #id:first-line {
-  background-color: red;
-  border-radius: 3px;
-}
-
-div p {
-  margin: 0;
-  padding: 1em;
-}
-
-div p + p {
-  padding-top: 0;
-}
- -

Els comentaris també són útils per a inhabilitar temporalment algunes parts del codi amb finalitats de prova, per exemple, si intentes trobar quina part del teu codi causa un error. A l’exemple següent hem «comentat» (posat com a comentaris) les regles per al selector .special.

- -
/*.special {
-  color: red;
-}*/
-
-p {
-  color: blue;
-}
- -

Afegeix alguns comentaris al teu CSS per acostumar-te a utilitzar-los.

- -

Espais en blanc

- -

Els espais en blanc són els espais, els sagnats de text i les línies noves. De la mateixa manera que en l’HTML, el navegador ignora els espais en blanc del teu CSS. El valor dels espais en blanc està en que són molt útils per a millorar la llegibilitat.

- -

En l'exemple que trobaràs a continuació, cada declaració (i inici/final de regla) és en una línia de text pròpia. Probablement és una bona manera d’escriure el CSS, perquè fa que sigui fàcil de mantenir i d'entendre:

- -
body {
-  font: 1em/150% Helvetica, Arial, sans-serif;
-  padding: 1em;
-  margin: 0 auto;
-  max-width: 33em;
-}
-
-@media (min-width: 70em) {
-  body {
-    font-size: 130%;
-  }
-}
-
-h1 {
-  font-size: 1.5em;
-}
-
-div p,
-#id:first-line {
-  background-color: red;
-  border-radius: 3px;
-}
-
-div p {
-  margin: 0;
-  padding: 1em;
-}
-
-div p + p {
-  padding-top: 0;
-}
-
- -

Podries escriure exactament el mateix CSS de la manera següent, eliminant-ne la majoria d’espais en blanc. Aquest codi és funcionalment idèntic al del primer exemple, però segur que estàs d’acord que és una mica més feixuc de llegir:

- -
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
-@media (min-width: 70em) { body {font-size: 130%;} }
-
-h1 {font-size: 1.5em;}
-
-div p, #id:first-line {background-color: red; border-radius: 3px;}
-div p {margin: 0; padding: 1em;}
-div p + p {padding-top: 0;}
-
- -

La disposició del codi que tries sol ser una preferència personal, tot i que quan comences a treballar en equip, és possible que trobis que l’equip té la seva guia d’estil pròpia que especifica una convenció acordada a seguir.

- -
-

Important: Has de tenir cura amb l’espai en blanc que hi ha d’haver entre una propietat del CSS i el seu valor.

-
- -

Per exemple, les declaracions següents són vàlides en CSS:

- -
margin: 0 auto;
-padding-left: 10px;
- -

Però les següents no són vàlids:

- -
margin: 0auto;
-padding- left: 10px;
- -

Veus els errors d'espaiat? 0auto no es reconeix com a valor vàlid per a la propietat margin (0 i auto són dos valors separats), i el navegador no reconeix padding- com a propietat vàlida. El nom correcte de la propietat (padding-left) ha quedat separat per un espai perdut.

- -

Sempre t'has d'assegurar de separar valors diferenciats els uns dels altres com a mínim per un espai, però mantenir els noms de la propietat i els valors de propietat junts, com cadenes ininterrompudes.

- -

Prova de jugar amb espais en blanc al teu CSS per veure què es trenca i què no.

- -

Què segueix?

- -

És útil entendre una mica com el navegador pren els teus codis HTML i CSS i els converteix en una pàgina web, així que en l’article següent, (Com funciona el CSS), donarem una ullada a aquest procés.

- -

{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

En aquest mòdul

- -
    -
  1. Què és el CSS
    2. -
  2. Primers passos amb el CSS
    3. -
  3. Com s'estructura el CSS
    4. -
  4. Com funciona el CSS
    5. -
  5. Aplica els teus nous coneixements
    6. -
diff --git a/files/ca/learn/css/first_steps/com_funciona_el_css/index.html b/files/ca/learn/css/first_steps/com_funciona_el_css/index.html deleted file mode 100644 index 9621d2c21c..0000000000 --- a/files/ca/learn/css/first_steps/com_funciona_el_css/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Com funciona el CSS -slug: Learn/CSS/First_steps/Com_funciona_el_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works ---- -

{{LearnSidebar}}
- {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

- -

Hem après els conceptes bàsics de CSS, per a què serveix i com escriure fulls d'estil senzills. En aquest article veurem com un navegador pren els llenguatges CSS i HTML i els converteix en una pàgina web.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML).
Objectiu:Entendre els conceptes bàsics de com el navegador analitza els llenguatges CSS i HTML i què passa quan un navegador troba un CSS que no entén.
- -

Com funciona realment el CSS?

- -

Quan un navegador mostra un document, ha de combinar el contingut del document amb la informació d’estil. Processa el document en un seguit d'etapes, que enumerarem a continuació. Tingues present que aquesta és una versió molt simplificada de què passa quan un navegador carrega una pàgina web, i que els diversos navegadors gestionen el procés de maneres diferents. Però això és més o menys el que succeeix.

- -
    -
  1. El navegador carrega el codi HTML (per exemple, el rep de la xarxa).
    2. -
  2. Converteix el codi {{Glossary("HTML")}} en un model d'objectes del document (document object model o {{Glossary("DOM")}}). El DOM representa el document a la memòria de l'ordinador. L’explicarem amb més detall en la secció següent.
    3. -
  3. El navegador recupera la majoria dels recursos als quals està vinculat el document HTML, com ara imatges i vídeos incrustats... i CSS enllaçats. El JavaScript es tracta una mica més endavant en el procés, i no en parlarem aquí per no embolicar les coses.
    4. -
  4. El navegador analitza el CSS recuperat i ordena les diferents regles segons els tipus de selector en diferents «cubetes». Per exemple: element, classe, ID, etc. A partir dels selectors que troba, calcula quines regles s’han d’aplicar als nodes del DOM i hi atribueix l’estil segons sigui necessari (aquest pas intermedi s’anomena arbre de renderització).
    5. -
  5. L'arbre de representació presenta l'estructura en què ha d'aparèixer després que s'apliquin les regles.
    6. -
  6. La presentació visual de la pàgina es mostra a la pantalla (aquesta etapa s’anomena pintura).
    7. -
- -

El diagrama següent ofereix una visió senzilla del procés.

- -

- -

Sobre el DOM

- -

Un DOM té una estructura en forma d'arbre. Cada element, atribut i fragment de text del llenguatge de marcatge es converteix en un {{Glossary("Node/DOM","node DOM")}} en l'estructura de l'arbre. Els nodes es defineixen per la seva relació amb els altres nodes del DOM. Alguns elements són pares de nodes secundaris, i els nodes secundaris tenen nodes germans.

- -

Entendre el DOM t'ajuda a dissenyar, depurar i mantenir el teu CSS perquè el DOM és el lloc on es troba el CSS i el contingut del document. Quan comencis a treballar amb les eines DevTools (o eines del desenvolupador) del navegador, et desplaçaràs pel DOM mentre selecciones els elements per veure quines regles s'apliquen.

- -

Una representació real del DOM

- -

En lloc d’una llarga i avorrida explicació, vegem amb un exemple com un fragment HTML es converteix en un DOM.

- -

Prenguem el codi HTML següent:

- -
<p>
-  Utilitzem:
-  <span>Fulls</span>
-  <span>d'estil</span>
-  <span>en cascada</span>
-</p>
-
- -

En el DOM, el node que correspon al nostre element <p> és un element pare. Els nodes fills són un node de text i els tres nodes corresponen als elements <span>. Els nodes SPAN són també nodes pare, i tenen nodes de text com a nodes fill:

- -
P
-├─ "Utilitzem:"
-├─ SPAN
-| └─ "Fulls"
-├─ SPAN
-| └─ "d’estil"
-└─ SPAN
-   └─ "en cascada"
-
- -

Així és com un navegador interpreta aquest fragment HTML: es confecciona l'arbre DOM anterior i el navegador el representa així:

- -

{{EmbedLiveSample('Una_representació_real_del_DOM', '100%', 55)}}

- - - -

Aplicar CSS al DOM

- -

Suposem que hem afegit una mica de codi CSS al nostre document per a donar-hi estil. Un cop més, l'HTML és el següent:

- -
<p>
-  Utilitzem:
-  <span>Fulls</span>
-  <span>d'estil</span>
-  <span>en cascada</span>
-</p>
- -

Suposem que hi apliquem el CSS següent:

- -
span {
-  border: 1px solid black;
-  background-color: lime;
-}
- -

El navegador analitza el codi HTML i crea un DOM, i després analitza el CSS. Atès que l'única regla disponible en el CSS té un selector span, el navegador pot ordenar el CSS molt de pressa! Aplica aquesta regla a cadascun dels tres <span> i després pinta a la pantalla la representació visual final.

- -

La sortida actualitzada és la següent:

- -

{{EmbedLiveSample('Aplicar_CSS_al_DOM', '100%', 55)}}

- -

En el nostre article Depurar el CSS del mòdul següent, utilitzarem les eines DevTools del navegador per depurar problemes del CSS i coneixerem més sobre com l'interpreta el navegador.

- -

Què passa si un navegador es troba amb CSS que no entén?

- -

En un article anterior hem esmentat que no tots els navegadors implementen el CSS al mateix temps. A més, molta gent no utilitza la versió més recent del navegador. Tenint en compte que el CSS està en desenvolupament constant i, per tant, va per davant del que els navegadors poden reconèixer, et podries preguntar què passa si un navegador troba un selector CSS o una declaració que no reconeix.

- -

La resposta és que no fa res i només passa a la declaració CSS següent.

- -

Si un navegador analitza les teves regles i troba una propietat o un valor que no entén, l'ignora i passa a la declaració següent. Ho fa si has comès un error i has escrit malament una propietat o un valor, o si la propietat o el valor són massa recents i el navegador encara no és compatible.

- -

De la mateixa manera, si un navegador troba un selector que no entén, ignora tota la regla i passa a la següent.

- -

En l’exemple següent hem utilitzat l’ortografia britànica per a la propietat del color, cosa que invalida aquesta propietat perquè no es reconeix. Per tant, el paràgraf no es veu de color blau. Tots els altres CSS s'han aplicat; només s’ignora la línia no vàlida.

- -
-
<p>Vull que aquest text sigui gran, en negreta i blau.</p>
- -
p {
-  font-weight: bold;
-  colour: blue; /* Ortografia incorrecta de la propietat color */
-  font-size: 200%;
-}
-
- -

{{EmbedLiveSample('Skipping_example', '100%', 200)}}

- -

Aquest comportament és molt útil. Significa que pots utilitzar el CSS nou com una millora, perquè no es produirà cap error si no s’entén: pot ser que el navegador entengui la funció nova, o que no l’entengui. Combinat amb el funcionament en cascada i el fet que els navegadors utilitzen l’últim CSS que es troben en un full d’estil quan hi ha dues regles amb la mateixa especificitat, també pots oferir alternatives per a navegadors que no admeten el CSS nou.

- -

Això funciona especialment bé quan vols fer servir un valor força nou i no és compatible amb tots els navegadors. Per exemple, alguns navegadors antics no admeten calc() com a valor. Podríem donar una amplada alternativa a una caixa en píxels i després donar una amplada amb un valor calc() de 100% - 50px. Els navegadors antics faran servir la versió en píxels i ignoraran la línia sobre calc() perquè no l’entenen. Els navegadors nous interpretaran la línia amb píxels i després la substituiran per la línia amb calc(), perquè la línia apareix més tard en la cascada.

- -
.box {
-  width: 500px;
-  width: calc(100% - 50px);
-}
- -

En articles posteriors analitzarem moltes maneres més de donar compatibilitat a diferents navegadors.

- -

Per acabar

- -

Ja has acabat aquest mòdul; només hi ha una cosa més per fer. En l’article següent faràs servir els teus nous coneixements per a canviar el disseny d'un exemple i provar una mica de codi CSS en el procés.

- -

{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

- -

En aquest mòdul

- -
    -
  1. Què és el CSS
    2. -
  2. Primers passos amb el CSS
    3. -
  3. Com s'estructura el CSS
    4. -
  4. Com funciona el CSS
    5. -
  5. Aplica els teus nous coneixements
    6. -
diff --git a/files/ca/learn/css/first_steps/getting_started/index.html b/files/ca/learn/css/first_steps/getting_started/index.html new file mode 100644 index 0000000000..dfc1ae29b3 --- /dev/null +++ b/files/ca/learn/css/first_steps/getting_started/index.html @@ -0,0 +1,254 @@ +--- +title: Com començar amb CSS +slug: Learn/CSS/First_steps/Com_començar_amb_CSS +translation_of: Learn/CSS/First_steps/Getting_started +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
+ +

En aquest article, agafarem un document HTML senzill i hi aplicarem una mica de CSS per aprendre algunes coses pràctiques sobre aquest llenguatge informàtic.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML).
Objectiu:Comprendre els fonaments bàsics d’enllaçar un document CSS a un fitxer HTML i poder crear un text simple amb CSS.
+ +

Començar amb l'HTML

+ +

El nostre punt de partida és un document HTML. Pots copiar el codi de sota si vols treballar al teu propi ordinador. Desa el codi de sota com a index.html en una carpeta de l'ordinador.

+ +
<!doctype html>
+<html lang="ca">
+<head>
+    <meta charset="utf-8">
+    <title>Introducció al CSS</title>
+</head>
+
+<body>
+
+    <h1>Sóc un títol de nivell u</h1>
+
+    <p>Aquest és un paràgraf de text. Al text hi ha un <span>element span</span>
+i també un enllaç <a href="http://example.com">link</a>.</p>
+
+    <p>Aquest és el segon paràgraf. Conté un element <em>subratllat</em>.</p>
+
+    <ul>
+        <li>Article 1</li>
+        <li>Article 2</li>
+        <li>Article <em>tres</em></li>
+    </ul>
+
+</body>
+
+</html>
+
+ +
+

Nota: Si llegeixes això en un dispositiu o en un entorn on no pots crear fitxers fàcilment, no et preocupis: a continuació es mostren editors de codi en directe per a escriure un exemple de codi aquí a la pàgina.

+
+ +

Afegir CSS al nostre document

+ +

El primer que hem de fer és dir al document HTML que tenim unes regles CSS que volem que utilitzi. Habitualment trobaràs tres maneres diferents d’aplicar CSS a un document HTML, però de moment examinarem la manera més comuna i útil: enllaçar el CSS des de la capçalera del document.

+ +

Crea un fitxer a la mateixa carpeta que el teu document HTML i desa’l com styles.css. L’extensió .css mostra que es tracta d’un fitxer CSS.

+ +

Per a enllaçar styles.css a index.html, afegeix la línia següent en algun lloc de la capçalera ({{htmlelement("head")}}) del document HTML:

+ +
<link rel="stylesheet" href="styles.css">
+ +

Aquest element {{htmlelement("link")}} indica al navegador que hi ha un full d'estil i utilitza l'atribut rel i la ubicació d'aquest full d'estil com a valor de l'atribut href. Pots provar si funciona el CSS afegint una regla a styles.css. Fent servir l'editor de codi, afegeix el següent al fitxer CSS:

+ +
h1 {
+  color: red;
+}
+ +

Desa els fitxers HTML i CSS i torna a carregar la pàgina en un navegador web. Ara el títol d’encapçalament de primer nivell a la part superior del document s'ha de veure de color vermell. Si això succeeix, enhorabona: has aplicat amb èxit una mica de CSS a un document HTML. Si això no passa, comprova ho has escrit tot correctament.

+ +

Pots continuar treballant amb styles.css localment, o bé pots utilitzar el nostre editor interactiu, que trobaràs a continuació, per continuar amb aquest tutorial. L’editor interactiu actua com si el CSS del primer quadre estigués vinculat al document HTML, tal com passa amb el nostre document anterior.

+ +

Aplicar estil als elements HTML

+ +

En tornar el títol vermell, ja hem demostrat que podem seleccionar un element HTML i aplicar-hi estil. Ho fem delimitant un selector d’elements: un seleccionador que coincideix directament amb un nom d’element HTML. Per a seleccionar tots els paràgrafs del document, utilitzaries el selector p. Per a convertir tots els paràgrafs en verd, faries servir:

+ +
p {
+  color: green;
+}
+ +

Pots seleccionar diversos selectors alhora, separats amb una coma. Si volem que tots els paràgrafs i tots els elements de la llista siguin verds, la regla ha de ser la següent:

+ +
p, li {
+    color: green;
+}
+ +

Prova-ho a l’editor interactiu següent (edita els quadres de codi) o al teu document CSS local.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} 

+ +

Canviar el comportament predeterminat dels elements

+ +

Quan observem un document HTML ben marcat, fins i tot una cosa tan simple com el nostre exemple, podem veure que el navegador afegeix algun estil per defecte per fer que l’HTML sigui llegible. Els títols són grans i en lletra negreta i la nostra llista inclou vinyetes. Això passa perquè els navegadors tenen fulls d’estil interns que contenen estils predeterminats que s’apliquen per defecte a totes les pàgines; sense això no hi hauria distincions dins el text i hauríem d’aplicar estil a tot des de zero. Tots els navegadors moderns mostren el contingut HTML de la mateixa manera per defecte.

+ +

Tanmateix, sovint voldràs alguna cosa que no sigui la tria que ha fet el navegador. Això es pot fer escollint només l’element HTML que vols canviar i fent servir una regla CSS per a canviar-ne l’aspecte.  Un bon exemple és <ul>, que marca una llista no ordenada. Mostra boletes en els elements de llista, però si decideixo que no les vull, les puc eliminar:

+ +
li {
+  list-style-type: none;
+}
+ +

Prova d’afegir això al teu CSS.

+ +

És una bona opció consultar la propietat list-style-type a la pàgina de MDN per veure quins valors admet. Per provar uns valors diferents, dona una ullada a la pàgina list-style-type, on trobaràs un exemple interactiu a la part superior de la pàgina i, a continuació, es detallen tots els valors que s’admeten.

+ +

Si consultes aquesta pàgina, descobriràs que, a banda d’eliminar les vinyetes de la llista, també les pots canviar: prova de canviar-les per vinyetes quadrades amb el valor square.

+ +

Afegir una classe

+ +

Fins al moment hem dissenyat elements basats en els seus noms en HTML. Això funciona sempre que vulguis que tots els elements d’aquest tipus del document presentin el mateix aspecte. Moltes vegades no és el cas, així que hauràs de trobar la manera de seleccionar un subconjunt dels elements sense canviar els altres. La manera més habitual de fer-ho és afegir una classe a l'element HTML i delimitar aquesta classe.

+ +

Al teu document HTML, afegeix un atribut de classe al segon element de la llista. La teva llista ara es veurà així:

+ +
<ul>
+  <li>Article 1</li>
+  <li class="special">Item two</li>
+  <li>Article <em>tres</em></li>
+</ul>
+ +

Al teu CSS pots seleccionar la classe special creant un selector que comenci amb un punt. Afegeix el següent al teu fitxer CSS:

+ +
.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Desa i actualitza per veure quin és el resultat.

+ +

Pots aplicar la classe special a qualsevol element de la pàgina que vulguis que tingui el mateix aspecte que aquesta llista. Per exemple, potser vols que l’element <span> del paràgraf també es vegi de color taronja i en negreta. Prova d’afegir-hi una classe special i torna a carregar la pàgina, i observa què passa.

+ +

De vegades veuràs regles amb un selector que enumera el selector d’elements HTML juntament amb la classe:

+ +
li.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Aquesta sintaxi vol dir «selecciona qualsevol element li que tingui una classe special». Si ho fas així, ja no podràs aplicar la classe a un element <span> o qualsevol altre element simplement afegint-hi la classe; hauràs d’afegir aquest element a la llista de selectors:

+ +
li.special,
+span.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Com pots imaginar, algunes classes podrien aplicar-se a molts elements i no vols haver d’editar el CSS cada vegada que calgui adoptar un estil nou. Per tant, de vegades és millor deixar de banda l’element i simplement fer referència a la classe, tret que sàpigues que vols crear algunes regles especials per a un sol element i potser vols assegurar-te que no s’apliquen a altres coses.

+ +

Aplicar estil en funció de la ubicació en un document

+ +

Hi ha vegades que voldràs que alguna cosa sembli diferent segons el lloc en què es troba dins el document. Hi ha diversos selectors que poden ajudar en aquesta situació, però ara per ara només ens fixarem en un parell. Al nostre document hi ha dos elements <em>: un dins d’un paràgraf i l’altre dins d’una llista. Per a seleccionar només un <em> que estigui situat dins d'un element <li>, pots utilitzar un selector anomenat combinador de descendents, que simplement pren la forma d'un espai entre dos altres selectors.

+ +

Afegeix la regla següent al teu full d’estil.

+ +
li em {
+  color: rebeccapurple;
+}
+ +

Aquest selector seleccionarà qualsevol element <em> que es trobi dins un (descendent de) <li>. Per tant, al document d’exemple, hauries de trobar que el <em> de l’element de la tercera llista és morat, però el que hi ha dins del paràgraf no canvia.

+ +

Una altra cosa que potser t'agradaria provar és aplicar estil a un paràgraf que surt immediatament després d'un títol d’encapçalament del mateix nivell de jerarquia de l'HTML. Per fer-ho, col·loca un + (un combinador de germans adjacents) entre els selectors.

+ +

Prova d'afegir aquesta regla al teu full d'estil, també:

+ +
h1 + p {
+  font-size: 200%;
+}
+ +

L'exemple en directe següent inclou les dues regles anteriors. Prova d'afegir una regla perquè un element span es mostri de color vermell si és dins d'un element paràgraf. Sabràs que ho has fet bé si element span del primer paràgraf és vermell, però el que apareix al primer element de llista no canvia de color.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}

+ +
+

Nota: Com pots veure, el CSS ens ofereix diverses maneres de seleccionar elements, i fins ara només n’hem gratat la superfície! Analitzarem amb detall tots aquests selectors i molts més en els nostres articles sobre selectors que trobaràs més endavant en el curs.

+
+ +

Aplicar estil en funció de l’estat

+ +

El darrer tipus d’aplicació d’estil que analitzarem en aquest article és la capacitat d’aplicar estil a les coses en funció del seu estat. Un exemple senzill d’això són els enllaços. Quan dissenyem un enllaç, hem de seleccionar l’element <a> (anchor). Això té diferents estats en funció de si no s’ha visitat, s’ha visitat, s’hi passa pel damunt, se selecciona amb el teclat o s'hi fa clic (s’activa). Pots fer servir el CSS per a dirigir-te a aquests estats diferents: el CSS que trobaràs a continuació estableix els enllaços no visitats en rosa, i els visitats en verd.

+ +
a:link {
+  color: pink;
+}
+
+a:visited {
+  color: green;
+}
+ +

Pots canviar l'aparença de l'enllaç quan l'usuari hi col·loca el punter a sobre, per exemple, eliminar-ne el subratllat, que s'aconsegueix amb la regla següent:

+ +
a:hover {
+  text-decoration: none;
+}
+ +

A l’exemple en directe següent pots jugar amb diferents valors per als diversos estats d’un enllaç. Hi hem afegit les regles anteriors, i ens adonem que el color rosa és força clar i difícil de llegir; per què no el canviem per un color que vagi més bé? Es poden posar els enllaços en negreta?

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} 

+ +

Hem eliminat el subratllat del nostre enllaç quan s’hi passa el punter del ratolí per sobre. Pots eliminar el subratllat de tots els estats d’un enllaç. Val la pena recordar, però, que en un lloc web real, vols que els visitants sàpiguen que un enllaç és un enllaç. Deixar el subratllat a lloc pot ser una pista important perquè la gent s’adoni que pot fer clic en un text dins d’un paràgraf; aquest és el comportament al qual estan acostumats. Com tot en CSS, amb els canvis es pot fer que el document sigui menys accessible; tractarem de posar en evidència els entrebancs potencials en els llocs adequats.

+ +
+

Nota: sovint veuràs que en aquests articles i en l’MDN es menciona l'accessibilitat. Quan parlem d’accessibilitat ens referim al requisit que les nostres pàgines web siguin comprensibles i utilitzables per tothom.

+ +

El teu visitant pot entrar a la pàgina web des d'un ordinador amb un ratolí o un trackpad, o des d’un telèfon amb pantalla tàctil. O potser utilitza un lector de pantalla que llegeix el contingut del document; o necessita utilitzar una mida de lletra del text molt més gran; o bé navega pel lloc web només amb el teclat.

+ +

Un document HTML senzill és en general accessible per a tothom, i a l'hora d’aplicar estil a aquest document, és important que no el facis menys accessible.

+
+ +

Combinar selectors i combinadors

+ +

Val la pena assenyalar que pots combinar diversos selectors i combinadors. Per exemple:

+ +
/* selecciona qualsevol <span> que estigui dins d'un <p>, que està dins d'un <article> */
+article p span { ... }
+
+/* Selecciona qualsevol <p> que vagi directament després d'un <ul>, que vagi directament després d'un <h1> */
+h1 + ul + p { ... }
+ +

També pots combinar diversos tipus. Intenta afegir el següent al teu codi:

+ +
body h1 + p .special {
+  color: yellow;
+  background-color: black;
+  padding: 5px;
+}
+ +

Aplicarà estil a qualsevol element amb una classe special que es trobi dins d’un element <p>, que vingui just després d’un element <h1>> que es trobi dins del <body>. Uf!

+ +

A l'HTML original que t’hem proporcionat, l'únic element amb estil és <span class="special">.

+ +

No et preocupis si et sembla complicat en aquest moment, començaràs a entendre-ho ben aviat de seguida que treballis més amb el CSS.

+ +

Tancant

+ +

En aquest tutorial hem analitzat diverses maneres d’aplicar estil a un document amb CSS. Anirem desenvolupant aquests coneixements a mesura que avancem amb la resta d'articles. Tanmateix, ja en coneixes prou per a aplicar estil al text, aplicar CSS a partir de diferents maneres de seleccionar els elements del document i cercar propietats i valors en la documentació MDN.

+ +

Al proper article analitzarem com s’estructura el CSS.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

+ +

En aquest mòdul

+ +
    +
  1. Què és el CSS
    2. +
  2. Primers passos amb el CSS
    3. +
  3. Com s'estructura el CSS
    4. +
  4. Com funciona el CSS
    5. +
  5. Aplica els teus nous coneixements
    6. +
diff --git a/files/ca/learn/css/first_steps/how_css_is_structured/index.html b/files/ca/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..6c216af68c --- /dev/null +++ b/files/ca/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,512 @@ +--- +title: Com estructurar el CSS +slug: Learn/CSS/First_steps/Com_estructurar_el_CSS +translation_of: Learn/CSS/First_steps/How_CSS_is_structured +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
+ +

Ara que tens una idea sobre què és el CSS i les bases de com fer-lo servir, és hora d’aprofundir una mica més en l’estructura pròpia del llenguatge. Ja hem vist molts dels conceptes que s'esmenten en aquest article; pots recapitular si t’entrebanques amb els conceptes que et trobes a partir d’ara.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu:Aprendre amb detall les estructures de sintaxi fonamentals del CSS.
+ +

Aplicar CSS a l'HTML

+ +

El primer que analitzarem són els tres mètodes d’aplicació del CSS a un document.

+ +

Fulls d’estils externs

+ +

En l’article Primers passos amb el CSS hem enllaçat un full d’estil extern a la nostra pàgina. Aquest és el mètode més comú i útil d’adjuntar CSS a un document perquè pots enllaçar el CSS a diverses pàgines, cosa que et permet d’aplicar-hi estil a totes amb el mateix full d’estil. En la majoria dels casos, les diverses pàgines d’un lloc web presentaran un aspecte molt semblant i, per tant, pots utilitzar el mateix conjunt de regles per a la presentació bàsica.

+ +

Un full d’estil extern és quan el CSS està escrit en un fitxer independent amb l’extensió .css i s'hi fa referència des d’un element HTML <link>:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>El meu experiment amb CSS</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>Hola món!</h1>
+    <p>Aquest és el meu primer exemple amb CSS</p>
+  </body>
+</html>
+ +

El fitxer CSS podria presentar un aspecte així:

+ +
h1 {
+  color: blue;
+  background-color: yellow;
+  border: 1px solid black;
+}
+
+p {
+  color: red;
+}
+ +

L'atribut href de l'element {{htmlelement ("link")}} necessita fer referència a un fitxer del sistema de fitxers.

+ +

A l'exemple anterior, el fitxer CSS es troba a la mateixa carpeta que el document HTML, però el pots col·locar en un altre lloc i ajustar la ruta especificada per a adaptar-s’hi, per exemple:

+ +
<!-- Dins d’un subdirector anomenat styles dins del directori actual -->
+<link rel="stylesheet" href="styles/style.css">
+
+<!-- Dins d’un subdirector anomenat general, que es troba en un subdirector anomenat styles, dins del directori actual -->
+<link rel="stylesheet" href="styles/general/style.css">
+
+<!-- Puja un nivell de directori i, a continuació, a un subdirector anomenat styles -->
+<link rel="stylesheet" href="../styles/style.css">
+ +

Fulls d’estil interns

+ +

Un full d’estil intern és on no hi ha cap fitxer CSS extern, sinó que el CSS se situa dins d’un element {{htmlelement("style")}} que hi ha dins de l’HTML {{htmlelement("head")}}.

+ +

Així doncs, l’HTML quedaria així:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>El meu experiment amb CSS</title>
+    <style>
+      h1 {
+        color: blue;
+        background-color: yellow;
+        border: 1px solid black;
+      }
+
+      p {
+        color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Hola món!</h1>
+    <p>Aquest és el meu primer exemple amb CSS</p>
+  </body>
+</html>
+ +

Això pot ser útil en algunes circumstàncies (potser treballes amb un sistema de gestió de continguts en què no pots modificar els fitxers CSS directament), però no és tan eficient com els fulls d'estil externs; en un lloc web, el CSS s'hauria de canviar individualment a cada pàgina i actualitzar-se en diversos llocs si s’hi haguessin de fer canvis.

+ +

Estils en línia

+ +

Els estils en línia són declaracions CSS que afecten només un element, que està contingut dins d'un atribut style:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>El meu experiment amb CSS </title>
+  </head>
+  <body>
+    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hola món!</h1>
+    <p style="color:red;">Aquest és el meu primer exemple amb CSS</p>
+  </body>
+</html>
+ +

Si et plau, no ho facis!, tret que realment ho hagis de fer. És molt dolent per al manteniment (potser hauràs d’actualitzar la mateixa informació diverses vegades per cada document) i també barreges la informació de presentació del CSS amb la informació d’estructuració de l’HTML, i dificultes la llegibilitat i comprensió del codi. Mantenir diferents tipus de codificació separats permet una feina molt més fàcil a tots aquells que treballen en el codi.

+ +

Hi ha llocs web en què els estils en línia són més comuns, o fins i tot recomanables. Pot ser que hagis de recórrer a utilitzar-los si el teu entorn de treball és molt restrictiu (potser el teu CMS només et permet editar el cos de l'HTML). També veuràs que s’utilitzen molt al correu electrònic per a obtenir compatibilitat amb tants clients de correu electrònic com sigui possible.

+ +

Jugar amb el CSS en aquest article

+ +

En aquest article hi ha molt de CSS. Per fer-ho, et recomanem que creïs un directori/carpeta al teu ordinador i, a dins, hi creïs una còpia dels dos fitxers següents:

+ +

index.html:

+ +
<!DOCTYPE html>
+<html lang="ca">
+  <head>
+    <meta charset="utf-8">
+    <title>El meu experiment amb CSS</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+
+    <p>Crea el teu HTML de prova aquí</p>
+
+  </body>
+</html>
+ +

styles.css:

+ +
/* Crea el teu CSS de prova aquí */
+
+p {
+  color: red;
+}
+ +

Aleshores, quan vulguis experimentar amb un CSS, substitueix el contingut del <body> de l’HTML per un altre HTML, i comença per afegir el codi CSS per a donar-hi estil dins del fitxer CSS.

+ +

Si no utilitzes un sistema amb què puguis crear fitxers fàcilment, pots utilitzar l'editor interactiu següent per experimentar.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}}

+ +

Continua i diverteix-te!

+ +

Selectors

+ +

No es pot parlar de CSS sense parlar de selectors, i ja n'hem descobert diversos tipus al tutorial de Primers passos amb el CSS. Un selector és la manera amb què seleccionem alguna cosa del document HTML per a aplicar-hi estils. Si els teus estils no s’apliquen, és probable que el selector no coincideixi amb el que creus que hauria de coincidir.

+ +

Cada regla CSS comença amb un selector o una llista de selectors que indica al navegador a quin element o elements han d’aplicar-se les regles. Totes les mostres següents són exemples de selectors o llistes de selectors vàlids.

+ +
h1
+a:link
+.manythings
+#onething
+*
+.box p
+.box p:first-child
+h1, h2, .intro
+ +

Prova de crear algunes regles CSS que utilitzin els selectors anteriors i algun codi HTML al qual aplicar-hi els estils. Si no saps què significa alguna de les sintaxis anterior, prova de buscar-la a MDN.

+ +
+

Nota: Aprendràs molt més sobre els selectors als nostres tutorials Selectors CSS, al mòdul següent.

+
+ +

Especificitat

+ +

Sovint hi haurà escenaris en què dos selectors podrien seleccionar el mateix element HTML. Considera el full d’estil següent, en què hi ha una regla amb un selector p que mostrarà els paràgrafs de color blau, i també una classe que mostrarà els elements seleccionats de color vermell.

+ +
.special {
+  color: red;
+}
+
+p {
+  color: blue;
+}
+ +

Diguem que al document HTML hi ha un paràgraf amb una classe special. Totes dues regles es podrien aplicar; quina guanyaria? De quin color creus que es veurà el nostre paràgraf?

+ +
<p class="special">De quin color sóc?</p>
+ +

El llenguatge CSS té regles per a controlar quina regla guanyarà en cas de collisió; s'anomenen cascada i especificitat. Al bloc de codi següent hem definit dues regles per al selector p, però el paràgraf acaba sent de color blau. Això és perquè la declaració que hauria de fer que es veiés de color blau apareix més tard al full d’estil, i els estils posteriors anul·len els anteriors. És la cascada en acció.

+ +
p {
+  color: red;
+}
+
+p {
+  color: blue;
+}
+ +

Tanmateix, en el cas del nostre exemple anterior, amb el selector de classes i el selector d’elements, la classe guanya, i el paràgraf es veu de color vermell, encara que apareix abans en el full d’estil. Es diu que una classe és més específica, o té més especificitat, que un selector d’elements, de manera que guanya.

+ +

Prova l'experiment anterior: afegeix el codi HTML al teu experiment i, a continuació, afegeix les dues regles p { ... } al teu full d'estil. A continuació, canvia el primer selector de p per .special i observa com canvia l’estil.

+ +

Les regles d’especificitat i cascada poden semblar una mica complicades al principi, però són més fàcils d’entendre a mesura que s'avança amb el CSS. A l'article Cascada i herència, al qual accediràs al mòdul següent, s'explica amb més detall, entre altres coses, la manera de calcular l’especificitat. Ara per ara, només has de recordar que existeix, i que és possible que de vegades el CSS no s'apliqui tal com esperes perquè alguna cosa del full d'estil té una especificitat més alta. Identificar que hi ha més d'una regla que pot aplicar-se a un element és el primer pas per a solucionar aquests problemes.

+ +

Propietats i valors

+ +

El CSS consta de dos blocs de construcció bàsics:

+ + + +

En la imatge següent es ressalten una sola propietat i el seu valor. El nom de la propietat és color i el valor blue.

+ +

Una declaració del CSS ressaltada

+ +

Una propietat emparellada amb un valor s'anomena declaració CSS. Les declaracions CSS es posen dins dels blocs de declaració CSS. Aquesta imatge següent mostra el nostre CSS amb el bloc de declaracions ressaltat.

+ +

Un bloc de declaracions ressaltat

+ +

Finalment, els blocs de declaració CSS es combinen amb selectors per a produir conjunts de regles CSS (o regles CSS). La nostra imatge conté dues regles, una per al selector h1 i una altra per al selector p. La regla per a h1 està ressaltada.

+ +

La regla per a h1 està ressaltada

+ +

Definir propietats CSS amb valors específics és la funció principal del llenguatge CSS. El motor CSS calcula quines declaracions s’apliquen a cada element d’una pàgina per tal de definir-la i donar-hi l’estil adequat.

+ +
+

Important: Les propietats i valors de CSS són sensibles a majúscules i minúscules. Cada parella de propietat i valor es separa per un dos punts (:).

+
+ +

Prova de cercar diferents valors de les propietats següents i escriu regles CSS que s’apliquin a diferents elements HTML:

+ + + +
+

Important: Si una propietat és desconeguda o si un valor no és vàlid per a una propietat determinada, es considera que la declaració no és vàlida i el motor CSS del navegador la ignora completament.

+
+ +
+

Important: En CSS (i altres estàndards web) s'ha acceptat l'ortografia nord-americana com a estàndard per a resoldre la incertesa lingüística. Per exemple, la propietat color sempre s'ha d'escriure color. Si n’escrivim la versió britànica colour, no funcionarà.

+
+ +

Funcions

+ +

Si bé la majoria dels valors són paraules clau o valors numèrics relativament simples, hi ha alguns valors que prenen la forma d’una funció. Un exemple seria la funció calc(). Aquesta funció permet fer operacions matemàtiques senzilles des del CSS, per exemple:

+ +
+
<div class="outer"><div class="box">la caixa interior és de 90% - 30px.</div></div>
+ +
.outer {
+  border: 5px solid black;
+}
+
+.box {
+  padding: 10px;
+  width: calc(90% - 30px);
+  background-color: rebeccapurple;
+  color: white;
+}
+
+ +

Això es presenta així:

+ +

{{EmbedLiveSample('calc_example', '100%', 200)}}

+ +

Una funció consisteix en el nom de la funció i, a continuació, uns parèntesis entre els quals es col·loquen els valors permesos per a aquesta funció. En el cas de l'exemple calc() anterior, volem que l'amplada d'aquesta caixa sigui el 90% de l'amplada del bloc que la conté, menys 30 píxels. No és un valor que es pugui calcular d’antuvi i senzillament introduir-lo en el CSS corresponent, perquè no sabem quin serà aquest 90%. Com en tots els valors, en la pàgina corresponent de MDN hi ha exemples d’ús perquè puguis veure com funciona aquesta funció.

+ +

Un altre exemple serien els diversos valors de {{cssxref("transform")}}, com ara rotate().

+ +
+
<div class="box"></div>
+ +
.box {
+  margin: 30px;
+  width: 100px;
+  height: 100px;
+  background-color: rebeccapurple;
+  transform: rotate(0.8turn)
+}
+
+ +

La sortida del codi anterior és la següent:

+ +

{{EmbedLiveSample('transform_example', '100%', 200)}}

+ +

Prova de cercar diferents valors de les propietats següents i escriu regles CSS que s’apliquin a diferents elements HTML:

+ + + +

@rules

+ +

Les @rules (llegit «at-rules», en anglès) proporcionen instruccions sobre com ha de comportar-se el CSS, o quin CSS s'ha d'aplicar. Algunes @rules són senzilles i es formen només amb el nom de la regla i el valor. Per exemple, per a importar un full d’estil addicional al teu full d’estil CSS principal, pots utilitzar @import:

+ +
@import 'styles2.css';
+ +

Una de les @rules més comunes que trobaràs és @media, que et permet crear consultes a mèdia (o media queries, en anglès) per a aplicar CSS només quan determinades condicions són certes (per exemple, quan la resolució de la pantalla està per sobre d’una quantitat determinada, o la pantalla és més ampla que una certa amplada).

+ +

Al CSS següent hi ha un full d’estil que dona a l’element <body> un color de fons rosat. Tot i això, després utilitzem @media per a crear una secció al nostre full d’estil que només s’aplicarà als navegadors amb una visualització més ampla de 30em. Si el navegador és més ample de 30em, el color de fons serà blau.

+ +
body {
+  background-color: pink;
+}
+
+@media (min-width: 30em) {
+  body {
+    background-color: blue;
+  }
+}
+ +

Trobaràs altres @rules al llarg d’aquests tutorials.

+ +

Prova d’afegir una consulta a un mèdia al teu CSS que canviï els estils en funció de l’amplada de la visualització. Canvia l'amplada de la finestra del navegador per veure’n el resultat.

+ +

Propietats abreviades

+ +

Algunes propietats com {{cssxref ("font")}}, {{cssxref ("background")}}, {{cssxref ("padding")}}, {{cssxref ("border")}} i {{cssxref ("margin")}} s’anomenen propietats abreviades: això és perquè permeten establir diversos valors de propietat en una sola línia, que estalvia temps i aconsegueix que el codi es vegi més net.

+ +

Per exemple, aquesta línia:

+ +
/* En les propietats abreviades de 4 valors, com ara margin i padding, s'apliquen els valors
+   a la part superior, dreta, inferior, esquerra (en sentit horari des de la part superior). També hi ha altres
+   propietats abreviades, per exemple les propietats abreviades de 2 valors, que estableixen una àrea de farciment/marge
+   a la part superior/inferior, a l'esquerra/a la dreta */
+padding: 10px 15px 15px 5px;
+ +

Fa el mateix que totes aquestes juntes:

+ +
padding-top: 10px;
+padding-right: 15px;
+padding-bottom: 15px;
+padding-left: 5px;
+ +

Mentre que aquesta línia:

+ +
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
+ +

Fa el mateix que totes aquestes juntes:

+ +
background-color: red;
+background-image: url(bg-graphic.png);
+background-position: 10px 10px;
+background-repeat: repeat-x;
+background-scroll: fixed;
+ +

No intentarem ensenyar-les de manera exhaustiva ara; trobaràs molts exemples més endavant en el curs i et recomanem que cerquis més noms de propietats abreviades clau a les nostres referències CSS per a obtenir-ne més informació.

+ +

Prova d’afegir les declaracions anteriors al teu CSS per veure com afecta a l’estil del teu HTML. Prova d’experimentar amb valors diferents.

+ +
+

Atenció: Mentre que les propietats abreviades sovint et permeten ometre els valors, després restabliran els valors que no incloguis als seus valors inicials. D’aquesta manera es garanteix l’ús d’un conjunt de valors coherent. Però et pot confondre si esperes que la propietat abreviada només canviï els valors que has marcat.

+
+ +

Comentaris

+ +

De la mateixa manera que amb l’HTML, et convidem a posar comentaris al teu CSS per a ajudar-te a comprendre com funciona el teu codi en tornar-hi al cap d’uns mesos, i per a ajudar altres que treballin sobre aquest codi.

+ +

Els comentaris en CSS comencen amb /* i acaben amb */. Al bloc de codi següent hem utilitzat comentaris per marcar l'inici de diverses seccions de codi diferents. És útil per a ajudar-te a orientar-te pel codi a mesura que n’augmenta l’extensió. Cerca els comentaris al teu editor de codi.

+ +
/* Manejar una aplicació d’estil als elements bàsics */
+/* -------------------------------------------------------------------------------------------- */
+body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  /* Posem en cas especial la mida del tipus de lletra general. En una pantalla gran o en una finestra,
+     augmentem la mida de la lletra per a facilitar la lectura */
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {font-size: 1.5em;}
+
+/* Manejar elements específics que es troben al DOM */
+/* -------------------------------------------------------------------------------------------- */
+div p, #id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+ +

Els comentaris també són útils per a inhabilitar temporalment algunes parts del codi amb finalitats de prova, per exemple, si intentes trobar quina part del teu codi causa un error. A l’exemple següent hem «comentat» (posat com a comentaris) les regles per al selector .special.

+ +
/*.special {
+  color: red;
+}*/
+
+p {
+  color: blue;
+}
+ +

Afegeix alguns comentaris al teu CSS per acostumar-te a utilitzar-los.

+ +

Espais en blanc

+ +

Els espais en blanc són els espais, els sagnats de text i les línies noves. De la mateixa manera que en l’HTML, el navegador ignora els espais en blanc del teu CSS. El valor dels espais en blanc està en que són molt útils per a millorar la llegibilitat.

+ +

En l'exemple que trobaràs a continuació, cada declaració (i inici/final de regla) és en una línia de text pròpia. Probablement és una bona manera d’escriure el CSS, perquè fa que sigui fàcil de mantenir i d'entendre:

+ +
body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+div p,
+#id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+
+ +

Podries escriure exactament el mateix CSS de la manera següent, eliminant-ne la majoria d’espais en blanc. Aquest codi és funcionalment idèntic al del primer exemple, però segur que estàs d’acord que és una mica més feixuc de llegir:

+ +
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+@media (min-width: 70em) { body {font-size: 130%;} }
+
+h1 {font-size: 1.5em;}
+
+div p, #id:first-line {background-color: red; border-radius: 3px;}
+div p {margin: 0; padding: 1em;}
+div p + p {padding-top: 0;}
+
+ +

La disposició del codi que tries sol ser una preferència personal, tot i que quan comences a treballar en equip, és possible que trobis que l’equip té la seva guia d’estil pròpia que especifica una convenció acordada a seguir.

+ +
+

Important: Has de tenir cura amb l’espai en blanc que hi ha d’haver entre una propietat del CSS i el seu valor.

+
+ +

Per exemple, les declaracions següents són vàlides en CSS:

+ +
margin: 0 auto;
+padding-left: 10px;
+ +

Però les següents no són vàlids:

+ +
margin: 0auto;
+padding- left: 10px;
+ +

Veus els errors d'espaiat? 0auto no es reconeix com a valor vàlid per a la propietat margin (0 i auto són dos valors separats), i el navegador no reconeix padding- com a propietat vàlida. El nom correcte de la propietat (padding-left) ha quedat separat per un espai perdut.

+ +

Sempre t'has d'assegurar de separar valors diferenciats els uns dels altres com a mínim per un espai, però mantenir els noms de la propietat i els valors de propietat junts, com cadenes ininterrompudes.

+ +

Prova de jugar amb espais en blanc al teu CSS per veure què es trenca i què no.

+ +

Què segueix?

+ +

És útil entendre una mica com el navegador pren els teus codis HTML i CSS i els converteix en una pàgina web, així que en l’article següent, (Com funciona el CSS), donarem una ullada a aquest procés.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

En aquest mòdul

+ +
    +
  1. Què és el CSS
    2. +
  2. Primers passos amb el CSS
    3. +
  3. Com s'estructura el CSS
    4. +
  4. Com funciona el CSS
    5. +
  5. Aplica els teus nous coneixements
    6. +
diff --git a/files/ca/learn/css/first_steps/how_css_works/index.html b/files/ca/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..9621d2c21c --- /dev/null +++ b/files/ca/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,156 @@ +--- +title: Com funciona el CSS +slug: Learn/CSS/First_steps/Com_funciona_el_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

{{LearnSidebar}}
+ {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

+ +

Hem après els conceptes bàsics de CSS, per a què serveix i com escriure fulls d'estil senzills. En aquest article veurem com un navegador pren els llenguatges CSS i HTML i els converteix en una pàgina web.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML).
Objectiu:Entendre els conceptes bàsics de com el navegador analitza els llenguatges CSS i HTML i què passa quan un navegador troba un CSS que no entén.
+ +

Com funciona realment el CSS?

+ +

Quan un navegador mostra un document, ha de combinar el contingut del document amb la informació d’estil. Processa el document en un seguit d'etapes, que enumerarem a continuació. Tingues present que aquesta és una versió molt simplificada de què passa quan un navegador carrega una pàgina web, i que els diversos navegadors gestionen el procés de maneres diferents. Però això és més o menys el que succeeix.

+ +
    +
  1. El navegador carrega el codi HTML (per exemple, el rep de la xarxa).
    2. +
  2. Converteix el codi {{Glossary("HTML")}} en un model d'objectes del document (document object model o {{Glossary("DOM")}}). El DOM representa el document a la memòria de l'ordinador. L’explicarem amb més detall en la secció següent.
    3. +
  3. El navegador recupera la majoria dels recursos als quals està vinculat el document HTML, com ara imatges i vídeos incrustats... i CSS enllaçats. El JavaScript es tracta una mica més endavant en el procés, i no en parlarem aquí per no embolicar les coses.
    4. +
  4. El navegador analitza el CSS recuperat i ordena les diferents regles segons els tipus de selector en diferents «cubetes». Per exemple: element, classe, ID, etc. A partir dels selectors que troba, calcula quines regles s’han d’aplicar als nodes del DOM i hi atribueix l’estil segons sigui necessari (aquest pas intermedi s’anomena arbre de renderització).
    5. +
  5. L'arbre de representació presenta l'estructura en què ha d'aparèixer després que s'apliquin les regles.
    6. +
  6. La presentació visual de la pàgina es mostra a la pantalla (aquesta etapa s’anomena pintura).
    7. +
+ +

El diagrama següent ofereix una visió senzilla del procés.

+ +

+ +

Sobre el DOM

+ +

Un DOM té una estructura en forma d'arbre. Cada element, atribut i fragment de text del llenguatge de marcatge es converteix en un {{Glossary("Node/DOM","node DOM")}} en l'estructura de l'arbre. Els nodes es defineixen per la seva relació amb els altres nodes del DOM. Alguns elements són pares de nodes secundaris, i els nodes secundaris tenen nodes germans.

+ +

Entendre el DOM t'ajuda a dissenyar, depurar i mantenir el teu CSS perquè el DOM és el lloc on es troba el CSS i el contingut del document. Quan comencis a treballar amb les eines DevTools (o eines del desenvolupador) del navegador, et desplaçaràs pel DOM mentre selecciones els elements per veure quines regles s'apliquen.

+ +

Una representació real del DOM

+ +

En lloc d’una llarga i avorrida explicació, vegem amb un exemple com un fragment HTML es converteix en un DOM.

+ +

Prenguem el codi HTML següent:

+ +
<p>
+  Utilitzem:
+  <span>Fulls</span>
+  <span>d'estil</span>
+  <span>en cascada</span>
+</p>
+
+ +

En el DOM, el node que correspon al nostre element <p> és un element pare. Els nodes fills són un node de text i els tres nodes corresponen als elements <span>. Els nodes SPAN són també nodes pare, i tenen nodes de text com a nodes fill:

+ +
P
+├─ "Utilitzem:"
+├─ SPAN
+| └─ "Fulls"
+├─ SPAN
+| └─ "d’estil"
+└─ SPAN
+   └─ "en cascada"
+
+ +

Així és com un navegador interpreta aquest fragment HTML: es confecciona l'arbre DOM anterior i el navegador el representa així:

+ +

{{EmbedLiveSample('Una_representació_real_del_DOM', '100%', 55)}}

+ + + +

Aplicar CSS al DOM

+ +

Suposem que hem afegit una mica de codi CSS al nostre document per a donar-hi estil. Un cop més, l'HTML és el següent:

+ +
<p>
+  Utilitzem:
+  <span>Fulls</span>
+  <span>d'estil</span>
+  <span>en cascada</span>
+</p>
+ +

Suposem que hi apliquem el CSS següent:

+ +
span {
+  border: 1px solid black;
+  background-color: lime;
+}
+ +

El navegador analitza el codi HTML i crea un DOM, i després analitza el CSS. Atès que l'única regla disponible en el CSS té un selector span, el navegador pot ordenar el CSS molt de pressa! Aplica aquesta regla a cadascun dels tres <span> i després pinta a la pantalla la representació visual final.

+ +

La sortida actualitzada és la següent:

+ +

{{EmbedLiveSample('Aplicar_CSS_al_DOM', '100%', 55)}}

+ +

En el nostre article Depurar el CSS del mòdul següent, utilitzarem les eines DevTools del navegador per depurar problemes del CSS i coneixerem més sobre com l'interpreta el navegador.

+ +

Què passa si un navegador es troba amb CSS que no entén?

+ +

En un article anterior hem esmentat que no tots els navegadors implementen el CSS al mateix temps. A més, molta gent no utilitza la versió més recent del navegador. Tenint en compte que el CSS està en desenvolupament constant i, per tant, va per davant del que els navegadors poden reconèixer, et podries preguntar què passa si un navegador troba un selector CSS o una declaració que no reconeix.

+ +

La resposta és que no fa res i només passa a la declaració CSS següent.

+ +

Si un navegador analitza les teves regles i troba una propietat o un valor que no entén, l'ignora i passa a la declaració següent. Ho fa si has comès un error i has escrit malament una propietat o un valor, o si la propietat o el valor són massa recents i el navegador encara no és compatible.

+ +

De la mateixa manera, si un navegador troba un selector que no entén, ignora tota la regla i passa a la següent.

+ +

En l’exemple següent hem utilitzat l’ortografia britànica per a la propietat del color, cosa que invalida aquesta propietat perquè no es reconeix. Per tant, el paràgraf no es veu de color blau. Tots els altres CSS s'han aplicat; només s’ignora la línia no vàlida.

+ +
+
<p>Vull que aquest text sigui gran, en negreta i blau.</p>
+ +
p {
+  font-weight: bold;
+  colour: blue; /* Ortografia incorrecta de la propietat color */
+  font-size: 200%;
+}
+
+ +

{{EmbedLiveSample('Skipping_example', '100%', 200)}}

+ +

Aquest comportament és molt útil. Significa que pots utilitzar el CSS nou com una millora, perquè no es produirà cap error si no s’entén: pot ser que el navegador entengui la funció nova, o que no l’entengui. Combinat amb el funcionament en cascada i el fet que els navegadors utilitzen l’últim CSS que es troben en un full d’estil quan hi ha dues regles amb la mateixa especificitat, també pots oferir alternatives per a navegadors que no admeten el CSS nou.

+ +

Això funciona especialment bé quan vols fer servir un valor força nou i no és compatible amb tots els navegadors. Per exemple, alguns navegadors antics no admeten calc() com a valor. Podríem donar una amplada alternativa a una caixa en píxels i després donar una amplada amb un valor calc() de 100% - 50px. Els navegadors antics faran servir la versió en píxels i ignoraran la línia sobre calc() perquè no l’entenen. Els navegadors nous interpretaran la línia amb píxels i després la substituiran per la línia amb calc(), perquè la línia apareix més tard en la cascada.

+ +
.box {
+  width: 500px;
+  width: calc(100% - 50px);
+}
+ +

En articles posteriors analitzarem moltes maneres més de donar compatibilitat a diferents navegadors.

+ +

Per acabar

+ +

Ja has acabat aquest mòdul; només hi ha una cosa més per fer. En l’article següent faràs servir els teus nous coneixements per a canviar el disseny d'un exemple i provar una mica de codi CSS en el procés.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

+ +

En aquest mòdul

+ +
    +
  1. Què és el CSS
    2. +
  2. Primers passos amb el CSS
    3. +
  3. Com s'estructura el CSS
    4. +
  4. Com funciona el CSS
    5. +
  5. Aplica els teus nous coneixements
    6. +
diff --git a/files/ca/learn/css/first_steps/que_es_el_css/index.html b/files/ca/learn/css/first_steps/que_es_el_css/index.html deleted file mode 100644 index b158b8e62e..0000000000 --- a/files/ca/learn/css/first_steps/que_es_el_css/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Què és el CSS? -slug: Learn/CSS/First_steps/Que_es_el_CSS -translation_of: Learn/CSS/First_steps/What_is_CSS ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
- -

Els fulls d'estil en cascada ({{Glossary("CSS")}} o cascading style sheets) et permeten crear pàgines web atractives; però, com funcionen realment? Aquest article explica què és el CSS amb un exemple de sintaxi senzilla, i també inclou alguns termes clau sobre aquest llenguatge informàtic.

- - - - - - - - - - - - -
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i amb HTML (mira Introducció a l'HTML).
Objectiu:Aprendre què és el CSS.
- -

Al mòdul Introducció a l'HTML exposem què és l’HTML i com s'utilitza per a etiquetar documents. Aquests documents es podran llegir en un navegador web. Els títols d’encapçalament es veuran més grans que el text normal, els paràgrafs començaran en una línia nova i estaran separats per un espai entre ells. Als enllaços se'ls dona color i es subratllen per a distingir-los de la resta del text. El que veus són els estils predeterminats del navegador: estils molt bàsics que el navegador aplica a l'HTML per a assegurar-se que es pot llegir, fins i tot si l'autor de la pàgina no especifica cap estil explícit.

- -

Els estils predeterminats que utilitza un navegador

- -

No obstant això, Internet seria un lloc avorrit si tots els llocs web fossin així. Amb CSS pots controlar exactament com es veuen els elements HTML al navegador, i presentar el teu etiquetatge amb el disseny que t'agradi.

- -

Per a què serveix el CSS?

- -

Com hem comentat anteriorment, el CSS és un llenguatge informàtic que especifica com es presenten els documents als usuaris, com se’ls aplica estil, s’elaboren, etc.

- -

Un document sol ser un fitxer de text estructurat que utilitza un llenguatge d’etiquetatge: {{Glossary("HTML")}} és el més comú, però també en pots trobar d'altres com ara {{Glossary("SVG")}} or {{Glossary("XML")}}.

- -

Presentar un document a un usuari significa convertir-lo en una forma que el públic pugui fer servir. Els {{Glossary("browser","navegadors")}} com {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}} o {{Glossary("Microsoft Edge","Edge")}} estan dissenyats per a presentar documents visualment, per exemple, en una pantalla d'ordinador, un projector o una impressora.

- -
-

Nota: De vegades, als navegadors se'ls anomena {{Glossary("User agent","agents d'usuari")}}, que significa bàsicament un programa informàtic que representa a una persona dins d'un sistema informàtic. Els navegadors són el principal tipus d’agent d’usuari en què pensem quan parlem de CSS, però no són l’únic. Hi ha altres agents d'usuari disponibles, com els que converteixen documents HTML i CSS en PDF per a imprimir.

-
- -

El CSS es pot fer servir per a dissenyar el text de documents molt bàsics, per exemple, per a canviar el color i la mida de la lletra dels títols i els enllaços. Es pot utilitzar per a donar disseny de la pàgina web; per exemple, convertir una sola columna de text en un disseny de pàgina amb una àrea de contingut principal i una barra lateral per a obtenir informació relacionada. Fins i tot es pot utilitzar per a efectes com l’animació. Consulta els enllaços d’aquest paràgraf per a obtenir exemples concrets.

- -

La sintaxi CSS

- -

El CSS és un llenguatge basat en regles: cada usuari defineix regles que especifiquen grups d’estils que s’han d’aplicar a determinats elements o grups d’elements de la teva pàgina web. Per exemple: «Vull que el títol d’encapçalament principal de la pàgina es vegi amb lletra gran i de color vermell».

- -

El codi següent mostra una regla CSS molt simple que aplicaria l'estil descrit al paràgraf anterior:

- -
h1 {
-    color: red;
-    font-size: 5em;
-}
- -

La regla s’obre amb un {{Glossary("CSS Selector", "selector")}}, que selecciona l'element HTML al qual aplicarem estil. En aquest cas, aplicarem estil als títols de nivell 1 ({{htmlelement ("h1")}}).

- -

Tot seguit, hi ha un conjunt de claus { }, i a dins hi haurà una o més declaracions, que prenen la forma de parells propietat i valor. Cada parell especifica una propietat dels elements que seleccionem i, a continuació, un valor que volem donar a la propietat.

- -

Abans de la clau hi ha la propietat, i després, el valor. Les {{Glossary("property/CSS","propietats")}} CSS admeten diferents valors, depenent de quina propietat s'especifica. En el nostre exemple, tenim la propietat color, que pot prendre diversos valors de color. També hi ha la propietat font-size. Aquesta propietat pot prendre diverses unitats de mida com a valor.

- -

Un full d’estils CSS contindrà moltes regles d’aquestes, escrites l’una darrere de l’altra.

- -
h1 {
-    color: red;
-    font-size: 5em;
-}
-
-p {
-    color: black;
-}
- -

Trobaràs que aprens ràpidament alguns valors, mentre que d’altres els hauràs de buscar. Les pàgines de propietat individuals del projecte MDN t'ofereixen una manera ràpida de cercar propietats i els seus valors si se t’obliden o si vols saber què més pots fer servir com a valor.

- -
-

Nota: Pots trobar enllaços a totes les pàgines de propietat CSS (juntament amb altres funcions CSS) a la pàgina de referències CSS de MDN. De manera alternativa, t'has d’acostumar a cercar «mdn css-feature-name» al teu motor de cerca preferit sempre que necessitis més informació sobre una característica CSS. Per exemple, prova de cercar «mdn color» i «mdn font-size».

-
- -

Mòduls CSS

- -

Com que amb CSS es pot aplicar estil a tantes coses, el llenguatge es desglossa en mòduls. Veuràs diverses referències a aquests mòduls a mesura que explores la pàgina de MDN i moltes de les pàgines de documentació que s’organitzen al voltant d’un mòdul determinat. Per exemple, pots donar una ullada a la referència MDN en el mòdul Fons i vores per a esbrinar quin n’és el propòsit i quines en són les diferents propietats i altres característiques que conté. També trobaràs enllaços a l’especificació CSS que defineix la tecnologia.

- -

En aquesta fase, no t'has de preocupar gaire de la manera en què s’estructura el CSS, però pot facilitar la cerca d’informació si, per exemple, saps que és probable que una propietat determinada es trobi entre altres coses similars i, probablement, en la mateixa especificació. 

- -

Per veure un exemple concret, tornem al mòdul Fons i vores; podries pensar que té sentit lògic que les propietats background-color i border-color es defineixin en aquest mòdul. I tens raó.

- -

Especificacions CSS

- -

Totes les tecnologies d’estàndards web (HTML, CSS, JavaScript, etc.) estan definides en extensos documents anomenats especificacions (o simplement «specs»), que publiquen les organitzacions d’estàndards (com {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} o {{glossary("Khronos")}}) i defineixen amb precisió com se suposa que aquestes tecnologies han de comportar-se.

- -

El CSS no és diferent: el desenvolupa un grup del W3C anomenat CSS Working Group. Aquest grup està format per representants de creadors de navegadors i altres empreses que tenen interès en el CSS. També hi ha altres persones, conegudes com a experts convidats, que actuen com a veus independents, i que no estan vinculats a cap organització.

- -

El CSS Working Group desenvolupa i especifica les noves funcions CSS. De vegades, perquè un navegador determinat està interessat a tenir alguna capacitat, d’altres vegades perquè els dissenyadors i els desenvolupadors web demanen una funció i, de vegades, perquè el grup de treball mateix ha identificat un requisit. El CSS es troba en desenvolupament constant, introduint característiques noves. Tot i això, una cosa clau sobre CSS és que tothom treballa molt per no canviar mai les coses d’una manera que trenqui els llocs web antics. Un lloc web creat el 2000, que utilitza el CSS limitat que hi havia aleshores, encara es pot fer servir avui dia.

- -

Com a nouvingut al CSS, és probable que trobis aclaparadores les especificacions CSS, ja que estan destinades a l’ús dels enginyers perquè les utilitzin per a implementar-ne suport als d'agents d’usuari, no perquè els desenvolupadors web les llegeixin. Molts desenvolupadors experimentats preferirien consultar la documentació a MDN o en altres tutorials. No obstant això, val la pena saber que existeixen, i entendre la relació que hi ha entre el CSS que utilitzes, el suport del navegador i les especificacions.

- -

Suport dels navegadors

- -

Un cop especificat el CSS, només ens és útil per desenvolupar pàgines web si un o més navegadors l’han implementat. Això vol dir que el codi ha estat escrit per a convertir la instrucció del nostre fitxer CSS en quelcom que pugui sortir a la pantalla. Analitzarem més aquest procés en l’article Com funciona el CSS. És inusual que tots els navegadors implementin una característica alhora, i per tant hi sol haver un buit en quina part del CSS es pot fer servir en quins navegadors i en quins no. Per això, és útil ser capaç de comprovar l’estat d’implementació. A cada pàgina de propietats de MDN pots veure l'estat de la propietat que t'interessa, de manera que pots saber si pots fer-la servir en un lloc web.

- -

El que segueix és el gràfic de dades de compatibilitat per a la propietat font-family de CSS.

- -

{{Compat("css.properties.font-family")}}

- -

Què segueix

- -

Ara que coneixes què és el CSS, passem a Començar amb el CSS, on pots començar a escriure algun codi CSS.

- -

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

- -

En aquest mòdul

- -
    -
  1. Què és el el CSS
    2. -
  2. Primers passos amb el CSS
    3. -
  3. Com s'estructura el CSS
    4. -
  4. Com funciona el CSS
    5. -
  5. Aplica els teus nous coneixements
    6. -
diff --git a/files/ca/learn/css/first_steps/what_is_css/index.html b/files/ca/learn/css/first_steps/what_is_css/index.html new file mode 100644 index 0000000000..b158b8e62e --- /dev/null +++ b/files/ca/learn/css/first_steps/what_is_css/index.html @@ -0,0 +1,119 @@ +--- +title: Què és el CSS? +slug: Learn/CSS/First_steps/Que_es_el_CSS +translation_of: Learn/CSS/First_steps/What_is_CSS +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
+ +

Els fulls d'estil en cascada ({{Glossary("CSS")}} o cascading style sheets) et permeten crear pàgines web atractives; però, com funcionen realment? Aquest article explica què és el CSS amb un exemple de sintaxi senzilla, i també inclou alguns termes clau sobre aquest llenguatge informàtic.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i amb HTML (mira Introducció a l'HTML).
Objectiu:Aprendre què és el CSS.
+ +

Al mòdul Introducció a l'HTML exposem què és l’HTML i com s'utilitza per a etiquetar documents. Aquests documents es podran llegir en un navegador web. Els títols d’encapçalament es veuran més grans que el text normal, els paràgrafs començaran en una línia nova i estaran separats per un espai entre ells. Als enllaços se'ls dona color i es subratllen per a distingir-los de la resta del text. El que veus són els estils predeterminats del navegador: estils molt bàsics que el navegador aplica a l'HTML per a assegurar-se que es pot llegir, fins i tot si l'autor de la pàgina no especifica cap estil explícit.

+ +

Els estils predeterminats que utilitza un navegador

+ +

No obstant això, Internet seria un lloc avorrit si tots els llocs web fossin així. Amb CSS pots controlar exactament com es veuen els elements HTML al navegador, i presentar el teu etiquetatge amb el disseny que t'agradi.

+ +

Per a què serveix el CSS?

+ +

Com hem comentat anteriorment, el CSS és un llenguatge informàtic que especifica com es presenten els documents als usuaris, com se’ls aplica estil, s’elaboren, etc.

+ +

Un document sol ser un fitxer de text estructurat que utilitza un llenguatge d’etiquetatge: {{Glossary("HTML")}} és el més comú, però també en pots trobar d'altres com ara {{Glossary("SVG")}} or {{Glossary("XML")}}.

+ +

Presentar un document a un usuari significa convertir-lo en una forma que el públic pugui fer servir. Els {{Glossary("browser","navegadors")}} com {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}} o {{Glossary("Microsoft Edge","Edge")}} estan dissenyats per a presentar documents visualment, per exemple, en una pantalla d'ordinador, un projector o una impressora.

+ +
+

Nota: De vegades, als navegadors se'ls anomena {{Glossary("User agent","agents d'usuari")}}, que significa bàsicament un programa informàtic que representa a una persona dins d'un sistema informàtic. Els navegadors són el principal tipus d’agent d’usuari en què pensem quan parlem de CSS, però no són l’únic. Hi ha altres agents d'usuari disponibles, com els que converteixen documents HTML i CSS en PDF per a imprimir.

+
+ +

El CSS es pot fer servir per a dissenyar el text de documents molt bàsics, per exemple, per a canviar el color i la mida de la lletra dels títols i els enllaços. Es pot utilitzar per a donar disseny de la pàgina web; per exemple, convertir una sola columna de text en un disseny de pàgina amb una àrea de contingut principal i una barra lateral per a obtenir informació relacionada. Fins i tot es pot utilitzar per a efectes com l’animació. Consulta els enllaços d’aquest paràgraf per a obtenir exemples concrets.

+ +

La sintaxi CSS

+ +

El CSS és un llenguatge basat en regles: cada usuari defineix regles que especifiquen grups d’estils que s’han d’aplicar a determinats elements o grups d’elements de la teva pàgina web. Per exemple: «Vull que el títol d’encapçalament principal de la pàgina es vegi amb lletra gran i de color vermell».

+ +

El codi següent mostra una regla CSS molt simple que aplicaria l'estil descrit al paràgraf anterior:

+ +
h1 {
+    color: red;
+    font-size: 5em;
+}
+ +

La regla s’obre amb un {{Glossary("CSS Selector", "selector")}}, que selecciona l'element HTML al qual aplicarem estil. En aquest cas, aplicarem estil als títols de nivell 1 ({{htmlelement ("h1")}}).

+ +

Tot seguit, hi ha un conjunt de claus { }, i a dins hi haurà una o més declaracions, que prenen la forma de parells propietat i valor. Cada parell especifica una propietat dels elements que seleccionem i, a continuació, un valor que volem donar a la propietat.

+ +

Abans de la clau hi ha la propietat, i després, el valor. Les {{Glossary("property/CSS","propietats")}} CSS admeten diferents valors, depenent de quina propietat s'especifica. En el nostre exemple, tenim la propietat color, que pot prendre diversos valors de color. També hi ha la propietat font-size. Aquesta propietat pot prendre diverses unitats de mida com a valor.

+ +

Un full d’estils CSS contindrà moltes regles d’aquestes, escrites l’una darrere de l’altra.

+ +
h1 {
+    color: red;
+    font-size: 5em;
+}
+
+p {
+    color: black;
+}
+ +

Trobaràs que aprens ràpidament alguns valors, mentre que d’altres els hauràs de buscar. Les pàgines de propietat individuals del projecte MDN t'ofereixen una manera ràpida de cercar propietats i els seus valors si se t’obliden o si vols saber què més pots fer servir com a valor.

+ +
+

Nota: Pots trobar enllaços a totes les pàgines de propietat CSS (juntament amb altres funcions CSS) a la pàgina de referències CSS de MDN. De manera alternativa, t'has d’acostumar a cercar «mdn css-feature-name» al teu motor de cerca preferit sempre que necessitis més informació sobre una característica CSS. Per exemple, prova de cercar «mdn color» i «mdn font-size».

+
+ +

Mòduls CSS

+ +

Com que amb CSS es pot aplicar estil a tantes coses, el llenguatge es desglossa en mòduls. Veuràs diverses referències a aquests mòduls a mesura que explores la pàgina de MDN i moltes de les pàgines de documentació que s’organitzen al voltant d’un mòdul determinat. Per exemple, pots donar una ullada a la referència MDN en el mòdul Fons i vores per a esbrinar quin n’és el propòsit i quines en són les diferents propietats i altres característiques que conté. També trobaràs enllaços a l’especificació CSS que defineix la tecnologia.

+ +

En aquesta fase, no t'has de preocupar gaire de la manera en què s’estructura el CSS, però pot facilitar la cerca d’informació si, per exemple, saps que és probable que una propietat determinada es trobi entre altres coses similars i, probablement, en la mateixa especificació. 

+ +

Per veure un exemple concret, tornem al mòdul Fons i vores; podries pensar que té sentit lògic que les propietats background-color i border-color es defineixin en aquest mòdul. I tens raó.

+ +

Especificacions CSS

+ +

Totes les tecnologies d’estàndards web (HTML, CSS, JavaScript, etc.) estan definides en extensos documents anomenats especificacions (o simplement «specs»), que publiquen les organitzacions d’estàndards (com {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} o {{glossary("Khronos")}}) i defineixen amb precisió com se suposa que aquestes tecnologies han de comportar-se.

+ +

El CSS no és diferent: el desenvolupa un grup del W3C anomenat CSS Working Group. Aquest grup està format per representants de creadors de navegadors i altres empreses que tenen interès en el CSS. També hi ha altres persones, conegudes com a experts convidats, que actuen com a veus independents, i que no estan vinculats a cap organització.

+ +

El CSS Working Group desenvolupa i especifica les noves funcions CSS. De vegades, perquè un navegador determinat està interessat a tenir alguna capacitat, d’altres vegades perquè els dissenyadors i els desenvolupadors web demanen una funció i, de vegades, perquè el grup de treball mateix ha identificat un requisit. El CSS es troba en desenvolupament constant, introduint característiques noves. Tot i això, una cosa clau sobre CSS és que tothom treballa molt per no canviar mai les coses d’una manera que trenqui els llocs web antics. Un lloc web creat el 2000, que utilitza el CSS limitat que hi havia aleshores, encara es pot fer servir avui dia.

+ +

Com a nouvingut al CSS, és probable que trobis aclaparadores les especificacions CSS, ja que estan destinades a l’ús dels enginyers perquè les utilitzin per a implementar-ne suport als d'agents d’usuari, no perquè els desenvolupadors web les llegeixin. Molts desenvolupadors experimentats preferirien consultar la documentació a MDN o en altres tutorials. No obstant això, val la pena saber que existeixen, i entendre la relació que hi ha entre el CSS que utilitzes, el suport del navegador i les especificacions.

+ +

Suport dels navegadors

+ +

Un cop especificat el CSS, només ens és útil per desenvolupar pàgines web si un o més navegadors l’han implementat. Això vol dir que el codi ha estat escrit per a convertir la instrucció del nostre fitxer CSS en quelcom que pugui sortir a la pantalla. Analitzarem més aquest procés en l’article Com funciona el CSS. És inusual que tots els navegadors implementin una característica alhora, i per tant hi sol haver un buit en quina part del CSS es pot fer servir en quins navegadors i en quins no. Per això, és útil ser capaç de comprovar l’estat d’implementació. A cada pàgina de propietats de MDN pots veure l'estat de la propietat que t'interessa, de manera que pots saber si pots fer-la servir en un lloc web.

+ +

El que segueix és el gràfic de dades de compatibilitat per a la propietat font-family de CSS.

+ +

{{Compat("css.properties.font-family")}}

+ +

Què segueix

+ +

Ara que coneixes què és el CSS, passem a Començar amb el CSS, on pots començar a escriure algun codi CSS.

+ +

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

+ +

En aquest mòdul

+ +
    +
  1. Què és el el CSS
    2. +
  2. Primers passos amb el CSS
    3. +
  3. Com s'estructura el CSS
    4. +
  4. Com funciona el CSS
    5. +
  5. Aplica els teus nous coneixements
    6. +
diff --git "a/files/ca/learn/css/introducci\303\263_a_css/comprensi\303\263_css_fonamental/index.html" "b/files/ca/learn/css/introducci\303\263_a_css/comprensi\303\263_css_fonamental/index.html" deleted file mode 100644 index 34a654269a..0000000000 --- "a/files/ca/learn/css/introducci\303\263_a_css/comprensi\303\263_css_fonamental/index.html" +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Comprensió CSS fonamental -slug: Learn/CSS/Introducció_a_CSS/Comprensió_CSS_fonamental -tags: - - Assessment - - Beginner - - CSS - - CodingScripting - - Selectors - - Style - - Syntax - - box model - - comments - - rules -translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
- -

Heu cobert molt en aquest mòdul, de manera que us heu de sentir bé d'haver arribat al final!. El pas final abans de continuar és intentar l'avaluació del mòdul: això implica una sèrie d'exercicis relacionats que s'han de completar per crear el disseny final - un perfil de targeta de visita/targeta de jugador/perfil social.

- - - - - - - - - - - - -
Requisits previs:Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.
Objectiu:Comprovar la comprensió de la teoria CSS fonamental, la sintaxi i la mecànica
- -

Punt de partida

- -

Per començar aquesta avaluació, heu de:

- - - -
-

Nota: D'altra banda, podeu utilitzar un lloc com JSBin o Thimble per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia i utilitzar aquest URL per indicar a l'element <img> el fitxer d'imatge. Si l'editor en línia que esteu utilitzant no té cap panell CSS separat, no dubteu a posar-lo en un element <style> al capdavant del document.

-
- -

Resum del projecte

- -

Se us ha proporcionat un mica d'HTML sense processar i una imatge, i heu d'escriure el CSS necessari per d'introduir una mica d'estil bonic en una targeta de negocis en línia, que potser es pot duplicar com a targeta de jugador o perfil de xarxes socials. Les següents seccions descriuen el que heu de fer.

- -

Configuració bàsica:

- - - -

Tingueu cura dels selectors i els conjunts de regles proporcionats:

- - - -

Nou conjunt de regles que necessiteu escriure :

- - - -

Altres coses a pensar:

- - - -

Consells i suggeriments

- - - -

Exemple

- -

La següent captura de pantalla mostra un exemple del que hauria de tenir el disseny acabat:

- -

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

- -

 

- -

Avaluació

- -

Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema en el fil de conversa en l'àrea d'aprenentatge, o en el canal IRC #mdn en Mozilla IRC. Intenteu primer l'exercici - no es guanya res fent trampes!

- -

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

diff --git a/files/ca/learn/css/styling_text/fundamentals/index.html b/files/ca/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..e258171ffc --- /dev/null +++ b/files/ca/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,739 @@ +--- +title: Text fonamental i estil de font +slug: Learn/CSS/Estilitzar_text/Text_fonamental +tags: + - Article + - Beginner + - CSS + - Guide + - Style + - Text + - alignment + - family + - font + - shorthand + - spacing + - weight +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
+ +

En aquest article t'iniciem en el viatge cap al domini de l'aplicació d’estil a text amb {{glossary("CSS")}}. Aquí passarem amb detall per tots els fonaments bàsics de l'aplicació d’estil a textos / tipus de lletra, inclosos el gruix, la família i l'estil del tipus de lletra, les propietats abreviades per al tipus de lletra, l'alineació del text i altres efectes, i l’interlineat i l’interlletratge.

+ + + + + + + + + + + + +
Requisits previs:Coneixements bàsics d'informàtica, fonaments bàsics d'HTML (consulta l’article Introducció a l’HTML), fonaments de CSS (consulta l’article Introducció al CSS).
Objectiu:Aprendre les propietats i tècniques bàsiques necessàries per a l'aplicació d’estil al text de les pàgines web.
+ +

Què implica l'aplicació d’estil al text en CSS?

+ +

Com ja deus conèixer d’haver treballat amb l’HTML i el CSS, el text dins d'un element es defineix dins de la caixa de contingut de l'element. Comença a la part superior esquerra de l'àrea de contingut (o a la part superior dreta, en el cas de contingut en idiomes RTL, o right-to-left, que s'escriuen de dreta a esquerra) i flueix cap al final de la línia. Quan arriba al final, passa a la línia següent i continua; i després, a la següent línia, fins que tot el contingut s'ha col·locat a la caixa. El contingut de text es comporta en efecte com un seguit d'elements en línia, es distribueix en línies adjacents entre si, i no crea salts de línia fins que s’ateny el final de la línia, o tret que s'obligui a un salt de línia manual de l'element {{htmlelement("br")}}.

+ +
+

Nota: Si el paràgraf anterior et sembla confós, no t’hi amoïnis, torna enrere i fes un repàs de la teoria del model de caixa que s’explica en l’article El model de caixa abans de continuar.

+
+ +

Les propietats CSS que s'utilitzen per a escriure text generalment es divideixen en dues categories, que veurem per separat en aquest article:

+ + + +
+

Nota: Tingues en compte que les propietats que afecten el text dins d'un element hi actuen com una única entitat. No pots seleccionar i modificar l'estil de les subseccions de text si no les etiquetes amb un element apropiat (com ara {{htmlelement("span")}} o {{htmlelement("strong")}}) o utilitzes un pseudoelement específic per a text com ::first-letter (selecciona la primera lletra del text d'un element), ::first-line (selecciona la primera línia del text d'un element) o ::selection (selecciona el text que el cursor ressalta en aquell moment).

+
+ +

Tipus de lletra

+ +

Continuem endavant per veure les propietats d'estil dels tipus de lletra. En aquest exemple aplicarem algunes propietats CSS diferents a la mateixa mostra d’HTML, que té l’aspecte següent:

+ +
<h1>Tommy the cat</h1>
+
+<p>I remember as if it were a meal ago...</p>
+
+<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.</p>
+ +

Podeu trobar l'exemple acabat en GitHub (vegeu-ne també el codi font).

+ +

Color

+ +

La propietat {{cssxref("color")}} estableix el color del contingut de primer pla dels elements seleccionats (que normalment és el text, però també pot incloure un parell d'altres coses, com ara un subratllat o un sobreratllat en el text, amb la propietat {{cssxref("text-decoration")}}).

+ +

La propietat color pot acceptar qualsevol unitat de color CSS, per exemple:

+ +
p {
+  color: red;
+}
+ +

Això fa que els paràgrafs es converteixin en vermells, en comptes del negre estàndard per defecte del navegador, així:

+ + + +

{{ EmbedLiveSample('Color', '100%', 220) }}

+ +

Famílies de tipus de lletra

+ +

Per a establir un tipus de lletra diferent en el teu text, utilitza la propietat {{cssxref("font-family")}}; això et permet especificar un tipus de lletra (o una llista de tipus de lletra) perquè el navegador l'apliqui als elements seleccionats. El navegador només aplica un tipus de lletra si està disponible en la màquina amb què s’accedeix al lloc web. Si no, només usarà un {{anch("Default fonts", "tipus de lletra predeterminat")}} del navegador. Un exemple senzill és el següent:

+ +
p {
+  font-family: arial;
+}
+ +

Això fa que tots els paràgrafs d'una pàgina adoptin el tipus de lletra Arial, que es troba en qualsevol ordinador.

+ +

Tipus de lletra segurs per a la xarxa web

+ +

Parlant de la disponibilitat dels tipus de lletra, només una certa quantitat de tipus de lletra es troben generalment disponibles en tots els sistemes i, per tant, es poden utilitzar sense gaires preocupacions. Són els anomenats tipus de lletra segurs per a la xarxa web.

+ +

La majoria de les vegades, com a desenvolupadors web, volem tenir un control més específic sobre els tipus de lletra que s’utilitzen per a mostrar el contingut del text. El problema és trobar una manera de saber quin tipus de lletra està disponible en l'ordinador que es fa servir per a accedir a les nostres pàgines web. No hi ha manera de saber-ho en tots els casos, però se sap que els tipus de lletra segurs per a la web estan disponibles en gairebé totes les instàncies dels sistemes operatius més utilitzats (Windows, Mac, les distribucions més habituals de Linux, Android i iOS).

+ +

La llista de tipus de lletra segurs per a la xarxa web reals canvia a mesura que evolucionen els sistemes operatius, però és convenient considerar els tipus de lletra segurs per a la xarxa web següents, almenys ara com ara (molts d'ells s’han popularitzades gràcies a la iniciativa de Microsoft Tipus de lletra principals per a la xarxa web, de finals dels anys 1990 i principis dels anys 2000):

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomTipus de lletra genèricObservacions
Arialsans-serifSovint es considera una bona pràctica afegir també el tipus de lletra Helvetica com una alternativa preferent a Arial; encara que són gairebé idèntiques, es considera que Helvetica té una forma més agradable, tot i que Arial està més disponible.
Courier NewmonospaceHi ha sistemes operatius que tenen una versió alternativa (possiblement més antiga) del tipus de lletra Courier New anomenada Courier. Es considera una bona pràctica utilitzar-les totes dues, amb Courier New com l’opció preferent.
Georgiaserif
Times New RomanserifHi ha sistemes operatius que tenen una versió alternativa (possiblement més antiga) del tipus de lletra Times New Roman anomenada Times. Es considera una bona pràctica utilitzar-les totes dues, amb Times New Roman com l’opció preferent.
Trebuchet MSsans-serifHas de tenir cura amb l'ús d'aquest tipus de lletra perquè no està àmpliament disponible en sistemes operatius mòbils.
Verdanasans-serif
+ +
+

Nota: Entre els diversos recursos, el lloc web cssfontstack.com manté una llista de tipus de lletra segurs per a la web disponibles en sistemes operatius Windows i macOS, que poden ajudar-te a prendre la decisió sobre el que consideris segur per al teu ús.

+
+ +
+

Nota: Hi ha una manera de descarregar un tipus de lletra personalitzat juntament amb una pàgina web, que et permet personalitzar l'ús del tipus de lletra de la manera que vulguis: web fonts. Això és una mica més complex, i ho exposarem en un article separat més endavant en el mòdul.

+
+ +

Tipus de lletra predeterminats

+ +

CSS defineix cinc noms genèrics per als tipus de lletra: serif, sans-serif, monospace, cursive i fantasy. Són noms molt genèrics i l’aspecte exacte del tipus de lletra usat quan s'utilitzen aquests noms genèrics correspon a cada navegador i pot variar per a cada sistema operatiu amb què s'executa. Representa un pitjor escenari, en què el navegador tracta de fer el possible per a oferir almenys un tipus de lletra que es consideri adequat. serif, sans-serif i monospace són bastant previsibles i han de proporcionar alguna cosa raonable. D'altra banda, cursive i fantasy són menys previsibles i et recomanem utilitzar-les amb molta cura i provar-les cada vegada.

+ +

Els cinc noms es defineixen de la manera següent:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomDefinicióExemple
serifTipus de lletra que tenen serifes (les floritures i altres petits detalls que es veuen en els extrems dels traços en algunes tipografies).My big red elephant
sans-serifTipus de lletra que no tenen serifes.My big red elephant
monospaceTipus de lletra en què cada caràcter ocupa la mateixa amplada, normalment s’utilitza en les llistes d’instruccions que constitueixen el codi informàtic.My big red elephant
cursiveTipus de lletra que tenen com a objectiu emular l'escriptura manuscrita, amb moviments fluids i connectats.My big red elephant
fantasyTipus de lletra amb intencions decoratives.My big red elephant
+ +

Llistes de tipus de lletra

+ +

Com que no pots garantir la disponibilitat dels tipus de lletra que vols utilitzar en les teves pàgines web (fins i tot un tipus de lletra segur per a la xarxa web podria fallar per alguna raó), pots proporcionar una llista de tipus de lletra perquè el navegador tingui diversos tipus de lletra per poder triar. Això només implica introduir un atribut font-family amb un valor que consti de diversos noms de tipus de lletra separats per comes, per exemple:

+ +
p {
+  font-family: "Trebuchet MS", Verdana, sans-serif;
+}
+ +

En aquest cas, el navegador comença pel principi de la llista i mira si el primer tipus de lletra està disponible en la màquina. Si és així, s'aplica aquesta font als elements seleccionats. En cas contrari, es passa al tipus de lletra següent, i així successivament.

+ +

És recomanable proporcionar al final de la llista un nom de tipus de lletra genèric que sigui adequat perquè el navegador pugui almenys proporcionar alguna cosa adequada aproximada si cap dels tipus de lletra de la llista estan disponibles. Per il·lustrar aquest punt, els navegadors presenten els paràgrafs en un tipus de lletra serifa predeterminada, que normalment és Times New Roman, si no hi ha cap altra opció disponible; però això no és bo quan s’espera un tipus de lletra sans-serif!

+ +
+

Nota: Els noms dels tipus de lletra que tenen més d'una paraula, com Trebuchet MS s’han d’escriure entre cometes.

+
+ +

Un exemple de font-family

+ +

Afegim les línies següents al nostre exemple anterior per a donar als paràgrafs un tipus de lletra sans-serif:

+ +
p {
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

Això ens dona el resultat següent:

+ + + +

{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}

+ +

La mida de la lletra

+ +

En l'article de valors i unitats en CSS del mòdul anterior, hem revisat les unitats de longitud i mida. La mida de la lletra (que s’estableix amb la propietat {{cssxref("font-size")}} pot prendre valors que es mesuren en la majoria d'aquestes unitats (i d’altres, com ara percentatges), però les unitats més comunes que faràs servir per a la mida del text són:

+ + + +

L’atribut font-size d'un element s'hereta de l'element pare d'aquest element. Tot comença amb l'element arrel del document, {{htmlelement("html")}}, en què l’atribut font-size està establert en 16 px de manera estàndard en els navegadors. Qualsevol paràgraf (o un altre element que no tingui una mida diferent establerta pel navegador) de l'interior de l'element arrel tindrà una mida final de 16 px. Altres elements poden tenir mides predeterminades diferents, per exemple, un element {{htmlelement("h1")}} té una mida de 2 em establerta per defecte, de manera que tindrà una mida final de 32 píxels.

+ +

Les coses es tornen més difícils quan es comença a alterar la mida del tipus de lletra dels elements imbricats. Per exemple, si en la teva pàgina hi ha un element {{htmlelement("article")}} i hi estableixes la mida del tipus de lletra en 1,5 em (que donaria una mida final de 24 px), i llavors vols que els paràgrafs de dins de l'element <article> tinguin una mida de lletra computada de 20 px, quin valor em hem d’utilitzar?

+ +
<!-- document base font-size is 16px -->
+<article> <!-- If my font-size is 1.5em -->
+  <p>My paragraph</p> <!-- How do I compute to 20px font-size? -->
+</article>
+ +

Hauràs d'establir el valor em en 20/24 o 0,83333333 em. Els càlculs poden complicar-se, de manera que cal tenir cura a l’hora de com aplicar estils. El millor és utilitzar unitats rem on puguis per mantenir les coses senzilles i evitar establir la mida de la lletra dels elements del contenidor quan sigui possible.

+ +

Un exemple senzill de dimensionament

+ +

Quan dimensiones el teu text, normalment és una bona idea establir l’atribut base font-size del document en 10 px, de manera que resulta molt més senzill de fer els càlculs, perquè llavors els valors (r)em són la mida de la lletra en píxels dividida per 10, no per 16. A continuació, pots dimensionar fàcilment els diferents tipus de text del document si ho vols. És una bona idea fer una llista de tot el conjunt de regles font-size en una zona determinada del teu full d'estil, i així són fàcils de trobar.

+ +

El nostre nou resultat és així:

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('Un_exemple_senzill_de_dimensionament', '100%', 220) }}

+ +

Estils i gruixos de lletra, transformacions i decoracions del text

+ +

CSS proporciona quatre propietats comunes per a alterar el gruix visual / l’èmfasi del text:

+ + + +

Cal tenir en compte que {{cssxref("text-decoration")}} pot acceptar diversos valors alhora, si vols afegir diverses decoracions alhora; per exemple, text-decoration: underline overline. Tingues en compte que {{cssxref("text-decoration")}} és una propietat abreujada per a {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} i {{cssxref("text-decoration-color")}}. Pots utilitzar les combinacions d'aquests valors de propietat per a crear efectes interessants, per exemple, text-decoration: line-through red wavy

+ +

Observem com afegir un parell d'aquestes propietats al nostre exemple:

+ +

El resultat és aquest:

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('Estils_i_gruixos_de_lletra_transformacions_i_decoracions_del_text', '100%', 220) }}

+ +

Ombres en el text

+ +

Pots aplicar ombres al text amb la propietat {{cssxref("text-shadow")}}. Això involucra fins a quatre valors, com es mostra en l'exemple següent:

+ +
text-shadow: 4px 4px 5px red;
+ +

Les quatre propietats són:

+ +
    +
  1. El desplaçament horitzontal de la silueta del text original: pot prendre la majoria de les unitats de longitud i grandària disponibles en CSS, però el més convenient és usar px. Aquest valor s'ha d'incloure.
    2. +
  2. El desplaçament vertical de la silueta del text original: es comporta bàsicament igual que el desplaçament horitzontal, excepte que mou l'ombra amunt i avall, no a dreta i esquerra. Aquest valor s'ha d'incloure.
    3. +
  3. El radi d'esborronat: un valor més alt significa que l'ombra es dispersa més àmpliament. Si aquest valor no s'inclou, el valor predeterminat és 0, que significa que no s’esborrona. Pot prendre la majoria de les unitats de longitud i grandària disponibles en CSS.
    4. +
  4. El color base de l'ombra: pot prendre qualsevol unitat de color CSS. Si no s'inclou, el valor predeterminat és black.
    5. +
+ +
+

Nota: Els valors de desplaçament positius mouen l'ombra cap a la dreta i cap avall, però també pots utilitzar valors de desplaçament negatius per a moure l'ombra cap a l'esquerra i cap amunt, com per exemple -1px -1px.

+
+ +

Ombres múltiples

+ +

Pots aplicar diverses ombres a un mateix text si inclous més d’un valor d'ombra separats per comes, per exemple:

+ +
text-shadow: -1px -1px 1px #aaa,
+             0px 4px 1px rgba(0,0,0,0.5),
+             4px 4px 5px rgba(0,0,0,0.7),
+             0px 0px 7px rgba(0,0,0,0.4);
+ +

Si apliquem això a l'element {{htmlelement("h1")}} del nostre exemple de Tommy the cat, obtenim això:

+ + + +

{{ EmbedLiveSample('Ombres_múltiples', '100%', 220) }}

+ +
+

Nota: Pots veure més exemples interessants d'ús de text-shadow en l'article de Sitepoint Moonlighting with CSS text-shadow.

+
+ +

Disseny de pàgina del text

+ +

Ara que ja coneixem les propietats bàsiques dels tipus de lletra, passem a veure les propietats del text que podem utilitzar que afecten el disseny de pàgina.

+ +

Alineació del text

+ +

La propietat {{cssxref("text-align")}} s'utilitza per a controlar com s'alinea el text dins de la caixa que conté els continguts. Els valors disponibles són els següents i funcionen gairebé de la mateixa manera que ho fa una aplicació de processador de text normal:

+ + + +

Si s'aplica text-align: center; a l’{{htmlelement("h1")}} en el nostre exemple, obtenim això:

+ + + +

{{ EmbedLiveSample('Alineació_del_text', '100%', 220) }}

+ +

Interlineat

+ +

La propietat {{cssxref("line-height")}} estableix l'alçada que hi ha entre les línies de text. Pot prendre la majoria de les unitats de longitud i grandària, però també un valor sense unitat, que actua com un multiplicador, i generalment es considera l’opció més bona; es multiplica el valor de {{cssxref("font-size")}} i s’obté line-height. El text del body en general es veu més bé i és més fàcil de llegir si les línies estan prou separades. L'alçada de la línia recomanada és d'aproximadament 1,5-2 (doble espai). Per tant, si vols establir les línies de text a 1,6 vegades l'alçada del tipus de lletra, utilitzaries això:

+ +
line-height: 1.6;
+ +

Si apliques això als elements {{htmlelement("p")}} del nostre exemple, obtindràs aquest resultat:

+ + + +

{{ EmbedLiveSample('Interlineat', '100%', 250) }}

+ +

Espaiat entre lletres i entre paraules

+ +

Les propietats {{cssxref("spacing-letter")}} i {{cssxref("word-spacing")}} permeten establir l'espaiat entre lletres i l'espaiat entre paraules en el text. No ho faràs amb gaire freqüència, però potser ho trobes útil per a obtenir un cert tipus de presentació o per millorar la llegibilitat d'un tipus de lletra especialment densa. Pot prendre la majoria de les unitats de longitud i grandària.

+ +

Així, per exemple, podríem aplicar una mica d’espai entre lletres i espai entre paraules a la primera línia de cada element {{htmlelement("p")}} del nostre exemple:

+ +
p::first-line {
+  letter-spacing: 4px;
+  word-spacing: 4px;
+}
+ +

Afegim-ne una mica al nostre exemple, així:

+ + + +

{{ EmbedLiveSample('Espaiat_entre_lletres_i_entre_paraules', '100%', 250) }}

+ +

Altres propietats que convé conèixer

+ +

Les propietats anteriors et donen una idea de com començar a aplicar estil al text d’una pàgina web, però hi ha moltes altres propietats que es poden utilitzar. Aquí només hem volgut exposar les més importants. Un cop t’hagis acostumat a fer-les servir, també hauries d'explorar les següents:

+ +

Estils per als tipus de lletra:

+ + + +

Aplicació d’estil al text per al disseny de pàgina

+ + + +

Propietat abreujada per al tipus de lletra

+ +

També es poden establir moltes propietats de tipus de lletra amb la propietat abreujada {{cssxref("font")}}. S’escriuen en l’ordre següent:  {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} i {{cssxref("font-family")}}.

+ +

Entre totes aquestes propietats, només es requereixen font-size i font-family quan s'utilitza la propietat abreujada font.

+ +

S'ha d'incloure una barra diagonal entre les propietats {{cssxref("font-size")}} i {{cssxref("line-height")}}.

+ +

Un exemple complet tindria un aspecte com aquest:

+ +
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
+ +

Aprenentatge actiu: Jugar amb els estils de text

+ +

En aquesta sessió d'aprenentatge actiu, no et proposem de fer cap exercici específic: et proposem que juguis amb algunes propietats del tipus de lletra i el text aplicades al disseny de pàgina i observis què ets capaç de crear. Pots fer-ho usant els fitxers HTML/CSS fora de línia, o pots introduir el teu codi en l'exemple editat en viu a continuació.

+ +

Si t’equivoques, sempre pots tornar a l’inici amb el botó Reinicia.

+ + + +

{{ EmbedLiveSample('Codi_executable', 700, 800) }}

+ +

Resum

+ +

Esperem que hagis gaudit jugant amb el text d’aquest article! L’article següent t’explicarà tot el que has de saber sobre l’aplicació d'estil a llistes HTML.

+ +

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

diff --git a/files/ca/learn/css/styling_text/index.html b/files/ca/learn/css/styling_text/index.html new file mode 100644 index 0000000000..c815d83297 --- /dev/null +++ b/files/ca/learn/css/styling_text/index.html @@ -0,0 +1,55 @@ +--- +title: Estilitzar text +slug: Learn/CSS/Estilitzar_text +tags: + - Beginner + - CSS + - CodingScripting + - Fonts + - Landing + - Links + - Module + - Text + - font + - letter + - line + - lists + - shadow + - web fonts +translation_of: Learn/CSS/Styling_text +--- +
{{LearnSidebar}}
+ +

Amb els aspectes bàsics del llenguatge CSS coberts, el següent tema CSS, per a què us concentreu, és l'estil del text - una de les coses més habituals que fareu amb CSS. Aquí observem els fonaments d'estil de text, incloent la configuració de fonts, negreta, cursiva, espaiat entre línies i lletres, ombres i altres funcions de text. Completem el mòdul examinant l'aplicació de fonts personalitzades a la vostra pàgina i llistes d'estil i enllaços.

+ +

Requisits previs

+ +

Abans de començar aquest mòdul, ja hauríeu de tenir una familiaritat bàsica amb l'HTML, tal com s'ha explicat en el mòdul Introducció a HTML i estar còmodes amb els fonaments CSS, tal com s'ha explicat en Introducció a CSS.

+ +
+

Nota: Si esteu treballant en un ordinador/tauleta/altre dispositiu on no té la capacitat de crear els vostres propis fitxers, podeu provar (la majoria) els exemples de codi en un programa de codificació en línia com JSBin o Thimble.

+
+ +

Guies

+ +

Aquest mòdul conté els següents articles, que us ensenyaran tot l'essencial de l'estil del contingut de text HTML.

+ +
+
Text fonamental i estil de font
+
En aquest article, es detallen tots els conceptes bàsics d'estil de text/font, incloent la configuració del pes de la font, família i estil, abreviatura de font, alineació del text i altres efectes, i espaiat entre línies i lletres.
+
Estilitzar llistes
+
Les llistes es comporten com qualsevol altre text en la seva major part, però hi ha algunes propietats CSS específiques de les llistes que necessiteu saber i algunes de les millors pràctiques a tenir en compte. Aquest article ho explica tot.
+
Estilitzar enllaços
+
En dissenyar enllaços, és important entendre com fer ús de pseudo-classes per crear estils de vincles de manera efectiva i com dissenyar vincles per utilitzar-los en característiques d'interfície variades comunes, com a menús de navegació i pestanyes. Veurem tots aquests temes en aquest article.
+
Fonts Web
+
Aquí explorarem detalladament els tipus de fonts web, que us permeten descarregar fonts personalitzades juntament amb la vostra pàgina web, per permetre un estil de text més variat i personalitzat.
+
+ +

Avaluacions

+ +

Les següents avaluacions posaran a prova la vostra comprensió de les tècniques d'estil de text cobertes en les guies anteriors.

+ +
+
Composició d'una pàgina web d'una escola comunitaria
+
En aquesta avaluació, provarem la vostra comprensió sobre l'estil de text, que us permetrà personalitzar el text de la pàgina d'inici d'una escola comunitària.
+
diff --git a/files/ca/learn/css/styling_text/styling_links/index.html b/files/ca/learn/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..448a53289d --- /dev/null +++ b/files/ca/learn/css/styling_text/styling_links/index.html @@ -0,0 +1,424 @@ +--- +title: Aplicar estils a enllaços +slug: Learn/CSS/Estilitzar_text/Estilitzar_enllaços +translation_of: Learn/CSS/Styling_text/Styling_links +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

Quan s’aplica estil a enllaços és important entendre com fer ús de les pseudoclasses per a donar estil als estats de l’enllaç d’una manera efectiva, i com donar estil als enllaços per a utilitzar-los en diverses interfícies d’usuari característiques comunes, com ara menús de navegació i pestanyes. En aquest article tractarem tots aquests temes.

+ + + + + + + + + + + + +
Requisits previs:Coneixements bàsics d'informàtica, fonaments d'HTML (consulta la Introducció a l’HTML), fonaments de CSS (consulta la Introducció al CSS), fonaments d’aplicació d’estil i tipus de lletra als textos amb CSS.
Objectiu:Aprendre a dissenyar els estats d'un enllaç i a fer servir enllaços de manera efectiva en interfícies d'usuari característiques comunes, com ara els menús de navegació.
+ +

Un cop d’ull a alguns enllaços

+ +

En la secció Creació d’hipervincles hem vist com has d’implementar els enllaços en el teu codi HTML d'acord amb les bones pràctiques. En aquest article aprofundirem en aquest coneixement i et mostrarem les bones pràctiques que has de tenir en compte per a aplicar estil als enllaços.

+ +

Els estats d'un enllaç

+ +

El primer que has d'entendre és el concepte d'estats d'un enllaç; els enllaços poden tenir diversos estats, i se’ls pot aplicar estil fent servir diverses pseudoclasses:

+ + + +

Estils predeterminats

+ +

L’exemple següent il·lustra com es comporta un enllaç de manera predeterminada (el CSS simplement amplia i centra el text perquè destaqui més).

+ +
<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>
+
+ +
p {
+  font-size: 2rem;
+  text-align: center;
+}
+ +

{{ EmbedLiveSample('Estils_predeterminats', '100%', 120) }}

+ +
+

Nota: Tots els enllaços d'aquesta pàgina són falsos — s'ha posat un # en comptes d'un URL real. Això és perquè si incloïssim enllaços reals, fer-hi clic trencaria els exemples (acabaries amb un error, o una pàgina càrregada en l'exemple incrustat de la què no podries tornar.). # simplement enllaça a la pàgina actual.

+
+ +

A mesura que exploris els estils predeterminats t’adonaràs d'algunes coses:

+ + + +

Curiosament, aquests estils predeterminats són gairebé idèntics que els dels primers dies dels navegadors a mitjan anys 90. Això és perquè els usuaris coneixen aquest comportament i l’esperen; si els enllaços estiguessin dissenyats de manera diferent, molta gent es confondria. Això no vol dir en absolut que no puguis aplicar estil als enllaços, només que no t’has d'allunyar del comportament que se n’espera. Com a mínim hauries de complir el següent:

+ + + +

Els estils predeterminats es poden desactivar/modificar amb les propietats CSS següents:

+ + + +
+

Nota: No està limitat només a les propietats anteriors per al disseny dels enllaços; pots utilitzar qualsevol propietat que vulguis. Només procura no esbojarrar-te!

+
+ +

Aplicar estil a enllaços

+ +

Ara que hem examinat amb una mica de detall els estats per defecte dels enllaços, vegem un conjunt típic d'estils d'enllaç.

+ +

Per començar, escriurem un conjunt de regles buides:

+ +
a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}
+ +

Aquest ordre és important perquè els estils d'enllaç es construeixen els uns sobre els altres, per exemple, els estils de la primera regla s'aplicaran a tots els subsegüents, i quan s'activa un enllaç, també s'hi passa per sobre. Si els posem en l'ordre equivocat, les coses no funcionaran correctament. Per recordar l'ordre, pots provar d'usar un mnemotècnic com LoVe Fears HAte.

+ +

Ara afegim una mica més d'informació per a obtenir aplicar-hi els estils adequats:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}
+ +

També et proporcionem un exemple d'HTML al qual aplicar el CSS:

+ +
<p>There are several browsers available, such as <a href="https://www.mozilla.org/en-US/firefox/">Mozilla
+Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
+<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p>
+ +

Si ho posem tot junt, obtenim aquest resultat:

+ +

{{ EmbedLiveSample('Aplicar_estil_a_enllaços', '100%', 150) }}

+ +

Què hem fet aquí? Sens dubte, això es diferent de l'estil predeterminat, però encara proporciona una experiència prou familiar perquè els usuaris sàpiguen què passa:

+ + + +

Aprenentatge actiu: Fes el teu propi disseny d’enllaç

+ +

En aquesta sessió d'aprenentatge actiu, et proposem que aprenguis el nostre conjunt de regles buides i hi afegeixis les teves declaracions pròpies perquè els teus enllaços llueixin fantàstics! Utilitza la imaginació, deixa't anar! Segur que pots trobar alguna cosa tan funcional com el nostre exemple, i més fresca!

+ +

Si t’equivoques, sempre pots tornar a començar amb el botó Reinicia. Si t’encalles, prem el botó Mostra la solució per a inserir l'exemple mostrat a dalt.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

Icones en els enllaços

+ +

Una pràctica comuna és incloure icones en els enllaços per a proporcionar més d'un indicador quant al tipus de contingut al qual apunta l'enllaç. Vegem-ne un exemple molt senzill, que afegeix una icona als enllaços externs (enllaços que apunten cap a altres llocs web). Aquesta icona normalment té l’aspecte d’una petita fletxa que apunta cap enfora d'una caixa: per a aquest exemple, utilitzarem aquest fantàstic exemple de icons8.com.

+ +

Vegem alguns HTML i CSS, que ens donarà l'efecte que volem. En primer lloc, alguns simple HTML a l'estil:

+ +
<p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
+look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
+out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>
+ +

A continuació, el CSS:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+a[href*="http"] {
+  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background-size: 16px 16px;
+  padding-right: 19px;
+}
+ +

{{ EmbedLiveSample('Icones_en_els_enllaços', '100%', 150) }}

+ +

Què passa aquí, doncs? Ens saltarem la major part del CSS, perquè és la mateixa informació que ja has vist abans. Tanmateix, l'última regla és interessant perquè inserim una imatge de fons personalitzada en els enllaços externs d'una manera similar a com hem tractat les vinyetes personalitzades dels elements de llista de l'article anterior, però fem servir la propietat abreujada {{cssxref("background")}}, en comptes de les propietats individuals. Establim la ruta a la imatge que volem inserir i especifiquem no-repeat perquè només se’n vegi una còpia, i a continuació especifiquem la posició com al 100% a la dreta del contingut de text i a 0 píxels de l’extrem superior.

+ +

També fem servir {{cssxref("background-size")}} per a especificar la mida amb què volem que es mostri la imatge de fons; és útil tenir una icona més gran i canviar-ne la mida per a propòsits de disseny de webs adaptatius. Tanmateix, això només funciona amb IE 9 i posteriors, de manera que si has de donar suport a aquests navegadors antics, només has de canviar la mida de la imatge i inserir-la tal qual.

+ +

Finalment, establim una mica de {{cssxref("padding-right")}} als enllaços perquè la imatge de fons tingui espai i no es superposi amb el text.

+ +

Per acabar, com etiquetem els enllaços externs? Bé, si escrius els teus enllaços HTML correctament, només has d'utilitzar URL absoluts en el codi d’etiquetatge dels enllaços externs; per enllaçar a altres parts del teu lloc web propi és més eficient utilitzar enllaços relatius. Per tant, el text «http» només hauria d'aparèixer en enllaços externs i pots etiquetar-los amb un selector d'atributs: a[href*="http"] selecciona elements {{htmlelement("a")}}, però només si tenen un atribut {{htmlattrxref("href","a")}} amb un valor que conté «http» en algun lloc.

+ +

Això és tot — torna a visitar la secció d'aprenentatge actiu anterior i prova aquesta tècnica nova.

+ +
+

Nota: No et preocupis si encara no tens prou familiaritat amb els fons i el disseny web adaptatiu perquè s’expliquen en altres articles.

+
+ +

Enllaços amb estil de botó

+ +

Les eines que has explorat fins ara en aquest article també es poden utilitzar d'altres maneres. Per exemple, els estats com el flotant (hover) es poden utilitzar per a dissenyar molts elements diferents, no només enllaços; pot ser que vulguis dissenyar estats flotants (hover) per a paràgrafs, elements de llista o altres elements.

+ +

A més, és habitual aplicar estil als enllaços perquè semblin i es comportin com botons en determinades circumstàncies — el menú de navegació d’un lloc web s’acostuma a marcar com una llista que conté enllaços, i es pot configurar fàcilment perquè sembli un conjunt de botons o pestanyes de control que proporcionen a l'usuari accés a les altres parts del lloc web. Expliquem com es fa.

+ +

Primer, una mica d’HTML:

+ +
<ul>
+  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
+</ul>
+ +

I ara, el nostre CSS:

+ +
body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}
+ +

Això ens dona el resultat següent:

+ +

{{ EmbedLiveSample('Enllaços_amb_estil_de_botó', '100%', 100) }}

+ +

Expliquem què passa aquí, i ens centrem en les parts més interessants:

+ + + +
+

Nota: És possible que hagis observat que en l’HTML hem col·locat tots els elements de llista en la mateixa línia; fem això perquè els espais / les línies entre els elements de línia de bloc creen espais a la pàgina, com els espais que hi ha entre les paraules, i aquests espais trencarien el disseny de menú de navegació horitzontal. De manera que hem eliminat els espais. Pots trobar més informació sobre aquest problema (i les solucions) a Fighting the space between inline block elements.

+
+ +

Resum

+ +

Esperem que aquest article t’hagi proporcionat tot el que has de saber sobre els enllaços, per ara. L'article final del nostre mòdul de text «Aplicació d’estils» explica com pots utilitzar tipus de lletra personalitzats en els teus llocs web o tipus de lletra per a web, com es coneixen més sovint.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

diff --git a/files/ca/learn/css/styling_text/styling_lists/index.html b/files/ca/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..6caa6e0e24 --- /dev/null +++ b/files/ca/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,382 @@ +--- +title: Estils de llistes +slug: Learn/CSS/Estilitzar_text/Llistes_estil +tags: + - Article + - Beginner + - CSS + - Guide + - Styling + - Text + - bullets + - lists +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
+ +

Les llistes es comporten com qualsevol altre text en la seva major part, però hi ha algunes propietats CSS específiques de les llistes que has de conèixer i algunes bones pràctiques que has de tenir en compte. Aquest article ho explica tot.

+ + + + + + + + + + + + +
Requisits previs:Coneixements bàsics d'informàtica, els fonaments d'HTML (estudi Introducció a HTML ), fonaments CSS (estudi Introducció a CSS), fonaments d’aplicació d’estil i tipus de lletra a textos amb CSS.
Objectiu:Familiaritzar-se amb les bones pràctiques i propietats relacionades amb l’aplicació d'estil a les llistes .
+ +

Un exemple senzill de llista

+ +

Per començar, observa un exemple senzill de llista. Al llarg d'aquest article, veurem llistes no ordenades, ordenades i de descripció: totes tenen característiques d'estil similars, i algunes que són particulars per al tipus de llista concret. Tens l'exemple sense estil disponible a GitHub (consulta també el codi d’origen).

+ +

El codi HTML del nostre exemple de llista té aquest aspecte:

+ +
<h2>Shopping (unordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ul>
+  <li>Humous</li>
+  <li>Pitta</li>
+  <li>Green salad</li>
+  <li>Halloumi</li>
+</ul>
+
+<h2>Recipe (ordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ol>
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+
+<h2>Ingredient description list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<dl>
+  <dt>Humous</dt>
+  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
+  <dt>Pitta</dt>
+  <dd>A soft, slightly leavened flatbread.</dd>
+  <dt>Halloumi</dt>
+  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
+  <dt>Green salad</dt>
+  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
+</dl>
+ +

Si ara vas a l'exemple en directe i investigues els elements de la llista amb les eines de desenvolupador del navegador, t’adonaràs que hi ha un parell d'estils per defecte:

+ + + +

Tractament dels espais en llistes

+ +

Quan fas llistes d'estil, has d'ajustar-ne els estils perquè mantinguin el mateix espai vertical que els elements que l'envolten (com ara paràgrafs i imatges, que de vegades s’anomena ritme vertical), i el mateix espaiat horitzontal que la resta (observa l'exemple d'estil acabat a GitHub, i també el codi d’origen que hi trobaràs).

+ +

El CSS que s’utilitza per a aplicar l'estil al text i l'espaiat és el següent:

+ +
/* General styles */
+
+html {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 10px;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+ul,ol,dl,p {
+  font-size: 1.5rem;
+}
+
+li, p {
+  line-height: 1.5;
+}
+
+/* Description list styles */
+
+
+dd, dt {
+  line-height: 1.5;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: 1.5rem;
+}
+ + + +

Estils específics de llista

+ +

Hem examinat l'espaiat general de les llistes, ara explorarem algunes propietats específiques de la llista. Per començar, hi ha tres propietats que has de conèixer, que es poden establir en els elements {{htmlelement("ul")}} o {{htmlelement("ol")}}:

+ + + +

Estils de vinyeta

+ +

Com s'ha comentat, la propietat {{cssxref("list-style-type")}} permet establir quin tipus de vinyeta s'usa per als punts de vinyeta. En el nostre exemple, hem establert que la llista ordenada utilitzi números romans en majúscules, amb:

+ +
ol {
+  list-style-type: upper-roman;
+}
+ +

Això ens dona l’aspecte següent:

+ +

Una llista ordenada amb vinyetes que apareixex fora del text de l'element de llista.

+ +

Podeu trobar moltes més opcions consultant la pàgina de referència {{cssxref("list-style-type")}}.

+ +

Posició de la vinyeta

+ +

La propietat {{cssxref("list-style-position")}} estableix si les vinyetes apareixen dins dels elements de llista, o a fora, abans de l'inici de cada element. El valor predeterminat és outside (fora), que fa que les vinyetes se situïn fora dels elements de llista, tal com hem vist.

+ +

Si estableixes el valor inside (dins), les vinyetes se situen dins de les línies:

+ +
ol {
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}
+ +

Una llista ordenada amb vinyetes que apareixex dins del text de l'element de llista.

+ +

Ús d'una imatge de vinyeta personalitzada

+ +

La propietat {{cssxref("list-style-image")}} et permet fer servir una imatge personalitzada per a la vinyeta. La sintaxi és bastant senzilla:

+ +
ul {
+  list-style-image: url(star.svg);
+}
+ +

Tanmateix, aquesta propietat és una mica limitada en termes de control de la posició, la mida, etc., de les vinyetes. És millor utilitzar la família de propietats {{cssxref("background")}}, que aprendràs amb més detall en el mòdul de Aplicar estil a les caixes. De moment, aquí en tens un tast!

+ +

En el nostre exemple acabat, hem aplicat estil a la llista no ordenada d’aquesta manera (a sobre del que ja has vist abans):

+ +
ul {
+  padding-left: 2rem;
+}
+
+ul li {
+  padding-left: 2rem;
+  list-style-type: none;
+  background-image: url(star.svg);
+  background-position: 0 0;
+  background-size: 1.6rem 1.6rem;
+  background-repeat: no-repeat;
+}
+ +

Aquí hem fet el següent:

+ + + +

Això ens dona el resultat següent:

+ +

Una llista no ordenada amb vinyetes en forma de petites estrelles.

+ +

La propietat abreujada list-style

+ +

Les tres propietats anteriors esmentades es poden configurar amb una única propietat abreujada, {{cssxref("list-style")}}. Per exemple, el CSS següent:

+ +
ul {
+  list-style-type: square;
+  list-style-image: url(example.png);
+  list-style-position: inside;
+}
+ +

Podria reemplaçar-se per això:

+ +
ul {
+  list-style: square url(example.png) inside;
+}
+ +

Els valors es poden incloure en qualsevol ordre, i pots utilitzar-ne un, dos o els tres (els valors predeterminats que s’utilitzen per a les propietats que no s'inclouen són disc, none i outside). Si s'especifica un tipus i una imatge, el tipus s'utilitza com a alternativa si la imatge no es carrega per alguna raó.

+ +

El control de la numeració de les llistes

+ +

De vegades pot ser que vulguis numerar de manera diferent una llista ordenada, per exemple, que comenci a partir d'un número diferent de 1, o bé que compti enrere, o que compti en passos de més d'1. L'HTML i el CSS disposen d’algunes eines que et poden ajudar amb això.

+ +

start

+ +

L'atribut {{htmlattrxref("start", "ol")}} permet iniciar el recompte de la llista a partir d'un número diferent de 1. L’exemple següent:

+ +
<ol start="4">
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

Dona aquesta sortida:

+ +

{{ EmbedLiveSample('start', '100%', 150) }}

+ +

reversed

+ +

L'atribut {{htmlattrxref("reversed","ol")}} inicia la llista comptant cap enrere en comptes de cap endavant. L'exemple següent

+ +
<ol start="4" reversed>
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

Dona aquesta sortida:

+ +

{{ EmbedLiveSample('reversed', '100%', 150) }}

+ +

value

+ +

L'atribut {{htmlattrxref("value", "ol")}} permet establir valors numèrics específics per a cada element de llista. L’exemple següent:

+ +
<ol>
+  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
+  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li value="6">Wash and chop the salad.</li>
+  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

Dona aquesta sortida:

+ +

{{ EmbedLiveSample('value', '100%', 150) }}

+ +
+

Nota: Fins i tot si fas servir un valor de {{cssxref("list-style-type")}} no numèric, cal que utilitzis els valors numèrics equivalents per a l'atribut value.

+
+ +

Aprenentatge actiu: Aplicar estil a una llista imbricada

+ +

En aquesta sessió d'aprenentatge actiu, volem que prenguis allò que has après i dissenyis una llista imbricada. T’hem proporcionat un codi HTML, i volem que:

+ +
    +
  1. Apliquis vinyetes quadrades als elements de llista no ordenada.
    2. +
  2. Apliquis als elements de llista no ordenada i els elements de llista ordenada una alçada de línia d'1,5 respecte de la mida de la lletra.
    3. +
  3. Apliquis als elements de llista ordenada valors de lletra minúscula.
    4. +
  4. No dubtis de jugar amb l'exemple de llistes tant com vulguis, experimenta amb els tipus de vinyeta, l’espaiat o qualsevol altra cosa que hi trobis.
    5. +
+ +

Si t’equivoques, sempre pots tornar a començar amb el botó Reinicia. Si t’encalles, prem el botó Mostra la solució per veure’n una resposta possible.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

Vegeu també

+ +

Els comptadors CSS proporcionen eines avançades per a personalitzar el recompte i l'estil de les llistes, però són bastant complexos. Et recomanem que hi facis un cop d'ull si vols ampliar la informació. Vegeu:

+ + + +

Resum

+ +

Resulta relativament fàcil de dominar l'aplicació d’estil a les llistes una vegada que en coneixes els principis bàsics associats i les propietats específiques. En l’article següent continuarem amb les tècniques d'estil.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

diff --git a/files/ca/learn/css/styling_text/typesetting_a_homepage/index.html b/files/ca/learn/css/styling_text/typesetting_a_homepage/index.html new file mode 100644 index 0000000000..2619be67e7 --- /dev/null +++ b/files/ca/learn/css/styling_text/typesetting_a_homepage/index.html @@ -0,0 +1,112 @@ +--- +title: Composició d'una pàgina d'inici de l'escola comunitaria +slug: Learn/CSS/Estilitzar_text/Composició_pàgina_inici +tags: + - Assessment + - Beginner + - CSS + - CodingScripting + - Link + - Styling text + - font + - list + - web font +translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

En aquesta avaluació, comprovarem la comprensió de totes les tècniques d'estil de text que hem cobert al llarg d'aquest mòdul, que us permetrà personalitzar el text de la pàgina d'inici d'una escola comunitària. Podríeu tindra una mica de diversió durant el camí.

+ + + + + + + + + + + + +
Requisits previs:Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.
Objectiu:Provar la comprensió de les tècniques d'estil de text CSS.
+ +

Punt de partida

+ +

Per començar aquesta avaluació, heu de:

+ + + +
+

Nota: Com a alternativa, podeu utilitzar un lloc com JSBin o Thimble per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia i utilitzar aquest URL per indicar la imatge de fons. Si l'editor en línia que esteu utilitzant no té cap panell CSS separat, no dubteu a posar-lo en un element <style> a la capçalera del document.

+
+ +

Resum del projecte

+ +

Us hem proporcionat un codi HTML sense format per a la pàgina d'inici d'una universitat comunitària imaginària, a més d'alguns estils CSS de la pàgina en un disseny de dues columnes, proporcionant un estil rudimentari. Heu d'escriure els vostres afegits CSS a sota del comentari a la part inferior del fitxer CSS, per assegurar-vos que sigui fàcil marcar les parts que heu realitzat. No us preocupeu si alguns dels selectors són repetitius; en aquest cas us deixarem.

+ +

Fonts:

+ + + +

Estil de text general :

+ + + +

Enllaços:

+ + + +

Llistes:

+ + + +

Menú de navegació

+ + + +

Consells i suggeriments

+ + + +

Exemple

+ +

La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:

+ +

+ +

Avaluació

+ +

Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema en el fil de conversa en l'àrea d'aprenentatge, o en el canal IRC #mdn en Mozilla IRC. Intenteu primer l'exercici - no es guanya res fent trampes!

+ +

{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

diff --git a/files/ca/learn/css/styling_text/web_fonts/index.html b/files/ca/learn/css/styling_text/web_fonts/index.html new file mode 100644 index 0000000000..b4d1e8ecfd --- /dev/null +++ b/files/ca/learn/css/styling_text/web_fonts/index.html @@ -0,0 +1,193 @@ +--- +title: Fonts Web +slug: Learn/CSS/Estilitzar_text/Fonts_Web +tags: + - '@font-face' + - Article + - Beginner + - CSS + - Fonts + - Guide + - Learn + - font-family + - web fonts +translation_of: Learn/CSS/Styling_text/Web_fonts +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
+ +

En el primer article del mòdul hem explorat les característiques bàsiques de CSS que hi ha disponibles per a aplicar estil a la lletra i el text. En aquest article anem més lluny i explorem els tipus de lletra per a web amb detall, que permeten descarregar tipus de lletra personalitzats junt amb la teva pàgina web i et proporciona més varietat i personalització en l’aplicació d’estil als textos.

+ + + + + + + + + + + + +
Requisits previs:Coneixements bàsics d'informàtica, fonaments d'HTML (consulta la Introducció a l’HTML), fonaments de CSS (consulta la Introducció al CSS), fonaments d’aplicació d’estil a tipus de lletra i textos.
Objectiu:Aprendre com aplicar tipus de lletra per a web a una pàgina web utilitzant un servei de tercers o escrivint el teu codi propi.
+ +

Recapitulació sobre famílies de tipus de lletra

+ +

Com hem vist en l’article Fonaments d’aplicació d’estil a la lletra i els textos, pots controlar les fonts que fas servir per al teu HTML amb la propietat {{cssxref("font-family")}}. Aquesta propietat pren un o més noms de famílies de tipus de lletra i el navegador recorre la llista fins que troba un tipus de lletra que estigui disponible en el sistema en què s'executa:

+ +
p {
+  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+}
+ +

Aquest sistema funciona bé, però tradicionalment les opcions de tipus de lletra per al desenvolupament web han estat limitades. Només hi ha un grapat de tipus de lletra per a les que pots garantir la disponibilitat en tots els sistemes habituals, els anomenats tipus de lletra segurs per al web (web-safe fonts). Pots especificar la llista dels tipus de lletra preferents, seguits dels tipus de lletra alternatius segurs per al web, seguits dels tipus de lletra del sistema per defecte, però això afegeix una sobrecàrrega en termes de proves per a assegurar-te que els teus dissenys de pàgina presenten un aspecte correcte amb cada tipus de lletra, etc.

+ +

Tipografies web

+ +

Però hi ha una alternativa, que funciona molt bé, ja des de la versió 6 d'IE. Les tipografies web són una característica CSS que et permet especificar els fitxers de tipus de lletra que vols que es descarreguin juntament amb el teu lloc web quan s’hi accedeix, i això fa que qualsevol navegador que admet tipografies web pot disposar exactament dels tipus de lletra que especifiques. Increïble! La sintaxi necessària presenta aquest aspecte:

+ +

En primer lloc, hi ha un bloc de codi {{cssxref("@font-face")}} al començament del CSS, que especifica els fitxers de tipus de lletra que vols que es descarreguin:

+ +
@font-face {
+  font-family: "myFont";
+  src: url("myFont.ttf");
+}
+ +

A continuació pots aplicar el nom de la família del tipus de lletra personalitzada que has especificat en @font-face a qualsevol cosa que vulguis, de la manera habitual:

+ +
html {
+  font-family: "Bitstream Vera Serif Bold", serif;
+}
+ +

La sintaxi es comença a complicar una mica. A continuació hi entrem amb detall.

+ +

Hi ha dues coses importants que cal tenir en compte sobre els tipus de lletra segurs per al web:

+ +
    +
  1. Els navegadors admeten diversos formats de tipus de lletra, de manera que necessites diversos formats de tipus de lletra per a atènyer una compatibilitat de navegador decent. Per exemple, la majoria dels navegadors més moderns admeten WOFF / WOFF2 (Web Open Font Format, versions 1 i 2), el format més eficient per a tot, però les versions anteriors d'IE només admeten tipus de lletra EOT (Embedded Open Type), i és possible que hagis d'incloure una versió de tipus de lletra SVG per tenir compatibilitat amb versions anteriors dels navegadors iPhone i Android. A continuació et mostrarem com generar el codi necessari.
    2. +
  2. Normalment els tipus de lletra no són d’ús lliure. Cal pagar per a fer-los servir o assumir unes condicions de llicència, com ara acreditar el creador del tipus de lletra en el codi (o en el teu lloc web). No hauries de robar els tipus de lletra ni utilitzar-los sense donar-ne el crèdit adequat.
    3. +
+ +
+

Nota: Els tipus de lletra web com a tecnologia són compatibles amb Internet Explorer des de la versió 4!

+
+ +

Aprenentatge actiu: Un exemple de tipografia web

+ +

Tenint en compte això, construïm un exemple bàsic de tipografia web des de zero. És difícil mostrar-ho a partir d’un exemple en viu, de manera que, en lloc d'això, seguirem els passos detallats en les seccions següents, per a tenir una idea del procés.

+ +

Has d'utilitzar els fitxers web-font-start.html i web-font-start.css com a punt de partida per a afegir el codi (consulta també el codi de l’exemple en viu). Fes també una còpia d'aquests fitxers en un directori nou al teu ordinador. En el fitxer web-font-start.css hi ha una mica de CSS per tractar el disseny bàsic i la tipografia de l'exemple.

+ +

Buscar tipus de lletra

+ +

Per a aquest exemple, utilitzarem dos tipografies web, un per als títols d’encapçalament i un per al text del cos (body). Per començar, hem de trobar els fitxers que contenen els tipus de lletra. Els tipus de lletra es creen en estudis de disseny i s'emmagatzemen en diferents formats de fitxer. En general, hi ha tres tipus de llocs web en què pots obtenir tipus de lletra:

+ + + +

Busquem ara alguns tipus de lletra! Ves a Font Squirrel i tria dos tipus de lletra, un que et resulti interessant i agradable per als títols (ppotser una bona tipografia tipus "Display" o "Slab Serif"), i un altre una mica menys cridaner i que resulti més llegible, per als paràgrafs. Quan hagis trobat cada tipus, prem el botó de descàrrega i desa el fitxer en el mateix directori que hi ha els fitxers HTML i CSS que has desat abans. No importa si són en format TTF (True Type Fonts) o OTF (Open Type Fonts).

+ +

En cada cas, descomprimeix el paquet amb els tipus de lletra (les tipografies web s’acostumen a distribuir en fitxers ZIP que contenen els fitxers dels tipus de lletra i la informació de la llicència). Pots trobar diversos fitxers de tipus de lletra en el paquet —alguns tipus de lletra es distribueixen com una família, amb diverses variants disponibles, per exemple, fina, seminegreta, negreta, cursiva, cursiva fina, etc. Per a aquest exemple, només cal que et preocupis d'un únic fitxer de tipus de lletra per cada elecció.

+ +
+

Nota: en la columna de la dreta de la secció «Busca tipus de lletra», pots fer clic en les diverses etiquetes, i classificacions per filtrar les opcions que es mostren.

+
+ +

Generació del codi necessari

+ +

Ara cal generar el codi necessari (i els formats de tipus de lletra). Per cada tipografia, segueix aquests passos:

+ +
    +
  1. Assegura’t que compleixes tots els requisits de llicència si vols fer servir això en un projecte comercial o en el web.
    2. +
  2. Ves al Webfont Generator de Font Squirrel.
    3. +
  3. Carrega els dos fitxers de tipus de lletra amb el botó Upload Fonts.
    4. +
  4. Marca la casella de verificació amb el text «Sí, els tipus de lletra que carrego són legalment aptes per a la inclusió en el web».
    5. +
  5. Fes clic a Download your kit.
    6. +
+ +

Un cop el generador ha acabat de processar, has d'obtenir un fitxer ZIP, descarregar-lo i desar-lo al mateix directori que els teus HTML i CSS.

+ +

Implementar el codi a la teva demo

+ +

En aquest punt, has de descomprimir el paquet de fitxers de tipus de lletra segurs per al web que acabes de generar. Dins del directori descomprimit, hi haurà tres elements útils:

+ + + +

Per a implementar aquests tipus de lletra en el teu exemple de demostració, segueix aquests passos:

+ +
    +
  1. Canvia el nom del directori descomprimit per un nom que sigui senzill i fàcil de recordar, com ara fonts.
    2. +
  2. Obre el fitxer stylesheet.css i copia-hi els blocs @font-face que conté en el teu fitxer web-font-start.css; has de posar-los a dalt de tot, abans de qualsevol bloc de CSS, perquè els tipus de lletra s’han d’importar abans de poder-los utilitzar en el teu lloc web.
    3. +
  3. Cadascuna de les funcions url() apunta a un fitxer de tipus de lletra que volem importar al nostre CSS; afegeix fonts/ al començament de cada ruta (o adapta-ho si cal) per a assegurar-te que les rutes d'accés als fitxers són correctes.
    4. +
  4. Ara pots utilitzar aquests tipus de lletra en les llistes d’arxius de tipus de lletra, igual que qualsevol tipus de lletra segur per al web o tipus de lletra predeterminat del sistema. Per exemple: + 
    font-family: 'zantrokeregular', serif;
    +
    5. +
+ +

Has d'acabar amb una pàgina de demostració amb alguns tipus de lletra agradables implementats. Atès que els diferents tipus de lletra es creen amb mides diferents, és possible que hagis d'ajustar la mida, l'espaiat, etc., per a ordenar-ne l'aspecte.

+ +

+ +
+

Nota: Si tens problemes perquè funcioni, no dubtis de comparar la teva versió amb els nostres fitxers acabats; consulta web-font-finished.html i web-font-finished.css (executa l'exemple acabat en directe).

+
+ +

Usar un servei de tipografies en línia

+ +

Els serveis de tipus de lletra en línia normalment emmagatzemen i serveixen tipus de lletra per tu, de manera que no t’has de preocupar d’escriure el codi @font-face, i generalment només cal que insereixis una o dues línies de codi al teu lloc web perquè tot funcioni. Alguns exemples són: Typekit i Cloud.typography. La majoria d'aquests serveis estan basats en subscripcions, amb la notable excepció de Google Fonts, un útil servei gratuït, especialment per a fer proves ràpides i demostracions d'escriptura.

+ +

La majoria d'aquests serveis són fàcils d'utilitzar, de manera que no hi entrarem amb molt de detall. Vegem ràpidament les fonts de Google, perquè puguis fer-te’n la idea. De nou, fes còpies de web-font-start.html i web-font-start.css com a punt de partida.

+ +
    +
  1. Ves a Google Fonts.
    2. +
  2. Utilitza els filtres de la banda esquerra per visualitzar els tipus de lletra que vols triar i escull un parell de tipus de lletra.
    3. +
  3. Per a seleccionar un tipus de lletra, prem el botó Add to Collection que hi ha al costat.
    4. +
  4. Quan hagis escollit els tipus de lletra, prem el botó Use que hi ha a la part inferior de la pàgina.
    5. +
  5. A la pantalla resultant, primer has de copiar la línia de codi que es mostra a la secció 3 i enganxar-la al final de tot del teu fitxer HTML. Posa-la per sobre de l'element {{htmlelement("link")}} perquè el tipus de lletra s'importi abans que el teu CSS l’hagi d’utilitzar.
    6. +
  6. A continuació, has de copiar les declaracions que hi ha en la secció 4 al teu CSS, segons correspongui, per a aplicar els tipus de lletra personalitzats al teu codi HTML.
    7. +
+ +
+

Nota: Pots trobar una versió completa a google-font.html i google-font.css, si et cal contrastar el teu treball amb el nostre (consulta-ho en directe).

+
+ +

@font-face amb més detall

+ +

Explorem la sintaxi @font-face que genera Font Squirrel. Aquest és l’aspecte que presenta un dels blocs:

+ +
@font-face {
+  font-family: 'ciclefina';
+  src: url('fonts/cicle_fina-webfont.eot');
+  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
+         url('fonts/cicle_fina-webfont.woff') format('woff'),
+         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
+         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+ +

Això s'anomena «sintaxi a prova de bales @font-face» des d'una publicació de Paul Irish dels inicis, quan @font-face va començar a ser popular (Bulletproof @font-face Syntax). Passem a veure què fa:

+ + + +
+

Nota: També pots especificar cada valor {{cssxref("font-variant")}} i {{cssxref("font-stretch")}} per als teus tipus de lletra segurs per al web. En els navegadors més nous també pots especificar un valor {{cssxref("unicode-range")}}, que és una gamma de caràcters específica que vols utilitzar a banda del tipus de lletra segur per al web; en els navegadors compatibles amb aquesta propietat, només es descarregaran els caràcters especificats, per a estalviar descàrregues innecessàries. Creating Custom Font Stacks with Unicode-Range, de Drew McLellan, t’ofereix unes idees útils sobre com fer-ne ús.

+
+ +

Resum

+ +

Ara que has treballat els nostres articles sobre els fonaments d’aplicació d'estil al text, és hora de posar a prova el que has après amb la nostra avaluació per al mòdul, Composició tipogràfica d’una pàgina d’inici per a un lloc web d’una escola de la comunitat.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

-- cgit v1.2.3-54-g00ecf