CSS, STYLES et Positionnement
Le code CSS peut être placé à 4 endroits
1) Dans un fichier indépendant
2) Dans la page HTML entre les balises <head>
3) Dans la page HTML dans le body (a abandonner)
4) Dans l'élément HTML lui-même
La bonne règle est l'utilisation d'un fichier indépendant qui facilite la maintenance du site et correspond à la norme. Les 2 autres solutions sont indiquées au cas où vous aurez à faire de la maintenance sur des sites "imparfaits" !
1 ) Appel dun fichier indépendant (appelé en général style.css ou css.css)
Toujours se situer entre les balises <head> et </head>.
< head>
< title>titre de ma page</title>
< link rel="stylesheet" type="text/css" href="répertoireXYZ/fic-css.css » />
...
< /head>
2) Dans le code HTML de la page
entre les balises <head> et </head>
<head>
<title>titre de ma page</title>
<style type="text/css">
=> Ici le code CSS
</style>
...
</head>
Ce cas peut être intéressant si vous avez un en-tête commun appelé par un includ
3) Dans le BODY
Pour masquer laffichage du code on linsère dans une balise < !--- > (? A vérifier !)
<STYLE type=text/css>
H3 {font-size : 120%; font-family : Arial; size=120%; color : black; background-color: #CCCCCC; font-weight: 350; text-align: left; MARGIN : 0 0 0 0}
</STYLE>
// .en_tete { text-align:left;font-size:90%; font-weight: bold; color:#ffffff; background-color:#3232ba}
4) Dans la balise HTML
Style dans une balise <p> ou <div> ou <span> <td> etc. :
<DIV id=msg style ="color:red; background-color: #CCCCCC; size:18pt ; font-family: "Trebuchet MS"; position: absolute; top:210px; left:120px"> Texte du message ici </DIV>
Pour mémoire lancien codage fonctionne aussi :
<body bgcolor="#CCCCCC">, <p bgcolor="#c1a090"> <font color="#ff0000"> etc.
/* ceci sont les séparateur des commentaires */
|
|
|
Les classes
noter le point devant.
.greenboldtext { font-size: small; color: #008010; font-weight: bold; }
Partout où l'on veut un texte en vert et gras on place la class="greenboldtext"
<p>Voici un texte <span class="greenboldtext"> avec une phrase en gras et vert</span> alors que le reste ne change pas </p>
Donne
Voici un texte avec une phrase en gras et vert alors que le reste ne change pas
Noter que les <span> servent plutôt à modifier le style dune partie dune balise <P> ou <DIV> ou <H1> etc.
Les <p> délimitent un paragraphe
Les <DIV> délimitent une division qui est habituellement positionnée dans la page par CSS>
Les id
La déclaration d'un id en CSS est identique à la notion de class mais il ne s'applique qu'à un seul élément, celui qui possède cet id
Dans le fichier CSS :
#container_a { width: 80%; padding: 20px; border: 1px solid #666; background: #ffffff; }
< div id="container_a"> Ici le code HTML relatif au contenu..</div>
A savoir On utilise souvent les ID pour définir la structure générale du site (le haut, contenu, navigation...) par exemple : #head, #body, #top_p, #bottom_p
On utilise un # pour les id et un "." pour les classes
EXEMPLE
body {
font-family: "Trebuchet MS", « Times New Roman », Helvetica, Verdana, Arial, Geneva, sans-serif;
text-align: left; /* right ; center ; justify ; */
letter-spacing: 8px; /* espaces entre les lettres */
color : #333333 ; /* couleur du texte */ color: blue ; color : rgb(0,0,255)
background-color: #CCCCCC; /* couleur de fond */ background-color :transparent ;
}
variante pour les couleurs :
.boltred { font-weight: bold; color: rgb(125,0,0);} // on indique les valeurs de RGB en décimale entre 0 et 255
Depuis css3 on dispose du mode transparent
.boltred { font-weight: bold; color: rgba(125,0,0,0.3);} // on indique les valeurs de RGB en décimale entre 0 et 255 et la quatrième valeur notée a varie entre 1=opaque et 0 = totalement transparent. c'est disons la densité de la couleur à 0.5 c'est demi tranqparent
background-image: url("1024x768_fond.jpg");
background-repeat: no-repeat ; /*pas de répition de l'image*/
background-attachment: fixed ; /* Cette propriété "background-attachment" permet de définir si une image reste fixe : fixed ; ou suit le mouvement de la page lors du scroll : scroll ;
Vous pouvez définir la position de l'image de fond avec précision:
background-position: valeur;
Valeurs possibles :
top left ; top center ; top right ; center left ; center center ; center right ;
bottom left ; bottom cente ;r bottom right; x-% y-% ; x-pos y-pos
Exemple de bouton couleur jaune largeur et hauteur imposée et texte réduit
<input type=button value="recule" style="background-color:#E0B000;width:66px;height:20px;font-size:75%" onclick="javascript: recule ();" >
