最新的Web開發教程
 

W3.CSS排版


輕鬆閱讀

W3.CSS頁面很容易閱讀,甚至對人有輕微的閱讀障礙。

  • 使用的所有字體都容易可讀15px的無襯線字體
  • 標準字體(宋體)有一個很好的字母間距
  • 標準行間距(1.5)也很不錯

HTML標題<H1> - <H6>

默認情況下w3.css風格HTML的標題是這樣的:

<h1>Heading 1 (36px)</h1>

<h2>Heading 2 (30px)</h2>

<h3>Heading 3 (24px)</h3>

<h4>Heading 4 (20px)</h4>

<h5>Heading 5 (18px)</h5>
<h6>Heading 6 (16px)</h6>
試一試»

字體大小類

標題應該用於它們是什麼:標題。

隨著W3.CSS,字體大小可通過類進行設置:

w3-tiny
w3-small
w3-medium (Default)
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
w3-jumbo
試一試»

覆蓋標準

重寫W3.CSS標準是很容易的。

你有至少三個簡單的選擇:

  1. 覆蓋標準在你的頁面的<head>部分
  2. 添加您自己的CSS文件W3.CSS後
  3. 下載和更改W3.CSS文件的內容

覆蓋<HEAD>

h1{font-size:64px;}
h2{font-size:48px;}
h3{font-size:36px;}
h4{font-size:24px;}
h5{font-size:20px;}
h6{font-size:18px;}
試一試»

添加您自己的CSS

<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet" href="myStyle.css">

更改W3.CSS

h1{font-size:36px} h2{font-size:30px} h3{font-size:24px} h4{font-size:20px} h5{font-size:18px} h6{font-size:16px}