Introduction à CSS3

Jean-Marc Lecarpentier

 

Introduction à CSS3

La production de "pages web" devient un travail professionnel qui doit respecter de nombreuses règles afin de garantir la maintenance, l'évolution, la lisibilité et l'accessibilité des informations. La norme HTML5 permet de penser le langage de balisage HTML comme une application XML. La séparation entre le contenu informationnel et la forme donnée à la représentation du document dans chaque situation particulière est au coeur de l'encodage HTML5. Les feuilles de style permettent de s'adapter au média choisi (imprimé, écran, synthèse audio,...). Ce cours d'introduction à CSS permet de compléter la mise en place les procédures de conception de fichiers web normalisés et évolutifs. Les outils de validation peuvent devenir des précepteurs à domicile pour mieux comprendre les règles et les normes.

Travail personnel

Exercice 1 : comprendre et jouer avec les sélecteurs

Aller au bout des 26 exercices présentés sous forme de jeu : CSS Diner

Exercice 2 : styler une page

Mettre en forme la page HTML de M. Vox ou de Wikipedia avec une CSS.

Exercice 3 : page complète

Réaliser le code HTML et CSS pour obtenir la page suivante :
foodsense

Archive avec le texte et les fichiers images

Exercice 4 : listes et menus

Réaliser un menu avec une liste d'items puis rédiger la feuille de style pour présenter le menu sous différentes formes. On pourra réaliser un menu vertical puis horizontal, par exemple :
menu vertical menu horizontal

Les plus avancés pourrront essayer d'y inclure des sous-menus en utilisant une méthode 100% CSS (ie. sans JavaScript).

Exercice complémentaire : Onglets 100% CSS

Pour les plus avancés : réaliser des onglets en utilisant uniquement HTML et CSS, comme sur cet exemple (article avec explications).

 
Tim Berners Lee, créateur de HTTP et HTML. A l'origine du Web, il dirige maintenant le W3C C'est avec Mosaic, premier navigateur graphique que le web pris réellement son essor en 1993 CSS Zen Garden, démonstration de la puissance de CSS Firebug, l'outil indispensable du développeur web
 
Fermer