Formation Maîtriser les Feuilles de Style CSS

3 jours.

• Comprendre les apports du CSS.
• Eviter l'utilisation des balises et proporiétés déconseillées.
  
• Apprendre la syntaxe CSS.
  
• Apprendre à utiliser <div> et <span> de façon pertinente.
  
• Apprendre toutes les principales propriétés et leurs valeurs.
  
• Apprendre à créer des curseurs personnalisés CSS.
  
• Apprendre à styler les liens ("boutons CSS").
  
• Apprendre à travailler avec border, margin, et padding (box).
  
• Apprendre à styler les tableaux avec CSS.
  
• Apprendre à positionner les éléments avec CSS.
  
• Apprendre les techniques avancées de mise en page CSS.
  
• Apprendre à utiliser les notations abrégées.
  
• Apprendre à utiliser les images de fond en CSS.
  
• Apprendre à présenter les formulaires sans tableaux.
  
• Apprendre à créer des menus de navigation hiérarchiques par CSS.
  
• Apprendre à organiser son code CSS.
  
• Apprendre à maîtriser les incompatibilités de navigateurs.

webmasters, intégrateurs html, graphistes web.

Connaissance du web et du html (formation HTML).

Les exercices et les démonstrations de ce cours sont basés sur la crétion complète des css d'un site, à partir des fichiers graphiques fournis (analyse, découpage, optimisation, intégration). Les problématiques liées au refactoring d'un site d'ancienne génération sont aussi étudiées.

Les bases du CSS / Html

• Avantages des Cascading Style Sheets
• Règles CSS
• Selecteurs
• Priorité des Sélecteurs
• La Cascade
• Feuille de Style embarquée
• Feuille de Style externe
• Styles en ligne
• Types de Medias
• Divs et Spans
• Unités de Mesure
• Héritage
• @import

CSS Font

• Font
• Font-family
• Font-size
• Font Family et Font Size
• Font-style
• Font-variant
• Font-weight
• Font Style, Font Variant et Font Weight

css text

• Letter-spacing
• Word-spacing
• Line-height
• Text-align
• Text-decoration
• Text-indent
• Text-transform
• Vertical-align
• White-space
• Propriétés de Text

Couleurs et Backgrounds

• Les codes de couleur
• Color
• Background-color
• Background-image
• Colors et Backgrounds

Curseurs

• Styles de Curseurs
• Curseurs personnalisés
• Utiliser des Curseurs personnalisés

CSS et Liens

• Pseudo-classes
• Liens "Bouton CSS"
• Modifier les Liens

Borders, Margins et Padding

• Principe
• Borders
• Margin
• Padding
• Borders, Margin et Padding

Styler les Tables en CSS

• Syntaxe HTML Table
• Styler une table

Position et Visibilité

• Flux d'éléments
• Position
• Positionner
• Z-index
• Display
• Visibility
• Float
• Clear

Mise en page CSS avancée

• Redéfinir les Styles
• Pleine largeur
  1. 2-colonnes
  2. 3-colonnes
• Positionner les titres
• Largeur Fixe
  1. 2-colonnes
  2. 3-colonnes
• Recommendations sur le positionnement
• Autres méthodes
• Bien utiliser Float pour la mise en page.

CSS : propriétés abrégées

• pourquoi les P.A. ?
• Liste des P.A. CSS
• Margins et Padding
• Border et Outline
• Backgrounds
• Fonts
• Lists
• Utiliser les P.A.

Les listes CSS pour la Navigation (Menus)

• Navigation Verticale
• Listes imbriquées pour la Navigation
• Navigation Horizontale
• Drop-Down & Fly-Out
• Créer un Menu de Navigation

CSS Background

• Boîtes à coins arrondis
• Boîtes à coins arrondis de largeur fixe
• Boîtes à coins arrondis de largeur relative
• technique "Mountaintop"
• Navigation tabulée
• Ombres portées
• Remplacer du texte par une image
• Utiliser les Backgrounds

Présentation des formulaires en CSS

• Ergonomie
• Création du formulaire
• Reset
• Styler le Formulaire
• Agrandir le Formulaire

CSS : les bonnes pratiques

Compatibilité Navigateurs

• Quirks Mode
• Instructions conditionnelles : Responsive vs. Adaptive
• Flex, Grid et librairies
• Comment tester ?

Application de Synthèse

• Présentation du site BDPhilia, version 1 (frames / tables)
• Refactoring DOM (MVC)
• Définition d'une stratégie de découpage
• Regroupements / Mutualisation
• Découpage / Création des éléments graphiques
• Implémentation V2
• Validation
• CSS Accessibilité / Print
• Création d'une V3