Skip to main content

Selectors i propietats de caixa

CSS (Cascading Style Sheets) és el llenguatge de fulls d’estil que ens permet controlar l’aspecte d’una pàgina web. Ens ajuda a aplicar colors, mides, posicionaments i comportaments visuals als elements HTML.

Per què utilitzar CSS?​

  • Separació de contingut i presentació: facilita el manteniment
  • Reutilització d’estils en múltiples pàgines
  • Estils coherents i controlats per tot el projecte
  • Responsivitat i adaptació a diferents dispositius

Sintaxi bàsica​

selector {
  propietat: valor;
}

Exemple:

h1 {
  color: navy;
  font-size: 32px;
}

Tipus de Selectors​

Selectors universals i simples​

* {
  margin: 0;
  padding: 0;
}
  • *: selecciona tots els elements
p {
  color: black;
}
  • p: selecciona tots els paràgrafs
.classe {
  background-color: yellow;
}
  • .classe: selecciona tots els elements amb class="classe"
#identificador {
  border: 1px solid red;
}
  • #id: selecciona l’element amb id="identificador"

Selectors d'atributs​

input[type="text"] {
  border: 1px solid grey;
}
  • [attr]: selecciona elements amb un atribut concret
  • [attr="valor"]: coincideix exactament amb el valor

Selectors de descendència i combinadors​

article p {
  font-size: 18px;
}
  • Selecciona paràgrafs dins de article (descendents)
header > nav {
  background-color: lightgray;
}
  • > selecciona només fills directes
h2 + p {
  margin-top: 0;
}
  • + selecciona el germà immediat següent
h2 ~ p {
  color: gray;
}
  • ~ selecciona tots els germans posteriors

Selectors de pseudo-classes​

a:hover {
  color: red;
}
  • :hover, :focus, :active, :visited, :checked, etc.
li:first-child {
  font-weight: bold;
}
input:required {
  border-color: red;
}

Selectors de pseudo-elements​

p::first-line {
  font-variant: small-caps;
}
p::before {
  content: "→ ";
}
p::after {
  content: " ←";
}

Bones pràctiques amb classes​

  • Escriu noms semàntics i descriptius
  • Fes servir kebab-case: menu-principal, botó-enviar
  • Evita noms genèrics com estil1, verd, etc.

Maneres d'aplicar CSS​

1. Inline​

<p style="color: red;">Text vermell</p>

2. Intern amb <style>​

<head>
  <style>
    h1 {
      color: green;
    }
  </style>
</head>

3. Extern (recomanat)​

<link rel="stylesheet" href="estils.css" />

Box Model – Model de caixa​

Els elements HTML es comporten com caixes amb:

  • content (el contingut)
  • padding (espai interior)
  • border (vora)
  • margin (espai exterior)
div {
  width: 200px;
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}

Aquest capítol introdueix els fonaments de CSS i obre la porta a personalitzar completament el teu projecte web. Els selectors són la clau per aplicar estils amb precisió.