Friday, March 28, 2008

Déclarations CSS

Que puis-je faire d'autre avec les déclarations CSS ?

CSS (Cascade Style Sheets)
feuillet de style en cascade (échelonné) (pour des documents HTML, comprenant plusieurs styles que l'on peut adapter aux nécessités demandées)

[Retour Résultats de la recherche]

Vous pouvez modifier la quasi-totalité des éléments de présentation du blog en modifiant simplement la feuille de style de votre modèle. Certaines des opérations les plus courantes sont décrites ci-dessous. Pour obtenir davantage d'informations et des exemples, consultez les pages Exemples CSS des cours W3 Schools et Introduction W3C aux feuilles de style CSS.

Dans nos modèles par défaut, toutes les déclarations CSS se trouvent au début, entre les balises . Elles se présentent sous la forme d'une série de lignes telles que celles-ci :

Feuille de style CSS du modèle

La ligne sur fond bleu indique le style appliqué à chaque balise

dans le blog. Nous allons voir comment utiliser certaines options de style. Tous les extraits de code ci-dessous peuvent être insérés entre des {accolades} dans la feuille de style.

CodeExemples
Couleurs
color:blue;Ce texte est en bleu.
background:yellow;Ce texte est associé à un fond jaune.
Vous pouvez indiquer un grand nombre des couleurs courantes (comme par exemple le rouge, le vert ou le jaune), ou entrer le code hexadécimal pour avoir accès à une plus large palette de couleurs (#0033AA, par exemple). Pour plus d'informations sur les couleurs, consultez la page Référence des couleurs Web.
Bordures
border:solid 1px red;
Ce texte est entouré d'une bordure rouge.
Une bordure peut se présenter sous la forme d'une ligne continue, d'une série de points ou d'une série de tirets. La largeur est indiquée en pixels (px). La couleur peut être indiquée directement ou à l'aide d'un code hexadécimal. Pour ajouter une bordure sur un seul côté, utilisez l'instruction border-top, border-bottom, border-right ou border-left.
Polices
font-family:"Times New Roman",Serif;Ces caractères sont ceux d'une police Serif.
font-family:Verdana,Sans-Serif;Ces caractères sont ceux d'une police Sans-Serif.
Vous pouvez entrer une liste de polices. Si la première police n'est pas disponible sur l'ordinateur de l'internaute, c'est la deuxième qui est utilisée, et ainsi de suite avec les autres polices désignées. Si vous indiquez « Serif », la première police Serif disponible est utilisée.
font-size:24px;Ces caractères ont une taille de 24 pixels.
L'unité de mesure de la taille peut être le pixel (px), le point (pt), le pouce (in) ou un pourcentage de la taille par défaut (%).
font-weight:bold;Ce texte est en gras.
Vous avez le choix entre le style Gras et le style Normal.
text-decoration:underline;Ce texte est souligné.
Les options de mise en valeur du texte sont les suivantes : Aucune (none), Souligné (underline), Ligne au-dessus (overline) ou Barré (line-through). Elles s'emploient le plus souvent pour supprimer le soulignement des liens.
text-align:right;
Ce texte est aligné à droite.
Un texte peut être aligné à gauche ou à droite, ou être justifié.
Marges intérieures et extérieures
margin:15px;
Ce texte est associé à une marge extérieure de 15 pixels sur tous les côtés.
padding:15px;
Ce texte est associé à une marge intérieure de 15 pixels sur tous les côtés.
Les deux types de marge désignent un espacement par rapport à un autre élément. La différence est que la marge extérieure se situe à l'extérieur de la bordure et la marge intérieure, à l'intérieur (la bordure a été ajoutée uniquement à titre d'exemple).

Comme pour l'instruction border, vous pouvez indiquer un seul côté à la fois en entrant margin-left, padding-top, etc. Vous pouvez également définir toutes les marges à la fois en entrant margin:1px 2px 3px 4px;. Dans ce cas, l'ordre est le suivant : marge supérieure, droite, inférieure et gauche.

Remarques :
Vous pouvez aussi mettre en forme une partie seulement du texte d'un message blog. Voici un exemple :
Ce texte s'affiche en rouge.

No comments: