語義標記與一致的排版

我很難使流利的排版保持恆定的垂直節奏，使我的語義標記起作用。語義標記與一致的排版

就頁面的語義而言，您應該根據含義h1，h2，h3，h4等等將頁面排序在一個層次結構中。一個很好的例子是http://zeldman.com。

但是我發現這很難保持，如果你想使用一致的印刷術。隨着繼承在您的樣式表中發揮作用，您最終不得不重複您的印刷規則並執行復雜的數學運算。所以另一種方法是不用擔心標題標籤的順序，只需選擇字體大小即可。你可以在這裏看到這個方法：http://fluidbaselinegrid.com/或Eric Meyer的網站http://meyerweb.com/。 Eric的網站完全跳過了h2標籤。

那麼哪種方法最好？有沒有一種方法可以完成我缺少的兩項？

來源

2011-11-16 Lee McAlilly

我的印象是，語義標記+用於造型的CSS被廣泛接受並被認爲是很好的風格，並且對於無數美觀的網站非常適用。你有什麼證明爭議的理由？或者，爲什麼語義標記也是優越的答案呢？ – delnan

語義代碼和頁面節奏彼此獨立，但編寫良好的語義代碼更容易控制節奏。

關於垂直節奏問題，首先要記住的是始終使用[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/

希望幫助！

來源

2011-11-18 07:07:56

使用類爲樣式。

繼續爲h1-h6設置基本樣式，對於風格上與這些基本樣式不同的標頭，請使用類來覆蓋基本樣式。

通過這種方式，您可以使用適當的標記並在適當時對頁面輪廓進行維護。

來源

2011-11-16 20:00:33 Brent

語義和風格是正交的。 Html標籤如<h1>用於語義目的。 CSS用於樣式和印刷。

您可以獨立於語義標記更改文檔的外觀和風格。

看看CSS Zen Garden如果你有興趣，當正確使用CSS時可以用一個特定的html文檔完成什麼。

來源

2011-11-16 20:03:05

語義標記與一致的排版

回答

相關問題