Fulls d'Estil CSS3
Qué és CSS?
CSS (Cascading Style Sheets) és el llenguatge que defineix l'aspecte visual dels documents HTML. Permet separar el contingut (HTML) de la presentació (CSS), cosa que facilita el manteniment i la reutilització.
Maneres d'incloure CSS
<!-- 1. Estils en línia (inline) — evitar, difícil de mantenir -->
<p style="color: red; font-size: 16px;">Text vermell</p>
<!-- 2. Estils interns (dins de <head>) — per a pàgines senzilles -->
<head>
<style>
p { color: blue; }
</style>
</head>
<!-- 3. Estils externs (fitxer .css) — RECOMANAT -->
<head>
<link rel="stylesheet" href="estils.css">
</head>
Sintaxi CSS
/* Regla CSS: selector + declaració(ns) */
selector {
propietat: valor;
altra-propietat: altre-valor;
}
/* Exemples */
h1 {
color: #00695c;
font-size: 2rem;
text-align: center;
}
p {
line-height: 1.6;
margin-bottom: 1rem;
}
Selectors
/* Selector d'etiqueta — aplica a tots els <p> */
p { color: gray; }
/* Selector de classe — aplica als elements amb class="destacat" */
.destacat { background-color: yellow; }
/* Selector d'ID — aplica a l'element amb id="capçalera" */
#capcalera { background: #00695c; color: white; }
/* Selector universal */
* { box-sizing: border-box; }
/* Selector descendent — <p> dins de <article> */
article p { font-size: 1.1rem; }
/* Selector fill directe — <li> fill directe de <ul> */
ul > li { list-style: none; }
/* Selector d'atribut */
input[type="text"] { border: 1px solid #ccc; }
a[href^="https"] { color: green; } /* href comença per https */
a[href$=".pdf"] { color: red; } /* href acaba en .pdf */
/* Pseudo-classes */
a:hover { text-decoration: underline; }
li:first-child { font-weight: bold; }
li:nth-child(odd) { background: #f5f5f5; }
input:focus { outline: 2px solid #00695c; }
/* Pseudo-elements */
p::first-line { font-variant: small-caps; }
p::before { content: "→ "; color: #00695c; }
Model de capsa (Box Model)
Cada element HTML és una capsa rectangular composta per:
┌─────────────────────────────┐
│ margin │
│ ┌───────────────────────┐ │
│ │ border │ │
│ │ ┌─────────────────┐ │ │
│ │ │ padding │ │ │
│ │ │ ┌───────────┐ │ │ │
│ │ │ │ content │ │ │ │
│ │ │ └───────────┘ │ │ │
│ │ └─────────────────┘ │ │
│ └───────────────────────┘ │
└─────────────────────────────┘
.capsa {
/* Contingut */
width: 300px;
height: 150px;
/* Farciment interior */
padding: 20px; /* tots els costats */
padding: 10px 20px; /* vertical | horitzontal */
padding: 5px 10px 15px 20px; /* top right bottom left */
/* Vora */
border: 2px solid #00695c;
border-radius: 8px; /* cantonades arrodonides */
/* Marge exterior */
margin: 0 auto; /* centrat horitzontal */
/* Inclou padding i border en el width (recomanat) */
box-sizing: border-box;
}
Colors
/* Per nom */
color: red;
color: teal;
/* Hexadecimal */
color: #00695c;
color: #abc; /* abreviació de #aabbcc */
/* RGB */
color: rgb(0, 105, 92);
color: rgba(0, 105, 92, 0.5); /* amb transparència */
/* HSL */
color: hsl(174, 100%, 41%);
color: hsla(174, 100%, 41%, 0.8);
/* Variables CSS (custom properties) */
:root {
--color-primari: #00695c;
--color-secundari: #4db6ac;
--font-principal: 'Roboto', sans-serif;
}
.botó {
background-color: var(--color-primari);
font-family: var(--font-principal);
}
Tipografia
body {
font-family: 'Roboto', Arial, sans-serif;
font-size: 16px; /* mida base */
line-height: 1.6; /* interlineat */
color: #333;
}
h1 {
font-size: 2rem; /* 2 vegades la mida base */
font-weight: 700;
letter-spacing: -0.02em;
text-transform: uppercase;
}
/* Importar font de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
Flexbox
Flexbox és el sistema de maquetació per a components en una dimensió (fila o columna).
/* Contenidor flex */
.contenidor {
display: flex;
flex-direction: row; /* row | column | row-reverse | column-reverse */
justify-content: space-between; /* alineació eix principal */
align-items: center; /* alineació eix creuat */
flex-wrap: wrap; /* permet salts de línia */
gap: 1rem; /* espai entre elements */
}
/* Elements fills */
.element {
flex: 1; /* creix per ocupar l'espai disponible */
min-width: 200px;
}
/* Exemple: navbar */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
CSS Grid
Grid és el sistema de maquetació per a layouts en dues dimensions (files i columnes).
/* Contenidor grid */
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 3 columnes (proporció 1:2:1) */
grid-template-rows: auto;
gap: 1.5rem;
}
/* Àrees nomenaes */
.pagina {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 80px 1fr 60px;
min-height: 100vh;
gap: 0;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
Responsive Design
/* Mobile First: estils base per a mòbil */
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
/* Tablet (≥ 768px) */
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Orientació de la pantalla */
@media (orientation: landscape) {
body { font-size: 14px; }
}
Estratègia Mobile First
Comença sempre pels estils del mòbil (pantalla petita) i afegeix @media (min-width: ...) per ampliar les pantalles grans. És millor que l'enfocament invers (Desktop First) perquè obliga a prioritzar el contingut essencial.
Miniactivitat AC03735
Crea un fitxer estils.css per al portfolio de l'activitat anterior. Ha d'incloure: colors i tipografia coherents, navegació horitzontal amb Flexbox, una quadrícula de projectes amb CSS Grid (3 columnes en desktop, 2 en tablet, 1 en mòbil), i efectes hover als elements interactius.