MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

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

CSS (Cascading Style Sheets) permet crear pàgines web de gran aparença, però com funciona sota el capó? En aquest article s'explica el que és CSS, com el navegador converteix HTML en un Document Object Model (DOM), com s'aplica el CSS a les parts del DOM, alguns exemples molt bàsics de sintaxi, i quin codi s'utilitzat per incloure exactament el CSS a la pàgina web.

Requisits previs: Coneixements bàsics d'informàtica, instal.lació del programari bàsic, coneixements bàsics del treball amb arxius, i HTML bàsic (estudiar Introducció a HTML).
Objectiu: Aprendre que és CSS, i com funciona a un nivell bàsic.

Que és CSS?

Com hem esmentat abans, CSS és un llenguatge per especificar com els documents són presentats als usuaris - la manera en què es dissenyan, distribueixen, etc.

Un document és, en general, un arxiu de text estructurat utilitzant un llenguatge de marques - HTML és el llenguatge de marcat més comú, però també ens podem trobar amb altres llenguatges de marcat com SVG o XML.

La presentació d'un document a un usuari vol dir convertir-lo en un format utilitzable per al públic. Els Navegadors, com Firefox, Chrome o Internet Explorer, estan dissenyats per a presentar documents visuals, per exemple, en una pantalla d'ordinador, un projector o una impressora.

Com afecta el CSS a HTML?

Els navegadors web apliquen les regles CSS a un document per afectar la forma en què es visualitza. Una regla CSS es forma a partir de:

  • Un conjunt de propietats, que tenen valors definits per actualitzar la forma en què el contingut HTML es mostra, per exemple vull que l'amplada dels elements sigui del 50% del element pare, i el fons sigui de color vermell.
  • Un selector, selecciona els element(s) als quals se'ls vol aplicar els valors de la propietat actualitzats. Per exemple, vull aplicar la regla CSS per a tots els paràgrafs en el document HTML.

Un conjunt de regles CSS continguda dins d'una fulla d'estil determina com una pàgina web s'ha de veure. Aprendrem molt més sobre com es veu la sintaxi CSS en el següent article del mòdul - CSS Syntax.

Un exemple CSS ràpida

