MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

CSS bàsic

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

CSS (Cascading Style Sheets) és el codi que utilitzareu per dissenyar la vostre pàgina web. CSS Bàsic us portarà a través del que necessiteu per començar. Respondrem a preguntes com: Com puc fer perquè el meu text sigui negre o vermell? Com puc fer perquè el meu contingut aparegui en tal i tal lloc en la pantalla? Com puc decorar la meva pàgina web amb imatges de fons i colors?

Què és CSS, en realitat? ?

Igual que HTML, CSS no és realment un llenguatge de programació. És un llenguatge de fulles d'estil, és a dir, us permet aplicar estils de manera selectiva als elements en els documents HTML. Per exemple, per seleccionar tots els elements de paràgraf en una pàgina HTML i convertir el text en color vermell, escriuríeu aquest CSS:

p {
  color: red;
}

Anem a provar: enganxeu aquestes tres línies de CSS en un arxiu nou a l'editor de text i, a continuació, deseu el arxiu com style.css en el directori d'estils.

Però encara heu d'aplicar el CSS al vostre document HTML, en cas contrari l'estil CSS no afectarà en la forma en que el navegador mostrarà el document HTML. (Si no heu estat seguint el nostre projecte, llegiu Tractar amb arxius i HTML bàsic per esbrinar el que cal fer en primer lloc.)

  1. Obriu el arxiu index.html i enganxeu la següent línia en algun lloc del cap, és a dir, entre les etiquetes <head> i </head>:
    <link href="styles/style.css" rel="stylesheet" type="text/css">
  2. Deseu index.html i carregar-ho en el navegador. Hauriau de veure alguna cosa com això:

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Si el text del paràgraf és ara de color vermell, felicitacions, ara heu escrit el vostre primer CSS amb èxit!

Anatomia d'un conjunt de regles CSS

Vegem el CSS anterior en una mica més de detall:

Tota l'estructura es denomina un conjunt de regles (però sovint "regla" per abreujar). Tingueu en compte també els noms dels components individuals:

Selector
El nom de l'element HTML en l'inici del conjunt de regles. Es selecciona l'element o els elements per donar estil (en aquest cas, els elements p). Per l'estil d'un element diferent, només cal canviar el selector.
Declaració
Una sola regla com color: red; especificant quines de les propietats de l'element voleu estil.
Propietats
Maneres en què podem donar estil a un element HTML. (En aquest cas, color és una propietat dels elements p.) CSS, ens permet triar quines propietats volem afectar amb la nostra regla.
Valor de propietat
A la dreta de la propietat, després dels dos punts, tenim el valor de la propietat, per triar una de les moltes aparicions possibles per a una determinada propietat (hi ha molts valors de color, a més de red).

Recordeu les altres parts importants de la sintaxi:

  • Cada conjunt de regles (a part del selector) han de ser embolicades en les claus ({}).
  • Dins de cada declaració, heu d'usar els dos punts (:) per separar la propietat dels seus valors.
  • Dins de cada conjunt de regles, heu d'utilitzar un punt i coma (;) per separar cada declaració de la següent.

Així que per modificar diversos valors de propietats a la vegada, només les heu d'escriure separades per punt i coma, per exemple:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Seleccionar diversos elements

També podeu seleccionar diversos tipus d'elements i aplicar un únic conjunt de regles per a tots ells. Incloure múltiples selectors separats per comes. Per exemple:

p,li,h1 {
  color: red;
}

Diferents tipus de selector

Hi ha molts tipus diferents de selector. Per sobre, només ens fixarem en selectors d'elements, els quals seleccionen tots els elements d'un tipus determinat en els documents HTML donats. Però podem fer seleccions més específiques que això. Aquests són alguns dels tipus més comuns de selector:

Nom del Selector Què es selecciona Exemple
Selector d'element (de vegades anomenat un selector d'etiquetes o tipus) Tot(s) element(s) HTML del tipus especificat. p
Selecciona <p>
selector ID L'element de la pàgina amb l'ID especificat (en una pàgina HTML donada, només es permet un element per ID). #my-id
Selecciona <p id="my-id"> o <a id="my-id">
selector Class L'element(s) a la pàgina amb la classe especificada (múltiples instàncies de la classe podem aparèixer en una pàgina). .my-class
Selecciona <p class="my-class"> i <a class="my-class">
selector Attribute L'element(s) a la pàgina amb l'atribut especificat. img[src]
Selecciona <img src="myimage.png"> però no <img>
selector Pseudo class L'element(s) especificat(s), però només quan està en l'estat especificat, per exemple, planejar per sobre. a:hover
Selecciona <a>, però només quan el punter del ratolí planeja sobre l'enllaç.

