Css 语义标记与一致排版

我很难让语义标记与保持恒定垂直节奏的流畅排版一起工作

就页面的语义而言，您应该根据h1、h2、h3、h4等含义对页面进行层次结构排序

但我发现，如果你想使用一致的排版，这很难维持。当继承在样式表中发挥作用时，您最终不得不重复排版规则并进行复杂的数学运算。因此，另一种方法是不用担心标题标记的顺序，只需选择它们作为字体大小。你可以在这里看到这种方法：或者在Eric Meyer的网站上。Eric的站点完全跳过了h2标记

---

那么，哪种方法是最好的？是否有一种方法可以实现我所缺少的两个功能？

使用类进行样式设置

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

---

通过这种方式，您可以使用适当的标记并维护页面轮廓，同时根据需要对其进行样式设置。

使用类进行样式设置

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

---

通过这种方式，您可以使用适当的标记并维护页面轮廓，同时根据需要对其进行样式设置。

语义和样式是正交的。类似于

的Html标记用于语义目的。CSS用于样式和排版

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

---

如果你感兴趣的话，请看一下，当正确使用CSS时，一个特定的html文档可以完成什么。

语义和样式是正交的。类似于

的Html标记用于语义目的。CSS用于样式和排版

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

---

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

语义代码和页面节奏彼此独立，但编写良好的语义代码更容易控制节奏

关于处理垂直节奏，首先要记住的是始终使用[em]作为度量单位。这将允许在所有元素之间进行相对测量设置。在此基础上，在不太复杂的情况下，我使用以下方法设置了所有字体：

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

或者，您可以查看一些框架，它们现在也开始处理垂直节奏。例如：

---

希望有帮助

语义代码和页面节奏彼此独立，但编写良好的语义代码更容易控制节奏

关于处理垂直节奏，首先要记住的是始终使用[em]作为度量单位。这将允许在所有元素之间进行相对测量设置。在此基础上，在不太复杂的情况下，我使用以下方法设置了所有字体：

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

或者，您可以查看一些框架，它们现在也开始处理垂直节奏。例如：

---

希望有帮助

我的印象是，语义标记+CSS样式被广泛接受并被认为是良好的样式，并且在无数美观的网站上运行良好。你有什么理由提出异议？或者说，为什么语义标记更优越也是一个答案？我的印象是，语义标记+CSS用于样式设计被广泛接受，并被认为是良好的样式，并且在无数美观的网站上工作得非常好。你有什么理由提出异议？或者，为什么语义标记更优越的咆哮也是一个答案？

/****** 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;}