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!!!

dimensions
		auto	min	max
width
height
fermer

marges			marges intérieures
		auto
margin-top			padding-top
margin-left			padding-left
margin-bottom			padding-bottom
margin-right			padding-right
fermer

police
font-family		font-size		font-stretch
font-weight		lineHeight		font-style
color
font-variant		text-transform
text-decoration	auto none underline overline line-through blink
fermer

fond
background-color			aucun  fond1.gif fond2.jpg fond3.jpg fond4.jpg fond5.jpg
background-repeat		background-attachment
background-position	x : auto left center right		y : auto top center bottom
	x  :		y  :
fermer

texte
letter-spacing		text-align
word-spacing		vertical-align
text-indent		white-space
direction		display
fermer

bordures
	width	style	color
top
left
bottom
right
fermer

positionnement
position		visibility			float
overflow		z-index			clear
	emplacement			clip
top
left
bottom
right
fermer

listes
list-style-type		list-style-position
list-style-image
aucun
fermer

table
border-collapse		caption-side
empty-cells		table-layout
border-spacing	x  :	y  :
fermer

aucun
fermer

Menus

menu horizontal

On souhaite présenter une liste de liens sous forme d'un menu horizontal.Les liens sont situés dans un paragraphe de classe "menu". Les élements "a", étant des éléments inline, sont naturellement présentés sur une même ligne.

• associer une bordure et une couleur de fond aux seuls liens figurant dans le paragraphe de classe "horizontal"
• ajouter une marge intérieure
• adapter la police
• modifier les marge
• centrer le menu
• réaliser un effet de survol

voir le résultat masquer le résultat

Sommaire Recherche S'inscrire Liens Faq

Les dimensions d'éléments inline ne pouvant définies, il n'est pas possible d'imposer une même largeur à tous les éléments. La solution consiste à modifier la propriété display de l'élément "a"

Menu vertical

• donner la valeur "bloc" la propriété display des éléments "a" contenus dans le menu.
• fixer la largeur des boutons
• augmenter l'espacement entre les boutons

voir le résultat masquer le résultat

Lorsque les éléments "a" sont définis comme blocs on peut fixer leur largeur. Pour les maintenir en ligne on peut utiliser la propriété float.

• attribuer la valeur "left" a la propriété float des éléments "a" du menu.
• comment empêcher le paragraphe suivant le menu de se coller sur sa droite ?
• augmenter la marge entre le menu désormais horizontal et le paragraphe qui le suit

voir le résultat masquer le résultat

Pour obliger les éléments du menu à rester sur une même ligne, il suffit d'imposer une largeur suffisement grande au paragraphe conteneur.

voir le résultat masquer le résultat