Bonjour. visiteurs jour : 107
Au président
Beauté santé
Infos loisirs
Ensemble
Jean
Informatique
Relativité
Relativity
Les joies de l'informatique et de l'internet !
Accueil - Disques - Excel - Informatique - Infos - Internet - Javascript - logiciels - Programation - Sites RJ - Vidéo - Plan du site -
1) Dans un fichier indépendant 2) Dans la page HTML entre les balises <head> 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" !
Toujours se situer entre les balises <head> et </head>. ...
entre les balises <head> et </head> <head> ... Ce cas peut être intéressant si vous avez un en-tête commun appelé par un includ
Pour masquer laffichage du code on linsère dans une balise < !--- > (? A vérifier !) // .en_tete { text-align:left;font-size:90%; font-weight: bold; color:#ffffff; background-color:#3232ba}
Style dans une balise <p> ou <div> ou <span> <td> etc. : Pour mémoire lancien codage fonctionne aussi : /* ceci sont les séparateur des commentaires */
noter le point devant. 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> 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 Dans le fichier CSS : 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 EXEMPLE } 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
.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"); Vous pouvez définir la position de l'image de fond avec précision: Exemple de bouton couleur jaune largeur et hauteur imposée et texte réduit
CSS, STYLES et Positionnement
Le code CSS peut être placé à 4 endroits
3) Dans la page HTML dans le body (a abandonner)
1 ) Appel dun fichier indépendant (appelé en général style.css ou css.css)
< 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
<title>titre de ma page</title>
<style type="text/css">
=> Ici le code CSS
</style>
</head>
3) Dans le BODY
<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>
4) Dans la balise HTML
<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>
<body bgcolor="#CCCCCC">, <p bgcolor="#c1a090"> <font color="#ff0000"> etc.
Les classes
.greenboldtext { font-size: small; color: #008010; font-weight: bold; }
Donne
Voici un texte avec une phrase en gras et vert alors que le reste ne change pas
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
#container_a { width: 80%; padding: 20px; border: 1px solid #666; background: #ffffff; }
< div id="container_a"> Ici le code HTML relatif au contenu..</div>
On utilise un # pour les id et un "." pour les classes
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 ;
Depuis css3 on dispose du mode transparent
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 ;
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
<input type=button value="recule" style="background-color:#E0B000;width:66px;height:20px;font-size:75%" onclick="javascript: recule ();" >