JavaScript

Tema 2 · CSS per a interfícies tècniques

Introducció

CSS (Cascading Style Sheets) controla l'aparença visual d'una pàgina web. Amb CSS podem dissenyar panells de control, taules de dades, esquemes elèctrics o mecànics, i fer que la interfície sigui clara i professional.

Objectius

  • Vincular un full d'estil extern (.css) a l'HTML
  • Utilitzar selectors (etiqueta, classe, id) i propietats bàsiques (color, fons, marges, padding)
  • Maquetar amb Flexbox i Grid
  • Crear un disseny responsive per a dispositius mòbils

Estils bàsics per a un panell de control

/* estils.css */
body {
  font-family: Arial, sans-serif;
  background: #f0f2f5;
  margin: 0;
}

.panel {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

.targeta {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 20px;
  flex: 1 1 250px;
  text-align: center;
  border-left: 4px solid #7c3aed;
}

.valor {
  font-size: 2rem;
  font-weight: bold;
  color: #7c3aed;
}

Layout amb Flexbox i Grid

Exemple de disposició per a un dashboard d'enginyeria:

/* Contenidor principal amb CSS Grid */
.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}

/* Barra lateral + contingut amb Flexbox */
.layout-enginyeria {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 250px;
  background: #1e1e2f;
  color: white;
  padding: 1.5rem;
}

.contingut {
  flex: 1;
  padding: 2rem;
}

Exercicis

  1. Dissenya un full d'estil per a la pàgina HTML creada al Tema 1, donant-li un aspecte tècnic (colors foscos, tipografia monoespaiada).
  2. Utilitza Flexbox per alinear tres targetes amb dades d'un sensor (voltatge, corrent, temperatura).
  3. Crea un disseny responsive amb Grid que mostri una llista de components electrònics i s'adapti a pantalles petites.

Mini Projecte – Interfície d'un panell de control industrial

Utilitza HTML i CSS per crear la interfície d'un panell que mostri l'estat d'una màquina:

  • Una barra superior amb el nom de la planta i la data/hora simulada.
  • Una zona central amb 4 targetes (temperatura, pressió, velocitat, estat) amb icones i colors d'estat.
  • Una taula inferior amb les últimes alarmes.
  • Tot ha de ser responsive i utilitzar CSS Grid per a la disposició.
Tema 1 Índex Tema 3