Trucs et astuces avec le fichier css

[audax]

truc et astuces avec le fichier css

Un curseur avec le fichier css, mais visible sur toute les pages


Dans le fichier css, il y a l'emplacement du code pour l'image de fond qui se trouve en première partie..
exemple avec le fichier css de MylPotter..

le code est celui ci

Code: Tout sélectionner

/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
   background-color: #000000;
   scrollbar-face-color: #000000;
   scrollbar-highlight-color: #FDD35F;
   scrollbar-shadow-color: #B5906B;
   scrollbar-3dlight-color: #FDD5AB;
   scrollbar-arrow-color: #FDD35F;
   scrollbar-track-color: #000000;
   scrollbar-darkshadow-color: #FDD35F;
   background-image : url(images/background1.jpg);
   background-repeat : no-repeat;
   background-attachment : fixed;

}

et pour placer un curseur vous rajouter ce code

cursor: url(ADRESSE URL DU CURSEUR);

ici;

/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-color: #000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #FDD35F;
scrollbar-shadow-color: #B5906B;
scrollbar-3dlight-color: #FDD5AB;
scrollbar-arrow-color: #FDD35F;
scrollbar-track-color: #000000;
scrollbar-darkshadow-color: #FDD35F;
background-image : url(images/background1.jpg);
background-repeat : no-repeat;
background-attachment : fixed;
cursor: url(ADRESSE URL DU CURSEUR);

}

je l'ai rentré comme ceci avec l'adresse url du curseur

/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-color: #000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #FDD35F;
scrollbar-shadow-color: #B5906B;
scrollbar-3dlight-color: #FDD5AB;
scrollbar-arrow-color: #FDD35F;
scrollbar-track-color: #000000;
scrollbar-darkshadow-color: #FDD35F;
background-image : url(images/background1.jpg);
background-repeat : no-repeat;
background-attachment : fixed;
cursor: url(http://www.boomspeed.com/starlight/curaim1.cur) !important;
}

et voilà ce que cela donne

[audax]

Une autre petite astuce que vous pouvez faire avec le css.
vous avez surement déjà remarquez sur des sites, qd on passe la souris sur le lien, au passage de la souris, le lien grossi..
L'astuce en fait consiste a éditer qu'un seul fichier qui est le css.. un site ou un forum qui comprend d'innombrables pages, ces pages, font appel à un seul fichier qui comprend toutes les couleurs et principales images des pages qui est le fichier css.. de ce fait, le webmaster n'aura en fait, pour ces innombrables pages, à éditer qu'un seul fichier.. c'est beaucoup plus facile pour lui..

pour cette astuce.

il suffit de prendre ce code qui se prouve dans le css
soit celui ci..

/* General font families for common tags */
font,th,td,p {
font-family: Arial, Helvetica, sans-serif;}
a:link,a:active,a:visited { color : #7B5B3B; }
a:hover { text-decoration: underline; color : #7B5B3B; }
hr { height: 0px; border: solid #7B5B3B 0px; border-top-width: 1px;}

et vous placez la petite taille de lettre font-size: 12px; dans la phrase qui commence a:link
et la grande taille de lettre dans la phrase qui commence par font-size: 14px; dans la phrase qui commence par a:hover

soit comme ceci..

/* General font families for common tags */
font,th,td,p {
font-family: Arial, Helvetica, sans-serif;}
a:link,a:active,a:visited { font-size: 12px !important; color : #FB5B3B; }
a:hover { text-decoration: underline; font-size: 14px !important; color : #FB5B3B; }
hr { height: 0px; border: solid #7B5B3B 0px; border-top-width: 1px;}

voir l'effet sur ce forum en passant la souris sur les liens

sur ce forum test, j'ai placé les liens d'une autre couleur, alors de ce fait, le code devient comme ceci

/* General font families for common tags */
font,th,td,p {
font-family: Arial, Helvetica, sans-serif;}
a:link,a:active,a:visited { font-size: 12px; color : #996600 !important; }
a:hover { text-decoration: underline; font-size: 14px; color : #FF4500 !important; }
hr { height: 0px; border: solid #7B5B3B 0px; border-top-width: 1px;}