&nbs p;
一、单刀直入，效果抢先
如果您手头上的浏览器是非IE浏览器，您可以狠狠地点击这里： CSS 代码的实时编辑与效果显示demo
在demo页面中，可以看到左 半 边有个虚框框，里面有一些CSS代码，细心的你可能发现了，这些CSS代码是可以编辑的，而且这些CSS代码直指右侧的张含韵小姐的年轻时候的照片，如下图所示：
修改编辑左侧的CSS样式，你会发现右侧的 图片样式 跟着被修改了，例如，修改边框 宽 度为3像素：
或者 是添加透明度属性，让图片50%半透明，如下：
这就是本文的内容——CSS代码的实时编辑与效果呈现。此功能的实现没有任何的JavaScript脚本，完全就是浏览器 自带 的功能实现的，现在就来揭开这个神秘的面纱吧。
二、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{dis play :block;} 甚至可以添加边框，背景色什么的。正如demo页面中的虚框样式。
之前在“div模拟textarea 文本域 轻松实现高度自适应”一文中曾介绍过一个HT ML 5属性 & # 8211; contented IT able ，可以让 标签元素 处于可编辑状态，此属性对于 style 标签同样适用。
所以，只要对 style 标签应用相应的CSS样式同时设置 contenteditable 属性就可以让CSS样式即时编辑更新啦！
为了 不影响 head 标签中的 style 标签，我们可以如下设置 style 标签的样式：
body style{display:block; .. .} 三、demo实例代码展示
正如上面提到的，先用CSS对 body 下的 style 标签进行样式设置，如下：
body style{ display:block; padding:0.6em 0.8em; border:1px dashed #ccc; background-color:#f5f5f5; color:#000; font-f ami ly:Monaco, monospace; font- Size: 12px; white -s pace: PR e-wrap; word-wrap: br eak-word; } 然后页面中相应的 style 标签的HTML代码如下：
<style contenteditable>. test _image{ padding: 3px; border: 1px solid #ccc; background-color: #fff; }</style> 于是，就实现了页面上CSS代码修改同时效果实时预览啦，很 简单 吧！
补充2011-03-15
您还可以使用如下选择器更 精准 地控制可编辑的style标签：
style[contenteditable]{...} 四、结束语
可编辑style标签的好处在于，仅仅一份CSS代码，就可以既显示，又编辑，非常方便。像我们做前端的，以后调试啊，或是写demo页面就方便多了。 不过 有缺憾的是，虽然IE浏览器也支持 contenteditable ，即标签元素的编辑模式，但是，其内置的style标签中的CSS代码却是无法再页面上呈现出来的，这使得IE浏览器下无法实 现S tyle标签下的CSS实时修改预览功能，要想解决IE下的该问题，估计还要借助于JavaScript代码。对于其他浏览器，无论是 opera ，还是Ch rom e都是效果良好的，例如下面截自O PE ra浏览器的图片：
我们思绪可以飞得更远些，我们借助此项技 术 非常简单的实现一个功能不错的 源 码编辑器。或者SNS网站中个人空间自定义背景源码编辑框。或者是将CSS的可视化修改调试写成插件，兼容IE浏览器，为其他前端er们造福，节约开发时间。本文更多的是展示此技术的些基础内容，一些更高级的应用还需要聪明的您来开发与分享了。
参考 文章 ：Show and Edit Style Element
（本篇完）
@H_842_ 126 @觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-style标签下的CSS代码的显示与实时编辑 全部内容，希望文章能够帮你解决 html5教程-style标签下的CSS代码的显示与实时编辑 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-style标签下的CSS代码的显示与实时编辑的详细内容...