css style标签所见即所得

style 也是标签(在非ie内核的浏览器中支持),直接上图

 

我们将style设置成 contenteditable的时候,那么那的内容就可以编辑了。仔细的体验下,如果我们将背景修改成红色的。

那么只要书写完,立马呈现。哇靠,这很方便我们以后写那种动态的编辑器效果呢,等有时间的话,我再试试。附上我研究的代码:

 1 <!DOCTYPE HTML>
 2 <html >
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
 5     <title></title>
 6     <style type="text/css">
 7     body style {
 8         display: block;
 9         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> 

参考文章:http://css-tricks.com/show-and-edit-style-element/ 

原文地址:https://www.cnblogs.com/yupeng/p/2013042.html