CSS-Cascading Style Sheet -Généralités
|
 |
Liens CSS :
Quelques explications... (forums All HTML ou EJS)
Les styles :
-1-Balise Style... si c'est pour tous les liens tu redéfinis le style lien :
<HEAD>
<STYLE><!--
A{text-decoration:none;}
--></STYLE>
</HEAD>
-2-Propriété Style dans la balise... si c'est seulement pour un lien tu définis le style directement dans sa balise :
<A STYLE="text-decoration:none;" HREF="#">le lien</A>
-3-Classe de liens... si c'est pour plusieurs liens, tu définis un type de lien :
<HEAD>
<STYLE><!--
A.mesLiens {text-decoration:none;}
--></STYLE>
</HEAD>
ensuite : <A CLASS="mesLiens" HREF="#">mon lien</A>
-4-Feuille de style... pour prendre en compte toutes les pages web, tu utilises une feuille de style :
Un fichier STYLE.CSS
<!--
A{text-decoration:none;}
-->
et, dans la page : <HEAD><link rel="stylesheet" href="STYLE.CSS" type="text/css"></HEAD>
Feuille CSS selon le navigateur client
<SCRIPT LANGUAGE="JavaScript"><!--
var agent=navigator.userAgent.toLowerCase();
var ver = parseInt(navigator.appVersion);
if ((agent.indexOf("mozilla") != -1) && (ver >= 4) &&
(navigator.appName.indexOf("Netscape") != -1))
document.write('<LINK HREF="style/stylenetscape.css" REL="stylesheet" TYPE="text/css">');
else
document.write('<LINK HREF="style/styleiexporer.css" REL="stylesheet" TYPE="text/css">');
//--></SCRIPT>
Style ScrollBar en JavaScript
Voici la succession et c'est impératif :
a:link {.............}
a:visited {.............}
a:hover {.............}
a:active {.............}
a:focus {.............}
a:focus:hover {.............}
-------------------------------------travers bourquin
<head>...
<STYLE type="text/css">
.lienblanc {
a:link { color:#FFFFFF; text-decoration:none} // link : en vision normale premier affichage
a:visited { color:#FFFFFF; text-decoration:none } // visited : quand on l'a déjà visité
a:hover { color:#FFFFFF; text-decoration:none } // hover : au moment où la souris passe dessus
a:active { color:#FFFFFF; text-decoration:none} // active : quand on vient de cliquer dessus après l'ouverture du lien
a:active:hover etc.
a:visited:hover etc.
}
ou
a.lienblanc:link { color:#FFFFFF; text-decoration:none}
a.lienblanc:visited { color:#FFFFFF; text-decoration:none}
a.lienblanc:hover { color:#FFFFFF; text-decoration:none}
a.lienblanc:active { color:#FFFFFF; text-decoration:none}
etc.
</STYLE>
</head>
et lien <a href="http://www.site.ch" class="lienblanc">site.ch</a>
A, A:LINK, A:VISITED, A:ACTIVE, A:FOCUS, A:HOVER { text-decoration:none; }
Propriétés (hors couleurs) (Propriétés Colors)
.nomdustyle {
display:none; visibility:hidden;
border:1px #333399 solid; border-color:#333399 solid; border-width:1px; border-style:solid; border-right-style:solid; border-right-width:thin; border-right-color=grey; border-right-weigth:100%;
color:black;
margin:0.5in; margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px;
font:bold 12px Verdana; font-family:Verdana, Arial, Helvetica, sans-serif; font-style:normal; font-size:8pt 15px; font-weight:bold normal;
line-height:12pt normal;
letter-spacing:-1pt normal; word-spacing:normal;
text-align:center justify; text-decoration:none underline overline; text-transform:none uppercase lowercase;
position:relative absolute; left:10; top:10; width:90%; height=+30px;
cursor:hand;
}
border-right-style:solid; margin-right:100%; border-right-width:thin; border-right-color=grey; border-right-weigth:100%;
body {
background-color:#FFFFFF; background-attachement:fixed; background-position:center center;
background-repeat:no-repeat; //pour ne pas répéter l'image de fond
}
Html -> image BackGround fixe
<body background="tonbg.jpg" bgproperties="fixed" text="#FFFFFF" link="#000080"> (ne fonctionne pas avec NS 4.61)
ou <body background="tonbg.gif" style="background-attachement:fixed;">
Html -> image BackGround sans répétition
<body background="mon_image.gif" style="background-repeat:no-repeat;">
Html -> image en background fixe sans répétition
<body background="image.gif" style="background-repeat:no-repeat; background-attachment:fixed;">
(Vyse)
<STYLE TYPE="text/javascript">
with (tags.P) {
color = "#FF0000";
fontSize = "20pt";
margin = "0.5in";
}
</STYLE>
<STYLE TYPE="text/javascript">
classes.yellow.all.color="#FF0000"
</STYLE>
some yellow text
<STYLE TYPE="text/javascript">
classes.BigText.all.fontSize = "20pt"
ids.BlueText.color = "#0000FF"
</STYLE>
<P CLASS="BigText" ID="BlueText">Some big blue text
<STYLE TYPE="text/javascript">
contextual(tags.H1, tags.EM).color = "green";
</STYLE>
text-align en CSS donne textAlign en js, de meme pour les autres Vyse
