显示和编辑样式元素 | CSS-Tricks

今天给大家带来一个小技巧。您知道可以在HTML的<head>中放置<style>块来进行样式设置吗？实际上，您不必将它们放在头部，它们可以位于页面上的任何位置。

更重要的是，它就像任何其他元素一样。所有浏览器的默认样式表将其设置为display: none;。

如果您将其移到body中并将其重置为display: block;，您可以看到应用于该页面的代码。不妨让它看起来更像代码吧？

body style {
	display: block;
	background: #333;
	color: white;
	font: 13px/1.8 Monaco, Mono-Space;
	padding: 20px;
	white-space: pre;
}

更重要的是，您可以赋予它HTML5属性contenteditable，并且您可以直接在其中编辑CSS并观察它对页面的影响。

<style scoped contenteditable>body { 
  background: green; 
}</style>

查看演示

这就是CSS形状页面上所有代码的实现方式。它不仅很简洁，而且在这样的页面上非常有用，因此您不必在两个地方维护CSS。

我认为这在一般情况下不是一个很好的实践，除了CSS演示之外。我甚至可以说，<style>块通常是不好的做法，除非是像注入样式是向新注入的第三方内容添加样式的最有效方式这样的非常具体的第三方场景。

另外，需要说明的是，在<head>之外使用<style>只要您使用scoped属性并且它是其父元素的第一个子元素，则它是有效的。否则无效。scoped属性（尽管目前在任何浏览器中都不支持）应该意味着其中的样式仅应用于该父元素及其子元素，而不在其他地方。了解更多信息。

Dr.Death

# 2011年3月2日

很棒的技巧

D3tocqueville

# 2011年3月2日

我的第一条评论，但我已经关注这个网站很长时间了。很棒的提示！

Luciano Mammino

# 2011年3月2日

很棒的提示。在Safari中，它似乎只适用于您演示中的background属性……它是否只适用于先前声明的属性！？

编辑注：Truls Larsen 在（本文的评论关闭后）写信告诉我，换行符方面的一些问题导致它停止工作。您可以使用Shift+Enter来直观地创建新行并使其继续工作。

traq

评论永久链接# 2011年3月2日

在Chrome中，我发现它仅在您将新规则放在第一条规则的同一行时才有效。在其他浏览器中，它似乎按预期工作。

链接的图像
Kevin Smith

评论永久链接# 2011年3月8日

我在Mac OS X上的Chrome中也发现了同样的问题。

所有语句都必须在同一行才能生效……

mluzitano

# 2011年3月2日

很酷的技巧！我想知道是否可以通过某种方式将它与HTML5颜色选择器结合起来？

Leon Zinger

评论永久链接# 2011年3月2日

只需添加一些JS魔法，您就可以将这些东西组合在一起……

Hugo

# 2011年3月2日

太棒了！赢了！

Omegakenshin

# 2011年3月2日

很棒的技巧，感谢分享！！

# 2011年3月2日

哇，这是一个很棒的技巧！正如mluzitano所说，颜色选择器将是一个不错的功能。

Keiron Lowe

# 2011年3月2日

绝妙的想法，尽管我必须同意@Luciano Mammino的观点，我只能使其在body元素上工作，我尝试将body设置为透明并将html设置为蓝色，但它不起作用。

Erik Rodne

# 2011年3月2日

非常简洁，可以成为一些人的绝佳学习工具！

Joss Crowcroft

# 2011年3月2日

伙计，这太酷了！干得好！一个真正的技巧 :)

SpeedGun

# 2011年3月2日

这确实是一个CSS技巧，当然我希望每个人都知道你可以在body中放置style元素。

Simeon

# 2011年3月2日

很棒的技巧

Bronislav Klucka

# 2011年3月2日

1/ 有效性问题：HTML5 为style元素定义了scoped属性，定义了特定样式仅适用于父元素子树
http://dev.w3.org/html5/spec/semantics.html#the-style-element

<!DOCTYPE html>
<html>
   <head>
      <title>Example</title>
   </head>
   <body>
      <section>
         <style scoped>body {background: red; } </style>
      </section>
   </body>
</html>

是有效的HTML 5

2/ 良好实践问题：虽然在一般情况下不是一个好的做法，但在混合应用中可能非常有用。当创建您期望其他页面包含的框时，您可以独立地对其进行样式设置，而不管页面如何。这很棒。

traq

评论永久链接# 2011年3月2日

