3.3. Regles CSS - Disseny

Model de Caixa

En CSS, tots els elements HTML es representen com a caixes. Una caixa determina:

  • el contingut,
  • l’espai intern (padding),
  • la vora (border),
  • l’espai extern (margin).

Això ens permet controlar el disseny d’una pàgina web de manera previsible.

Parts del model de caixa:

  • Contingut: allò que mostra l’element (text, imatges…).
  • Emplenament (padding): L’espai entre el contingut i la vora de l’element.
  • Marc (border): La línia (contorn) que envolta l’element.
  • Marge (margin): L’espai exterior de l’element, fora del marc.

alt text

Propietat box-sizing

Per defecte, l’ample total d’un element és:

width + padding + border

Però això pot dificultar el disseny.

La propietat box-sizing canvia este comportament:

/* Comportament per defecte */
box-sizing: content-box;

/* Recomanat per a maquetació moderna */
box-sizing: border-box;
  • content-box: width només és el contingut.
  • border-box: width inclou contingut + padding + border.

Recomanació global:


* {
    box-sizing: border-box;
}

Exemple general del Model de Caixa 


.element {
    width: 300px;
    height: 150px;
    padding: 10px;
    border: 2px solid black;
    margin: 15px;
}

On:

  • width i height defineixen les dimensions de la caixa.
  • padding defineix l’espai entre el contingut i el marc.
  • border és el marc que envolta l’element (estil, amplada i color).
  • margin defineix l’espai entre l’element i altres elements.

Dimensions

Amplada i altura

Les propietats width i height permeten definir les dimensions de la caixa.

Exemple:


.nom {
    width: 300px; /* Amplada */
    height: 100px; /* Altura */
}

alt text

Unitats en CSS

Existeixen molts tipus d’unitats en CSS, les podem utilitzar cadascuna d’elles en funció de les nostres necessitats:

Longitud

  • Pixels (px), percentatge (%), punts (pt), polzades (in), centímetres (cm) , ems (em), rems (rem)

  • em: Relativa a la mida de lletra del pare.

Si body té font-size: 16px:

  • 1em = 16px

  • 2em = 32px

  • rem Relativa a la mida de lletra del document (html), no del pare.

Recomanat per a disseny consistent.

Exemple: 

html { font-size: 16px; }

p { font-size: 1.2em; }  /* Depén del pare */
h1 { font-size: 2rem; }  /* Sempre 32px */
  • Absolutes: px, cm, in, pt…
  • Relatives: %, em, rem, vh, vw, auto…

On:

Unitat Significat Explicació
% Percentatge Relativa al contenidor pare. Exemple: width: 50% és la meitat de l’ample del pare.
em Mida relativa al pare 1em = mida de lletra del pare. Exemple: si el pare té font-size: 20px, 1em = 20px.
rem Mida relativa al document 1rem = mida de lletra del html. No depén del pare. Exemple: si html té 16px, 1rem = 16px.
vh Viewport Height 1vh = 1% de l’altura de la finestra del navegador.
vw Viewport Width 1vw = 1% de l’amplada de la finestra del navegador.
auto Automàtic El navegador calcula automàticament la mida o posició. Exemple: margin: auto centra l’element.

Exemple amb dimensions relatives:


.nom {
    width: 50%;            /* La meitat del contenidor pare */
    height: 100vh;         /* 100% de l'altura visible de la finestra */
    
    font-size: 1.2rem;     /* 1.2 vegades la mida base del document (html) */
    padding: 2em;          /* 2 vegades la mida de lletra del pare */
    
    max-width: 80vw;       /* Com a màxim, el 80% de l'amplada de la finestra */
    min-height: 20vmin;    /* L'altura mínima serà el 20% del costat més menut de la finestra */
    
    margin: auto;          /* Centrat horitzontalment */
    border-radius: 1vmax;  /* Arrodoniment basat en el costat més gran del viewport */
}

Min, Max i Ajust Automàtic

Per controlar si un element pot créixer o reduir-se:


