En aquest tema, explorarem les propietats de CSS que permeten definir les vores i els contorns dels elements HTML. Aquestes propietats són fonamentals per donar estil i estructura als elements d'una pàgina web.
Propietats de la Vora
La vora (border) és la línia que envolta un element HTML. Les propietats de la vora permeten definir l'amplada, l'estil i el color de la línia.
Propietats Bàsiques de la Vora
- border-width: Defineix l'amplada de la vora.
- border-style: Defineix l'estil de la vora (solid, dashed, dotted, etc.).
- border-color: Defineix el color de la vora.
Exemple de Codi
/* Definició de la vora d'un element */
.element {
border-width: 2px;
border-style: solid;
border-color: #000000; /* Negre */
}Propietat Shorthand
La propietat border permet definir l'amplada, l'estil i el color de la vora en una sola línia.
/* Propietat shorthand per definir la vora */
.element {
border: 2px solid #000000; /* 2px d'amplada, estil solid, color negre */
}Propietats de la Vora per Costats
És possible definir les propietats de la vora per cada costat de l'element (top, right, bottom, left).
/* Definició de la vora per cada costat */
.element {
border-top: 2px solid #000000;
border-right: 2px solid #ff0000; /* Vermell */
border-bottom: 2px solid #00ff00; /* Verd */
border-left: 2px solid #0000ff; /* Blau */
}Propietats del Contorn
El contorn (outline) és similar a la vora, però té algunes diferències clau. El contorn no afecta el flux de la pàgina i pot sobresortir de l'àrea de l'element.
Propietats Bàsiques del Contorn
- outline-width: Defineix l'amplada del contorn.
- outline-style: Defineix l'estil del contorn.
- outline-color: Defineix el color del contorn.
Exemple de Codi
/* Definició del contorn d'un element */
.element {
outline-width: 2px;
outline-style: dashed;
outline-color: #ff0000; /* Vermell */
}Propietat Shorthand
La propietat outline permet definir l'amplada, l'estil i el color del contorn en una sola línia.
/* Propietat shorthand per definir el contorn */
.element {
outline: 2px dashed #ff0000; /* 2px d'amplada, estil dashed, color vermell */
}Diferències entre Vora i Contorn
| Característica | Vora (Border) | Contorn (Outline) |
|---|---|---|
| Afecta el flux | Sí | No |
| Pot sobresortir | No | Sí |
| Propietats per costat | Sí (top, right, bottom, left) | No |
Exercicis Pràctics
Exercici 1: Definir una Vora
Defineix una vora de 3px d'amplada, estil dashed i color blau per a un element amb la classe .box.
Solució
Exercici 2: Definir un Contorn
Defineix un contorn de 4px d'amplada, estil solid i color verd per a un element amb la classe .container.
Solució
Conclusió
En aquesta secció, hem après a utilitzar les propietats de la vora i el contorn per estilitzar els elements HTML. Hem vist com definir l'amplada, l'estil i el color de les vores i els contorns, així com les diferències entre ambdós. Aquests conceptes són essencials per crear dissenys atractius i ben estructurats en les pàgines web. En el següent tema, explorarem les propietats d'amplada i alçada per controlar les dimensions dels elements.
Domini del CSS: De Principiant a Avançat
Mòdul 1: Introducció al CSS
- Què és el CSS?
- Sintaxi i Selectors de CSS
- Com Afegir CSS a HTML
- Propietats Bàsiques de CSS
- Colors en CSS
- Unitats i Mesures en CSS
Mòdul 2: Estilització de Text i Fonts
- Propietats de Text
- Propietats de Fonts
- Integració de Google Fonts
- Alineació i Espaiat de Text
- Decoració i Transformació de Text
Mòdul 3: Model de Caixa i Disseny
- Comprendre el Model de Caixa
- Marge i Farciment
- Vora i Contorn
- Amplada i Alçada
- Dimensionament de Caixa
- Propietat de Visualització de CSS
Mòdul 4: Posicionament i Flotació
- Propietat de Posició de CSS
- Posicionament Estàtic, Relatiu, Absolut i Fix
- Flotació i Neteja de CSS
- Crear Dissenys amb Flotació
- Índex Z de CSS
Mòdul 5: Flexbox
- Introducció a Flexbox
- Propietats del Contenidor Flex
- Propietats dels Elements Flex
- Crear Dissenys amb Flexbox
- Disseny Responsiu amb Flexbox
Mòdul 6: CSS Grid
- Introducció a CSS Grid
- Propietats del Contenidor Grid
- Propietats dels Elements Grid
- Crear Dissenys amb CSS Grid
- Disseny Responsiu amb CSS Grid
Mòdul 7: Tècniques Avançades de CSS
Mòdul 8: Disseny Responsiu
- Introducció al Disseny Responsiu
- Consultes de Mitjans
- Tipografia Responsiva
- Imatges Responsives
- Disseny Mobile-First
Mòdul 9: Preprocessadors i Frameworks
- Introducció als Preprocessadors de CSS
- Conceptes Bàsics de Sass
- Conceptes Bàsics de Less
- Introducció als Frameworks de CSS
- Ús de Bootstrap
Mòdul 10: Millors Pràctiques i Optimització
- Millors Pràctiques de CSS
- Organització del Codi CSS
- Minificació de CSS
- Optimització del Rendiment de CSS
- Depuració de CSS