可见即所得的CSS编辑设计

style 也是标签（在非ie内核的浏览器中支持），我们将style设置成 contenteditable的时候，那么那的内容就可以编辑了。仔细的体验下，如果我们将背景修改成红色的。那么只要书写完，立马呈现。哇靠，这很方 便我们以后写那种动态的编辑器效果呢，等有时间的话，我再试试。

效果演示

 

附上我研究的代码：

01 <!DOCTYPE HTML>
02 <html >
03 <head>
04 <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
05 <title></title>
06 <style type="text/css">
07 body style {
08     display: block;
09     background: #333;
10     color: white;
11     font: 13px/1.8 Monaco, Mono-Space;
12     padding: 20px;
13     white-space: pre;
14     margin:0 auto;
15     width:500px;
16     height:100px;
17 }
18 </style>
19 </head>
20 <body>
21     <style contenteditable>body {background: green;}</style>
22 </body>
23 </html>

想了解更多，可以去这里看看。

本文使用的并非body，而是div，相关代码如下：

01 <style type="text/css">
02 .test_div style {
03     display: block;
04     background: #333;
05     color: white;
06     font: 14px/1.8 Courier New;
07     padding: 20px;
08     white-space: pre;
09     margin:0 auto;
10     width:250px;
11     height:100px;
12 }
13 </style>
14  
15 <div class="test_div"><style contenteditable>.test_div {background: green;}</style></div>

Have fun.

posted @ 2011-12-29 23:09  $雨$  阅读(238)  评论(0)  编辑  收藏  举报