div {
    min-width: 200px;
    max-width: 600px;
    height: auto;
}
  • min-width: l’element no serà més menut del valor indicat.
  • max-width: molt útil en disseny responsive.
  • auto: el navegador adapta la mida al contingut.

Espaiat

L’espaiat es refereix a l’espai entre i dins dels elements, incloent marges, emplenaments i el marc. Per defecte, els valors de margin, padding i border són zero. Aquests es poden modificar amb propietats específiques:

alt text

Marges (margin)

El marge (margin) és l’espai exterior de l’element, fora del seu border.

Els seus valors són:

  • margin: Tots els marges a la vegada.
  • margin-top: Marge superior.
  • margin-right: Marge dret.
  • margin-bottom: Marge inferior.
  • margin-left: Marge esquerre.

i també tot junt:

  • margin: top right bottom left; Per especificar tots els marges a la vegada.

  • Per exemple:


.nom {
    margin: 10px; /* Tots els marges a 10 píxels */
    margin-top: 15px; /* Màrgens superior específic */
}

En este cas, l’element tindrà un marge de 10 píxels a tots els costats, excepte a la part superior, on el marge serà de 15 píxels.

  • Altre exemple:
div {
 margin-top: 20px;
 margin-right: 30px;
 margin-bottom: 40px;
 margin-left: 50px;
}

que seria equivalent a:


div {
 margin: 20px 30px 40px 50px;   /* top, right, bottom, left */
}

alt text

Emplenaments (padding)

Defineixen l’espai intern entre el contingut i el border.

  • padding: Tots els emplenaments a la vegada.
  • padding-top: Emplenament superior.
  • padding-right: Emplenament dret.
  • padding-bottom: Emplenament inferior.
  • padding-left: Emplenament esquerre.

i també tot junt:

  • padding: top right bottom left; Per especificar tots els emplenaments a la vegada.

alt text

Exemples:


.nom {
    padding: 5px; /* Emplenament igual a tots els costats */
    padding-left: 10px; /* Emplenament específic a l'esquerra */
}

En este cas, l’element tindrà un emplenament de 5 píxels a tots els costats, excepte a la part esquerra, on l’emplenament serà de 10 píxels.

Altre exemple:


div {
 padding-top: 80px;
 padding-right: 100px;
 padding-bottom: 120px;
 padding-left: 140px;
}

o també en forma abreujada:


div {
 padding: 80px 100px 120px 140px;
}

alt text

Marc (border) i Forma

Border

El border és la vora exterior de la caixa,es a dir la línia que envolta l’element. Es pot personalitzar amb les propietats:

  • border-style: Estil del marc (none, solid, dashed, dotted, etc.).
  • border-width: Amplada del marc (en píxels).
  • border-color: Color del marc.

Exemple:


.nom {
    border-width: 2px;
    border-style: solid;    
    border-color: red;
}

o tot junt amb border:


.nom {
    border: 2px dashed blue;
}

En este cas, l’element tindrà un marc de 2 píxels d’ample, de color blau i amb un estil de línia puntejada.

Les propietats:

  • border-top
  • border-right
  • border-bottom
  • border-left

ens permeten definir el border de cada costat de l’element.

exemple:


.nom {
    border-top: 2px solid red;
    border-bottom: 2px solid blue;
}

A l’exemple, l’element tindrà una vora de 2 píxels d’ample a la part superior de color roig i a la part inferior de color blau.

Estils de la línia:

  • none: Sense marc.
  • dotted: Línia de punts.
  • dashed: Línia puntejada.
  • solid: Línia sòlida.
  • double: Doble línia.
  • groove: Línia en relleu.
  • ridge: Línia en relleu invers.
  • inset: Línia en relleu intern.
  • outset: Línia en relleu extern.
  • hidden: Línia oculta.

alt text

Arrodonir Vores (border-radius)

Una altra propietat molt usada és border-radius que permet arrodonir les vores dels elements.


.nom {
    border-radius: 10px;
}

Ombra (box-shadow)

L’ombra (box-shadow) afegeix una ombra a la caixa, donant un efecte de profunditat.

.caixa {
    box-shadow: 10px 10px 20px rgba(0,0,0,0.25);
}

