CSS3 - les fondamentaux par Pyramyd NTCV

Localiser les CSS dans le code d'une page
- Distinguer et comparer les feuilles de style inline, internes et externes
- Comprendre la relation entre le HTML et les CSS dans une page Web
- Afficher une page Internet avec et sans ses styles
- Découvrir le principe de cascade et analyser le code CSS d'une page Web
- Identifier les formatages CSS par défaut des balises HTML, de la feuille de style navigateur
Étude de cas : visionnage et analyse technique de sites Web avec l'inspecteur du navigateur
Réaliser et modifier une maquette Web avec sa feuille de style
Découvrir la grammaire et la syntaxe d'une feuille de style
- Identifier le contenu d'une feuille de style
- Découvrir la composition d'un style : le sélecteur, les accolades, les blocs de déclaration
- Cibler les éléments d'une page HTML pour les habiller avec les CSS : les sélecteurs
- Écrire des sélecteurs simples : universel, de balise, de classe, d'identifiant
- Comparer les différentes unités de valeur : couleurs hexadécimales, mots
- clés, pixel, %, em, rem
Habiller la page Web et ses contenus
- Gérer les couleurs et images de fond d'une page
- Formater du texte
- Habiller les blocs de titres et les paragraphes
- Modifier les tailles, les marges et les remplissages des blocs
- Distinguer les fusions de marges des balises et leurs marges par défaut
- Mesurer la taille d'une boîte avec le modèle de boîte CSS
- Créer des bordures
Créer des menus avec les listes
- Coder des listes à puce et numérotées en HTML et faire un reset pour un affichage navigateur unifié
- Modifier le display des items de listes pour créer un menu horizontal
- Créer un menu avec des états de survol
Déplacer et transformer les contenus d'une page
- Habiller le texte avec des images : comprendre le système des flottants
- Utiliser et positionner des balises div et span
- Déchiffrer et manipuler les flottants float, clear et clearfix
- Comprendre le fonctionnement des positionnements : relative, absolute et fixed
Exercice : créer une maquette CSS de A à Z
Habiller un ensemble de pages avec une feuille de style externe
- Nommer et enregistrer une feuille de style externe
- Créer le lien vers la feuille de style externe
- Distinguer l'héritage des feuilles de style
- Comprendre les sélecteurs plus complexes : pseudos
- éléments, sélecteurs descendants
- Gérer les conflits de cascade en analysant les spécificités des sélecteurs
Exercice : créer un habillage de site Web
Développer des mises en pages optimisées avec des trucs et astuces de pro
- Expérimenter les sélecteurs :hover :before et :after
- Créer une image réactive au rollover en CSS
- Comparer les techniques pour optimiser les images de fond
- Créer des icônes en CSS : fontes, icônes full CSS, sprites, SVG inline
Exercice : coder des mises en forme avancées

- Localiser les CSS dans le code d'une page
- Réaliser et modifier une maquette Web avec sa feuille de style
- Habiller un ensemble de pages avec une feuille de style externe
- Développer des mises en pages optimisées avec des trucs et astuces de pro