index

CSS Zen Garden

Présentation

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 : fr:CSS Zen Garden)

Espace de travail

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 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 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 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/zengarden.txt · Last modified: 2013/06/16 22:51 (external edit)
 
 
Creative Commons License Powered by PHP Valid XHTML 1.0 April