網站制作CSS排版：對比技巧、教程和最佳實踐
優雅CSS排版的主要優點在于它既具有吸引力，又能提高用戶體驗。當明智地選擇和謹慎使用時，支持整體設計是非常有效的。有很多優秀的例子，我們可以做到這一點，下面你會發現一些最好的想法和技巧，當談到使用字體和排版在您的CSS為基礎的網站。

1。印刷對比度八七原則
你可以引導讀者注意布局中的重要部分，同時通過創建對比來增強視覺外觀。這是常見的印刷效果不同的CSS屬性。

類型大小
字體大小

白色的空間
行高，字母間距，字間距

字體
字體家族
案例
文本轉換
風格
文字裝飾，字體風格
重量
字體加粗
顏色
顏色
對齊
文本對齊，浮動

印刷對比度和網絡
本文回顧了印刷對比重要的校長在一本小冊子寫了五十年前由加拿大典型[ ographer Carl Dair提出。他提出了七個原則，從字體大小到頁面類型的方向。雖然人的職業寫的是打印的，卡爾的話同樣在中他從來沒有經歷過這是網頁設計的一個[適用。

這里有七種基本方法對如何創建字體對比。

排版風格的元素

這個網站的步驟通過布林赫斯特的工作原理，解釋如何完成每個使用HTML和CSS中可用的技術。一個實用的網頁排版指南！
網絡設置的5大原則與思路

Web字體的原則，決定Sean Hodge smashingmagazine接近理念與規則。

2。CSS常用的排版技術

CSS標題類型
如何在HTML中使用標題

Alen Grakalic的cssglobe解釋標題的含義是一個很好的教程，如何使用它們，什么都是“不”的時候，使用標題標簽。
CSS標題標簽

用CSS制作標題

少量的設計，我們可以利用CSS樣式的網頁標題抓住讀者的眼球，鼓勵他們閱讀。
CSS標題標簽

h2
{
    margin-bottom: 0;
    padding: 25px .5em 25px 250px;
    background-image: url(examples.png);
    background-repeat: no-repeat;
    color: #333;
    background-color: #cf0;    
}
h2:hover
{
    background-color: #fc9;
    background-image: url(examples.jpg);
    background-repeat: no-repeat;
}

10個漂亮的CSS排版的例子，以及它們是如何做到的…

有很多很棒的網站，只有CSS才有漂亮的排版，但是僅僅看它們只是圖片的一半。如果你想知道他們做了什么，為什么/為什么會導致漂亮的類型？看看這個有趣的帖子。

#DATE{
      font-size: 85%;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #bbb;
      font-size: 10px;
      font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
      font-weight: 100;
     }

#HEADLINE{
    font: bold 34px "Century Schoolbook", Georgia, Times, serif;
    color: #333;
    line-height: 90%;
    margin: .2em 0 .4em 0;
    letter-spacing: -2px;
    }

#TAG{
    color: #76879b;
    font-size: 10px;
    margin: 5px;
    font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
    font-size: 11px;
    }
        
標題樣式畫廊

想要更時髦的內容標題（H1，H2，…）比不同的字體或顏色？試試這里列出的標題樣式之一來美化內容。

CSS標題標簽

使用CSS創建dropcaps

雜志樣式下拉蓋

下拉帽可以接近標題文本的大小或更大。所以你需要強迫第一個大字母跨越大約五行。

CSS標題標簽

網頁排版中的段落

網絡版式設計中的段落

段落是標點符號，是概念的標點符號。選擇字體后，選擇合適的段落樣式是良好排版的基石之一。這是對Web段落樣式的簡短調查。你也可以在這里檢查他們的段落排印的12個例子。

/*
First line flush left
Subsequently two lead indent, no boundary, justified
*/
p {
font-size: 1em;
line-height: 1.25em;
margin: 0;
text-align: justify;
}
p   p {
text-indent: 2.5em;
}

CSS中的文本大小

如何在CSS中調整文本大小

EMS可能很難處理，尤其是在嵌套元素時，因為很難跟蹤數學。但是，對樣式表進行注釋并從內部向內設計元素可以使事情更容易遵循。了解如何使用主體作為嵌套點的嵌套元素。

CSS標題標簽

<style type="text/css">
body {
    font-size:100%;
    line-height:1.125em;
}

.bodytext p {
    font-size:0.875em;
}

.sidenote {
    font-size:0.75em;
}
</style>

<!--[if !IE]>-->

<style type="text/css">
body {
    font-size:16px;
}
</style>

<!--<[endif]-->

Text Sizing

3.先進的印刷技術

使用CSS的高級排版技術

仍有許多豐富的CSS排版能力不好的記錄。下面是一個很好的例子，可以通過使用CSS組合和調整類型來做什么。簽出高級CSS排版示例頁面并查看源代碼。

h3.gr {advanced_type.htm... (line 54)
border-bottom:10px solid #CC0000;
color:#999999;
float:left;
font-family:Impact,Arial,Verdana;
font-size:500%;
font-weight:100;
margin:0pt;
text-transform:uppercase;
}
h3.gr2 {advanced_type.htm... (line 55)
color:#999999;
float:left;
font-family:Impact,Arial,Verdana;
font-size:500%;
font-weight:100;
margin:25px 0pt;
position:relative;
text-transform:uppercase;
}

如何使用任何字體你愿與前視紅外

如何實施新形象替代（或紅外），替代sIFR不需要Flash。在這里查看演示。

CSS標題標簽

stylefun CSS CSS

CSS風格的驚人文本的不同示例。

4。如何使用CSS框架定制排版
CSS如何定制排版基線

CSS標題標簽

藍圖的typography.css文件設置了一些非常漂亮的字體風格，創造一個優美的基線網格。這篇文章很方便地向您展示了如何將字體大小和基線配置為您想要的值。

YUI CSS字體

YUI CSS文件提供了跨瀏覽器的字體排印規范和控制。檢查他們的例子部分，看看它在行動。

5。CSS排版工具和向導

csstype
一個簡單的工具，創建文本CSS編碼為你&讓你預覽它，因為你這樣做！

檢測器

Typetester是為屏幕字體的在線應用的比較。它的主要作用是使網頁設計師的生活更容易。

csstypeset

把你的所見即所得的文本格式實時CSS…

CSS標題標簽

6。大字體設計

尋找有大字體設計網站，看看這些畫廊。

typesites

typesites在那有很大的字體設計網站每周看。

一個偉大的收集鏈接超過100個標題在網絡上以獨特的和創造性的方式。

具有出色CSS排版的網站

有一些網站已經通過使用排版來創造出優秀的網頁設計。它們簡單，干凈，交流。看看他們中的一些。