Entrée | Sommaire | Historique | Structure | Entête et Corps | Textes | Liens | Listes | Images | Tableaux | Cadres | CSS | Propriétés CSS | Annexes
Les styles utilisent 3 éléments:
Les deux derniers éléments sont traité ensemble puisque chaque attribut reconnaît ses propres valeurs.
Explications sur les pseudo Elements
Certaine propriétés marqués d'une asterisque (*) acceptent de 1 à 4 valeurs:
| Attributs Généraux | ||
|---|---|---|
| Les attributs suivants concernent tous les types d'éléments | ||
| Attribut | Valeurs | Effet & Notes |
| display |
block : independent du reste (forme un bloc au même titre qu'un paragraphe, ou un titre) inline : est insérée dans un pragraphe comme si c'était un mot d'une ligne list-item: comme une liste (avec un marqueur précédent l'element comme pour la balise <li> d'une liste) none: affichage par défaut |
Indique comment doit être affiché l'element. |
| height |
auto : hauteur automatique. Valeur d'Epaisseur |
Définit (et force) la hauteur d'un élément. Si l'image contenu dans l'élément est trop grande, elle sera redimensionnée (à l'échelle si la valeur de width est auto. Si c'est du texte, il pourra être entierrement vu avec des barres d'ascenseur, ou l'element sera automatiquement agrandit pour laisser entrer tout le texte (selon les navigateurs utilisés). |
| width |
auto : largeur automatique. Valeur d'Epaisseur |
Définit (et force) la largeur d'un élément. Si l'image contenu dans l'élément est trop grande, elle sera redimensionnée (à l'échelle si la valeur de height est auto. Si c'est du texte, il pourra être entierrement vu avec des barres d'ascenseur, ou l'element sera automatiquement agrandit pour laisser entrer tout le texte (selon les navigateurs utilisés). |
| float |
left : element aligné à gauche. right : element aligné à droite. none : alignement normal. |
Définit comment l'élément doit se placer par rapport aux autres éléments d'une page. A la manière des images quand on veux les placer à gauche ou a droite d'un texte. |
| clear |
left : pas d'autres éléments à gauche. right : pas d'autres éléments à droite. both : aucun élément à gauche ou à droite. none : elements acceptés à gauche et à droite. |
Définit si l'élément admet que d'autres éléments flotants soit situés de part et d'autre de lui. |
|
margin-width * margin-bottom-width margin-left-width margin-right-width margin-top-width |
none : aucune marge Poucentage de la fenetre ou du cadre Valeur d'Epaisseur |
Définit la marge entre la bordure de l'élément et les bords de la fenetre ou du cadre. Il affecte soit l'ensemble des marges d'un élément, soit un coté de celui-ci (top: marge supérieure, bottom: marge inférieure, left: marge gauche, right: marge droite). |
|
padding-width * padding-bottom-width padding-left-width padding-right-width padding-top-width |
none : aucun espace Poucentage de la fenetre ou du cadre Valeur d'Epaisseur |
définit l'espacement entre le contenu d'un élément et ses bordures. Il affecte soit l'ensemble des cotés d'un élément, soit un coté de celui-ci (top: supérieure, bottom: inférieure, left: gauche, right: droite). |
| Attributs de Bordure | ||
|---|---|---|
| Les attributs suivants affectent soit l'ensemble des bordures d'un élément, soit une seule des bordures (top: borudre supérieur, bottom: bordure inférieur, left: bordure gauche, right: bordure droite). | ||
| Attribut | Valeurs | Effet & Notes |
|
border-color * border-bottom-color border-left-color border-right-color border-top-color |
Valeur de couleur transparent : (aucune couleur) |
Donne une couleur ou aucune à la bordure. L'effet varie suivant le style de bordure utilisé. |
|
border-width * border-bottom-width border-left-width border-right-width border-top-width |
thin : fine medium : moyenne thick : épaisse Valeur d'Epaisseur |
Définie l'épaisseur de la bordure |
|
border-style * border-bottom-style border-left-style border-right-style border-top-style |
none : aucune dotted : pointillé dashed : tirée solid : unie double : double groove : ??? ridge : ??? inset : enfoncé ouset : relief |
Définie le style de la bordure |
|
border * border-bottom border-left border-right border-top |
valeurs des propriétés de bordure définit précédement. Dans l'ordre: border-width border-style border-color | Définie le style, l'épaisseur, et la couleur de la bordure. Chaque valeur doit être séparé de la précédente par un espace. |
| Attributs d'Arrière plan | ||
|---|---|---|
| Définissent les propriétés des arrières plans des éléments | ||
| Attribut | Valeurs | Effet & Notes |
| background-color |
Valeur de couleur transparent : (aucune couleur) |
Couleur d'arrière plan |
| background-image | URL de l'image | Image d'arrière plan il est conseillé de définir une couleur d'arrière plan au cas où l'image ne soit pas affichée. |
| background-repeat |
repeat: répétition horizontale et verticale. repeat-x: répétition horizontale. repeat-y: répétition verticale. no-repeat: image non répée |
Répétition de l'image d'arrière plan |
| background-attachement |
scroll : l'image défile en même temps de la page fixed : l'image reste fixe lorsque la page défile |
Définie si l'image de fond doit ou non défiler lorsque l'on déplace les barres d'ascenceur. |
| background-position |
valeurs des propriétés border-width, border-style, et border-color.
2 valeurs qui peuvent être de 3 types: * textuelle
* positions en pourcentage à partir du coin supérieur gauche de l'élément. La première valeur indique la position horizontale, et la deuxième la position verticale. |
Définie la position de la première image à partir de laquel sera définie la répétition. |
| background |
valeurs des propriétés border-width, border-style, et border-color. Dans l'ordre: background-color background-image background-repeat background-attachment background-position |
Définit en une fois plusieurs propriétés d'arrière plan. |
| Attributs de police d'écriture | ||
|---|---|---|
| Les attributs et propriétés suivantes permettent de définir les polices d'ériture utilisées pour les différents éléments textuels. | ||
| Attribut | Valeurs | Effet & Notes |
| font-family |
liste de noms de polices, ou familles de style de police parmis les suivantes:
|
Police d'écriture du texte. Plusieurs valeurs peuvent être choisit, séparées par des virgules par ordre de préférence d'utilisation des polices. |
| font-size |
valeur relative :
|
Taille relative ou absolue de la police. Les modifications relatives se font par rapport au la taille de base de l'élément dans lequel se trouve la balise. Si une balise em avec une taille larger se trouve dans un paragraphe de taille medium. la balise em sera de taille large. |
| font-style |
oblique : Oblique italic : Italique normal : normale |
Style de la police |
| font-weight |
normal : normale bold : Gras bolder : Gras épais lighter : Léger Une valeur parmie les suivantes: 100, 200, 300, 400 (normal), 500, 600, 700 (bold), 800, 900. |
Epaisseur de la police. L'effet dépend de la police utilisée. |
| font-variant |
normal : normale small-caps : police de petite majuscules |
lettres de la police. |
| font |
Permet de définir en une seul fois plusieurs propriés de police. Les valeurs sont celles de chaque propriétés définies précédement. Dans l'ordre: font-style font-variant font-weight font-size font-family font-size peut être remplacé par font-size/line-height . Ce qui voudra dire que line-height (voir attributs de texte) sera définit relativement à font-size |
|
| Attributs de texte | ||
|---|---|---|
| Les attributs suivants déacute;finissent différentes propriétés relatives aux éléments textuels indépendament des polices utilisées. | ||
| Attribut | Valeurs | Effet & Notes |
| text-align |
center : centré left : gauche right: droit jusify: justifié |
alignement du texte |
| color | Valeur de couleur | Couleur du texte |
| text-decoration |
none : aucune underline : souligné overline : surligné (ligne au dessus du texte) line-through : barré blink : clignotant ? |
ornementation du texte |
| vertical-align |
baseline : collé au bas de l'element underline : le milieu de l'element est aligné avec le milieu du bloc dans lequel il se trouve. sub : en indice super : en exposant text-top : le sommet de l'element est aligné avec le sommet de l'element dans lequel il se trouve text-bottom : le bas de l'element est aligné avec le bas de l'element dans lequel il se trouve top : le sommet de l'element est aligné avec le sommet de l'element le plus haut du bloc dans lequel il se trouve top : le bas de l'element est aligné avec le bas de l'element le plus bas du bloc dans lequel il se trouve |
Alignement vertical du texte dans un bloc. |
| text-transform |
capitalize : Met en majuscule la première lettre de chaque mot uppurcase : Met en majuscule toutes les lettres du texte lowercase : Met en minuscule toutes les lettres du texte none : annule tous les effets définit dans les styles hérités des blocs externes. |
Modifie l'ensemble du texte. |
| text-indent |
pourcentage : pourcentage Valeur d'Epaisseur |
Indentation (retrait) de la première ligne de l'element. |
| line-height |
normal : ne change rien nombre reel pourcentage : pourcentage relatif à la taille de font-size Valeur d'Epaisseur |
Hauteur de la ligne |
| letter-spacing |
normal : ne change rien Valeur d'Epaisseur |
Espacement des lettres. |
| word-spacing |
normal : ne change rien Valeur d'Epaisseur |
Espacement des mots (en plus de la taille habituelle de l'espace). |
| white-space |
normal : espaces classiques pre : comme dans la balise pre (tous les espaces sont affihés) nowrap: le retour à la ligne se fait uniquement avec la balise <br /> . none: ne fait rien |
Indique comment les espaces sont gérés. |
| Attributs de listes | ||
|---|---|---|
| Les attributs suivants déacute;finissent différentes propriétés relatives à l'affichage des éléments de type liste. | ||
| Attribut | Valeurs | Effet & Notes |
| list-style-type |
disc : cercle plein circle : cercle vide square : carré plein decimal : chiffres arabes lower-roman : chiffres romains minuscule upper-roman : chiffres romains majuscule lower-alpha : lettres minuscule upper-alpha : lettres majuscule none: aucune puce/numerotation |
Précise le type de puce ou de numérotation à utiliser pour les listes. |
| list-style-position |
outside : puce à l'exterieur, et texte en retrait. inside : puce intégrée au texte. Le tout est en retrait. |
Définit ou se trouve la puce/numérotation par rapport au texte des elements de liste. |
| list-style-image |
URL : url de l'image none : aucune image |
Définit la puce comme une image dont il faut préciser le chemin d'accès. |
| list-style |
Prend les valeurs des 3 propriétés précédentes séparés par des espaces. Dans l'ordre type position image . |
Définit en une fois les 3 propriétés de listes (type, image et position). |
Les valeurs de couleur peuvent s'écrire de différents manières:
Nom de couleur parmis les suivants: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
Les autres couleurs ne sont pas sur de fonctionner
Couleur hexidécimale à 3 chiffres : s'écrit #xyz ou x est le rouge, y le vert, et z le bleu. x y et z vont de 0 à 9 et de a à f .
Couleur hexidécimale à 6 chiffres : s'écrit #xxyyzz ou xx est le rouge, yy le vert, et zz le bleu. x, y et z vont de 0 à 9 et de a à f .
entiers : s'écrit rgb(x,y,z), ou x est le rouge, y le vert, et z le bleu. x, y et z sont des entiers qui compris entre 0 et 255.
pourcentage : s'écrit rgb(x%,y%,z%), ou x est le rouge, y le vert, et z le bleu. x, y et z sont des reels compris entre 0.0 et 100.0 .
Les valeurs d'épaisseur s'écrivent avec un nombre suivit d'un type de valeur parmis les suivants:
em : taille de la police.
ex : valeur x-height de la police.
px : pixels
pt : points (1/72e de pouce)
in : inch (pouces=2.52cm)
Entrée | Sommaire | Historique | Structure | Entête et Corps | Textes | Liens | Listes | Images | Tableaux | Cadres | CSS | Propriétés CSS | Annexes