El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem sobre les diferents unitats i mesures que es poden utilitzar en CSS per definir dimensions, marges, farciments, fonts i altres propietats. Comprendre les unitats és fonamental per crear dissenys precisos i responsius.

Tipus d'Unitats en CSS

Les unitats en CSS es poden dividir en dues categories principals:

Unitats Relatives
Unitats Absolutes

Unitats Relatives

Les unitats relatives es basen en altres valors, com la mida de la font o la mida de la finestra del navegador. Aquestes unitats són útils per crear dissenys flexibles i responsius.

em: Relativa a la mida de la font de l'element pare. Si la mida de la font de l'element pare és de 16px, 1em serà igual a 16px.
rem: Relativa a la mida de la font de l'element arrel (normalment l'element <html>). Si la mida de la font de l'element arrel és de 16px, 1rem serà igual a 16px.
%: Percentatge relatiu a la mida de l'element pare. Per exemple, width: 50% farà que l'element tingui la meitat de l'amplada del seu element pare.
vh: Percentatge de l'alçada de la finestra del navegador. 1vh és igual a l'1% de l'alçada de la finestra.
vw: Percentatge de l'amplada de la finestra del navegador. 1vw és igual a l'1% de l'amplada de la finestra.

Unitats Absolutes

Les unitats absolutes tenen valors fixos i no depenen d'altres elements o de la mida de la finestra del navegador.

px: Píxels. Una unitat fixa que representa un punt en la pantalla.
cm: Centímetres.
mm: Mil·límetres.
in: Polzades. 1in és igual a 2.54cm.
pt: Punts. 1pt és igual a 1/72 d'una polzada.
pc: Picas. 1pc és igual a 12 punts.

Exemples Pràctics

Exemple 1: Utilitzant Unitats Relatives

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unitats Relatives</title>
    <style>
        .container {
            font-size: 16px; /* Base font size */
        }
        .box {
            width: 50%; /* 50% of the parent element's width */
            padding: 2em; /* 2 times the font size of the parent element */
            margin: 5vh; /* 5% of the viewport height */
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            Aquest és un exemple d'ús d'unitats relatives.
        </div>
    </div>
</body>
</html>

Exemple 2: Utilitzant Unitats Absolutes

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unitats Absolutes</title>
    <style>
        .box {
            width: 200px; /* Fixed width of 200 pixels */
            padding: 10mm; /* Padding of 10 millimeters */
            margin: 1in; /* Margin of 1 inch */
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="box">
        Aquest és un exemple d'ús d'unitats absolutes.
    </div>
</body>
</html>

Exercicis Pràctics

Exercici 1: Crear un Disseny Responsiu

Crea un document HTML amb un contenidor que tingui una amplada del 80% de la finestra del navegador, un farciment de 2rem i un marge de 5vh. El contingut del contenidor ha de ser centrat tant horitzontalment com verticalment.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici 1</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container {
            width: 80vw; /* 80% of the viewport width */
            padding: 2rem; /* 2 times the root element's font size */
            margin: 5vh; /* 5% of the viewport height */
            background-color: lightcoral;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        Contingut centrat horitzontalment i verticalment.
    </div>
</body>
</html>

Resum

En aquest tema, hem après sobre les diferents unitats i mesures que es poden utilitzar en CSS. Les unitats relatives, com em, rem, %, vh i vw, són útils per crear dissenys flexibles i responsius. Les unitats absolutes, com px, cm, mm, in, pt i pc, tenen valors fixos i són útils per a dissenys amb dimensions precises. Hem vist exemples pràctics i hem realitzat un exercici per aplicar aquests conceptes. Amb aquest coneixement, estàs preparat per crear dissenys més precisos i adaptables.

Unitats i Mesures en CSS

Tipus d'Unitats en CSS

Unitats Relatives

Unitats Absolutes

Exemples Pràctics

Exemple 1: Utilitzant Unitats Relatives

Exemple 2: Utilitzant Unitats Absolutes

Exercicis Pràctics

Exercici 1: Crear un Disseny Responsiu

Solució

Resum

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu