Bonjour. visiteurs jour : 40       Au président     Beauté santé     Infos loisirs     Ensemble      Jean      Informatique     Einstein     Santé corona

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 -



   

Cours de CSS

Placement du CSS

Appel du fichier css :  < link rel="stylesheet" type="text/css" href="répertoireXYZ/style-css.css" />
Dans le code HTML de la page: <style type="text/css"> Ici le code CSS</style>

Valeurs CSS

body { 
font-family: "Times New Roman", Helvetica, Verdana, Arial, "Trebuchet MS", 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: #ccddcc  /* couleur de fond  */   background-color :transparent ;

}


H3 {font-size : 120%; font-family : "Times New Roman", Helvetica, Verdana, Arial, "Trebuchet MS";  color : black; background-color: #CCCCCC; font-weight: 350;  text-align: left; MARGIN : 0 0 0 0: padding 0;

<DIV id=msg style ="position: absolute; top:210px; left:120px" > Texte du message ici </DIV> 

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 ();" >     


Les classes

noter le point devant.
.greenboldtext {   font-size: small;   color: #008010;   font-weight: bold; }

<p>Voici un texte <span class="greenboldtext"> avec une partie en gras et vert</span> alors que le reste ne change pas </p>

Donne Voici un texte avec une partie en gras et vert alors que le reste ne change pas


Les id

La déclaration d'un id en CSS est identique à la notion de class, le point devant est rempalcé par # suivi de l'id. il ne s'applique qu'à l'élément qui possède cet id

#container_a {   width: 80%;   padding: 20px;   border: 1px solid #666;   background: #ffffff; }


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




-
vues  1420     En ligne actuellement :   4   Total des clics  1656403