Forum SELFHTML Archives du forum 2004 avril| Forum SELFHTML Archives du forum 2004 avril |
 |
Forum SELFHTML: Archives: |
 |
|
 |
|
Le message suivant est de: Seb, 
syber@ifrance.com, 23. 04. 2004, 15:31
Bonjour,
Je cherche à trouver un solution afin de déclarer des variables de couleurs en entête de feuille de style .
Je m'explique :
par exemple je veux que mon fond de page et mes ascenceurs aient la même couleur ....
Mais si je souhaite la changer , je suis du genre à pas vouloir m'embeter à les changer partout ....
Si quelqu'un à une idée .
 |
Le message suivant est de: Bartouille, bertrand.wattel@free.fr, 23. 04. 2004, 20:53
http://mythes.foret.free.fr
»» Bonjour,
»» Je cherche à trouver un solution afin de déclarer des variables de couleurs en entête de feuille de style .
»» par exemple je veux que mon fond de page et mes ascenceurs aient la même couleur ....
»» Mais si je souhaite la changer , je suis du genre à pas vouloir m'embeter à les changer partout ....
1ère solution : Créer un fichier feuille de style, par exemple mesStyles.css dans lequel tu définis les couleurs de fond de page et d'ascenceurs (de la même manière que dans une page normale, exemple BODY{background:black;} ...)
Ensuite, il suffit d'appeller le fichier au début des pages HTML, comme cela est expliqué ici :
http://selfhtml.selfhtml.com.fr/css/formats/incorporer.htm#separe
Il suffira de les changer une seule fois dans le fichier de style pour que les couleurs soient actualisées partout.
2ème solution ; Utiliser Javascript. On peux accéder aux propriété de style d'un document, comme cela est expliqué ici :
http://selfhtml.selfhtml.com.fr/javascript/objets/style.htm
Une simple variable en début de script, ou dans un fichier script séparé suffit alors à configurer les couleurs.
Il y a d'autre solutions, notamment avec PHP.
Bartouille
| |
Le message suivant est de: Alain, alain.verleyen@skynet.be, 26. 04. 2004, 14:30
»» »» Bonjour,
»» »» Je cherche à trouver un solution afin de déclarer des variables de couleurs en entête de feuille de style .
»» »» par exemple je veux que mon fond de page et mes ascenceurs aient la même couleur ....
»» »» Mais si je souhaite la changer , je suis du genre à pas vouloir m'embeter à les changer partout ....
»» 1ère solution : Créer un fichier feuille de style, par exemple mesStyles.css dans lequel tu définis les couleurs de fond de page et d'ascenceurs (de la même manière que dans une page normale, exemple BODY{background:black;} ...)
»» Ensuite, il suffit d'appeller le fichier au début des pages HTML, comme cela est expliqué ici :
»» http://selfhtml.selfhtml.com.fr/css/formats/incorporer.htm#separe
»» Il suffira de les changer une seule fois dans le fichier de style pour que les couleurs soient actualisées partout.
J'ai une problème similaire à Seb et je ne crois pas que la réponse soit adéquate. Dans la solution proposée, il faut quand même changer à plusieurs reprises la couleur si on désire passer du bleu au vert par exemple. Sur le site on trouve à propos des scrollbars à l'adresse suivante http://selfhtml.selfhtml.com.fr/css/proprietes/fenetreaffichage.htm#scrollbar
l'exemple :
<style type="text/css">
body, textarea {
background-color:#8C8CC6;
color:#FFFFFF;
font-family:"Andale Mono",Arial,sans-serif;
scrollbar-base-color:#8C8CC6;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#8C8CC6;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#000000;
scrollbar-track-color:#ACACE6;
}
Tout le problème est qu'on retrouve à 3 reprises la valeur #8C8CC6, si on veut la changer il faudra le faire au 3 endroits. Comment faire pour n'avoir qu'à changer à UN endroit.
»» 2ème solution ; Utiliser Javascript. On peux accéder aux propriété de style d'un document, comme cela est expliqué ici :
»» http://selfhtml.selfhtml.com.fr/javascript/objets/style.htm
»» Une simple variable en début de script, ou dans un fichier script séparé suffit alors à configurer les couleurs.
Le javascript est très bien pour changer les styles dynamiques mais à mon avis pas pour attribuer, simplement, une même couleur à un ensemble de balises ou d'attributs.
Si je me trompe ou si vous trouvez une solution je suis preneur, car moi aussi "je suis du genre à pas vouloir m'embêter à les changer partout ...."
Alain
| |
Le message suivant est de: Bartouille, bertrand.wattel_nospam@free.fr, 26. 04. 2004, 23:06
http://mythes.foret.free.fr
»» J'ai une problème similaire à Seb et je ne crois pas que la réponse soit adéquate. Dans la solution proposée, il faut quand même changer à plusieurs reprises la couleur si on désire passer du bleu au vert par exemple. Sur le site on trouve à propos des scrollbars à l'adresse suivante http://selfhtml.selfhtml.com.fr/css/proprietes/fenetreaffichage.htm#scrollbar
»» l'exemple :
»» <style type="text/css">
»» body, textarea {
»» background-color:#8C8CC6;
»» color:#FFFFFF;
»» font-family:"Andale Mono",Arial,sans-serif;
»» scrollbar-base-color:#8C8CC6;
»» scrollbar-3dlight-color:#FFFFFF;
»» scrollbar-arrow-color:#FFFFFF;
»» scrollbar-darkshadow-color:#000000;
»» scrollbar-face-color:#8C8CC6;
»» scrollbar-highlight-color:#FFFFFF;
»» scrollbar-shadow-color:#000000;
»» scrollbar-track-color:#ACACE6;
»» }
»» Tout le problème est qu'on retrouve à 3 reprises la valeur #8C8CC6, si on veut la changer il faudra le faire au 3 endroits. Comment faire pour n'avoir qu'à changer à UN endroit.
La solution de la feuille de style en externe s'adresse à ceux qui déclare les styles directement dans le fichier HTML (exactement comme ton exemple ci-dessus). Donc, non content de devoir changer 3 fois une couleur, il faut aussi le faire dans chaque fichier !
»» Le javascript est très bien pour changer les styles dynamiques mais à mon avis pas pour attribuer, simplement, une même couleur à un ensemble de balises ou d'attributs.
Le javascript est, entre autres, un excellent moyen d'accéder aux propriétés des élements d'une page HTML et il permet l'utilisation de variables. Il y a d'autres languages le permettant, mais pas la norme CSS en tout cas, y compris dans sa version 2, qui se contente de décrire.
En tout état de cause, notre problème étant d'attribuer 3 fois la même valeur à des objets différents, javascript prend tout son sens :
On crée un fichier JS à Inclure, ex couleurs.js :
var couleurFond = '#8C8CC6';
function colorieBarre()
{
document.body.style.backgroundColor = couleurFond;
document.body.style.scrollbarBaseColor = couleurFond;
document.body.style.scrollbarFaceColor = couleurFond;
}
Il ne reste plus qu'à l'appeller au début de chaque doc HTML :
<SCRIPT SRC="lechemin/couleurs.js">
et à appeller la fonction ad hoc dans la déclaration du body ;
<BODY ONLOAD="colorieBarre()">
Voilà, on n'a plus qu'une ligne à modifier. L'exemple est forcément limité puisqu'avec 3 valeurs, un copier-coller dans la feuille de style est nettement plus efficace. Cependant, c'est une bonne démonstration que javascript n'a pas seulement vocation à MODIFIER, mais également à INITIALISER des propriétés des éléments HTML.
On peut ainsi imaginer des exemples plus complexes où l'utilisateur, via javascript va décider de schémas de couleurs.
Bartouille
| |
Le message suivant est de: Alain, alain.verleyen@skynet.be, 27. 04. 2004, 10:12
»» Le javascript est, entre autres, un excellent moyen d'accéder aux propriétés des élements d'une page HTML et il permet l'utilisation de variables. Il y a d'autres languages le permettant, mais pas la norme CSS en tout cas, y compris dans sa version 2, qui se contente de décrire.
»» En tout état de cause, notre problème étant d'attribuer 3 fois la même valeur à des objets différents, javascript prend tout son sens :
»» On crée un fichier JS à Inclure, ex couleurs.js :
»» var couleurFond = '#8C8CC6';
»» function colorieBarre()
»» {
»» document.body.style.backgroundColor = couleurFond;
»» document.body.style.scrollbarBaseColor = couleurFond;
»» document.body.style.scrollbarFaceColor = couleurFond;
»» }
»» Il ne reste plus qu'à l'appeller au début de chaque doc HTML :
»» <SCRIPT SRC="lechemin/couleurs.js">
»» et à appeller la fonction ad hoc dans la déclaration du body ;
»» <BODY ONLOAD="colorieBarre()">
»» Voilà, on n'a plus qu'une ligne à modifier. L'exemple est forcément limité puisqu'avec 3 valeurs, un copier-coller dans la feuille de style est nettement plus efficace. Cependant, c'est une bonne démonstration que javascript n'a pas seulement vocation à MODIFIER, mais également à INITIALISER des propriétés des éléments HTML.
Merci de ta réponse. Cela revient à dire en fait qu'on ne peut pas le faire SIMPLEMENT, sinon avec une fonction de remplacement dans un éditeur.
La solution de javascript pour initialiser, même si elle fonctionne, ne me semble pas très bonne car elle rend la feuille de style externe caduque. En effet, soit tu passes tous les styles dans javascript pour les initialiser mais alors la notion de feuille de style perd son sens. Soit tu les laisses les autres styles dans une feuille à part, mais alors tu te retrouves avec 2 documents (css, et js) à gérer, ce qui n'est pas une amélioration de l'efficacité.
Donc on en reste à la bonne vieille solution de "Find & Replace". On fera avec hein ;-)
Alain
PS: Est-ce que la norme CSS3 en préparation prévoit une telle possibilité ?
| |
Le message suivant est de: Bartouille, bertrand.wattel_pasDeSpam@free.fr, 27. 04. 2004, 19:32
http://mythes.foret.free.fr
»» Donc on en reste à la bonne vieille solution de "Find & Replace". On fera avec hein ;-)
Dans ce cas, cela me semble en effet beaucoup plus raisonnable ;-)
»» PS: Est-ce que la norme CSS3 en préparation prévoit une telle possibilité ?
Alors là, aucune idée.
QUESTION : Je n'utilise pas XML et ses composantes de style, peut-être existe-t'il déjà une solution de ce côté ?
Bartouille
|
| Forum SELFHTML Archives du forum 2004 avril |
© 1998-2004 selfhtml@fr.selfhtml.org
(CSS)