Markdown CSS

標(biāo)簽（空格分隔）： Markdown CSS

Cmd Markdown

Cmd Markdown 默認設(shè)置

h1,h2 {
    color: #0077bb; /* 將標(biāo)題改為藍色 */
}

Cmd Markdown 修改設(shè)置

修改時間：2017-1-27

h1 { 
    font-family: "微軟雅黑",Arial,verdana; 
    font-size: 28px/1.5; 
    font-weight: bold; 
}
h2 { 
    font-family: "微軟雅黑",Arial,verdana; 
    font-size: 24px/1.5; font-weight: bold; 
    padding: 10px 0px; 
    margin: 0px; 
}
h3 { 
    font-family: "微軟雅黑",Arial,verdana; 
    font-size: 22px/1.5; 
    font-weight: bold; 
    margin: 0.5em 0px; 
}
h4 { 
    font-family: "微軟雅黑",Arial,verdana; 
    font-size: 1.15em/1.5; 
    font-weight: bold; 
    padding: 0px; 
    margin: 0.5em 0px; 
}
h5, h6 { 
    font-size: 1.15em/1.5; 
    font-weight: bold; 
    padding: 0px; 
    margin: 0.5em 0px; 
}

h1, h2, h3,  h4 { 
    color: rgb(51, 51, 51); 
    text-shadow: 1px 1px 3px rgba(50, 50, 50, 0.3); 
}

前端觀察（2013版風(fēng)格）

總體的預(yù)覽如下圖：

前端觀察

文本標(biāo)題

前端觀察-Body.png

h1 { font: bold 28px/1.5 "微軟雅黑",Arial,verdana; }
h2 { font: bold 24px/1.5 "微軟雅黑",Arial,verdana; padding: 10px 0px; margin: 0px; }
h2 a, h2 a:visited { color: rgb(44, 98, 136); text-decoration: none; }
h2 a:hover { color: rgb(102, 102, 102); text-decoration: underline; }
h3 { font: bold 22px "微軟雅黑",Arial,verdana; margin: 0.5em 0px; }
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, #secnav a { color: rgb(51, 51, 51); text-shadow: 1px 1px 3px rgba(50, 50, 50, 0.3); }
h4, h5, h6 { font: bold 1.15em/1.5 verdana; padding: 0px; margin: 0.5em 0px; }

文檔的側(cè)邊欄

前端觀察-側(cè)邊欄.png

#sidebar { width: 340px; padding: 20px; background-color: rgb(247, 246, 246); float: right; margin-right: -380px; }
#sidebar h3 { color: rgb(11, 72, 107); margin: 0px; padding: 5px 0px; font: bold 16px/1.5 "微軟雅黑"; text-indent: 0.5em; border-style: solid; border-color: rgb(221, 221, 221); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; border-width: 0px 0px 2px; }
#sidebar p { margin: 0px; line-height: 18px; padding: 0px 0px 10px; }
#sidebar ul, #sidebar li { margin: 0px; padding: 0px; list-style-type: none; }
#sidebar li { border-bottom: 1px solid rgb(221, 221, 221); margin: 0px; padding: 5px 3px; }
#sidebar li:hover { border-bottom-style: dashed; }
#sidebar li a, #sidebar li a:visited { text-decoration: none; color: rgb(51, 51, 51); }
#sidebar li a:hover { color: rgb(102, 102, 102); }

前端觀察（2015版風(fēng)格）

前端觀察-2015版風(fēng)格

簡單說一下中間的一些想法：

• 我是字體控，所以這次對字體比較講究，英文字體使用了Helvetica Neue浩考，中文使用了蘭亭黑，字重都是100拓诸，嗯，超細體，在Mac下表現(xiàn)很贊钳枕，字重使用了400最仑，100太細更適合有設(shè)計感的原生藐俺，而不適合內(nèi)容。但這些都不影響windows泥彤，windows默認字體會是Tahoma和微軟雅黑欲芹，字重400。
• 然后logo卻用了華文仿宋和宋體吟吝，我覺得像宋體/明體這種字體在字號比較大的時候很漂亮菱父，低調(diào)優(yōu)雅。
• 主題使用了Flatly的配色
• 考慮比較多的易用性和易讀性剑逃，所以依然采用了兩欄的布局

沒有考慮IE瀏覽器浙宜，無論哪個版本，Windows實在是令人不解誒炕贵，這么多年了連基本的字體渲染都做不好梆奈，你看不管哪個中文字體小于14號時看起來都那么粗糙。所以windows用戶也沒法體驗100字重的超細效果——手機倒是可以的称开。

CSS 字體屬性

CSS 文本屬性

CSS 框模型概述

CSS 框模型

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

如下圖所示：

CSS 框模型實例

CSS 內(nèi)邊距屬性

CSS 外邊距屬性