Memento informatique - Memento CSS

Inclure un fichier CSS en HTML

<head>
  <link href="xxx.css" rel="stylesheet" type="text/css" />
</head>

Font / Texte

Propriétés de texte / font (CSS 1 / CSS 2):

font-family : Famille de police
font-style : Style de police
font-variant : Variante de police
font-size : Taille de police
font-weight : Graisse de police
font-stretch : Étirement de la police (CSS 2)
font : Police en général
word-spacing : Espace des mots
letter-spacing : Espace des signes
text-decoration : Décoration du texte
text-transform : Transformation du texte
color : Couleur du texte
text-shadow : Ombrage du texte (CSS 2)

Détails :
font-family serif - sans-serif - monospace - cursive - fantasy Verdana - Times - Helvetica - Arial - Arial Nerrow - ... font-style normal - italic - oblique font-variant normal - small-caps font-weight 100 - 200 - 300 - 400 - 500 - 600 - 700 - 800 - 900 Normal - bold - bolder - lighter font-size 30pt - 30px - 1cm - 200% xx-large - x-large - large - medium - small - x-small - xx-small larger - smaller font: Cette propriété permet de définir en une seule fois toutes les propriétés de font. font:15px/18px Times bold italique font:Arial, Verdana 100%/120% italique text-decoration none, underline text-transform uppercase, lowercase, capitalize text-align left, right, center, justify, super text-indent 10%, 10pt word-spacing letter-spacing line-height: contrôle de l'interligne vertical-align: (mal supporté en général) super, sub font-stretch: (pas encore interprétée par les navigateurs répandus) wider : plus large que normal. narrower : plus serré que normal. condensed : condensé. semi-condensed : à moitié condensé. extra-condensed : très condensé. ultra-condensed : extrêmement condensé. expanded : étendu. semi-expanded : à moitié étendu. extra-expanded : très étendu. ultra-expanded : extrêmement étendu. normal : étirement normal. text-shadow: couleur ou none (pas encore interprétée par les navigateurs répandus)

Alignement

Propriétés d'alignement (CSS 1 / CSS 2):

text-indent : Retrait du texte (numérique / - pour un retrait de la 1ere ligne)
line-height : Interligne
vertical-align : Alignement vertical
text-align : Alignement horizontal
white-space : Césure (CSS 2)

