Jeudi 29 Novembre 2007
Aide mémoire CSS
Par Jacky, Jeudi 29 Novembre 2007 à 08:38 GMT+2 dans Astuces CSS
LES PROPRIÉTÉS CSS
Voici comment on appelle la feuille de style dans un fichier html.
<head>
<title>CSS par CoupdePouce</title>
<link rel=stylesheet href="styles.css"
type="text/css">
</head>
Note: je n'ai mis que les propriétés les plus importantes (à mon avis).
****************************************************************
Mise en forme de la police :
font-family : Propriété pour choisir la police.
font-size : Propriété qui permet de déterminer la taille de la
police.
Vous pouvez utiliser pt (points) px (pixels) em.
font-style : Propriété de style (inherit, italic, oblique, normal). Inherit signifit héritage, c'est à dire que le style sera celui défini par le block parent. Si il n'en a pas, il va prendre la valeur par défaut c'est à dire normal.
font-variant : Propriété pour le texte en petites majuscules (inherit, small-caps, normal).
font-weight : Propriété pour le poids de la police (bold, bolder, inherit, lighter, normal).
Mise en forme du texte :
text-transform : Propriété pour la casse (capitalize, inherit, lowercase, none, uppercase).
text-decoration : Propriété pour la décoration du texte (blink, inherit, none, line-through, overline, underline).
text-align : Propriété de l'alignement du texte (left, center, right).
letter-spacing : Propriété pour définir l'espacement entre les caractères.
word-spacing : Propriété pour définir l'espacement entre les mots.
color : Propriété pour définir la couleur du texte.
Mise en forme de l'arrière-plan :
background : Propriété pour la couleur du fond (#code couleur)
background : (Pour l'image) transparent ou #code couleur
url (url de l'image ou nom_image.ext(si dans fichier HTML)).
background-repeat : Propriété pour la répétition d'une image (repeat-x, repeat-y, no-repeat).
background-attachment : Propriété pour figer une image d'arrière plan, insérée à l'aide de background: url_image, pour que celle-ci ne défile pas avec le contenu de l'élément auquel elle est appliquée (fixed, scroll).
background-position : Propriété pour définir la position d'une image dans la page ou le bloc.
Il existe un raccourci qui permet de mettre toute les propriétés sur la même ligne : background.
Mise en forme des paragraphes :
text-indent : Propriété qui permet de déterminer le retrait de la première ligne d'un paragraphe.
vertical-align : Propriété qui permet de définir l'alignement
vertical d'un texte dans une ligne
(valeur numérique ou baseline, sub, super, text-top,
text-bottom, middle, top, bottom, inherit).
line-height : Propriété pour fixer l'interligne.
white-space : Propriété pour la gestion des blancs (normal, pre, nowrap).
Mise en forme des marges :
margin-top : Marge externe du haut
margin-left : Marge externe de gauche
margin-right : Marge externe de droite
margin-bottom : Marge externe du bas
Raccourci des marges externes : margin.
Voici l'ordre des propriétés : haut droite bas gauche
(Moyen mnémotechnique :
suivre le sens des aiguilles d'une montre).
padding-top : Marge interne du haut
padding-left : Marge interne de gauche
padding-right : Marge interne de droite
padding-bottom : Marge interne du bas
Raccourci des marges internes : padding. L'ordre est le même que pour margin.
Mise en forme des bordures :
border-color : Propriété pour définir la couleur des bordures.
border-style : Propriété pour définir le style des bordures: solid, dashed (Internet Explorer ne le gère pas très bien), dotted (idem que pour dashed), double, inherit, groove, ridge, inset, outset.
border-collapse : Propriété qui permet de spécifier l'affichage
des bordures d'un tableau
(collapse, separate, inherit).
border-spacing : Propriété qui permet de spécifier l'espacement entre chaque cellule.
border : raccourci de propriété pour définir les bordures.
Mise en forme des listes :
list-style : Propriété pour de la liste.
list-style-type : Propriété de style qui permet de spécifier le type de la liste, si la liste est ordonnée ou si la liste est non ordonnée (upper-roman, upper-latin, inherit, circle, square, armenian, decimal, decimal-leading-zero, disc, georgian, lower-greek, lower-latin, lower-roman, none).
list-style-image : Propriété qui permet de définir une image à la place de la puce par défaut.
list-style-position : Propriété qui permet de spécifier l'alignement gauche du texte lors d'un retour à la ligne automatique par rapport à la puce (inherit, inside, outside).
Mise en forme des divisions :
position : Propriété de positionnement des blocs (fixed, relative, absolute).
display : Propriété qui permet de spécifier la manière dont un élément est affiché (block, inline, list-item, inherit, table).
float : Propriété qui permet de spécifier l'affichage des éléments suivant (none, right, left).
z-index : Propriété qui permet de définir l'ordre d'affichage (valeur décimale : arrière-plan -> premier-plan).
Si vous rencontrez des problèmes d'incompatibilité,
utilisez la propriété '!important' derrière le code
que vous voulez appliquer à
Firefox et rien pour Internet Explorer.
Exemple :
#nomDivision{
position : relative ;
top : 45 px : ce code sera interprété par Firefox
top : 50 px !important : ce code sera interprété par Internet Explorer
}
