cf.geocities.com/willfonkam   



 
 
Accueil || Plan du site || Cours >> HTML || CSS || Trucs et astuces || — Sites >> Willy F. || Liens utiles || — Divers >> Blagues || Autre site
 
cours html cours feuilles de style trucs et astuces divers: fun et blagues liens utiles quelques infos sur le webmaster plan du site

Exemples d'utilisation des feuilles de style

Couleur Barre de Défilement

Pour changer la couleur de la barre de défilement, on met dans les balises <STYLE> et

</STYLE>
les propriétés suivantes:

<STYLE>
BODY{
SCROLLBAR-FACE-COLOR: #FFFFFF;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #CCD9F1;
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;
SCROLLBAR-ARROW-COLOR: #FFFFFF;
SCROLLBAR-TRACK-COLOR:#EFF2FB;
SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;
}
</STYLE>

Attributs des Liens
Pour les attributs des liens, on utilisera la propriété A à qui on donnera les valeurs:

A:link {
propriété: attribut;
propriété: attribut;
propriété: attribut;

}

A:hover {
propriété: attribut;
propriété: attribut;
propriété: attribut;

}

A:visited {
propriété: attribut;
propriété: attribut;
propriété: attribut;

}

A:active {
propriété: attribut;
propriété: attribut;
propriété: attribut;

}
A C'est le lien.
A: HOVER donne les caractéristiques du lien quand la souris le survole.
A: VISTITED Donne l'attribut du lien visité, de même que A: ACTIVE.

Les propriétés dans ce cas peuvent être:

— color:blue;
— text-decoration: none (aucune) — underline (souligné) — overline (surligné) — underline overline (surligné et souligné)
— border:1px (2px—3px—5px—5px—6px) transparent (ou non) — inset ou outset}

<DIV> et <SPAN>

Les balises <SPAN> et <DIV> permettent d'appliquer des styles différents à des morceaux de texte.

<SPAN>
La balise <SPAN> sert à appliquer des styles à des morceaux de paragraphe. Ceci veut dire qu'avec le marqueur <SPAN> on peut écrire sur la même ligne (contrairement au marqueur <DIV>).

<DIV>
La différence entre ce marqueur et le précedent est qu'il s'applique sur plusieurs paragraphes. Ceci veut tout simplement dire que quand on utilise le marqueur <DIV>, le mot qui suit le mot va automatiquement à la ligne suivante. Par exemple, si je veux que dans mon site les REMARQUES soient de taille 20 pixels, de police arial, en gras et de couleur rouge, après avoir déternimé dans la balise <STYLE>la propriété .remarque et ses attributs {FONT-FAMILY:arial; FONT-SIZE: 20px;FONT-WEIGHT:bold; COLOR:red;} .
Puis, dans le corps des pages, au moment d'écrire une remarque, je n'aurais qu'à appeler le style en écrivant juste avant ma remarque le code :
<DIV CLASS=remarque>ECRIRE LA REMARQUE</DIV>


En-tête et pied de page

EN—TÊTE DE PAGE

Dans la balise <STYLE> on écrit:
.tete {
position:absolute;
top:0;
left:0;
background-color:#ccffff;
width:100%;
height:4.5%;
text-align:center;
border-bottom:1px outset;

}

Puis on appelle le style avec le code
<DIV class=tete>EN—TÊTE<SPAN>

PIED DE PAGE
.pied {
position:absolute;
top:95.5%;
left:0;
background-color:#ccfccf;
width:100%;
height:4.5%;
text-align:center;
border-top:1px
inset;

}


 Puis on appelle le style avec le code
<DIV class=tete>PIED DE PAGE<SPAN>

Bordure et corps de page

LA BORDURE

Dans la balise <STYLE> on écrit:
.barre {
position:absolute;
top:5.5%;
left:0;
background-color:#ffffcc;
width:16%; height:90%;
padding-left:3px;
text-align:left;
overflow:auto;

}

 Puis on appelle le style avec le code
<DIV class=tete>BORDURE DE PAGE<SPAN>

CORPS DE PAGE
Dans la balise <STYLE> on écrit:
.corps {
position:absolute;
top:5.5%;
right:0;
background-image:url(valimage/astufond.jpg);
width:80.5%;
height:90%;
overflow:auto;

}

 Puis on appelle le style avec le code
<DIV class=tete>CORPS DE PAGE<SPAN>

Haut de page

Incorporer les styles Voir le chapître suivant ==> Trucs et astuces

Hosted by www.Geocities.ws

1