FAQ
Questions plus ou moins fréquentes, et tentatives de réponses.
Il est généralement suffisant d’avoir une seule feuille de style pour chaque site (= pour chaque “ensemble de pages”).
Pour sélectionner spécifiquement des éléments sur différentes pages, on peut utiliser des class:
index.html
<body class="homepage">
<h1>Accueil</h1>
</body>portfolio.html
<body class="portfolio">
<h1>Portfolio</h1>
</body>styles.css
.homepage h1 { color: blue;}
.portfolio h1 { color: green;}Mais on peut parfaitement lier plusieurs feuilles de style à un même document HTML. Ainsi, dans le <head> d’un fichier HTML, on peut avoir:
<link href="css/fonts.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="css/accueil.css" rel="stylesheet" type="text/css">Ici, le fichier fonts.css contiendrait les déclarations @font-face. Le fichier styles.css contiendrait les styles communs à l’ensemble du site. Le fichier accueil.css ne contiendrait que des styles spécifiques à la page d’accueil.
Pour attribuer un arrière-plan à une page, on utilise en CSS la propriété background (voir la documentation de référence).
Background: Linear gradients
On peut utiliser des dégradés linéaires en tant que background-image. On peut déterminer son point de départ et son angle, puis on détermine les couleurs et leurs positions.
Le site cssgradient.io propose un générateur de dégradés ainsi que de nombreux dégradés prédéfinis.
Background: Radial gradients
On peut utiliser des dégradés radiaux en tant que background-image. On détermine son centre, on peut définir sa taille, puis on détermine les couleurs et leurs positions.
Le site cssgradient.io propose aussi de générer des dégradés radiaux.
Background: Conic gradients
On peut utiliser des dégradés coniques (les transitions entre les couleurs ont lieu autour d’un centre plutôt que depuis le centre). On détermine son centre, on peut définir sa taille, puis on détermine les couleurs et leurs positions.
Le site cssgradient.io propose aussi de générer des dégradés radiaux.
Background: Repeating gradient
Les dégradés linéaires ou radiaux peuvent être répétés pour générer des motifs, grâce aux propriétés d’arrière-plan repeating-linear-gradient et repeating-radial-gradient ou aux possibilités de dimensionnement des images d’arrière plan proposées par background-size.
Le site magicpatterns.design, celui de Temani Aff ou de Léa Vérou proposent un certain nombre de motifs basés sur ces possibilités.
Multiple backgrounds
Un élément peut avoir plusieurs arrières-plans. Les propriétés de dégradés doivent être séparées par des virgules. Les exemples ci-dessous n’utilisent que les dégradés précédemment évoqués mais on peut également utiliser des images (png, jpg, svg, gif) multiples en tant qu’arrières-plans.