Hi ha moltes més selectors per explorar, i podeu trobar una llista més detallada a la nostra Guia de selectors.

Tipus de lletra i text

Ara que hem explorat alguns conceptes bàsics de CSS, començarem a afegir algunes regles més i informació al nostre arxiu style.css per fer que el nostre exemple es vegi bé. En primer lloc, anem a aconseguir els nostres tipus de lletra i text perquè es vegi una mica millor.

  1. En primer lloc, torneu enrere i trobeu els enllaços de Google Fonts que vau guardar en un lloc segur. Afegiu l'element <link...> algun lloc dins del cap del vostre index.html (de nou, en qualsevol lloc entre les etiquetes <head> i </head>). Es veurà alguna cosa com això:
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  2. A continuació, elimineu la regla existent que teniu en el vostre arxiu style.css. Va ser una bona prova, però el text en vermell en realitat no es veu molt bé.
  3. Afegiu les següents línies al seu lloc, en substitució de la línia de marcador de posició amb la línia de font-family que vau obtenir de Google fonts. (font-family només significa el tipùs de lletra que voleu utilitzar per al text.) Aquesta primera regla estableix una base global en tipùs de lletra  i mida per a tota la pàgina (ja que <html> és l'element principal de tota la pàgina, i tots els elements dins d'ella heretaran el mateix tipus de lletra (font-family) i mida (font-size)):
    html {
      font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
      font-family: placeholder: this should be the rest of the output you got from Google fonts
    }

    Nota: He afegit un comentari per explicar el que significa "px". Qualsevol cosa en un document CSS entre /* i */ és un comentari CSS, que el navegador ignora quan processa el codi. Aquest és un lloc per vosaltres, per escriure notes útils sobre el que esteu fent.

  4. Ara establirem les mides del tipus de lletra per als elements que contenen text, a l'interior del cos HTML (<h1>, <li> i <p>). També centrarem el text del nostre encapçalament i establirem una certa altura de línia i espaiat entre caràcters en el contingut del cos perquè sigui una mica més fàcil de llegir:
    h1 {
      font-size: 60px;
      text-align: center;
    }
    
    p, li {
      font-size: 16px;    
      line-height: 2;
      letter-spacing: 1px;
    }

Podeu ajustar aquests valors de px al vostre gust per tal d'aconseguir el disseny que busqueu, però en general el vostre disseny ha de tenir aquest aspecte:

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

Caixes, caixes, tot es tracta de caixes

Una cosa que notareu en escriure CSS és que molt d'ell es tracta de caixes - establir la seva mida, color, posició, etc. La major part dels elements HTML de la pàgina pot estar pensat com caixes que se sentin unes sobre unes altres.

a big stack of boxes or crates sat on top of one another

No us estranyeu, el disseny CSS es basa principalment en el model de caixa. Cada un dels blocs que ocupa espai en la vostra pàgina té propietats com aquesta:

  • padding, l'espai al voltant dels continguts (per exemple, al voltant del text del paràgraf)
  • border, la línia contínua que es troba just fora del farciment (padding)
  • margin, l'espai al voltant de l'exterior de l'element

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

