Vous êtes ici : Home
Création Internet
Maîtriser CSS
Rappels
- L'architecture client/serveur. Les navigateurs.
- Les langages côté client XML, (X)HTML, CSS, JavaScript.
- Le web sémantique. L'accessibilité. L'encoding.
La base des CSS
- Les avantages des feuilles de style.
- Les différentes versions de CSS (CSS1, CSS2, CSS3).
- Le support par les navigateurs.
- Le stockage des feuilles de style.
- Les sélecteurs (de balise, conditionnels, de classe et de pseudo-classes, d'identifiant et mixtes).
- L'ordre de priorité. Les propriétés.
- Les unités de mesure (em, px, pt...).
- Les couleurs (RVB vs de base).
Travaux pratiques Gestion des CSS avec un outil de création et de gestion des styles. Gestion des unités relatives. Adaptation aux types de médias (ex : aural).
Les boîtes et blocs
- Les balises de bloc vs en ligne.
- Tailles. Positionnement (position relative, absolue, fixed, altitude, flottement).
- Les marges (margin et padding).
- Fonds et bordures (couleurs, transparence, coins arrondis, ombres portées).
- Le contenu (déroulement / scrolling).
- Cas particulier des tableaux.
Travaux pratiques Mise en place d'un squelette de page (positionnement par div).
Les styles textuels
- Modification des fontes (tailles, polices, couleurs...).
- Alignement du texte.
- Cas particulier des liens (rollover, historique...).
- Les effets visuels (clignotement ...).
- Listes et menus horizontaux et verticaux.
Travaux pratiques Formatage des menus horizontaux/verticaux. Effets visuels : clignotement, transparence, coins arrondis, ombres portées ...
Les images
- De contenu (img) vs d'apparence (background).
- Redimensionnement. Rollover.
- Liens et images.
Travaux pratiques Intégration d'images.
Les formulaires
- Design des champs de saisie, listes de sélection, zone de texte, case à cocher, boutons radio...
- Mise en forme des étiquettes (labels), des légendes, groupes de champs (fieldset)...
Travaux pratiques Réalisation de formulaires.
Modifications des CSS en JavaScript
- Modification des styles en JavaScript (les interfaces style et className).
- Quelques effets : apparition / fondu, cliqué-glissé, menu déroulant...
Travaux pratiques Utilisation conjointe de CSS et de JavaScript (menu glissant, effets dans le formulaire...).