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

Propietats Bàsiques de CSS

Següent ►
►

En aquesta secció, explorarem les propietats bàsiques de CSS que són essencials per començar a estilitzar les pàgines web. Aquestes propietats inclouen la manipulació de colors, fonts, marges, farciments, i més. Aprendre aquestes propietats és fonamental per crear dissenys atractius i funcionals.

  1. Propietat color

La propietat color s'utilitza per definir el color del text d'un element.

Exemple:

p {
  color: blue;
}

En aquest exemple, tot el text dins de les etiquetes <p> serà de color blau.

  1. Propietat background-color

La propietat background-color s'utilitza per definir el color de fons d'un element.

Exemple:

div {
  background-color: yellow;
}

En aquest exemple, el fons de tots els elements <div> serà groc.

  1. Propietat font-size

La propietat font-size s'utilitza per definir la mida de la font del text.

Exemple:

h1 {
  font-size: 24px;
}

En aquest exemple, el text dins de les etiquetes <h1> tindrà una mida de font de 24 píxels.

  1. Propietat font-family

La propietat font-family s'utilitza per definir la família de fonts del text.

Exemple:

body {
  font-family: Arial, sans-serif;
}

En aquest exemple, tot el text dins del cos del document utilitzarà la font Arial, i si no està disponible, una font sans-serif.

  1. Propietat margin

La propietat margin s'utilitza per definir l'espai exterior d'un element. Pot ser especificada per cada costat (top, right, bottom, left) o de manera abreujada.

Exemple:

p {
  margin: 10px;
}

En aquest exemple, tots els costats dels elements <p> tindran un marge de 10 píxels.

  1. Propietat padding

La propietat padding s'utilitza per definir l'espai interior d'un element. També pot ser especificada per cada costat o de manera abreujada.

Exemple:

div {
  padding: 20px;
}

En aquest exemple, tots els costats dels elements <div> tindran un farciment de 20 píxels.

  1. Propietat border

La propietat border s'utilitza per definir la vora d'un element. Pot incloure l'amplada, l'estil i el color de la vora.

Exemple:

img {
  border: 2px solid black;
}

En aquest exemple, totes les imatges tindran una vora de 2 píxels d'amplada, estil sòlid i color negre.

  1. Propietat width i height

Les propietats width i height s'utilitzen per definir l'amplada i l'alçada d'un element.

Exemple:

div {
  width: 100px;
  height: 200px;
}

En aquest exemple, tots els elements <div> tindran una amplada de 100 píxels i una alçada de 200 píxels.

Exercicis Pràctics

Exercici 1: Canviar el Color del Text

Canvia el color del text de tots els paràgrafs a vermell.

/* Solució */
p {
  color: red;
}

Exercici 2: Afegir un Fons

Afegeix un color de fons blau a tots els elements <div>.

/* Solució */
div {
  background-color: blue;
}

Exercici 3: Ajustar la Mida de la Font

Estableix la mida de la font dels encapçalaments <h2> a 30 píxels.

/* Solució */
h2 {
  font-size: 30px;
}

Exercici 4: Afegir Marge i Farciment

Afegeix un marge de 15 píxels i un farciment de 10 píxels a tots els elements <section>.

/* Solució */
section {
  margin: 15px;
  padding: 10px;
}

Exercici 5: Afegir una Vora

Afegeix una vora de 3 píxels, estil puntejat i color verd a totes les imatges.

/* Solució */
img {
  border: 3px dotted green;
}

Resum

En aquesta secció, hem après les propietats bàsiques de CSS que ens permeten estilitzar elements HTML de manera efectiva. Hem vist com canviar el color del text, afegir colors de fons, ajustar la mida de la font, afegir marges i farciments, i definir vores. Aquestes propietats són fonamentals per començar a crear dissenys web atractius i funcionals. En la següent secció, explorarem els colors en CSS amb més detall.

◄ 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