28173 sujets

CSS et mise en forme, CSS3

Ajouter des rules (classes ou def de tag) dans Opera ou Firefox

Tout est dit dans le titre.
Comment fait-on comme ci-dessous pour IE ? (marche pas avec Opera et FX)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Style Sheets Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function newRule() {
    document.styleSheets.MyStyles.addRule("P","color:blue");
}
-->
</SCRIPT>

<STYLE ID="MyStyles">
H1 {color:red}
H2 {color:red;font-style:italic}
</STYLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
<META NAME="AUTHOR" CONTENT="InetSDK">
<META NAME="MS.LOCALE" CONTENT="EN-US">
<META NAME="ROBOTS" CONTENT="noindex">

<!-- SAMPLE_STYLE_START -->
<LINK REL="stylesheet" HREF="/workshop/basicSDKIE4.css" TYPE="text/css">
<!-- SAMPLE_STYLE_END -->
</HEAD>
<!--TOOLBAR_START-->
<!--TOOLBAR_EXEMPT-->
<!--TOOLBAR_END-->

<BODY onclick="newRule()" TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF" LINK="#000000" VLINK="#808080" ALINK="#000000">
<BLOCKQUOTE CLASS="body">

<H1>Welcome!<HR SIZE=1></H1>
<P>This document uses style sheets.</P>
<H2>Ways to Include Style Sheets</H2>
<UL>
<LI>LINK
<LI>STYLE
<LI>@import
</UL>

<!-- START_PAGE_FOOTER -->
<BR><BR><BR>
&copy; <A CLASS="clsIncCpyRt" HREF="http://www.microsoft.com/isapi/gomscom.asp?TARGET=/info/cpyright.htm" TARGET="_top"> 2006 Microsoft Corporation. All rights reserved. Terms of use</A>.
<!-- END_PAGE_FOOTER -->
</BLOCKQUOTE>
</BODY>
</HTML>

http://msdn.microsoft.com/workshop/author/dynstyle/styles.asp?frame=true
Salut.

Tout est dans le titre, peut-être, mais je ne comprends pas ce que tu as l'intention de faire.

Une formulation en français dans le texte de ce que tu recherches nous aidera probablement plus à t'aider que ce tas de javascript, là-haut
Evidemment, on ne sait pas forcémment ce qu'est un rule...
Mettons que dans une table j'ai défini le style des mes div :
div {border:2px solid black;}
Maintenant en script, je voudrais ajouter une def pour créer une définition pour mes P, par exemple...
C'est ce que fait le script de Microsoft, donné plus haut. Il ajoute le déf et les met en couleur bleue.

function newRule() {
    document.styleSheets.MyStyles.addRule("P","color:blue");
}

Et je me demande quelles peuvent bien être les correspondantes pour Opera et Fx, s'il y a.
Désolé, ça ne m'a pas beaucoup aidé ... est-ce que tu essaies de mettre tous les paragraphes en bleu ?

Ou plutôt, si j'ai bien compris le but, tu essaies de colorier tous les paragraphes en bleu dès que le visiteur clique n'importe où dans le <body> ?
Modifié par Sopo (12 Jul 2006 - 16:56)
Heu… je suis également perdu. C'est bien de ruler les def des staïles, mais ça ne me dit pas grand chose.

Par contre, je connais les feuilles de style CSS, c'est un machin assez simple d'utilisation, d'ailleurs tu en as presque une dans ta page :
<STYLE ID="MyStyles">
H1 {color:red}
H2 {color:red;font-style:italic}
</STYLE>

Je dis presque, parce que la balise ouvrante est mal rédigée. Ça serait plutôt :
<STYLE TYPE="text/css">
H1 {color:red}
H2 {color:red;font-style:italic}
P {color:blue;}
</STYLE>

Au passage, j'ai rajouté la propriété pour avoir des paragraphes bleus…
Non, ce n'est pas ça. C'est trop évident.
Quand on clique sur le body, c'est mis en exemple.
Je sais que je pose rarement des questions alors je m'explique mal, mieux en répondant.
Il s'agit de la création d'un élément dans la table de style qui a lieu lors de la lecture de celle-ci par le visiteur. Ça peut être pour un tag (p, div ou autre) ou une classe. Quand on passe sur un lien, ou d'importe où.
A quoi ça sert ? C'est à voir...
D'ailleurs c'est bien ce qu'a compris Sopo, et si vous regardez dans la prog vous avez :
document.styleSheets.MyStyles.addRule("P","color:blue");

document.styleSheets. : nom qui fait référence à toutes les tables
MyStyles : le nom de la table concernée
addRule : ajouter une définition/classe dans la table MyStyles
("P","color:blue"); : la définition en script qui ajoute P {color:blue}
Disons qu'en fait, tu cherches à créer une interaction avec le visiteur qui agirait sur le style de la feuille ... j'ai l'impression que tu te casses un peu la tête avec des mots bizarres alors qu'il y plus simple Smiley ohwell

C'est possible à l'aide de javascript en utilisant par exemple la fonction getElementById.

Par exemple, pour que le paragraphe "test" devienne bleu lorsque l'utilisateur clique sur un lien, tu peux écrire une fonction "deviensBleu" (vive Houdini Smiley biggol )
function deviensBleu() {
    document.getElementById("test").style.color = "blue";
    }

et ajouter un lien sur la page qui contrôle le changement de couleur 
<a href="javascript:deviensBleu" title="">changer la couleur en bleu"</a>


Ca va sûrement pas marcher (je suis au niveau zéro en javascript) mais je crois que l'idée est claire et simple, à côte du "créer des tags dans les tebbles of staïle Smiley cligne
Sujet clos
Aller à