<-[[index]] ====== CSS Zen Garden ====== ====== Présentation ====== [[http://www.csszengarden.com/|CSS Zen Garden]] est un site de présentation des diverses possibilités CSS (Feuilles de style en cascade) qui s'offrent aux pages web. Les feuilles de styles sont proposées par des designers, puis sont appliquées sur le contenu du site. Ainsi on peut afficher la page d'une centaine de manière différente. Le contenu de la page HTML reste quant à lui invariant. (source : [[wp>fr:CSS Zen Garden]]) ====== Espace de travail ====== * Créer un dossier **zengarden** * Téléchargez {{:ressources:html:csszen.zip|}}, c'est une copie de la source de [[http://www.csszengarden.com/zengarden-sample.html]] * Editez les fichiers HTML En modifiant ce fichier sample.css, vous pourrez modifier l'affichage de la page zengarden-sample.html dans un navigateur, n'oubliez pas d'actualiser la page. Pour tester, mettez ce code dans le fichier sample.css body{ background-color:#ff0000; } ====== A faire ====== Pour une fois on va faire le travail dans le désordre, c'est uniquement pour aller dans un ordre de complexité croissant ===== Des couleurs ===== * Tous les deuxièmes paragraphes doivent s'afficher en gris (grey) * Tous les liens doivent s'afficher en vert (green) * Le reste du texte s'affiche en #444 (la page sur [[http://www.cssdebutant.com/syntaxe-css-heritage.html|héritage]] peut vous aider). * L'ensemble des titres (h1,h2 et h3) sont en gris un peu plus foncé (#333) * Tous les liens en survol doivent s'afficher en #0c0 (la page [[http://www.cssdebutant.com/anchors-lien-pseudo-classes.html|lien pseudo classes]] peut vous aider) * L'ensemble de la page s'affiche sur fond vert pâle #e4efee ===== Des typos ===== * L'ensemble des typos de la page sont en helvetica, si la typo n'est pas présente sur le navigateur, on utilisera alors arial * Aérez le texte avec une hauteur de ligne de 130% (utilisez la syntaxe line-height:1.3em;) * L'ensemble des titres sont en Georgia, mais pas en gras (allez voir du côté de [[http://lmgtfy.com/?q=font-weight|font-weight]]) ===== Des blocs ===== * Les blocs #intro, #supportingText et #linkList sont côte à côte, mesurent 300px de large * Les blocs sus-cités sont séparés par une ligne pointillée (dotted) de 1px de large et de couleur #ccc * Les mêmes blocs ont un padding de 20px et un margin de 10px ====== Résultat ====== (ce n'est pas à l'échelle) {{:ressources:html:csszenresult.png?700|}}