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 !





Coucou et merci


  Accueil - Disques - Excel - Informatique - Infos - Internet - Javascript - logiciels  - Programation - Sites RJ - Vidéo - Plan du site -



   

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 d’un 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 l’affichage du code on l’insè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 l’ancien 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 d’une partie d’une 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 ();" >     


-
vues  2663     En ligne actuellement :   1   Total des clics  1731189