HTML5-CSS3

CSS: C'est quoi?

Les feuilles de style en cascade (Cascading Style Sheets or CSS) constituent un langage de style utilisé dans le développement Web pour concevoir l'apparence et la mise en page des documents HTML. En séparant la couche de présentation de la structure du contenu, CSS permet aux développeurs de définir des styles, tels que les couleurs, les polices, les marges et les dispositions de mise en page, qui peuvent être appliqués sur plusieurs pages Web. Cette approche modulaire simplifie la cohérence de la conception, car un fichier CSS peut contrôler l'apparence d'un site Web entier.

CSS fonctionne via une hiérarchie de règles de style appliquées aux éléments HTML. Chaque règle se compose de sélecteurs, qui ciblent des éléments spécifiques, et de déclarations, qui définissent la manière dont ces éléments doivent apparaître. Ces styles sont en cascade, ce qui signifie que les styles peuvent être hérités ou remplacés en fonction de la spécificité, ce qui offre une flexibilité dans les personnalisations. Par exemple, les paramètres généraux de police et de couleur peuvent être appliqués à l'ensemble du site, tandis que des éléments spécifiques, comme un en-tête, peuvent avoir des styles uniques sans impacter le reste de la page.

L'un des plus grands avantages de CSS est sa compatibilité avec la conception réactive, permettant au contenu de s'adapter de manière transparente sur des appareils de différentes tailles d'écran. Les techniques CSS, telles que les requêtes multimédias, permettent aux développeurs de créer des conceptions qui s'adaptent à la fois aux vues de bureau et mobiles. Cette adaptabilité est cruciale dans la conception Web moderne, car elle permet de garantir une expérience accessible et visuellement attrayante pour les utilisateurs, quel que soit leur appareil.

Plan du cours

1. Introduction à CSS3

1.1 Qu'est-ce que CSS ?

• Définition des feuilles de style en cascade
• Différence entre CSS, CSS2 et CSS3
• Comment CSS améliore la structure HTML

1.2 Syntaxe CSS de base

• Sélecteurs, propriétés et valeurs
• Anatomie d'une règle CSS
• CSS en ligne, interne et externe

1.3 Comment les navigateurs interprètent CSS

• Rendu et compatibilité des navigateurs

2. Sélecteurs et héritage

2.1 Sélecteurs de base

• Sélecteurs d'éléments, de classes et d'ID

2.2 Sélecteurs de regroupement et d'imbrication

• Regroupement pour plus d'efficacité
• Combinaison de sélecteurs pour les éléments imbriqués

2.3 Sélecteurs avancés

• Sélecteurs d'attributs
• Pseudo-classes (par exemple, :hover, :first-child)
• Pseudo-éléments (par exemple, ::before, ::after)

2.4 Spécificité et héritage

• Comprendre la priorité du sélecteur
• Fonctionnement de l'héritage dans CSS

3. Modèle de boîte et mise en page

3.1 Le modèle de boîte CSS

• Marges, bordures, remplissage et contenu
• Propriété de dimensionnement de la boîte (content-box, border-box)

3.2 Affichage et positionnement

• Éléments de bloc, en ligne et en bloc en ligne
• Positionnement statique, relatif, absolu et fixe
• Disposition CSS Flexbox

3.3 Disposition de grille CSS

• Structure de grille de base
• Modèles de lignes, de colonnes et de grille
• Grilles réactives

4. Typographie et styles de texte

4.1 Propriétés de police

• Famille de police, taille, poids et style
• Utilisation de polices Web personnalisées avec @font-face

4.2 Propriétés du texte

• Couleur, alignement, décoration du texte
• Hauteur de ligne, espacement des lettres

4.3 Effets de texte avancés

• Ombre de texte
• Texte dégradé (en utilisant background-clip et text-fill-color)

5. Arrière-plans et Bordures

5.1 Propriétés d'arrière-plan

• Couleur d'arrière-plan, images et dégradés
• Taille, répétition et position de l'arrière-plan

5.2 Bordures

• Bordures pleines, pointillées et en tirets
• Coins arrondis avec border-radius

5.3 Ombres de boîte

• Ajout de profondeur avec des ombres

6. Transitions et animations

6.1 Transitions CSS

• Propriété de transition
• Changements d'état fluides (par exemple, effets de survol)

6.2 Animations CSS

• Règle @keyframes
• Définition et contrôle des animations
• Temporisation et délais d'animation

7. Requêtes multimédias et conception réactive

7.1 Que sont les requêtes multimédias ?

• Notions de base de la conception réactive
• Adaptation des styles aux différentes tailles d'écran

7.2 Points d'arrêt

• Définition de points d'arrêt pour les appareils courants
• Typographie et mise en page réactives

7.3 Dispositions et unités fluides

• Utilisation de em, rem et pourcentages
• Les propriétés min-width et max-width

8. Variables CSS et propriétés personnalisées

8.1 Variables CSS

• Déclaration et utilisation de propriétés personnalisées (--property-name)
• Réutilisation des valeurs dans votre feuille de style

8.2 Héritage et portée des variables

• Comment les variables héritent et se mettent en cascade

9. Cadres et préprocesseurs CSS

9.1 Présentation des cadres CSS

• Introduction à Bootstrap, Foundation et Bulma

9.2 Utilisation des préprocesseurs CSS

• Introduction à SASS et LESS
• Comment le prétraitement améliore CSS

10. Bonnes pratiques et Optimisation

10.1 Rédaction de CSS maintenables

• Garder votre code DRY (Don’t Repeat Yourself)
• Organiser efficacement vos feuilles de style

10.2 Optimisation des performances

• Réduction et combinaison des fichiers CSS
• Réduction des CSS bloquant le rendu

10.3 Débogage CSS

• Problèmes courants et outils de développement de navigateur