new!
générateur CSS
Script posté par : jackinator666 - (Sites : crashtest - crashtest666 )Vous aussi, postez vos scripts en cliquant ici . Description voila j'ai créé un générateur css complet fini il est nikel
Compatibilité : Ce script utilise le DHTML
Chiffres : Date de création : 8/07/2005
Dernière modif : -
Visites de la page : 36533
Envois par mail : 626
Exemple :
Générateur de CSS Par Crashtest
Le code :
Entre <HEAD> et </HEAD> :<STYLE type="text/css">
<!--
body {background-color:#000000; color:#FFD700;}
h1,h3 {text-align:center; color:red;}
input {text-align:center; color:#FFD700; background-color:red; font-weight:bolder}
select {text-align:left; color:red; background-color:#FFD700;}
textarea {color:red; background-color:orange;}
-->
</STYLE>
<script LANGUAGE=JavaScript>
<!--
function idvalue(id) {return document.getElementById(id).value;}
function active() {
var text1 = "Une fois que tu as finis ton CSS tu le copie et le colle dans un fichier.txt que tu renommeras en .css et sur ta page ou tu veux mettre ta feuille tu mais se code en changeant \"fichier.css\" par ton nom de fichier.\r\r<link rel=\"stylesheet\" type=\"text/css\" href=\"fichier.css\">";
var text2 = "Une fois que tu as fini ton CSS tu copie le code que tu viens de creer et tu le colle dans la partie <head></head> de ta page web.\r\r<style type=\"text\/css\">\r...\r...\r</style>";
if(idvalue('00') == 'interne ')
{ document.getElementById('00').value = 'externe';
document.getElementById('1').style.visibility = 'hidden';
document.getElementById('2').style.visibility = 'hidden';
document.getElementById('tnom2').value = text1;return(true); }
if(idvalue('00') == 'externe')
{ document.getElementById('00').value = 'interne ';
document.getElementById('1').style.visibility = 'visible';
document.getElementById('2').style.visibility = 'visible';
document.getElementById('tnom2').value = text2;return(true); }
}
function addtag(a) {document.getElementById('tnom').value=document.getElementById('tnom').value + a + '\r'}
function addtag2(a, b) {document.getElementById('tnom').value=document.getElementById('tnom').value + a + b +';\r'}
function selector(a) {document.getElementById('tnom').value=document.getElementById('tnom').value + a +'\r'; alert('N\'oublier pas une fois fini le style de se selector\nfermer avec \"}\" pour passer à un autre selector.');}
function look() {
j = "<table><tr><td>lien<br><a href=\"#\">toto1 lien</a><br><a href=\"#\">toto2 lien</a><br><a href=\"#\">toto3 lien</a></td><td><input type=\"button\" value=\"toto1 input\" name=\"bnom\"><br><input type=\"text\" name=\"nom\" size=\"20\" value=\"toto2 input\"></td><td><textarea rows=\"4\" name=\"tnom\" cols=\"20\">toto textarea toto textarea toto textarea toto textarea toto textarea toto textarea</textarea></td><td><select size=\"1\" name=\"combo\"><option>toto1 select</option><option>toto2</option><option>toto3</option></select></td></tr><tr><td><H1>toto H1</H1><H2>toto H2</H2></td><td><H3>toto H3</H3><H4>toto H4</H4></td><td><H5>toto H5</H5><H6>toto H6</H6></td><td><iframe src=\"http://google.fr\"></iframe></td></tr><tr><td><label>toto1 label</label><br><label>toto2 label</label><br><label>toto3 label</label></td><td><font>toto1 font</font><br><font>toto2 font</font><br><font>toto3 font</font></td><td><img src=\"\" alt=\"toto1 img\"><img src=\"\" alt=\"toto2 img\"></td><td rowspan=\"2\"><ul><li>toto1 li</li><li>toto2 li</li><li>toto3 li</li></ul><ol type=\"A\"><li>toto1 li</li><li>toto2 li</li><li>toto3 li</li></ol></td></tr><tr><td colspan=\"3\"><p>toto1 p toto2 p toto3 p<br>toto4 p toto5 p toto6 p toto7 p<br>toto8 p toto9 p toto10 p toto11 p toto12 p </p></td></tr></table>";
i = idvalue('tnom');
if(idvalue('00') == 'interne ') {
f = window.open();
f.document.write('<html><head><title>Générateur CSS</title>\r' + i + '</head>\r<body>\r' + j + '\r</body>\r</html>');
f.document.close();}
if(idvalue('00') == 'externe') {
f = window.open();
f.document.write('<html><head><title>Générateur CSS</title>\r<style type=\"text\/css\">\r' + i + '\r</style>\r</head>\r<body>\r' + j + '\r</body>\r</html>');
f.document.close();}
}
-->
</script>
Entre <BODY> et </BODY> :<h1>Générateur de CSS</h1><h3>Par Crashtest</h3><br>
<form>
<center><table>
<tr>
<td align="center">
Tu utilise une feuille de style <input type="button" value="interne " id="00" onclick="active();">
<input type="button" value="Début du CSS" id="1" onclick="addtag('<STYLE type=text/css>\r<!--');">
<input type="button" value="Fin du CSS" id="2" onclick="addtag('-->\r</STYLE>');">
<input type="button" value="Tester" onclick="look();">
<input type="reset" value="Recommencer"><br> </td><td></td>
</tr>
<tr>
<td colspan="2">
<select size="1" id="color1" onChange="addtag2('color: ', idvalue('color1'));">
<option value="">color</option>
<option value="black">noir</option>
<option value="#696969">gris foncé</option>
<option value="gray">gris</option>
<option value="silver">gris clair</option>
<option value="cyan">cyan</option>
<option value="#00bfff">bleu-ciel</option>
<option value="blue">bleu</option>
<option value="navy">bleu marine</option>
<option value="#20b2aa">bleu-vert</option>
<option value="#32CD32">vert clair</option>
<option value="green">vert</option>
<option value="#006400">vert foncé</option>
<option value="olive">olive</option>
<option value="#bdb76b">kaki</option>
<option value="maroon">marron</option>
<option value="#ffd700">or</option>
<option value="yellow">jaune</option>
<option value="#ffa500">orange</option>
<option value="#FFA07A">saumon</option>
<option value="red">rouge</option>
<option value="#8b008b">violet</option>
<option value="magenta">magenta</option>
<option value="#ffc0cb">rose</option>
<option value="#FFFFF0">ivoire</option>
</select>
<select size="1" id="fsize" onChange="addtag2('font-size: ', idvalue('fsize'));">
<option value="">Font-size</option>
<option value="80%">80%</option>
<option value="100%">100%</option>
<option value="150%">150%</option>
<option value="200%">200%</option>
<option value="250%">250%</option>
<option value="300%">300%</option>
<option value="350%">350%</option>
<option value="400%">400%</option>
</select>
<select size="1" id="ffamily" onChange="addtag2('font-family: ', idvalue('ffamily'));">
<option value="">Font-family</option>
<option value="arial">arial</option>
<option value="comic sans ms">comic sans ms</option>
<option value="courier new">courier new</option>
<option value="times new roman">times new roman</option>
<option value="verdana">verdana</option>
</select>
<select size="1" id="fstyle" onChange="addtag2('font-style: ', idvalue('fstyle'));">
<option value="">Font-style</option>
<option value="normal">normal</option>
<option value="italic">italic</option>
<option value="oblique">oblique</option>
</select>
<select size="1" id="fweight" onChange="addtag2('font-weight: ', idvalue('fweight'));">
<option value="">Font-weight</option>
<option value="normal">normal</option>
<option value="bold">bold</option>
<option value="bolder">bolder</option>
<option value="lighter">lighter</option>
</select><br>
<input type="button" value="Background-image" onclick="addtag2('background-image: ', 'url(fichier.gif)');">
<select size="1" id="bgpos" onChange="addtag2('background-position: ', idvalue('bgpos'));">
<option value="">Background-position</option>
<option value="top">top</option>
<option value="center">center</option>
<option value="bottom">bottom</option>
<option value="left">left</option>
<option value="right">right</option>
</select>
<select size="1" id="bgcolor" onChange="addtag2('background-color: ', idvalue('bgcolor'));">
<option value="">Background-color</option>
<option value="black">noir</option>
<option value="#696969">gris foncé</option>
<option value="gray">gris</option>
<option value="silver">gris clair</option>
<option value="cyan">cyan</option>
<option value="#00bfff">bleu-ciel</option>
<option value="blue">bleu</option>
<option value="navy">bleu marine</option>
<option value="#20b2aa">bleu-vert</option>
<option value="#32CD32">vert clair</option>
<option value="green">vert</option>
<option value="#006400">vert foncé</option>
<option value="olive">olive</option>
<option value="#bdb76b">kaki</option>
<option value="maroon">marron</option>
<option value="#ffd700">or</option>
<option value="yellow">jaune</option>
<option value="#ffa500">orange</option>
<option value="#FFA07A">saumon</option>
<option value="red">rouge</option>
<option value="#8b008b">violet</option>
<option value="magenta">magenta</option>
<option value="#ffc0cb">rose</option>
<option value="#FFFFF0">ivoire</option>
</select><br>
<select size="1" id="txtali" onChange="addtag2('text-align: ', idvalue('txtali'));">
<option value="">text-align</option>
<option value="left">left</option>
<option value="right">right</option>
<option value="center">center</option>
<option value="justify">justify</option>
</select>
<select size="1" id="txtdeco" onChange="addtag2('text-decoration: ', idvalue('txtdeco'));">
<option value="">text-decoration</option>
<option value="none">none</option>
<option value="underline">underline</option>
<option value="overline">overline</option>
<option value="line-through">line-through</option>
</select>
<select size="1" id="txttran" onChange="addtag2('text-transform: ', idvalue('txttran'));">
<option value="">text-transform</option>
<option value="capitalize">capitalize</option>
<option value="uppercase">uppercase</option>
<option value="lowercase">lowercase</option>
<option value="none">none</option>
</select>
<select size="1" id="bordwid" onChange="addtag2('border-width: ', idvalue('bordwid'));">
<option value="">border-width</option>
<option value="1px">1px</option>
<option value="2px">2px</option>
<option value="3px">3px</option>
<option value="4px">4px</option>
<option value="5px">5px</option>
</select>
<select size="1" id="bordstyl" onChange="addtag2('border-style: ', idvalue('bordstyl'));">
<option value="">border-style</option>
<option value="none">none</option>
<option value="dotted">dotted</option>
<option value="dashed">dashed</option>
<option value="solid">solid</option>
<option value="double">double</option>
<option value="groove">groove</option>
<option value="ridge">ridge</option>
<option value="inset">inset</option>
<option value="outset">outset</option>
</select>
<select size="1" id="bordcolor" onChange="addtag2('border-color: ', idvalue('bordcolor'));">
<option value="">border-color</option>
<option value="black">noir</option>
<option value="#696969">gris foncé</option>
<option value="gray">gris</option>
<option value="silver">gris clair</option>
<option value="cyan">cyan</option>
<option value="#00bfff">bleu-ciel</option>
<option value="blue">bleu</option>
<option value="navy">bleu marine</option>
<option value="#20b2aa">bleu-vert</option>
<option value="#32CD32">vert clair</option>
<option value="green">vert</option>
<option value="#006400">vert foncé</option>
<option value="olive">olive</option>
<option value="#bdb76b">kaki</option>
<option value="maroon">marron</option>
<option value="#ffd700">or</option>
<option value="yellow">jaune</option>
<option value="#ffa500">orange</option>
<option value="#FFA07A">saumon</option>
<option value="red">rouge</option>
<option value="#8b008b">violet</option>
<option value="magenta">magenta</option>
<option value="#ffc0cb">rose</option>
<option value="#FFFFF0">ivoire</option>
</select>
</td><td></td>
</tr>
<tr>
<td><textarea rows="30" id="tnom" cols="80"></textarea></td>
<td valign="top">Lien :<br>
<input type="button" value="non visité" onclick="selector('a:link {');">
<input type="button" value="visité" onclick="selector('a:visited {');">
<input type="button" value="survolé" onclick="selector('a:hover {');"><br>
<input type="button" value="Body" onclick="selector('body {');"><br>
<input type="button" value="Table" onclick="selector('table {');">
<input type="button" value="Td" onclick="selector('td {');"><br>
<input type="button" value="Input" onclick="selector('input {');">
<input type="button" value="Select" onclick="selector('select {');">
<input type="button" value="Textarea" onclick="selector('textarea {');"><br>
<input type="button" value="H1, H2" onclick="selector('h1, h2 {');">
<input type="button" value="H3, H4" onclick="selector('h3, h4 {');">
<input type="button" value="H5, H6" onclick="selector('h5, h6 {');"><br>
<input type="button" value="Frame" onclick="selector('frame {');">
<input type="button" value="Frameset" onclick="selector('frameset {');">
<input type="button" value="iframe" onclick="selector('iframe {');"><br>
<input type="button" value="Label" onclick="selector('label {');"><br>
<input type="button" value="Font" onclick="selector('font {');"><br>
<input type="button" value="Img" onclick="selector('img {');"><br>
<input type="button" value="Li" onclick="selector('li {');"><br>
<input type="button" value="P" onclick="selector('p {');"><br>
Vos propres selectors :<br>
<input type="text" id="nom" size="20">
<input type="button" value="Valider" onclick="selector(idvalue('nom') + ' {');"><br><br>
<textarea rows="8" id="tnom2" cols="27">Une fois que tu as fini ton CSS tu copie le code que tu viens de creer et tu le colle dans la partie <head></head> de ta page web.
<style type="text/css">
...
...
</style></textarea></td>
</tr></table></center>
</form>
Services email :
Je désire recevoir ce script par email
Je désire recevoir un email en cas de modification de ce script
Je désire m'abonner à la newsletter de l'éditeur JavaScript
Les annotations des visiteurs :
De b3j3 - le 09-07-2005 salut
dans la newsletter, je vois, css,complet et nickel, forcément, je clique.et là...tu annonces, je m'adresse à l'auteur du script, "utilise le dhtml". pourquoi tu ne le fait pas à fond? çà permet de cacher tout les selects.de plus, les sélecteurs css, il en manque un bon nombre ainsi que des propriétés.
a:link {
a:visited {
a:hover {
et active?
label, bien, peu y pense. mais le reste? idem pour table et td, il manque les tr th caption, dommage.
pour un générateur css nouvelle génération, il conviendrais d'utiliser le xhtml, c'est la norme, aussi les iframe, sont à supprimer...
en bref, sympà mais franchement incomplet.pour l'instant ce n'est qu'une ébauche.ce n'est pas aujourd'hui que j'abandonnerais topstyle ;-) De Master_Zoulou - le 09-07-2005 Je verrais bien en haut de ce générateur une case à cocher "CSS externe", qui proposerait, pourquoi pas, une balise pour insérer la CSS dans la page...
Nous sommes sur l'éditeur JavaScript, certes, mais où est l'avantage de CSS s'il faut répéter le code dans chaque page ?... :-) De BackInBiz - le 10-07-2005 Je ferais un petit script pour qu'une fois une option selectionner sur les SELECT la valeur du select se remette sur 0 ...
Juste mon avis ! De boloba - le 11-07-2005 vraiment bien et complet le meilleur trouvé pour l'instant bravo
boloba De Ragnarock - le 01-10-2005 WoooOOWw! Je tenais juste à dire que c'est magnifique! Merci! De the_magicien - le 12-04-2006 Je crois que tu oublies un élément dans "text-decoration". Cet élément ne marche pas sous IE mais fonctionne à merveille sous FireFox c'est tout simplement l'attribut "blink" qui fait clignoter le texte.
>> Poster une annotation sur ce script