语义标记与一致的版式

发布于 2024-12-15 16:40:20 字数 524 浏览 4 评论 0 原文

我无法使我的语义标记与保持恒定垂直节奏的流畅排版一起使用。

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

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

那么哪种方法是最好的方法呢?有没有办法实现我所缺少的两者?

I'm having trouble making my semantic markup work with fluid typography that maintains a constant vertical rhythm.

As far as semantics of a page are concerned, you should order your page in a hierarchy based on meaning h1, h2, h3, h4, etc. A great example of this would be http://zeldman.com.

But I've found this difficult to maintain if you want to use consistent typography. You eventually end up having to repeat your typographic rules and doing complex math as inheritance comes into play in your stylesheet. So the other approach would be to not worry about the order of your header tags and just select them for the font size. You can see this approach here: http://fluidbaselinegrid.com/ or on Eric Meyer's site here http://meyerweb.com/. Eric's site skips the h2 tag altogether.

So which is the best approach? Is there a way to accomplish both that I'm missing?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

无人问我粥可暖 2024-12-22 16:40:20

语义和风格是正交的。像

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

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

如果您有兴趣,请查看 CSS Zen Garden,了解一个特定的 html 文档可以完成什么工作正确使用 CSS。

Semantics and style are orthogonal. Html-Tags like <h1> are used for semantic purposes. CSS is used for styling and typography.

You can change the look and feel of your document independently of the semantic markup.

Have a look at the CSS Zen Garden if you're interested, what can be accomplished with one specific html document when using CSS properly.

写下不归期 2024-12-22 16:40:20

语义代码和页面节奏是相互独立的,只不过写得好的语义代码更容易控制节奏。

关于解决垂直节奏,首先要记住的是始终使用 [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/

希望有帮助!

semantic code and page rhythm are independent of each other with the exception that well written, semantic, code is much easier to control rhythm with.

In regards to addressing vertical rhythm, first thing to keep in mind is to always use [em] for your unit of measure. This will allows for relative measurement setting between all of your elements. From there, without getting completely complicated, I set all of my typography relative to each other using:

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

While there are a few "rhythm" tools out there, it seems to be the easiest to use. Then, I use the following as a template that I created to drop in after my reset (obviously the measurements themselves change depending on my design).:

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

Alternatively, you can take a look at some of the frameworks out there that are now starting to address vertical rhythm as well. An examples would be:

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

Hope that helps!

小苏打饼 2024-12-22 16:40:20

使用类进行样式设置。

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

这样,您可以使用适当的标签并维护页面轮廓,同时设置适当的样式。

Use classes for the styling.

Go ahead and set your base styles for h1-h6, for headers that stylistically differ from these base styles, use a class to override the base style.

This way, you can use the appropriate tag and maintain your page outline while styling them as appropriate.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文