ATTENTION: les définitions données le sont à titre indicatif sur la base de la norme CSS2. Les comportements sous les différents navigateurs sont à tester au cas par cas, en particulier avec les versions de Netscape qui commencent à dater ! Noter également que ces listes ne sont absolument pas exhaustives; elles fournissent simplement les fonctions et leurs attributs les plus courants.
En dehors des tag font et color qui ne sont plus recommandés depuis HTML4 (mais encore supportés par les navigateurs actuels), la manière pour définir la mise en forme de texte ou d'éléments HTML est le principe des styles et feuilles de style.
<h1 style="color: blue; font-style:
italic">Je suis bleuuueeeee</h1>
<head>
<style type="text/css">
<!--
/* rend en bleu tous les titres de niveau 1 */
h1
{color: blue; font-style: italic}
-->
</style>
</head>
<body>
<h1> Je suis
bleuuueeeee</h1>
Il existe deux méthodes: liaison et importation. L'importation permets théoriquement l'utilisation de plusieurs feuilles en cascades, mais seule la méthode de la liaison est actuellement bien supportée par les navigateurs actuels.
créer un fichier mes_styles.css contenant:
/* rend en bleu tous les titres de niveau 1 */
h1
{color:blue; font-style: italic}
le fichier HTML créera la liaison de la manière suivante:
<head>
<link rel=stylesheet
type="text/css" href="mes_styles.css">
</head>
<body>
<h1> Je suis
bleuuueeeee</h1>
Commentaires dans les feuilles de styles: /*bla bla bla*/
Attention aux priorités
Théoriquement: proximité î classe î contexte î ordre d'apparition inverse
sélecteur {propriété1:valeur1; propriété2:valeur1 valeur2 valeur3; }
h1 {text-align: center}
h1, h2,
h3, h4 {text-align: center}
h1 b {color: red}
normalement le sélecteur * {} est universel; il ne marche pas avec Netscape 4.7
préférer body {}
.mesTitres {color: blue; font-family: verdana, arial,
helvetica}
p.mesEquations
{color: navy; font-size: 10px}
td.mesCellules {text-align: center}
Classes réservées et prédéfinies (7 en tout) dont seulement
celles liées au tag <a> fonctionnent actuellement. Elles se différencient
syntaxiquement des classes standard par l'utilisation des
"deux-points" (:) au lieu d'un (.).
a:link pour les liens non visités
a:active pour les liens actifs, ie quand on clique dessus
a:visited pour les liens visités
a:hover pour les liens que l'on survole avec la souris (IE only)
ou aussi
.mesLiens:hover {color: red}
mots clés (underline, red, small )
longueurs (1in, 1.5cm, +0.25mm, -3pt, 250px, )
pourcentage
(line-height: 120%)
URL ( url(http://www.yahoo.com) )
couleurs (#FF2434, #D14, rgb(100%, 90%, 30%), rgb(255, 12, 65) )
|
propriété |
signification |
exemples |
|
font-family |
police
de caractère |
p {font-family: Times, "New Century
Schoolbook", Palatino} |
|
font-size |
taille |
p
{font-size: 12px} a {font-size:
9pt} .titres {font-size:
medium} |
|
font-style |
style
italique |
h2
{font-style: italic} |
|
font-weight |
poids
de la police |
.titres
{font-weight: bold} h1 {font-weight:
normal} p {font-weight:
bolder}(IE) body {font-weight:
700} la valeur doit être un
multiple de 100 de 100 à 900 (normal = 400). |
|
font |
police
complète |
p
{font: bold 12pt/24pt Times, Garamond, serif} attention, l'ordre est important: style, poids, variante,
taille/hauteur de ligne, familles de polices. Seules la taille et la famille
de polices sont obligatoires. |
|
propriété |
signification |
exemples |
|
line-height |
hauteur
de ligne |
p {line-height: 14pt} h1 {line-height: 120%} a {line-height: 2.0} (facteur) |
|
text-align |
alignement |
div {text-align: center} valeurs: left, right, center ou
justify |
|
text-decoration |
"décoration" |
a:visited {text-decoration: underline
overline} valeurs: none, underline,
overline(IE), line-through, blink(NS) |
|
text-indent |
indentation
de la première ligne d'un paragraphe |
p
{text-indent: 120px} |
|
text-transform |
modifie
la casse |
p
{text-transform: capitalize} valeurs:
none, capitalize (1e lettre en majuscule), uppercase, lowercase |
|
letter-spacing(IE) |
espace
entre les caractères |
p {letter-spacing: 2px} |
|
propriété |
signification |
exemples |
|
color |
couleur
du texte |
a
{color: #FF12D3} valeurs: voir
plus haut |
|
background-color |
couleur de fond |
th {background-color: silver} |
|
background-image |
image
de fond |
body {background-image:
url(images/fond_page.gif)} |
|
background-position(IE) |
position
de l'image de fond |
body
{background-image: url(images/fond_page.gif); background-position: top
right} accepte également des
valeurs depuis le coin-gauche de la fenêtre |
|
background-repeat |
mode
de répétition de l'image de fond |
body {background-image:
url(images/fond_page.gif); background-repeat: |
|
propriété |
signification |
exemples |
|
height,
width(IE) |
hauteur,
largeur |
table {height: 500px} img {height: 100px; width: auto} |
|
|
|