En aquesta secció també utilitzem:

  • width (d'un element)
  • background-color, El color de fons del contingut d'un element i el farcit
  • color, el color del contingut d'un element (en general el text)
  • text-shadow: estableix una ombra sobre el text dins d'un element
  • display: estableix la manera de visualitzar un element (no es preocupeu per això encara)

Per tant, anem a començar i afegir una mica més de CSS a la nostra pàgina! Seguiu afegint aquestes noves regles al final de la pàgina, i no tingueu por d'experimentar amb el canvi de valors per veure com resulta.

Canviar el color de la pàgina

html {
  background-color: #00539F;
}

Aquesta regla estableix un color de fons a tota la pàgina. Canvieu el codi de color per qualsevol altre color que vau triar a l'hora de planificar el vostre lloc.

Ordenar el cos

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

Ara l'element body. Hi ha bastants declaracions aquí, així que passarem per totes elles una per una:

  • width: 600px; — Això obliga el cos a estar sempre a 600 píxels d'ample.
  • margin: 0 auto; — En establir dos valors en una propietat com margin o padding, el primer valor afecta a la part superior i inferior de l'element (És el 0 en aquest cas), i el segon valor a la part esquerra i dreta (en aquest cas, auto és un valor especial que divideix l'espai horitzontal disponible uniformement entre l'esquerra i la dreta). També podeu utilitzar un, tercer o quart valor, tal com es documenta aquí.
  • background-color: #FF9500; — com abans, això estableix el color de fons de l'element. He utilitzat una mena de color taronja vermellós per al cos (body) en lloc del blau fosc per a l'element html. Endevant i experimenteu. Sentir-vos lliures d'usar el blanc (white) o el que vulgueu.
  • padding: 0 20px 20px 20px; — tenim quatre valors establerts en el farciment (padding), per fer una mica d'espai al voltant del nostre contingut. Aquesta vegada no hem establert cap farcit (padding) a la part superior del cos, i 20 píxels a l'esquerra, a baix i a la dreta. Els valors s'estableixen a dalt, dreta, a baix, esquerra, en aquest ordre.
  • border: 5px solid black; — això simplement estableix una vora (border) negra sòlid de 5 píxels d'ample en tots els costats del cos.

Posicionament i estil del títol de la pàgina principal

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

Podeu haver notat que hi ha un buit horrible a la part superior del cos. Això succeeix perquè els navegadors apliquen algun estil predeterminat a l'element <h1> (entre d'altres), tot i que no s'ha aplicat cap CSS en absolut! Això pot semblar una mala idea, però volem que fins i tot una pàgina web sense estil tingui la facilitat d'una lectura bàsica. Per desfer-nos de la bretxa sobreescriurem l'estil per defecte, establint  margin: 0;.

A continuació, hem establert el farciment (padding) superior i inferior de l'encapçalat a 20 píxels, i el text del encapçalat del mateix color que el color de fons de l'HTML.

Una de les propietats més interessants que hem utilitzat aquí és text-shadow , la qual aplica una ombra de text el contingut de text de l'element. Els seus quatre valors són els següents:

  • El primer valor de píxel estableix el desplaçament horitzontal de l'ombra del text - quant es mou a través de: un valor negatiu ha de moure's cap a l'esquerra.
  • El segon valor de píxel estableix el desplaçament vertical de l'ombra del text - quant es mou cap avall, en aquest exemple; un valor negatiu ha de moure-ho cap amunt.
  • El tercer valor de píxel estableix el radi de desenfoquement de l'ombra - un valor major significarà una ombra més fosca.
  • El quart valor estableix el color base de l'ombra.

Un cop més, tracteu d'experimentar amb diferents valors per veure el que pot passar.

Centrar la imatge

img {
  display: block;
  margin: 0 auto;
}

Finalment, centrarem la imatge perquè es vegi millor. Podríem utilitzar el marge: 0 auto, nou truc que hem fet servir anteriorment per al cos, però també hem de fer alguna cosa més. L'element del cos és a nivell de bloc, el que significa que ocupa un espai a la pàgina i pot tenir marges i altres valors d'espaiat que se li apliquen. Les imatges, per altra banda, són elements en línia, el que significa que no poden. Així que per aplicar marges a la imatge, hem de donar a la imatge el comportament a nivell de bloc usant  display: block;.

Note: No us preocupeu si encara no enteneu display: block; i la distinció a nivell de bloc/en línia. Ho fareu mentre estudieu CSS amb més profunditat. Podeu trobar més informació sobre els diferents valors de visualització disponibles a la nostra pàgina de referència de la pantalla.

Conclusió

Si heu seguit totes les instruccions d'aquest article, hareu d'acabar amb una pàgina que es vegi alguna cosa com això (també es pot veure la nostra versió aquí):

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

Si us quedeu encallats, sempre podreu comparar el vostre treball amb el nostre codi d'exemple acabat en Github.

Aquí, en realitat només hem tractat una part superficial de CSS. Per obtenir més informació, visiteu el nostre tema d'aprenentatge CSS.

Document Tags and Contributors

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