Les descripcions anteriors poden o no haver tingut sentit, per estar segurs que les coses queden clares presentarem un exemple ràpid. En primer lloc, farem un document HTML simple, que contingui un <h1> i un <p> (avís, s'aplica una fulla d'estil a l'HTML fent servir un element <link>):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

Ara veurem un exemple molt simple CSS que conté dues regles:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

La primera regla comença amb un selector h1, el que significa que aplicarà els seus valors de propietat a l'element <h1>. Conté tres propietats i els seus valors (cada parella propietat/valor es diu una declaració):

  1. La primera d'elles estableix el color del text a blau.
  2. La segona estableix el color de fons en groc.
  3. La tercera posa una vora al voltant de la capçalera que és 1 píxel d'ample, sòlid (no puntejat, o discontinu, etc.), i de color negre.

La segona regla comença amb un selector p, el que significa que aplicarà els seus valors de propietat a l'element <p>. Conté una declaració, que estableix el color del text a vermell.

En el navegador web, el codi anterior produirà el següent resultat:

A simple webpage containing a header of Hello World, and a paragraph that says This is my first CSS example

Això no és massa bonic, però almenys es comença a donar una idea de com funciona CSS.

Aprenentatge actiu: Escriure la primera CSS

Ara us donarem l'oportunitat d'escriure la vostre propia mica de CSS. Per a això, es pot utilitzar les zones d'entrada de sota, en l'exemple editable en viu. De manera similar al que s'ha vist anteriorment, té alguns elements HTML simples, i algunes propietats CSS. Intenteu afegir algunes declaracions simples per al CSS, a l'estil de l'HTML.

Si cometeu un error, sempre es pot restablir amb el botó Reset. Si heu quedat realment encallats, feu clic al botó Show solution per veure una resposta potencial.

Com funciona realment CSS?

Quan un navegador mostra un document, s'ha de combinar el contingut del document amb la seva informació d'estil. Es processa el document en dues etapes:

  1. El navegador converteix HTML i CSS en el DOM (Document Object Model). El DOM representa el document en la memòria de l'ordinador. Combina el contingut del document amb el seu estil.
  2. El navegador mostra el contingut del DOM.

Sobre el DOM

Un DOM té una estructura en forma d'arbre. Cada element, atribut i tros de text en el llenguatge de marcat es converteix en un node DOM en l'estructura d'arbre. Els nodes es defineixen per la seva relació amb altres nodes DOM. Alguns elements són els pares dels nodes fills, i els nodes fills tenen germans.

Entendre el DOM ajuda a dissenyar, depurar i mantenir el CSS perquè el DOM és on es reuneixen el CSS i el contingut del document.

Representació DOM

En lloc d'una llarga i avorrida explicació, posarem un exemple per veure com el DOM i CSS de treball junts.

Assumim el codi HTML següent:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

En el DOM, el node corresponent a l'element <p> és un dels pares. Els seus fills són un node de text i els nodes corresponents als elements <span>. Els nodes SPAN són també els pares, amb els nodes de text com els seus fills:

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

Així és com el navegador interpreta el fragment HTML anterior - processa l'arbre DOM anterior i ho mostra en el navegador de la següent manera:

Aplicació de CSS al DOM

Diguem que hem afegit una mica de CSS en el document, per dissenyar-lo. De nou, l'HTML és com segueix:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

Si apliquem el següent CSS:

span {
  border: 1px solid black;
  background-color: lime;
}

El navegador analitzarà l'HTML i  crearà un DOM, a continuació, analitzarà el CSS. Atès que l'única regla disponible CSS és un selector span, s'aplicarà la regla a cada un dels tres trams. La sortida actualitzada és el següent:

Com aplicar el CSS a l'HTML

Hi ha tres maneres diferents d'aplicar CSS a un document HTML que ens trobarem amb freqüència, algunes més útils que altres. Aquí revisarem breument cada una.

Fulla d'estil externa

Ja hem vist fulles d'estil externes en aquest article, però no amb aquest nom. Una fulla d'estil externa és quan tenim el CSS escrit en un arxiu a part amb l'extensió .css, i es fa referència des d'un element HTML <link>. L'arxiu HTML és com la següent:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

I l'arxiu CSS:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

Aquest mètode és sens dubte el millor, ja que podem utilitzar una fulla d'estil per donar estil a diversos documents, i només s'hauria d'actualitzar el CSS en un sol lloc si es necessiten fer canvis.

Fulla d'estil interna

Una fulla d'estil interna el CSS no està en un arxiu extern, en el seu lloc el CSS es col·loca dins d'un element <style>, contingut dins del head de l'HTML. Pel que el HTML es veuria així:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

Això pot ser útil en algunes situacions (potser s'està treballant amb un sistema de gestió de continguts en els quals no és possible modificar els arxius CSS directament), però no és tan eficient com les fulles d'estil externes - en un lloc web, es necessitaria que el CSS fora repetit a través de cada pàgina, i actualitzat en diversos llocs si es requerissin canvis.

Estils en línia

Els estils en línia són declaracions CSS que afecten a un sol element, contingut dins d'un atribut style:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

Si us plau, no fer això, llevat que realment s'hagi de fer! És molt dolent per al manteniment (pot ser que s'hagi d'actualitzar la mateixa informació diverses vegades en un document), i també es barreja la informació de CSS de presentació amb la informació estructural HTML, fent que el CSS sigui més difícil de llegir i entendre. Mantenint els diferents tipus de codi separat i pur fa la feina molt més fàcil per a tots els que treballen en el codi.

L'única vegada que es podria haver de recórrer a l'ús d'estils en línia és quan l'entorn de treball és molt restrictiu (potser el CMS només permet editar el cos HTML).

I ara que

En aquest punt, heu d'entendre els conceptes bàsics de com funciona CSS, i com els navegadors tractar amb ell. A continuació, aprendrem sobre la sintaxi CSS.

Document Tags and Contributors

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