Question

是否有可靠的CSS排版样板，它在命名空间（即类）下工作而不是全局？

让我简要解释一下情况：我正在使用CSS重置布局，我希望能够将某个类（例如.content）添加到div，然后会将一些统一的排版规则应用于div的元素：

<p>This one's reset</p>
<div class="content">
    <p>This one has typography rules applied</p>
</div>

Answer 1

然后将一些统一的排版规则应用于该div 仅元素

如果我理解正确，如果你想在div

中定位每个元素，你就可以在样式表中执行此操作

div.content *{
    /* YOUR STYLES */     
}

如果您只想设置p中的div，那么

div.content p{
    /* YOUR STYLES */     
}

示例： http://jsfiddle.net/8UE2D/

Answer 2

您可以使用任何预先存在的锅炉板。您只需要搜索并替换为将.content预先添加到文件中的每个选择器。

Answer 3

显然，没有这样的事情。如果你采用CSS排版样板文件，你必须自己添加一个名称空间，这是一个明显的解决方案，但不是我想要的那个。

Answer 4

对不起，如果这已经很晚了，但有这样的事情，请参阅：http://www.gethifi.com/blog/a-boilerplate-for-css-typography

演示在这里：http://files.www.gethifi.com/blog/a-boilerplate-for-css-typography/demo/type.html

它是一个CSS样板，用于设置大小，边距和行高（基本上是沿着公共基线排列元素的东西）。

根据网站，

默认情况下，所有规则都以“.content”开头。这样可以很容易地将此样式表应用于特定容器。

我没有使用它，但确实确认了typography.css文件的前缀为.content的规则。

Answer 5

Font Squirrel将为您生成经过良好测试的@ font-face语法，Paul Irish有Bulletproof @font-face technique解释，因此您可以理解Font Squirrel背后的思维过程。

Font Squirrel最终将为您提供类似于此的CSS：

@font-face { 
    font-family: 'MyWebFont'; 
    src: url('WebFont.eot'); 
    src: url('WebFont.eot?#iefix') format('embedded-opentype'), 
    url('WebFont.woff') format('woff'), 
    url('WebFont.ttf') format('truetype'), 
    url('WebFont.svg#webfont') format('svg'); 
}

您可以在样式表中包含哪些内容，然后使用.content类进行引用，如下所示：

.content { 
    font-family: 'WebFont', Arial, sans-serif; 
}

是否有可以应用于特定类的排版CSS重置？

5 个答案: