Quelques techniques CSS de base¶

Voici quelques trucs et nastuces de base en CSS.

Appliquer des couleurs de fond (opaques et semi-transparentes)¶

Les couleurs en CSS se définissent de plusieurs façons :

nom de couleur
```
background-color: red;
```
Code hexadécimal
```
background-color: #ff0000;
```
Valeurs RGB (red-green-blue)
```
background-color: rgb(255,0,0);
```
Valeurs RGBA (red-green-blue-alpha)
```
background-color: rgba(255,0,0,0.5);
```
Le alpha représente le taux d'opacité. Dans cet exemple, 0.5=50%

Ajuster les largeurs¶

On sait que :

une balise bloc prend 100% de la largeur par défaut
une image s'affiche à sa taille originale par défaut

Le CSS peut modifier ces comportements.

Exemples :

div {
    width: 75%;
    /*Le bloc div ne prend que 75% de la largeur disponible*/
}

img {
    width: 50%;
    /*L'image prend 50% de la largeur disponible*/
}

div img {
    width: 30%;
    /*L'image qui se trouve dans une div prend 30% de la largeur de la div*/
}

NOTES :

Utiliser des poucentages permet un ajustement automatique aux différentes tailles d'écrans.
La hauteur s'ajuste automatiquement. Il existe quand même l'attribut height si on veut forcer une hauteur.

⚠️ ATTENTION de ne pas déformer les images si on force une hauteur.

Il existe les attributs min-width et max-width qui sont utilisés dans les interfaces réactives.

Exemple :

div {
    max-width: 80%;
    /*La div prendra maximum 80% sur grands écrans, mais s'ajustera à une plus petite taille sur petits écrans*/
}

Appliquer des bordures¶

Pour qu'une bordure s'applique, on doit fournir 3 informations :

la largeur de la bordure
son style
sa couleur

Exemple 1 : méthode détaillée

p {
    border-width: 0.2rem;
    border-style: solid;
    border-color: blue;
}

Exemple 2: méthode 3-en-1

p {
    border: 0.2rem solid blue;
}

Coins arrondis / affichage dans une ellipse¶

Les coins arrondis sont visibles sur :

une image
une couleur de fond
une bordure

Exemples :

#coins-arrondis {
    border-radius: 1rem;
}

#pastille {
    border-radius:50%;
}

Résultat :

coins

Centrer des éléments¶

Comment centrer un élément dépend du type d'élément à centrer.

Centrer du texte dans un bloc

Lorsque le texte est dans un bloc (titre, paragraphe, div, etc.) :

text-align: center;

Centrer un bloc

Un bloc prend 100% de la largeur par défaut.

Si on veut le centrer, on doit :

main {
    /*1. modifier sa largeur*/
    width: 75%;
    /*2. centrer avec les marges*/
    margin-left:auto;
    margin-right: auto;
}

Centrer une image

Une image est une balise en ligne et n'a donc pas de notion de marge.

On peut toutefois changer son type pour ensuite la centrer avec les marges :

img {
    display: block; /*Devient un bloc avec une largeur égale à la largeur de l'image*/
    margin-left: auto;
    margin-right: auto;
}