Historique : CSS

Apprenez le CSS

Accueil > Site Web > CSS

Petit récapitulatif sur le CSS

Appliquer un style à des balises

balise1
{
   propriete: valeur;
}

Imbrications de balises

h3 em {} //tout les em situé dans h3

Texte

font-size:16px;
font-size: 0.7em; //1em = taille normal
font-size: 100%; //texte normal
font-family:police; // autre Arial, "Arial Black", "Comic Sans MS", "ourier New", Georgia, Impact, "Times New Roman", "Trebuchet MS", Verdana,

Alignement //left center right justify

text-align: center;

Indentation

text-indent: 30px; // Les paragraphes commenceront 30 pixels sur la droite

Effets de style

font-style:normal;

italic : le texte sera mis en italique
oblique : le texte sera mis en italique
normal : le texte sera normal (par défaut)

font-variant

font-variant: small-caps;

small-caps : le texte sera écrit en petites capitales.
normal : le texte sera écrit normalement (par défaut).

font-weight

font-weight: bold;

bold : le texte sera en gras.
normal : le texte sera normal (par défaut).

font-variant

font-variant: small-caps;

small-caps : le texte sera écrit en petites capitales.
normal : le texte sera écrit normalement (par défaut).

text-transform

text-transform: uppercase;

uppercase : tout le texte sera écrit en majuscules
lowercase : tout le texte sera en minuscules
capitalize : la première lettre de chaque mot sera en majuscules
none : pas de transformation (par défaut)

text-decoration

text-decoration: underline;

underline : souligné
line-through : barré
overline : ligne au-dessus
blink : clignotant. Attention, cette propriété ne marche pas sous Internet Explorer
none : normal (par défaut)

Les couleurs

color: green; //white silver gray black red maroon lime green yellow olive blue navy fuchsia purple aqua teal
color:#FFFFFF;
color: rgb(243,65,243);

La couleur de fond // pour fond page mettre dans body

background-color: black;

L'image de fond // pour fond page mettre dans body

background-image: url("../images/neige.png");
background-attachment: fixed;

fixed : l'image de fond reste fixe.

scroll : l'image de fond défile avec le texte (par défaut).
background-repeat: repeat-y;

no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page
repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement
repeat-y : le fond sera répété uniquement sur la première colonne, verticalement
repeat : le fond sera répété (par défaut)

background-position:30px 50px;  //votre fond sera placé à 30 pixels de la gauche et à 50 pixels du haut
background-position: top right; //Combinaison

top : en haut
bottom : en bas
left : à gauche
center : centré
right : à droite

méga-propriétés//background

background: url("../images/skieur.gif") no-repeat top right fixed;  //dans nimporte quel sens

Liens

a /* Lien normal */
a:hover /* Quand le visiteur pointe sur le lien */
a:active /* Quand le visiteur clique sur le lien */
a:focus /* Quand le visiteur sélectionne le lien */
a:visited /* Quand le visiteur a déjà vu la page concernée */

La taille

width : c'est la largeur du block. A exprimer en pixels (px) ou en pourcentage (%). height : c'est la hauteur du block. Là encore, on l'exprime soit en pixels (px), soit en pourcentage (%).

overflow

overflow: auto;

visible (par défaut) : si le texte dépasse les limites de taille, le block est agrandi de manière à ce que tout soit visible. C'est ce que nous venons de constater
hidden : si le texte dépasse les limites, il sera tout simplement coupé. On ne pourra pas voir tout le texte
scroll : lle navigateur a mis des barres de défilement verticales et horizontales (alors qu'on n'a pas besoin de la barre horizontale)
auto : le navigateur s'est dit "Bah tiens, j'ai pas besoin de la barre horizontale, je vais l'enlever"

Les bordures

border: none;
   * none : pas de bordure (par défaut)

   * thin : bordure fine

   * medium : bordure moyenne

   * thick : bordure épaisse
%
border: 2px solid black;

solid : un trait simple.
dotted : pointillés.
dashed : tirets.
double : bordure double.
groove : en relief.
ridge : effet 3D.
inset : autre effet 3D (on a l'impression que le block forme un creux).
outset : encore un autre effet 3D (on a l'impression que le block est surélevé).

border-right: 2px solid green;

border-top : bordure en haut.
border-bottom : bordure en bas.
border-left : bordure en gauche.
border-right : bordure en droite.

Les marges

padding : indique la taille de la marge intérieure. A exprimer en général en pixels (px).
margin : indique la taille de la marge extérieure. Là encore, on utilise le plus souvent des pixels.

top : haut
bottom : bas
left : gauche
right : droite

Centrer des blocks //e margin:auto ne peut fonctionner que si vous avez indiqué une largeur précise pour votre block !

margin: auto; /* On peut donc demander à ce que le block soit centré avec "auto" */