CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 10:20:25

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

GÉNÉRATEUR CSS

Information sur la source

Note :

8,20 / 10

Catégorie :Divers Niveau :Débutant Date de création :21/06/2005 Date de mise à jour :22/06/2005 16:29:51 Vu / téléchargé :6 315 / 633

Auteur : crashtest

Ecrire un message privé

Site perso

Commentaire sur cette source (15)

Ajouter un commentaire et/ou une note

Description

Alors voici un générateur CSS alors j'ai voulu minimizer à mort le script ba il reste plus que 5 lignes de javascript lol j'ai pas fait exprès bon sinon dite moi si j'ai rien oublié thx et laissé vos commentaire thx @++

Source

<html>
<head>
<title>Générateur CSS</title>
<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>
</head>
<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>
</body>
</html>

<html>
<head>
	<title>Générateur CSS</title>

<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>

</head>

<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>&nbsp;</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>

</body>

</html>

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Generateur_CSS.html 13 214 octets

Télécharger le zip

Historique

21 juin 2005 10:32:10 :: changement du name en id pour la petite case texte
21 juin 2005 17:25:53 :: Voila maélioration du bouton interne/externe qui déconnais sur FireFox maintenan tout marche aller zou au générateur @++
22 juin 2005 01:39:58 :: ALors je vais faire simple j'ai rajouté une petite funtion à mon Generateur CSS un bouton "tester" pour tester le CSS que l'on vien de faire.
22 juin 2005 16:29:51 :: lu, alors j'ai réduit considérablement le code j'ai gagné 3Ko sa ne parrait pas beaucoup mais sa représente un stoke de ligne. merci pour ton astuce fg85 sa va me servir plus tard aller @++

Sources du même auteur

JUKEBOX AVEC RADIO

FAIRE CONNAITRE À SES AMIE SON SITE WEB

GÉNÉRATEUR JAVASCRIPT

SE CONECTER AU SERVER FTP

LES CALCULETTES DE CRASHTEST

Toutes les sources de crashtest

Sources de la même categorie

SLIDESHOW IMAGES ET TEXTES EN PUR JAVASCRIPT par ansuzpeorth

INPUT TEXT AUTOMATIQUE CREATION SUPPRESSION par lycanges

TABLE_SV : TABLEAU DYNAMIQUE, MONTRER/CACHER COLONNE SUR DEM... par synanceia

COLONNES ADAPTABLES EN HAUTEUR par dronoide

VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol

Toutes les sources de la catégorie Divers

Commentaires et avis

Commentaire de la_pin le 21/06/2005 11:13:11

Super boulot, ton générateur est génial !

Commentaire de algori le 21/06/2005 11:45:05

J'ai pas eu trop le temps de regarder la source mais ça a l'air sympathique. Le seul truc qui serait intéressant à faire, c'est de créer un fichier css et de mettre le code dedans.
Par contre, si c'est possible, je pense que la portabilité du code risque d'en prendre un coup.
8/10
@++

Commentaire de crashtest le 21/06/2005 12:23:22

lu,
merci,
eux la je vien de m'apercevoir que le bouton interne/externe ne marchai pas sous FireFox sinon sous ie il marche donc je vai aranger sa assez vite aller @++ et merci

Commentaire de darkman2 le 21/06/2005 15:55:58

t'as fait du bon boulot
note 9/10

Commentaire de crashtest le 21/06/2005 17:28:43

lu,
merci pour les notes,
Alors voila pour les utilisateur comme moi de FireFox et bien maintenan il marche a merveille plus de soucis sur le bouton interne/externe. aller @++ et amusez-vous bien.

Commentaire de crashtest le 22/06/2005 01:42:47

re, tous
Alors j'ai rajouté le bouton tester pour plus de facilité a faire son CSS. voila @++
maintenan je vais juste voir si je peux minimiser d'avantage le code car la il a pris de l'empleur @++

Commentaire de fg85 le 22/06/2005 11:35:20

Si tu pouvait juste améliorer le style lol, sinon le code à l'air bon d'après ce que je vois.

Petite astuce pour optimiser le code :) :
Au lieu de tout le temps faire des "document.getElementById('id').value="

Créé une fonction :
function getidvalue(id)
{
return document.getElementById(id).value;
}

Ainsi tu remplacera ça (par exemple) :
if(document.getElementById('00').value == 'interne ')

Par :
if(getidvalue('00') == 'interne ')

(Normalement sa fonctionne :)

Donc voila, sa te permettra de largement raccourcir le code (je pense à ça : <input type="button" value="Valider" onclick="selector(document.getElementById('nom').value + ' {');">) et d'augmenter la lisiblité .

Cordialement

----------------------------
http://fg.logiciel.free.fr

Commentaire de jjdagadir le 22/06/2005 12:54:00

Bravo pour l'idée, bravo pour le code et triple bravo pour l'envie de partager et d'aider. Donc çà vaut les dix sans problèmes.
Kenavo

Commentaire de crashtest le 22/06/2005 15:41:58

Merci sa me touche beaucoup jjdagadir.

Commentaire de crashtest le 22/06/2005 16:36:35

lu,
alors merci fg85 sa ma beaucoup servis à réduire le code et sa va me servir plus tard.
voila j'ai minimisé le script à fond je pense aller je ne touche plus à rien je le trouve parfait pour moi, meme le style lol. Maintenan je vai amélioré mon générateur JS car je trouve qu'il manque quelque fonction. Aller @++ et si vous désirez utiliser mes générateurs ou meme les dl visité mon site web aller @++
http://crashtest666.serveftp.net

Commentaire de algori le 22/06/2005 18:10:11

Hmm ! 4/10.
Ce n'est pas justifié.
Celui qui a mis ça doit expliquer pourquoi il a mis cette note.
@++

Commentaire de fg85 le 22/06/2005 18:55:22

" Hmm ! 4/10." en tout cas ce n'est pas moi je n'est pas encore voté :)

Commentaire de la_pin le 22/06/2005 19:04:29

Doit y avoir des membres du genre bizares, moi aussi, dans une de mes sources, j'ai eu 2 10/10 et un 1/10...

Commentaire de JulioDelphi le 22/06/2005 22:05:55 administrateur CS

Certaines sources plaisent a certaines personne et aussi l'inverse. la_pin, n'as tu jamais noté 1/10 sur une source où d'autres ont mis 10/10 ? ^^

moi je la trouve bien celle ci, je mets 8/10

Commentaire de ON5MJ le 03/10/2006 17:57:10

Bonjour,

Je débarque dans le CSS et voyant ce générateur, je me dis: "Chouette, cela va faire le boulot pour moi." Que nenni, car j'ai pas compris comment on s'en sert. Quelqu'un aurait-il la patience de me mettre quelques lignes explicatives.

Ajouter un commentaire

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

RE : CODE BUG JAVASCRIPT par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP