Question

我在使用保持恒定垂直节奏的流体排版时，我的语义标记工作很困难。

就页面的语义而言，您应该根据含义h1，h2，h3，h4等在层次结构中对页面进行排序。一个很好的例子是http://zeldman.com。

但是如果你想使用一致的排版，我发现这很难维护。你最终不得不重复你的排版规则和复杂的数学运算，因为继承在你的样式表中发挥作用。所以另一种方法是不要担心标题标记的顺序，只选择它们作为字体大小。您可以在此处查看此方法：http://fluidbaselinegrid.com/或Eric Meyer的网站http://meyerweb.com/。 Eric的网站完全跳过了h2标签。

那么哪种方法最好？有没有办法实现我失踪的两个？

Answer 1

语义和风格是正交的。像<h1>这样的Html标签用于语义目的。 CSS用于样式和排版。

您可以独立于语义标记更改文档的外观。

如果您感兴趣，可以查看CSS Zen Garden，在正确使用CSS时，可以使用一个特定的html文档完成什么。

Answer 2

使用类进行样式设计。

继续为h1-h6设置基本样式，对于风格上与这些基本样式不同的标题，使用类来覆盖基本样式。

这样，您可以使用适当的标记并维护页面轮廓，同时根据需要设置样式。

Answer 3

语义代码和页面节奏是相互独立的，除了写得好，语义，代码更容易控制节奏。

关于解决垂直节奏，首先要记住的是始终使用[em]作为度量单位。这将允许您的所有元素之间的相对测量设置。从那里开始，没有完全复杂化，我使用以下方法将所有排版相对于彼此设置：

http://drewish.com/tools/vertical-rhythm

虽然有一些“节奏”工具，但它似乎是最容易使用的。然后，我使用以下内容作为我创建的模板，以便在重置后插入（很明显，测量本身会根据我的设计而改变）。：

/****** TYPOGRAPHY ******/
body {font:15px/1.5em HelveticaNeueRoman, "Helvetica Neue", Arial, Helvetica, sans-serif; /* baseline */
-webkit-font-smoothing: antialiased;*font-size:small;
}
    p {font-size: 1em; line-height: 1.4667em; margin:0 0 1.4667em 0;}
    p.intro {font:1.2667em/1.375em Cambria, Georgia, Times, serif;margin:0 0 1.1579em 0;font-style:italic;}
    a, a:link {color:#24518f;text-decoration:none; -webkit-tap-highlight-color:#FF5E99;}
        a:hover {color:#b20000;}
        a:active {position:relative;top:1px;}
        a:focus {outline: thin dotted;}
        a:hover, a:active {outline: 0;}
        a {-webkit-transition: color .25s ease-out, text-shadow .25s ease-out;  -moz-transition: color .25s ease-out, text-shadow .25s ease-out;
    -o-transition: color .25s ease-out, text-shadow .25s ease-out; transition: color .25s ease-out, text-shadow .25s ease-out;}

/* headers */
h1, h2, h3, h4, h5, h6 {font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;color: #414141;}
    h1 {font:1.9333em/1.5172em HelveticaNeueHeavy;margin-bottom: 0.7586em;letter-spacing:-1px;}
    h2 {font:1.6em/1.8333em HelveticaNeueBold;margin-bottom:0.7586em;letter-spacing:-1px;}
    h3 {font:1.2667em/1.1579em HelveticaNeueBold;margin-bottom: 1.1579em;}
    h4 {font:1.0667em/1.375em HelveticaNeueBold;margin-bottom: 1.375em;}
    h5 {font:0.9333em/1.5714em HelveticaNeueBold;margin-bottom: 1.5714em;}
    h6 {font:0.8667em/1.6923em HelveticaNeueBold;margin-bottom: 1.6923em;}

或者，您可以看一下那些现在开始解决垂直节奏的框架。一个例子是：

http://thesquaregrid.com/
http://fluid.newgoldleaf.com/
http://lessframework.com/

希望有所帮助！

语义标记与一致的排版

3 个答案: