简明现代魔法 -> CSS层叠样式表 -> 可见即所得的CSS编辑设计

可见即所得的CSS编辑设计

2011-04-12

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

效果演示

附上我研究的代码:

<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title></title>
<style type="text/css">
body style {
	display: block;
	background: #333;
	color: white;
	font: 13px/1.8 Monaco, Mono-Space;
	padding: 20px;
	white-space: pre;
	margin:0 auto;
	width:500px;
	height:100px;
}
</style>
</head>
<body>
	<style contenteditable>body {background: green;}</style>
</body>
</html> 

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

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

<style type="text/css">
.test_div style {
	display: block;
	background: #333;
	color: white;
	font: 14px/1.8 Courier New;
	padding: 20px;
	white-space: pre;
	margin:0 auto;
	width:250px;
	height:100px;
}
</style>

<div class="test_div"><style contenteditable>.test_div {background: green;}</style></div>

Have fun.

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们