style标签下的CSS代码的显示与实时编辑

http://www.zhangxinxu.com/wordpress/2011/03/style%E6%A0%87%E7%AD%BE%E4%B8%8B%E7%9A%84css%E4%BB%A3%E7%A0%81%E7%9A%84%E6%98%BE%E7%A4%BA%E4%B8%8E%E5%AE%9E%E6%97%B6%E7%BC%96%E8%BE%91/

CSS代码的实时编辑与效果呈现

style标签也是标签

我们都知道CSS代码可以控制HTML标签的样式，例如：

p{color:green;}

对于p, div, img标签之流，我们整日与之为伍，所以可能忽略了一些不常用的标签，例如head标签或是style标签。

在99.9%的情况下，style标签是用来放置CSS样式的，例如：

<style>
    p{color:green;}
</style>

其不占据任何空间，里面的CSS代码也不会在页面上呈现。style本身的功用是如此的明显与强烈，以至于我们忽略了它的其他一些特性。正如我们平时总是把鞋子当鞋子穿，而忽略了其实鞋子也是一个非常顺手且颇具杀伤力的武器。style标签也是标签，我们其实是可以将其当普通的p, img, input标签之流看待，是完全可以通过CSS控制其样式的，例如：

style{display:block;}

甚至可以添加边框，背景色什么的。正如demo页面中的虚框样式。

之前在“div模拟textarea文本域轻松实现高度自适应”一文中曾介绍过一个HTML5属性 – contenteditable，可以让标签元素处于可编辑状态，此属性对于style标签同样适用。

所以，只要对style标签应用相应的CSS样式同时设置contenteditable属性就可以让CSS样式即时编辑更新啦！

为了不影响head标签中的style标签，我们可以如下设置style标签的样式：

body style{display:block; ...}  注意一定要加上display:block;否则看不到

正如上面提到的，先用CSS对body下的style标签进行样式设置，如下：

body style{
    display:block;
    padding:0.6em 0.8em; 
    border:1px dashed #ccc; 
    background-color:#f5f5f5; 
    color:#000; 
    font-family:Monaco, monospace; 
    font-size:12px; 
    white-space:pre-wrap; 
    word-wrap:break-word;
}

然后页面中相应的style标签的HTML代码如下：

<style contenteditable>.test_image{ padding: 3px; border: 1px solid #ccc; background-color: #fff; }</style>