但是在这个例子中，什么都不应该发生：在<style>的父元素子树（即，在该<section>内部）中没有<body>元素。

（但在现实中，它确实有效，即使它不应该。请参阅我稍后发表的评论）。

wolfy

# 2011年3月2日

是的，非常好，它在工作中帮助了我很多~

Alex Lane

# 2011年3月2日

这可能是一个以后再讨论的问题，但我正在玩现场演示，并添加了style { position: absolute; } 来尝试破坏它。当我这样做时，该框被勾勒出来，并且在其上方弹出一个选项卡，允许我随意拖放该框。

这是HTML5巫术还是一些JavaScript/jQuery疯狂？

O'Ryan

评论永久链接# 2011年3月2日

我也注意到了这一点。无法弄清楚那是什么？
它也有调整大小的句柄……嗯

Suhi

# 2011年3月2日

看起来，如果您使用'display: inline-block'而不是'block'，则可以避免在编辑的style标签中按Enter键时出现烦人的生成！

Shut Pavel

# 2011年3月2日

实际上，您可以使头部中的样式可见

head, style { 
    display:block;
}

Alex Stoneham

# 2011年3月2日

更重要的是，您可以将其包装在服务器端脚本if语句（PHP、Ruby、JSP，无论您使用什么）中，以便仅在您位于暂存服务器上而不是实时服务器上时才打印此内容。

真的很喜欢它。感谢CSS-tricks，我想我会采用它。更重要的是，我还会告诉我的程序员朋友们。

Lourens

# 2011年3月2日

哇，这是一个惊人的技巧，从未想过！
太酷了，这将为我节省大量时间！

Lea Verou

# 2011年3月2日

我也使用了这个技巧，在我的Front Trends幻灯片中。Anne Van Kesteren 最初提出了它。
但是，它有点太受限制了（您不能只显示声明，供应商前缀会显示），所以我不再使用它了。

traq

# 2011年3月2日

即使“scoped”样式应该仅应用于子元素和直接父元素，我发现许多浏览器仍会将规则应用于与该选择器匹配的任何内容。

例如

<!DOCTYPE html><html><head>
<style> p{ color: red; } </style>
</head><body>
<p>this should be red.</p>
<div>
<style scoped> p{ color: blue; } </style>
<p>this should be blue.</p>
</div>
</body></html>

在Chrome 9、Firefox 3.6和Opera 10中，这两个段落都是蓝色的。我不确定浏览器支持从哪里开始（或是否开始）支持“scoped”，但值得知道您不应该依赖它来解决规则冲突。

traq

评论永久链接# 2011年3月2日

（这原本是对上面Bronislav Klucka评论的回复）
Louis

评论永久链接# 2011年3月2日

尚无浏览器支持scoped样式，因此没有理由使其工作。但它绝对是一个有趣的新功能，将来可能会非常有用。
Bronislav Klucka

评论永久链接# 2011年3月2日

我不是说，它现在正在工作：)。我只是在谈论有效性/良好实践问题
traq

评论永久链接# 2011年3月2日

@Louis：谢谢，我不这么认为，但我没有在除了我提到的浏览器之外的任何浏览器中进行测试。

@Bronislav：当然，我并非暗示你就是这样。我只是觉得有必要提一下，因为“作用域”是一个非常棒的概念——而且，因为不太明显的是它实际上还不能工作。

Chris

# 2011年3月2日

最后的那个 HTML 5 部分非常棒。这正是我喜欢这个网站的原因——CSS 的能力总是让我惊叹不已。

Cibertron

# 2011年3月2日

解释非常出色，非常具有教学意义，加上演示，一切都变得清晰明了。祝贺你们。

O'Ryan

# 2011年3月2日

我注意到在 css 形状页面上，DOM 更新后我必须重新点击我想编辑的位置。并且退格键或删除键不起作用。在编辑任何内容时，似乎出现了一堆奇怪的问题。奇怪……

Win7
Firefox 3.6

Jake

# 2011年3月3日

“它不是有效的（或好的实践），但它有效。”

这几乎概括了这个网站……

Ant

# 2011年3月3日

不错。这对于调试来说非常棒，因为我不喜欢 Firebird 中的一些东西（它如何重新格式化原始代码等）。

Djave

# 2011年3月3日

最简单/最酷！
谢谢。Dave

Homem-Árvore

# 2011年3月3日

谢谢 Chris，这不是 CSS 技巧，而是 CSS 魔法。:)。遗憾的是，创建新行似乎是不可能的（至少在 ff 3.6 mac 中）。但我认为更改这一点并不难。

