Générateur css

Soyez le premier à donner votre avis sur cette source.

Vue 7 972 fois - Téléchargée 674 fois

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 / Exemple :


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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

ON5MJ
Messages postés
1
Date d'inscription
mardi 3 octobre 2006
Statut
Membre
Dernière intervention
3 octobre 2006

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.
JulioDelphi
Messages postés
2226
Date d'inscription
dimanche 5 octobre 2003
Statut
Modérateur
Dernière intervention
18 novembre 2010
13
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
la_pin
Messages postés
275
Date d'inscription
mercredi 11 août 2004
Statut
Membre
Dernière intervention
15 décembre 2005

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...
fg85
Messages postés
370
Date d'inscription
dimanche 28 mars 2004
Statut
Membre
Dernière intervention
13 avril 2007

" Hmm ! 4/10." en tout cas ce n'est pas moi je n'est pas encore voté :)
cs_algori
Messages postés
868
Date d'inscription
dimanche 26 décembre 2004
Statut
Membre
Dernière intervention
26 février 2008
1
Hmm ! 4/10.
Ce n'est pas justifié.
Celui qui a mis ça doit expliquer pourquoi il a mis cette note.
@++

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.