Text i Tipografies

font-family:

Defineix la família de tipus de lletres (font) a utilitzar. Pot incloure múltiples noms de famílies separats per comes, en cas que la primera no estiga disponible:

   p {
        font-family: "Arial", "Helvetica", sans-serif;
    }

`font-size

Grandària de la lletra. Pot ser especificada en diferents unitats (px), (em), (%), (pt), (in), (cm).

    h2 {
        font-size: 16px; /* Pixels */
    }

font-weight:

Especifica el grossor de la lletra, els valors poden ser numèrics, o predefinits com:

  • normal: És el gruix per defecte de la font (normalment equivalent a 400).
  • bold: Aplica un estil de lletra en negreta (equivalent a 700).
  • lighter: Fa que el text siga més fi que el gruix heretat de l’element pare.
  • bolder: Fa que el text siga més gruixut que el gruix heretat de l’element pare.

    span {
        font-weight: bold;
    }

font-style:

Defineix l’estil del tipus de lletra. Pot ser normal, italic o oblique (inclinació artificial del navegador).


  p {
      font-style: italic;
  }

font-variant:

Especifica si el tipus de lletra ha de ser mostrat en versió normal o amb majúscules petites (small-caps).


  h3 {
      font-variant: small-caps;
  }

Tant en small-caps com en italic:

  • Si la font no té small caps reals → les simula.
  • Si una font no té italic → es substitueix per oblique.

Propietat abreujada font:

Permet especificar múltiples propietats relacionades amb el tipus de lletra en una sola línia:


  h1 {
      font: bold small-caps 24px/1.5 "Arial", sans-serif;
  }

Nota: 24px/1.5 estableix la grandària del text a 24px i l’altura de la línia dins del bloc de text a 1.5 (line-height).

En CSS, les famílies de fonts són grups de tipus de lletra amb característiques semblants (serif, sans-serif, monospace, etc.). Quan indiquem una font, és recomanable posar alternatives per si la primera no està disponible.


font-family: "Courier New", Arial, sans-serif;


font-family: "Comic Sans MS", "Trebuchet MS", cursive;



font-family: "Courier New", "Lucida Console", monospace;

En una declaració font-family:

  1. Primera font → la que vols utilitzar.
  2. Fonts alternatives → per compatibilitat.
  3. Família genèrica → últim recurs obligatori.
  4. Fa falta cometes si la font té més d’una paraula.

alt text

Colors en CSS

Propietat Descripció Exemple
color Defineix el color del text color: red;
background-color Defineix el color de fons background-color: #00ff88;
opacity Controla la transparència de tot l’element opacity: 0.6;
rgba Color amb canal alfa (transparència) color: rgba(255, 0, 0, 0.5);

  • On opacity controla la transparència de tot l’element, incloent text, fons, imatges i contingut interior. Els valors van de:

  • 0 → completament transparent
  • 1 → completament opac

Exemple:

.box {
    opacity: 0.5; /* L'element es veu al 50% */
}
  • rgba defineix un color utilitzant el model Red, Green, Blue + Alpha (transparència). A diferència de opacity, només fa transparent el color, no tot l’element.

Format: rgba(r, g, b, a)

  • a és l’alfa (0 = transparent, 1 = opac).

Exemple:

.box {
    background-color: rgba(255, 0, 0, 0.3); /* Roig amb 30% d'opacitat */
}

Els colors es poden definir de varies maneres en CSS:

  • Noms predefinits
  • RGB
  • Hexadecimal
  • HSL
  • RGBA
  • HSLA

Veure Annex 1

Exemples de noms predefinits:

alt text

Fons (background)

Les propietats de fons permeten controlar l’aspecte del fons d’un element.

  • Imatge: background-image:
    Defineix una imatge de fons. 
    
background-image: url('imatge.jpg');

    Valors: url, none.

  • Mida:background-size:

    Controla la mida de la imatge de fons. Permet ajustar la imatge perquè cubrisca el contenidor (cover) o perquè es mostre completament (contain).

    
background-size: cover;
background-size: contain;
background-size: 50% 50%; /* Amplada i altura específiques */

    Valors: auto, cover, contain, longitud (ex.: 50px, 50%).

  • Repetició: background-repeat:
  • Controla si la imatge de fons es repeteix horitzontalment (eix x), verticalment (eix y), o no es repeteix. 
      background-repeat: repeat-x; /* Repeteix només en l'eix X */
  background-repeat: no-repeat; /* No repeteix la imatge */

    Valors: repeat, repeat-x, repeat-y, no-repeat, space, round.

  • Posició: background-position:
  • Defineix la posició inicial de la imatge de fons. Es pot utilitzar valors com percentatges, paraules clau o coordenades.

  background-position: center top;
  background-position: 50% 0%; /* Centrat horitzontalment, dalt de tot */

Valors: top, bottom, left, right, center, %, x-pos y-pos.

  • Fons fix: background-attachment:

    Especifica si la imatge de fons es desplaça amb la pàgina o queda fixa en el seu lloc.

    
background-attachment: fixed; /* La imatge roman fixa */
background-attachment: scroll; /* La imatge es mou amb el contingut */
background-attachment: local; /* La imatge es mou amb l'element */

    Valors: scroll, fixed, local.

  • background:
    Una propietat abreujada que permet combinar color de fons, imatge, repetició, posició i més. 
    
background: #f0f0f0 url('imatge.jpg') no-repeat center top;

    Valors: color, image, repeat, attachment, position/size, origin, clip.

  • Múltiples fons

CSS permet aplicar diverses imatges de fons a un mateix element. Les diferents imatges es separen amb comes, i cada propietat (background-position, background-repeat, etc.) admet també múltiples valors en el mateix ordre.


body {
    background-image: url("núvols.png"), url("muntanya.png");
    background-position: center, bottom;
    background-repeat: no-repeat, repeat-x;
}

En este exemple:

  • La primera imatge (núvols.png) es mostra centrada i sense repetir.
  • La segona imatge (muntanya.png) es col·loca baix i es repeteix horitzontalment.
  • La primera imatge queda damunt de la segona, com capes superposades.

Propietats de caixes

Les propietats de caixa CSS permeten controlar l’aspecte de les caixes HTML. Aquestes propietats són útils per controlar la mida, el color, la posició, etc. de les caixes.

Les propietats de caixa CSS més comunes són (les vistes anteriorment):

  • box-sizing: Controla com es calcula la mida total de l’element (amplada i altura) tenint en compte els marges, el “padding” i les vores.
  • width: Amplada de la caixa.
  • height: Altura de la caixa.
  • margin: Marge exterior de la caixa.
  • padding: Espai entre el contingut i el marc de la caixa.
  • border: Marc de la caixa.
  • background-color: Color de fons de la caixa.
  • color: Color del text de la caixa.
  • I la resta de propietats de fonts i text.

I també hi ha d’altres propietats per controlar el comportamente de caixa CSS:

Propietats de Comportament

1. display — Com es mostra un element

Controla què és un element en el layout: si trenca línia, si pot tindre mides i com es comporta respecte als altres.

  • block: trenca línia, accepta mides, ocupa tota l’amplada.
  • inline: no trenca línia, no accepta width/height.
  • inline-block: no trenca línia, accepta mides.
  • none: l’element desapareix i no ocupa espai.
  • flex: converteix el contenidor en Flexbox.
  • grid: converteix el contenidor en Grid.

Nota: Block, inline, inline-block amb molt de detall, ja no són el centre del disseny modern.

2. position — Com es col·loca un element

Controla si ocupa espai i quin és el punt de referència quan el movem.

  • static: comportament normal, no es pot moure.
  • relative: ocupa espai però es pot desplaçar lleugerament.
  • absolute: no ocupa espai, es posiciona respecte al primer pare posicionat.
  • fixed: no ocupa espai, queda fix a la finestra.
  • sticky: es comporta com relative fins que arriba a un punt i es queda fix.

3. float i clear — Disseny flotant (antic)

Útil per fer que un element flote i que el text l’envolte.

  • float: left/right: l’element flota a un costat.
  • clear: evita que elements se situen al costat d’un float anterior.

Important: hui dia quasi no s’utilitzen en layouts moderns, substituïts per Flex i Grid.

4. visibility — Ocultar sense eliminar

Determina si l’element és visible, però manté l’espai.

  • visible: es mostra.
  • hidden: no es veu però manté el lloc.

Diferència clau: visibility: hidden manté espai, display: none elimina l’element del layout.

Annex 1 - Com definir colors en CSS

En CSS podem definir colors utilitzant diferents models. Cada model té les seues característiques i forma de representar un color.

1. Noms predefinits

Els navegadors inclouen més de 140 noms de colors, com ara red, blue, coral, gold, darkgreen…

Són útils per a situacions ràpides o quan volem un color senzill i fàcil de recordar.

p {
    color: blue;                 /* Text blau */
    background-color: coral;     /* Fons taronja suau */
}

2. RGB (rgb(r, g, b))

Representa el color mitjançant la combinació de tres valors:

  • r (roig)
  • g (verd)
  • b (blau)

Cada component pot anar de 0 a 255.

Com més alt el valor, més intens és eixe component.


div {
    color: rgb(255, 0, 0);       /* Text roig pur */
    background-color: rgb(0, 200, 120); /* Fons verd-turquesa */
}

Quan usar RGB? Quan necessites un color precís o quan treballes amb eines gràfiques que donen valors RGB.

3. Hexadecimal (#RRGGBB o #RGB)

És el format més clàssic i molt usat en desenvolupament web.

  • #RRGGBB → cada parell va de 00 a FF en base 16
  • #RGB → versió abreujada quan els dos dígits són iguals (ex: #333 → #333333)

h1 {
    color: #ff6600;              /* Taronja fort */
    background-color: #333;      /* Gris fosc abreujat */
}

Quan usar hexadecimal? Quan vols colors compactes, reconeixibles ràpidament, o quan treballes amb eines com Photoshop.

4. HSL (Hue, Saturation, Lightness)

Model de color basat en criteris humans:

  • Hue (Matís): Valor entre 0–360, que representa el color pur (0 = roig, 120 = verd, 240 = blau…)
  • Saturation (Saturació): Percentatge (0% gris, 100% color intens)
  • Lightness (Lluminositat): Percentatge (0% negre, 50% color normal, 100% blanc)

span {
    color: hsl(200, 100%, 50%);  /* Blau intens */
    background-color: hsl(0, 0%, 90%); /* Gris clar */
}

Avantatges d’HSL: Molt útil quan vols aclarir, enfosquir o variar el color sols tocant un percentatge.

5. RGBA (RGB + Alpha)

Igual que RGB, però amb un quart valor per a la transparència:

  • a = valors entre 0 (totalment transparent) i 1 (totalment opac)

.box {
    background-color: rgba(0, 0, 0, 0.3); /* Negre semitransparent */
}

Quan usar RGBA? Quan necessites transparències reals sense afectar el text intern.

6. HSLA (HSL + Alpha)

És la versió transparent del model HSL.

  • Mateixos paràmetres que HSL
  • Es combina en un quart valor d’opacitat (alpha)

.card {
    background-color: hsla(140, 70%, 40%, 0.4); /* Verd amb transparència */
}

Per què usar HSLA? Permet crear colors clars/obscurs i semitransparents de forma intuïtiva.

Exemple complet amb diverses propietats de color

A continuació tens un exemple real d’una classe CSS que utilitza diversos models de color al mateix temps:


.exemple {
    color: #2196f3;                          /* Text blau (hexadecimal) */
    background-color: hsl(48, 100%, 50%);    /* Fons groc lluminós (HSL) */
    opacity: 0.9;                            /* L'element és lleugerament transparent */
    border: 2px solid rgba(255, 0, 0, 0.5);  /* Marc roig semitransparent */
}

Nota: opacity afecta a tot l’element (inclòs text i contingut intern). Si només vols fer transparent el fons, és millor usar rgba o hsla.

Annex 2 Exemple Complet Propietats de Caixa 


<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Propietats de Caixa</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1>Exemple Visual de les Propietats de Caixa</h1>

    <div class="contenidor">
        
        <div class="caixa" id="caixa1">
            width i height
        </div>
        
        <div class="caixa" id="caixa2">
            margin
        </div>
        
        <div class="caixa" id="caixa3">
            padding
        </div>
        
        <div class="caixa" id="caixa4">
            border
        </div>

        <div class="caixa" id="caixa5">
            border-radius
        </div>

        <div class="caixa" id="caixa6">
            box-shadow
        </div>

    </div>

</body>
</html>

CSS (Estils per a la visualització de la caixa) 


/* Estils generals */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    margin: 0;
    padding: 0;
}

h1 {
    text-align: center;
    color: #333;
    margin: 20px 0;
}

.contenidor {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

.caixa {
    width: 150px;              /* Amplada de la caixa */
    height: 150px;             /* Altura de la caixa */
    padding: 10px;             /* Espai intern entre el contingut i la vora */
    margin: 10px;              /* Espai extern al voltant de la caixa */
    border: 2px solid #000;    /* Vora de 2px de color negre */
    display: flex;             /* Display en mode flex per centrar el text */
    justify-content: center;   /* Centra horitzontalment el text */
    align-items: center;       /* Centra verticalment el text */
    text-align: center;        /* Text centrat dins de la caixa */
    background-color: #FF6347; /* Color de fons (tomàquet) */
    color: #fff;               /* Color del text (blanc) */
    font-size: 16px;           /* Grandària de la lletra */
    font-weight: bold;         /* Text en negreta */
}

/* Estils personalitzats per a cada caixa */
#caixa1 {
    width: 200px;
    height: 100px;
    background-color: #4CAF50; /* Verd */
}

#caixa2 {
    background-color: #2196F3; /* Blau */
    margin: 30px;
}

#caixa3 {
    background-color: #FF9800; /* Taronja */
    padding: 30px;
}

#caixa4 {
    background-color: #E91E63; /* Rosa */
    border: 8px solid #000;
}

#caixa5 {
    background-color: #9C27B0; /* Morat */
    border-radius: 15px;
}

#caixa6 {
    background-color: #795548; /* Marró */
    box-shadow: 10px 10px 20px rgba(0,0,0,0.25);
}

alt text

Cada caixa demostra una propietat de la caixa CSS. Es poden observar visualment les diferències en cada propietat.

  1. Caixa 1 - width i height
    • Aquesta caixa té un width de 200px i un height de 100px.
    • Color de fons: Verd.
  2. Caixa 2 - margin
    • La marge extern d’aquesta caixa és de 30px.
    • Significa que l’espai al voltant de la caixa és de 30 píxels.
    • Color de fons: Blau.
  3. Caixa 3 - padding
    • La padding interna d’aquesta caixa és de 30px.
    • El contingut (el text) està separat de la vora.
    • Color de fons: Taronja.
  4. Caixa 4 - border
    • La vora d’aquesta caixa és de 8 píxels de color negre.
    • Crea una vora ampla i clara al voltant de la caixa.
    • Color de fons: Rosa.
  5. Caixa 5 - border-radius
    • Aquesta caixa té un border-radius de 15px.
    • Les vores estan arrodonides, creant una forma més suau.
    • Color de fons: Morat.
  6. Caixa 6 - box-shadow
    • Aquesta caixa té una ombra creada amb la propietat box-shadow.
    • L’ombra és de 10px x 10px i té una difusió de 20px.
    • Color de fons: Marró.

Aquest disseny mostra sis caixes alineades en dues files de 3 elements. Cada caixa mostra visualment l’efecte d’una propietat CSS relacionada amb les caixes.

Propietat Caixa Descripció Visual
width i height Caixa 1 Caixa amb una mida diferent (200x100 px)
margin Caixa 2 Espai extra al voltant de la caixa (30px)
padding Caixa 3 El contingut està separat de la vora (30px)
border Caixa 4 Vora ampla de 8px de color negre
border-radius Caixa 5 Vores arrodonides (15px)
box-shadow Caixa 6 Ombra de 10px x 10px amb difusió de 20px

Table of contents