做一個所見即所得的CSS效果

2022-12-19 10:59:31

style 涔?????绛撅??ㄩ??ie???哥??娴?瑙??ㄤ腑????锛?锛???浠?灏?style璁劇疆?? contenteditable???跺??锛??ｄ??ｇ????瀹瑰氨??浠ョ?杈?浜???浠?缁???浣?楠?涓?锛?濡?????浠?灏?????淇??規??绾㈣?茬?????ｄ???瑕?涔???瀹?锛?绔?椹????般??????锛?杩?寰??逛究??浠?浠ュ?????ｇ??ㄦ????缂?杈??ㄦ???????绛????堕?寸??璇?锛?????璇?璇???

??绀猴?浣???浠ラ?????瑰??.test_div????CSS浠ｇ??锛?姣?濡???green?規??blue锛?#666浠?涔?????

??涓?????绌剁??浠ｇ??锛?

<!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;
	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;
	250px;
	height:100px;
}
</style>
<div class="test_div"><style contenteditable>.test_div {background: green;}</style></div>

Have fun.