Style
l'affichage est modifiable
par le surfeur : par modifications des navigateurs
par le webmaster par le biais de scripts
Il est possible de faire un script pour une seule pageou de générer un script pour tout un site:
voici le code source code / source data / éléments stables / code page / exemple
--------------------
code
exemple : "http://www.a-nous-la-liberte.org/js/a-script.js"
/*
* Système de sélection CSS pour Francis
* Copyright (c) 2001 - Sébastien
* mailto:seb-web@arcturus.crt1.net
* http://arcturus.crt1.net/
*/
/* Déclarations et définitions globales */
var css_list = new Array;
var site_home = 'http://www.a-nous-la-liberte.org/';
var css_prefix = '/css/';
var css_suffix = '.css';
/* Initialisation : récupération des noms des CSS à charger */
function init()
{
var args = window.location.href;
var loc = document.location;if (args = args.match(/\?s=([^&^;^#]*)/))
css_list = args[1].split(',');
else if (document.referrer.match('^' + site_home)
&& (args = document.referrer.match(/(\?s=[^&^;^#]*)/)))
loc.href = loc.href.replace(/(\?|#).*/, "") + args[1] + loc.hash;
}
/* Chargement des CSS via le tag link */
function writeCSSLinks()
{
for (var i = 0; i < css_list.length; ++i)
document.writeln('<link href="' + css_prefix + css_list[i] + css_suffix
+ '" rel="stylesheet" type="text/css" />');
}
/* Affichage des tags chargés par writeCSSLinks() */
function writeCSSLinksDbg()
{
document.writeln('<pre>');
for (var i = 0; i < css_list.length; ++i)
document.writeln('<link href="' + css_prefix + css_list[i] + css_suffix
+ '" rel="stylesheet" type="text/css" />');
document.writeln('</pre>');
}
/* Exécution */
init();
writeCSSLinks();
Data
exemple les feuilles de styles sont dans un répertoire
"http://www.a-nous-la-liberte.org/css/"
La CSS peut être très simple :
"http://www.a-nous-la-liberte.org/css/graphique.css"
BODY { background-image: url(gris.gif);}ou complexe
"http://www.a-nous-la-liberte.org/css/css.css"A:Link { text-decoration: none; }
BODY {
font-family: Arial,hevetica,roman,system;
line-height: 1.1;
background: black;
background-image: url(black.gif);
color: white;
font-weight: normal;
font-size: 14pt;
text-align: left;
vertical-align: top;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 30px; /* copied from opposite side (right) */
}a:hover {color :yellow; background-color : purple; font-size:125%; text-decoration:underline;font-style: bold}
A:link {color :lime; text-decoration: underline } /* unvisited link */
A:visited {color :pink; text-decoration: none } /* visited links */
A:active {color :blue; text-decoration:underline} /* active links */A:link IMG { border: 0 }
A:visited IMG { border: 0 }
A:active IMG { border: 0 }
A:hover IMG {color : none; background-color :none}#elzoom {
position: absolute;
visibility: hidden;
}
#elmessage {
position: absolute;
left: 0; top: 0;
width: 200;
visibility: hidden;
text-align: center;
color: yellow;
font-size: 10pt;
font-weight: bold;
font-family: Arial;
}#item {
LEFT: 0px;
POSITION: absolute;
VISIBILITY: hidden
}
H1 { font-size: 24pt; font-weight: bold; text-align: center; vertical-align: middle; }
H2 { font-size: 21pt; font-weight: bold; text-align: left; vertical-align: middle; }
H3 { font-size: 18pt; font-weight: bold; text-align: left; vertical-align: middle; }
H4 { font-size: 16pt; font-style: normal; text-align: left; vertical-align: middle; }
H5 { font-size: 14pt; font-style: normal; text-align: left; vertical-align: middle; }
H6 { font-size: 12pt; font-style: normal; text-align: left; vertical-align: middle; }
address {font-size: 12pt; text-align: left; font-style: italic; vertical-align: middle;}.mesliens {body text: #000000; background: #CCCCCC; link: #0000EE; vlink: #804040; alink: #FF0000; border-top: solid thick red; border-right: none thin white; border-bottom: solid thick red; border-left: none thin white}
.meslienssurgris {body text: #000000; background: #CCCCCC; link: #0000EE; vlink: #804040; alink: #FF0000; border-top: solid thick red; border-right: none thin white; border-bottom: solid thick red; border-left: none thin white}
.mescommandes {body text: #000000; background: #FFCC00; link: #0000EE; vlink: #804040; alink: #FF0000; border : solid thin black}
.fondgris {background: #CCCCCC}
.fondorange { background: orange}
.fondopale {background: #FFFFCC }
.fondcyan {background :#CCFFFF }.Bold { font-weight: bold; }
.Italic { font-style: italic; }
.ordinaire { font-style: normal; }
.petit { font-style: normal; font-size: 8pt; }
.entete { font-weight: bold; font-style: italic; font-size: 18pt; }
.title { font-weight: bold; font-style: italic; text-align: center; vertical-align: middle; color: black; border: solid black; }
.cadrewhite { color: black; background: white; border: solid black; }
.cadreyellow { color: black; background: yellow; border-withborder: double black; }
.evident { color: black; background: yellow; border: none; }
.cadregrey { color: black; background: grey; border: solid black; }
.lineaire { border-top: solid thick red; border-right: none thin white; border-bottom: solid thick red; border-left: none thin white}
La page qui utilise le script:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="Tillemans Francis">
<meta name="GENERATOR" content="Mozilla/4.7 [fr] (Win98; I) [Netscape]">
<title>A-nous-la-liberte.org</title>
<script language="javascript" type="text/javascript" src="/js/a_script.js"></script>
<body><h1>
Test des anneaux et<br>
des choix multiples CSS</h1>
....<center>
<a href="index2.html?s=normalsize#LAYOUT">normal</a> /
<a href="index2.html?s=fondblanc#LAYOUT">fond blanc</a> /
fond
<a href="index2.html?s=graphique#LAYOUT">graphique</a> /
<a href="index2.html?s=big#LAYOUT">grand</a> /
<a href="index2.html?s=aep#LAYOUT">contraste</a> /
<a href="index2.html?s=print#LAYOUT">sortie printer</a>
</center>
......</body>
</html>