Détails :
vertical-align top : aligner en haut. middle : aligner au milieu. bottom : aligner en bas. baseline : aligner sur la ligne de base (ou en bas s'il n'y a pas de ligne de base). sub : mettre en indice (sans réduire la taille de la police). super : mettre en exposant (sans réduire la taille de la police). text-top : aligner sur le bord supérieur de l'écriture. text-bottom : aligner sur le bord inférieur de l'écriture. text-align left : aligner à gauche (réglage par défaut). center : centrer. right : aligner à droite. justify : justifier. white-space: Fixe le passage à la ligne normal : automatique (à l'exception de <pre> et de <nowrap>). pre : idem que <pre>...<pre>. nowrap : Pas de césure automatique.

Marge / Padding

Propriétés de marge padding :

margin-top / margin-right / margin-botton / margin-left

20pt - 30px - 1cm - 10%

margin: Permet de définir la valeur des 4 marges (top - right - bottom - left)

margin: 1cm 2cm 1cm 2cm

padding-top / padding-bottom / padding-left / padding-right
padding: Permet de définir la valeur des 4 paddings (top - right - bottom - left)

Bordure

Propriétés pour les bordures :

border[-top, -left, -right, -bottom]-width : Épaisseur de la bordure
border[-top, -left, -right, -bottom]-color : Couleur de la bordure
border[-top, -left, -right, -bottom]-style : Type de la bordure
border[-top, -left, -right, -bottom] : Bordure en général

Détails :

border-style: (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset)

none : pas de bordure (ou bien bordure transparente).
hidden : pas de bordure (ou bien bordure transparente).
dotted : en pointillés .
dashed : en tirets.
solid : pleine.
double : double et pleine.
groove : en relief.
ridge : effet 3D.
inset : rentrante.
outset : sortante.

border-width: (thin, medium, thick) ou numérique

thin : fine.
medium : moyenne.
thick : épaisse.

border-color: (black, transparent, #FFFFFF, ...)

Couleur et arrière plan

Propriétés pour les couleurs et arrière plan (CSS 1) :

background-color : Couleur d'arrière-plan
background-image : Image d'arrière-plan
background-repeat : Effet de répétition
background-attachment : Effet de filigrane
background-position : Position d'arrière plan
background : Arrière-plan en général

Détails :

background-color: Couleur de fond

rgb(120, 100, 214),
#005500,
blue.

background-image: Image de fond

exemple: background-image:url("bg.jpg");

background-repeat

repeat, repeat-x, repeat-y, no-repeat

background-attachment

scroll, fixed

background-position: Mise en page précise de l'image

exemple: background-position:20 20;

background: regroupe en une seule propriété les 5 précédentes

exemple: background: rgb(120, 100, 214), #005500, blue,

Positionnement

Propriétés de positionnement (CSS 2) :

position : Mode de positionnement
top : Position à partir du haut
left : Position à partir de la gauche
bottom : Position à partir du bas
right : Position à partir de la droite
width : Largeur
min-width : Largeur minimale
max-width : Largeur maximale
height : Hauteur
min-height : Hauteur minimale
max-height : Hauteur maximale
overflow : Passage d'élément au contenu trop important
direction : Direction
float : Cours du texte
clear : Suite pour le cours du texte
z-index : Position de la couche en cas de superposition
display : Mode d'affichage ou plutôt non affichage sans prendre de place
visibility : Affichage ou non affichage avec réservation de place
clip : Limiter le domaine d'affichage

Details:

position: vous pouvez déterminer le mode de positionnement. Les mentions suivantes sont permises:

absolute : Positionnement absolu, mesuré à partir du bord de l'élément parent; peut défiler.
fixed : Positionnement absolu, mesuré à partir du bord de l'élément parent; reste fixe lors du défilement. .
relative : Positionnement relatif mesuré à partir de la position de départ de l'élément proprement dit.
static : Pas de positionnement spécial, flux normal de l'élément (réglage par défaut).

overflow: vous pouvez définir comment des éléments intérieurs, au contenu trop important, doivent être traités. Les données suivantes sont possibles:

visible : L'élément sera agrandi de manière à ce que son contenu soit complètement visible dans tous les cas.
hidden : L'élément sera coupé s'il dépasse les limites.
scroll : L'élément sera coupé s'il dépasse les limites. Le navigateur WWW doit pourtant proposer des barres de défilement, un peu comme dans une fenêtre cadre incorporée.
auto : Le navigateur Web doit décider en cas de conflit, comment l'élément sera affiché. Proposer des barres de défilement est également permis.

direction: vous pouvez fixer le sens d'écriture. Les mentions suivantes sont possibles:

ltr : de gauche à droite.
rtl : de droite à gauche.

float: vous pouvez spécifier que les éléments suivants passent sur les côtés de l'élément/du passage actuel. Les données suivantes sont possibles:

left : L'élément se trouve à gauche et sera entouré par la droite des éléments qui le suivent.
right : L'élément se trouve à droite et sera entouré par la gauche des éléments qui le suivent.
none : L'élément ne sera pas entouré (réglage normal).

clear: vous pouvez interrompre le cours du texte pour en forcer la poursuite sous l'élément/le passage entouré. Les données suivantes sont possibles:

left : impose pour float:left la poursuite dessous.
right : impose pour float:right la poursuite dessous.
both : impose dans chaque cas la poursuite dessous.
none : n'impose pas de poursuite dessous. (réglage normal).

visibility: vous pouvez spécifier si un élément est affiché au début ou non. Les mentions suivantes sont possibles:

hidden : Le contenu de l'élément est d'abord caché (non affiché).
visible : Le contenu de l'élément est d'abord affiché (réglage normal).

clip

exemple :<div style="position:absolute; top:100px; left:100px; clip:rect(0px 130px 130px 0px);"><img src="img.gif" width="208" height="181" border="0" /></div>

Listes

list-style-type: Type de puce ou numérotation pour la liste.

disc: puce ronde noire pleine.
circle: puce ronde vide.
square: puce carrée vide
decimal: numérotation (1, 2, 3, etc).
decimal-leading-zero: numérotation avec zéros (001, 002, etc).
alpha
upper-alpha

list-style-image: Permet de définir une image comme puce de la liste.

url de l'image,
list-style-image:url("puce.gif")

list-style-position: Permet de définir un alignement sur la puce ou sur la marge du texte de la liste.

outside : toutes les lignes sont alignées sur la puce.
inside : à partir de la seconde ligne, le texte retourne à la marge.
exemple: list-style-position:inside

list-style: Permet de définir dans un seul format, les propriétés précédentes.

exemple: list-style:disc inside

Liens

Type de liens

a:
a:visited
a:hover
a:active

Exemple

a {text-decoration:none; color:#FF0000}
a:hover {text-decoration:underline; color:red}

Scrollbar (> ie 5.5)

scrollbar-face-color: defini la couleur du dessus des boutons et de la barre de défilement.
scrollbar-shadow-color: defini la couleur sombre du relief des boutons (noir conseillé).
scrollbar-highlight-color: defini la couleur claire du relief des boutons (blanc conseillé).
scrollbar-3dlight-color: defini la couleur claire du relief des boutons quand ceux-ci ne sont pas enfoncés (noir conseillé).
scrollbar-darkshadow-color: defini la couleur sombre du relief des boutons quand ceux-ci ne sont pas enfoncés (noir conseillé).
scrollbar-track-color: defini la couleur du fond de la barre.
scrollbar-arrow-color: defini la couleur des flèches.

Exemple: (Ecrire entre les balises <head> et </head>)

BODY {
    scrollbar-face-color: #7189AB;
    scrollbar-shadow-color: #000000;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #000000;
    scrollbar-darkshadow-color: #000000;
    scrollbar-track-color: #94A9CA;
    scrollbar-arrow-color: #FFCC00;
}

Source : EditeurJavascript.com

Ressources & Liens

Loribel.com / Section CSS

Self HTML

Memento CSS

Table des matières :

Inclure un fichier CSS en HTML

Font / Texte

Alignement

Marge / Padding

Bordure

Couleur et arrière plan

Positionnement

Listes

Liens

Scrollbar (> ie 5.5)

Ressources & Liens

Sujets liés

Sites de référence

Memento

HTML

CSS

Memento

Informatique

Java - XML - Web

Voir Aussi

Memento CSS afficherStarsWithPath(4, "../..");

Table des matières :

Inclure un fichier CSS en HTML

Font / Texte

Alignement

Marge / Padding

Bordure

Couleur et arrière plan

Positionnement

Listes

Liens

Scrollbar (> ie 5.5)

Ressources & Liens

Sujets liés

Sites de référence

Memento

HTML

CSS

Memento

Informatique

Java - XML - Web

Voir Aussi

Memento CSS