Mode d'emploi

LaboCSS est un outil en ligne permettant de concevoir interactivement une feuille de style. Il peut être utilisé à des fins pédagogiques afin d'expérimenter individuellement et visuellement les sélecteurs et propritétés CSS ou pour l'élaboration d'une mise en page complète lors de la conception d'un site.

1) Le menu modèles

Il permet de choisir un modèle parmi ceux proposés. Chaque modèle se présente sous forme d'exercice mettant en oeuvre certaines propriétés.

Le menu modèle permet également de soumettre une page présente sur le web en précisant son adresse. Il est ainsi possible de modifier la mise en forme de documents en ligne.

L'application d'une feuille de style est également possible sur une page dont le code aura été édité. (Menu code-éditer le code).

2) Le champ sélecteur

Le champ sélecteur en bas de page permet la saisie du sélecteur auquel seront appliquées les propriétés. Les éléments sélectionnés peuvent être visualisés dans le code (menu code)

L'ensemble des sélecteurs CSS2 sont reconnus.

• sélecteur d'éléments
• sélecteur d'éléments imbriqués
• sélecteurs de classes
• sélecteurs d'id
• sélecteurs d'attribut
• peuso-éléments
• pseudo-classes.

Une traduction en français est proposé sous le sélecteur

3) Le menu propriétés

Permet l'application de propriétés aux éléments désignés par le sélecteur défini dans le champ "sélecteur".

Les propriétés sont regroupées par catégories :

• dimensions
  • minWidth, width, maxWidth
  • minHeight, height, maxHeight
• marges
  • marginLeft, marginTop, marginRight, marginBottom
  • paddingLeft, paddingTop, paddingRight, paddingBottom
• police
  • fontFamily, fontSize, fontStyle, fontWeight
  • fontStretch, fontVariant, textTransform
  • lineHeight
  • color
  • textDecoration
• fond
  • backgroundColor,
  • backgroundImage, backgroundAttachment, backgroundPosition, backgroundRepeat
• texte
  • textAlign, verticalAlign, textIndent, whiteSpace
  • letterSpacing wordSpacing
  • display
  • direction
• bordure
  • borderLeftColor, borderLeftWidth, borderLeftStyle
  • borderTopColor, borderTopWidth, borderTopStyle
  • borderRightColor, borderRightWidth, borderRightStyle
  • borderBottomColor, borderBottomWidth, borderBottomStyle
• position
  • position
  • visibility
  • overflow
  • zIndex
  • float, clear
  • top, left, bottom, right
  • clip
• liste
  • listStyleType
  • listStylePosition
  • listStyleImage
• table
  • borderCollapse
  • borderSpacing
  • captionSide
  • emptyCells
  • tableLayout
• contenu
  • content (pour les pseudos éléments :before et :after)

4) Le menu CSS

Le menu CSS permet de visualiser la CSS en cours de définition et de la mémoriser. Il est ainsi possible de mémoriser, puis de comparer plusieurs mises en pages.

5) Le menu code

Le menu code propose de visualiser le code :

• sous forme d'arbre
• abrégé (seul le début des noeuds textuels est affiché)
• complet

Dans les trois modes de visualisation les éléments désignés par le sélecteur en cours sont mis en évidence. Il est ainsi possible de visualiser la portée d'un sélecteur.

Le sous-menu "editer le code" permet l'edition du code.Il est ainsi possible de réaliser la mise en forme de votre propre code.

Le sous-menu Nettoyer le code a pour but de supprimer

• Les éléments obsolètes (font center ...)
• Les attributs de présentation (align, style ...)
• Les feuilles de style internes et les liens à des feuilles de style externes

Bonnes expérimentations!!!