Générateur css

Télécharger le projet
Commenter

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>
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (cs_crashtest)