Chris Coyier

评论永久链接# 2011年3月3日

您可以使用 Shift+Enter 作为快速修复。

Greg

# 2011年3月3日

奇怪。我敢肯定，不到一个月前，我尝试将 style 标签放在页面的 body 中（这对大多数浏览器都有效），结果 Safari 却抛出一个错误并将它移动到了 head 中……？

Eric Meyer

# 2011年3月3日

正如 Shut Pavel 指出的那样，您不必将 style 块塞入 body 中才能使其工作。将此添加到您的 head 元素中，您就可以做同样的事情。您甚至可以使可见的样式消失，并必须重新加载才能使其恢复。（太棒了！）

<style type="text/css" contenteditable>
head, style {display: block;}
style {font-family: monospace; white-space: pre;}

body {background: green;}
</style>

当然，您可以对此进行更高级的处理，使其“显示样式”CSS 位于另一个不可编辑的 style 元素中，但这可以作为一个不错的概念证明。

Eric Meyer

评论永久链接# 2011年3月3日

这里，有一个使用隐藏样式显示样式的实际概念证明。（哇哦……）

http://meyerweb.com/eric/css/tests/edit-styles.html

SalmanAbbas007

# 2011年3月3日

哈哈，太棒了，收藏了 :D

Monkey

# 2011年3月4日

关于滥用可能性的想法

如果您编写了没有任何属性或内容的 style 标签，并且没有使其内容可编辑，但确实使其显示为块并使其看起来非常漂亮以用于设计目的……这是否是 style 标签的错误用法？如果我们使用 style 标签来“设计”页面并进行花哨的装饰性设计，我们是否进入了标签误用的领域？

我在这里看到了潜力，但不知道积极和消极的影响，尤其是在涉及标准和可访问性时；)

只是一个想法……

Andy Clegg

# 2011年3月4日

刚刚偶然发现这个，真的很酷，谢谢，我将使用它。

Paddy

# 2011年3月5日

很棒的技巧..

Joue

# 2011年3月7日

我的天啊，太棒了

Thierry Koblentz

# 2011年3月7日

不错！

brent lagerman

# 2011年3月7日

太酷了，感谢你的提示！

brent
@
mimoYmima.com

坦桑尼亚

# 2011年3月8日

谢谢，作者！非常有用的文章，调查所有这些标签、链接、注释对我来说一直是个问题……致 Bronislav Klucka：感谢他对信息丰富的帖子。我将在我的工作中使用这些建议。以及从博主到博主：也许这个链接 Greatiful 可以帮助我众多的同事——博主通过写博客赚钱）注册很容易，确认你的 RSS 频道，然后有时输入并取钱。享受！

Thierry Koblentz

# 2011年3月9日

不错的技巧！

不过，当 style 块位于 head 中时，编辑/添加规则似乎效果最好。

Miles Carmany

# 2011年3月10日

这对于演示/教程页面来说非常棒。

假设您想解释 CSS 渐变是如何工作的，您可以使用此技巧设置一个演示页面，并且查看者可以轻松更改颜色、方向、停止点等。

而且由于它是无损编辑，他们只需点击刷新即可恢复到原始演示。

Thierry Koblentz

# 2011年3月12日

@Miles – 这正是我在 css-101.org 上所做的，您可以在这里查看示例（查看橙色框）。

作为旁注，我注意到 webkit 允许使用 Enter/Return 键创建新行，但随后无法应用更改。因此，我相信在所有浏览器中使用 Shift+Enter 是最好的。

感谢 Chris 的灵感.

lokajaya

# 2011年3月13日

它确实有效，很酷的技巧

redsonic

# 2011年3月15日

太棒了，有趣 :)

Mathias Bynens

# 2011年3月19日

对于其他隐藏元素（如 head、script、meta 等）也是如此。我之前写过这篇文章：使用 CSS 显示隐藏元素（如 head）。

Jules Gravinese

# 2011年3月19日

不要用“display:none;” 伤了自己 =)

Dan B. Lee

# 2011年3月21日

整洁。真的很整洁。有价值吗？也许吧。功能性？不怎么样。如果浏览器中还没有允许我们实时编辑内容以进行测试的扩展，那么这将非常棒。我可以看到在 IE 中使用它以便我可以直接编辑它。但在开发完成后，我想不出它的直接用途。我还没有真正期待这样的东西，也想不到它将解决哪些问题。还有有效性。哦，天哪，有效性。

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。