El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Amplada i Alçada

Següent ►
►

En aquest tema, aprendrem com controlar les dimensions dels elements HTML utilitzant les propietats width (amplada) i height (alçada) en CSS. Aquestes propietats són fonamentals per definir el disseny i la disposició dels elements en una pàgina web.

Propietats width i height

Sintaxi Bàsica

Les propietats width i height es poden aplicar a qualsevol element de bloc o en línia. La sintaxi bàsica és la següent:

element {
  width: valor;
  height: valor;
}

Valors Acceptats

Els valors per a width i height poden ser especificats en diverses unitats:

  • Pixels (px): Unitat fixa.
  • Percentatge (%): Relatiu a l'element contenidor.
  • Em i rem: Relatiu a la mida de la font.
  • Viewport Width (vw) i Viewport Height (vh): Relatiu a la mida de la finestra del navegador.

Exemples

Pixels

.box {
  width: 200px;
  height: 100px;
}

Percentatge

.container {
  width: 100%;
  height: 50%;
}

Viewport Units

.fullscreen {
  width: 100vw;
  height: 100vh;
}

Exemples Pràctics

Exemple 1: Amplada i Alçada Fixes

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Amplada i Alçada Fixes</title>
  <style>
    .box {
      width: 300px;
      height: 150px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Exemple 2: Amplada i Alçada Relatives

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Amplada i Alçada Relatives</title>
  <style>
    .container {
      width: 80%;
      height: 400px;
      background-color: lightgray;
    }
    .box {
      width: 50%;
      height: 50%;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

Exercicis Pràctics

Exercici 1: Crear una Caixa amb Dimensions Fixes

Instruccions:

  1. Crea un fitxer HTML.
  2. Afegeix una caixa amb una amplada de 200px i una alçada de 100px.
  3. Assigna un color de fons a la caixa.

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>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Exercici 2: Crear una Caixa amb Dimensions Relatives

Instruccions:

  1. Crea un fitxer HTML.
  2. Afegeix un contenidor amb una amplada del 80% de la finestra del navegador i una alçada de 300px.
  3. Dins del contenidor, afegeix una caixa amb una amplada del 50% i una alçada del 50% del contenidor.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercici 2</title>
  <style>
    .container {
      width: 80%;
      height: 300px;
      background-color: lightgray;
    }
    .box {
      width: 50%;
      height: 50%;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

Errors Comuns i Consells

Errors Comuns

  1. No especificar unitats: Recorda sempre especificar les unitats (px, %, em, etc.) quan defineixis width i height.
  2. Utilitzar valors incorrectes: Assegura't que els valors siguin vàlids i apropiats per a l'element.

Consells

  1. Utilitza percentatges per a dissenys responsius: Els percentatges són útils per crear dissenys que s'adaptin a diferents mides de pantalla.
  2. Combina unitats: Pots combinar diferents unitats per obtenir un disseny més flexible i adaptable.

Conclusió

En aquesta secció, hem après com utilitzar les propietats width i height per controlar les dimensions dels elements HTML. Hem vist diferents unitats que podem utilitzar i hem practicat amb exemples i exercicis. Aquestes propietats són essencials per definir el disseny i la disposició dels elements en una pàgina web. En el següent tema, explorarem el dimensionament de caixa amb la propietat box-sizing.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats