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

Colors en CSS

Següent ►
►

Els colors són una part fonamental del disseny web, ja que ajuden a definir l'estètica i la usabilitat d'un lloc web. En aquest tema, aprendrem com utilitzar colors en CSS per estilitzar els elements HTML.

Conceptes Clau

  1. Tipus de valors de color:

    • Noms de colors
    • Valors hexadecimals
    • Valors RGB
    • Valors RGBA
    • Valors HSL
    • Valors HSLA

  2. Propietats de color:

    • color
    • background-color
    • border-color

Tipus de Valors de Color

Noms de Colors

CSS permet utilitzar noms de colors predefinits. Hi ha 147 noms de colors estàndard, com ara red, blue, green, etc.

p {
    color: red;
}

Valors Hexadecimals

Els valors hexadecimals són una manera comuna de definir colors en CSS. Un valor hexadecimal comença amb # seguit de sis dígits (0-9, A-F).

p {
    color: #ff0000; /* Red */
}

Valors RGB

Els valors RGB defineixen un color en termes de les seves components de vermell, verd i blau. Cada component pot tenir un valor entre 0 i 255.

p {
    color: rgb(255, 0, 0); /* Red */
}

Valors RGBA

Els valors RGBA són una extensió dels valors RGB que inclouen una component d'opacitat (alfa). L'opacitat pot tenir un valor entre 0 (totalment transparent) i 1 (totalment opac).

p {
    color: rgba(255, 0, 0, 0.5); /* Red with 50% opacity */
}

Valors HSL

Els valors HSL defineixen un color en termes de to (hue), saturació (saturation) i lluminositat (lightness). El to és un valor entre 0 i 360, mentre que la saturació i la lluminositat són percentatges.

p {
    color: hsl(0, 100%, 50%); /* Red */
}

Valors HSLA

Els valors HSLA són una extensió dels valors HSL que inclouen una component d'opacitat (alfa).

p {
    color: hsla(0, 100%, 50%, 0.5); /* Red with 50% opacity */
}

Propietats de Color

Propietat color

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

p {
    color: blue;
}

Propietat background-color

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

div {
    background-color: yellow;
}

Propietat border-color

La propietat border-color s'utilitza per definir el color de la vora d'un element.

div {
    border: 2px solid green;
    border-color: green;
}

Exemples Pràctics

Exemple 1: Utilitzant Noms de Colors

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Colors en CSS</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
        }
        p {
            color: darkred;
        }
    </style>
</head>
<body>
    <h1>Hola, món!</h1>
    <p>Aquest és un paràgraf amb text de color vermell fosc.</p>
</body>
</html>

Exemple 2: Utilitzant Valors Hexadecimals

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Colors en CSS</title>
    <style>
        body {
            background-color: #f0f8ff;
        }
        h1 {
            color: #000080;
        }
        p {
            color: #8b0000;
        }
    </style>
</head>
<body>
    <h1>Hola, món!</h1>
    <p>Aquest és un paràgraf amb text de color vermell fosc.</p>
</body>
</html>

Exercicis Pràctics

Exercici 1: Canviar el Color del Text

Crea un document HTML amb un paràgraf i canvia el color del text utilitzant un valor RGB.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici de Colors en CSS</title>
    <style>
        p {
            color: rgb(0, 128, 0); /* Green */
        }
    </style>
</head>
<body>
    <p>Aquest és un paràgraf amb text de color verd.</p>
</body>
</html>

Exercici 2: Canviar el Color de Fons

Crea un document HTML amb un div i canvia el color de fons utilitzant un valor HSLA.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici de Colors en CSS</title>
    <style>
        div {
            background-color: hsla(240, 100%, 50%, 0.3); /* Semi-transparent blue */
        }
    </style>
</head>
<body>
    <div>
        Aquest és un div amb un fons semi-transparent blau.
    </div>
</body>
</html>

Conclusió

En aquesta secció, hem après com utilitzar diferents tipus de valors de color en CSS per estilitzar elements HTML. Hem explorat noms de colors, valors hexadecimals, RGB, RGBA, HSL i HSLA, així com les propietats color, background-color i border-color. Amb aquests coneixements, estàs preparat per començar a aplicar colors als teus dissenys web de manera efectiva.

◄ 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