[技術] 如何正確食用cnblogs的CSS定制

阿新 • • 發佈：2017-07-31

:after 渲染聲明 osi 幫助目的 align mode 快速定位

用過cnblogs的估計都知道cnblogs提供了相對比較開放的個性化選項,其中最為突出的估計就是頁面CSS定制了.但是沒學過Web前端的人可能並不會用這個東西...

所以我打算在此分享一些定制CSS過程中使用的奇技淫巧一些方法來幫助大家定制blog qwq

博主並非專業Web開發,所以可能有些語言不夠嚴謹或者不夠準確還請諒解qwq

如果有表意模糊的地方也歡迎留言qwq

1.何謂CSS

CSS,即層疊樣式表,可以被認為是HTML的擴充,用於給HTML裏結構化的內容指定顯示方式,比如字體/背景/大小/間距/特殊效果/過渡效果等.

Wikipedia中的概述如下:

層疊樣式表（英語：Cascading Style Sheets

，簡寫 CSS），又稱串樣式列表、級聯樣式表、串接樣式表、層疊樣式表、階層式樣式表，一種用來為結構化文檔（如 HTML 文檔或 XML 應用）添加樣式（字體、間距和顏色等）的計算機語言，由 W3C 定義和維護。

CSS可以使HTML中僅包含結構信息而不必糾結如何顯示,也可以像常量和函數一樣做到將信息集中在一處使得修改更方便.這也就是我們自定義CSS的工作原理.

網頁的讀者和作者都可以使用CSS來決定文件的顏色、字體、排版等顯示特性。CSS 最主要的目的是將文件的內容與顯示分隔開來。

所以cnblogs提供的CSS定制其實算深度定制通道了(當然自己搭blog除外了233)

由於CSS語法體系相對也比較大,這裏除了部分用到的屬性之外不再仔細介紹.詳細內容可以自行參考W3School的CSS教程

一般來講我們只需了解基本語法/邊框/字體/背景設置就可以進行基礎的個性化了.

定制blog首先需要參考HTML中的結構信息,而這是cnblogs生成的,但是不同主題方案的結構與自定義空間並不一樣,有些可以很容易地個性化,而有些就基本不可調整.

個人認為一般SimpleMemory主題是最容易進行定制的.一般越是簡潔的主題定制空間越大.

下文將以SimpleMemory主題模板為例來進行演示.其他模板主題大同小異,只要善用瀏覽器的開發功能就可以取得很好的效果.

2. 定制中的有力工具:瀏覽器

如果你擔心你沒有Web開發環境,沒有關系,你的瀏覽器其實在這種時候就是最好的IDE.比如Chrome瀏覽器中的"審查元素"功能(在新版Chrome中這個選項似乎更名了qwq)可以幫助你快速定位想要修改顯示樣式的元素位置並顯示該元素所引用的CSS內容來進行修改.而且瀏覽器中的開發者工具大都能實時顯示修改內容來進行一些細致的調整.

下文將以Chrome為例,其他瀏覽器一般都有類似的開發者工具或者頁面編輯模塊.

3. 背景更改

最基礎的定制可能就是修改背景了吧,但是CSS需要引用Internet上的圖片文件,這時需要先找到一個靠譜的圖床或者幹脆傳到cnblogs相冊裏.然後對上傳好的圖片獲取URL.

然後我們可以按下F12打開瀏覽器的開發者工具,定位到body元素的樣式表,原版CSS中只有 background-color 一個背景相關的屬性.我們可以將它改成 background-image 屬性或者直接使用 background 屬性來修改,比如改成如下內容:

background: url(http://images.cnblogs.com/cnblogs_com/someone/something.png) fixed;

url中填上傳好的圖片的URL,最後的值 fixed 表示圖片固定,不隨網頁的滾動而移動.也可以選擇不固定圖片.

4. Blog主要內容的透明度設置

我們設置了背景圖之後可能會發現: WTF我的背景圖整個被Blog主體給擋住了啊QAQ

很多主題的主體內容都是不透明的,這時我們需要手動進行一些調整.

首先審查元素定位到整個主體內容框,將原版CSS中的 rgb 顏色或者十六進制顏色代碼改為 rgba 顏色.這時我們就可以加一個Alpha值,代表元素的不透明度.

如果背景圖對比度很高的話不建議將透明度調整得過低,否則極有可能影響博文的可讀性.

如果想調整透明度的話一般要將頁面上的可顯示內容全部設置好透明度,這時就到了考驗耐心的時候了233不斷觀察然後將自己所不滿意的元素審查元素然後更改對應樣式即可.

參考數據:博主的主體部分的Alpha值為0.8左右,其他需要一定程度突出顯示的元素的Alpha值為0.3左右.

5. SimpleMemory側邊欄模塊的標題樣式設置

SimpleMemory主題的側邊欄模塊標題都只是空蕩蕩的一串文本,我們可以對其設置Padding/Margin/Border.比如博主右側的側邊欄就進行了一些自定義設置.代碼如下:

1 .catListTitle {
2     margin-top: 21px;
3     margin-bottom: 10.5px;
4     text-align: left;
5     border-left: 10px solid rgba(82, 168, 236, 0.8);
6     padding: 10px 0 14px 10px;
7     background-color: rgba(245,245,245,0.3);
8 }

6. 字體設置

我們有時候可能會想更改博客中一些文本的字體比如更改不同等級標題的字體和文本的字體,這時依然可以通過審查元素找到對應的樣式.

CSS中一般不指定字體,而是指定字體家族(Font Family),也就是指定字體大致的顯示類型,具體使用哪種字體實際上由用戶的情況決定.

需要註意超過一個單詞的Font Family需要用引號引起來.

字體大小由 font-size 屬性設置,按需調整就可以.還有字體陰影屬性 font-shadow 等很多,具體參考W3School好了w

7. 從他人博客中"借鑒"CSS

當你懶得自己調整然而又看見某人的Blog全部(或其中一部分元素)看起來定制得非常合你口味,可以有兩種方式獲取TA的自定義CSS:

1.打開瀏覽器開發工具,在所有源中查找一個文件名為TA的UID的CSS文件

2.將網頁全部另存後在保存的除HTML外的其他源中查找上述CSS文件

打開之後就可以結合自己在HTML結構中的查找結果來定位到自己需要的樣式並放在Blog設置中了.

讀書人的事怎麽能叫偷嘛

附: 各種其他可能用到的屬性

摘自http://www.w3school.com.cn/cssref/index.asp

CSS3 動畫屬性（Animation）

屬性描述 CSS

@keyframes 規定動畫。 3

animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 3

animation-name 規定 @keyframes 動畫的名稱。 3

animation-duration 規定動畫完成一個周期所花費的秒或毫秒。 3

animation-timing-function 規定動畫的速度曲線。 3

animation-delay 規定動畫何時開始。 3

animation-iteration-count 規定動畫被播放的次數。 3

animation-direction 規定動畫是否在下一周期逆向地播放。 3

animation-play-state 規定動畫是否正在運行或暫停。 3

animation-fill-mode 規定對象動畫時間之外的狀態。 3

CSS 背景屬性（Background）

屬性描述 CSS

background 在一個聲明中設置所有的背景屬性。 1

background-attachment 設置背景圖像是否固定或者隨著頁面的其余部分滾動。 1

background-color 設置元素的背景顏色。 1

background-image 設置元素的背景圖像。 1

background-position 設置背景圖像的開始位置。 1

background-repeat 設置是否及如何重復背景圖像。 1

background-clip 規定背景的繪制區域。 3

background-origin 規定背景圖片的定位區域。 3

background-size 規定背景圖片的尺寸。 3

CSS 邊框屬性（Border 和 Outline）

屬性描述 CSS

border 在一個聲明中設置所有的邊框屬性。 1

border-bottom 在一個聲明中設置所有的下邊框屬性。 1

border-bottom-color 設置下邊框的顏色。 2

border-bottom-style 設置下邊框的樣式。 2

border-bottom-width 設置下邊框的寬度。 1

border-color 設置四條邊框的顏色。 1

border-left 在一個聲明中設置所有的左邊框屬性。 1

border-left-color 設置左邊框的顏色。 2

border-left-style 設置左邊框的樣式。 2

border-left-width 設置左邊框的寬度。 1

border-right 在一個聲明中設置所有的右邊框屬性。 1

border-right-color 設置右邊框的顏色。 2

border-right-style 設置右邊框的樣式。 2

border-right-width 設置右邊框的寬度。 1

border-style 設置四條邊框的樣式。 1

border-top 在一個聲明中設置所有的上邊框屬性。 1

border-top-color 設置上邊框的顏色。 2

border-top-style 設置上邊框的樣式。 2

border-top-width 設置上邊框的寬度。 1

border-width 設置四條邊框的寬度。 1

outline 在一個聲明中設置所有的輪廓屬性。 2

outline-color 設置輪廓的顏色。 2

outline-style 設置輪廓的樣式。 2

outline-width 設置輪廓的寬度。 2

border-bottom-left-radius 定義邊框左下角的形狀。 3

border-bottom-right-radius 定義邊框右下角的形狀。 3

border-image 簡寫屬性，設置所有 border-image-* 屬性。 3

border-image-outset 規定邊框圖像區域超出邊框的量。 3

border-image-repeat 圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。 3

border-image-slice 規定圖像邊框的向內偏移。 3

border-image-source 規定用作邊框的圖片。 3

border-image-width 規定圖片邊框的寬度。 3

border-radius 簡寫屬性，設置所有四個 border-*-radius 屬性。 3

border-top-left-radius 定義邊框左上角的形狀。 3

border-top-right-radius 定義邊框右下角的形狀。 3

box-decoration-break 3

box-shadow 向方框添加一個或多個陰影。 3

Box 屬性

屬性描述 CSS

overflow-x 如果內容溢出了元素內容區域，是否對內容的左/右邊緣進行裁剪。 3

overflow-y 如果內容溢出了元素內容區域，是否對內容的上/下邊緣進行裁剪。 3

overflow-style 規定溢出元素的首選滾動方法。 3

rotation 圍繞由 rotation-point 屬性定義的點對元素進行旋轉。 3

rotation-point 定義距離上左邊框邊緣的偏移點。 3

Color 屬性

屬性描述 CSS

color-profile 允許使用源的顏色配置文件的默認以外的規範。 3

opacity 規定書簽的級別。 3

rendering-intent 允許使用顏色配置文件渲染意圖的默認以外的規範。 3

Content for Paged Media 屬性

屬性描述 CSS

bookmark-label 規定書簽的標記。 3

bookmark-level 規定書簽的級別。 3

bookmark-target 規定書簽鏈接的目標。 3

float-offset 將元素放在 float 屬性通常放置的位置的相反方向。 3

hyphenate-after 規定連字單詞中連字符之後的最小字符數。 3

hyphenate-before 規定連字單詞中連字符之前的最小字符數。 3

hyphenate-character 規定當發生斷字時顯示的字符串。 3

hyphenate-lines 指示元素中連續斷字連線的最大數。 3

hyphenate-resource 規定幫助瀏覽器確定斷字點的外部資源（逗號分隔的列表）。 3

hyphens 設置如何對單詞進行拆分，以改善段落的布局。 3

image-resolution 規定圖像的正確分辨率。 3

marks 向文檔添加裁切標記或十字標記。 3

string-set 3

CSS 尺寸屬性（Dimension）

屬性描述 CSS

height 設置元素高度。 1

max-height 設置元素的最大高度。 2

max-width 設置元素的最大寬度。 2

min-height 設置元素的最小高度。 2

min-width 設置元素的最小寬度。 2

width 設置元素的寬度。 1

可伸縮框屬性（Flexible Box）

屬性描述 CSS

box-align 規定如何對齊框的子元素。 3

box-direction 規定框的子元素的顯示方向。 3

box-flex 規定框的子元素是否可伸縮。 3

box-flex-group 將可伸縮元素分配到柔性分組。 3

box-lines 規定當超出父元素框的空間時，是否換行顯示。 3

box-ordinal-group 規定框的子元素的顯示次序。 3

box-orient 規定框的子元素是否應水平或垂直排列。 3

box-pack 規定水平框中的水平位置或者垂直框中的垂直位置。 3

CSS 字體屬性（Font）

屬性描述 CSS

font 在一個聲明中設置所有字體屬性。 1

font-family 規定文本的字體系列。 1

font-size 規定文本的字體尺寸。 1

font-size-adjust 為元素規定 aspect 值。 2

font-stretch 收縮或拉伸當前的字體系列。 2

font-style 規定文本的字體樣式。 1

font-variant 規定是否以小型大寫字母的字體顯示文本。 1

font-weight 規定字體的粗細。 1

內容生成（Generated Content）

屬性描述 CSS

content 與 :before 以及 :after 偽元素配合使用，來插入生成內容。 2

counter-increment 遞增或遞減一個或多個計數器。 2

counter-reset 創建或重置一個或多個計數器。 2

quotes 設置嵌套引用的引號類型。 2

crop 允許被替換元素僅僅是對象的矩形區域，而不是整個對象。 3

move-to 從流中刪除元素，然後在文檔中後面的點上重新插入。 3

page-policy 確定元素基於頁面的 occurrence 應用於計數器還是字符串值。 3

Grid 屬性

屬性描述 CSS

grid-columns 規定網格中每個列的寬度。 3

grid-rows 規定網格中每個列的高度。 3

Hyperlink 屬性

屬性描述 CSS

target 簡寫屬性，設置target-name、target-new以及target-position屬性。 3

target-name 規定在何處打開鏈接（鏈接的目標）。 3

target-new 規定目標鏈接在新窗口還是在已有窗口的新標簽頁中打開。 3

target-position 規定在何處放置新的目標鏈接。 3

CSS 列表屬性（List）

屬性描述 CSS

list-style 在一個聲明中設置所有的列表屬性。 1

list-style-image 將圖象設置為列表項標記。 1

list-style-position 設置列表項標記的放置位置。 1

list-style-type 設置列表項標記的類型。 1

marker-offset 2

CSS 外邊距屬性（Margin）

屬性描述 CSS

margin 在一個聲明中設置所有外邊距屬性。 1

margin-bottom 設置元素的下外邊距。 1

margin-left 設置元素的左外邊距。 1

margin-right 設置元素的右外邊距。 1

margin-top 設置元素的上外邊距。 1

Marquee 屬性

屬性描述 CSS

marquee-direction 設置移動內容的方向。 3

marquee-play-count 設置內容移動多少次。 3

marquee-speed 設置內容滾動得多快。 3

marquee-style 設置移動內容的樣式。 3

多列屬性（Multi-column）

屬性描述 CSS

column-count 規定元素應該被分隔的列數。 3

column-fill 規定如何填充列。 3

column-gap 規定列之間的間隔。 3

column-rule 設置所有 column-rule-* 屬性的簡寫屬性。 3

column-rule-color 規定列之間規則的顏色。 3

column-rule-style 規定列之間規則的樣式。 3

column-rule-width 規定列之間規則的寬度。 3

column-span 規定元素應該橫跨的列數。 3

column-width 規定列的寬度。 3

columns 規定設置 column-width 和 column-count 的簡寫屬性。 3

CSS 內邊距屬性（Padding）

屬性描述 CSS

padding 在一個聲明中設置所有內邊距屬性。 1

padding-bottom 設置元素的下內邊距。 1

padding-left 設置元素的左內邊距。 1

padding-right 設置元素的右內邊距。 1

padding-top 設置元素的上內邊距。 1

Paged Media 屬性

屬性描述 CSS

fit 示意如何對width和height屬性均不是auto的被替換元素進行縮放。 3

fit-position 定義盒內對象的對齊方式。 3

image-orientation 規定用戶代理應用於圖像的順時針方向旋轉。 3

page 規定元素應該被顯示的頁面特定類型。 3

size 規定頁面內容包含框的尺寸和方向。 3

CSS 定位屬性（Positioning）

屬性描述 CSS

bottom 設置定位元素下外邊距邊界與其包含塊下邊界之間的偏移。 2

clear 規定元素的哪一側不允許其他浮動元素。 1

clip 剪裁絕對定位元素。 2

cursor 規定要顯示的光標的類型（形狀）。 2

display 規定元素應該生成的框的類型。 1

float 規定框是否應該浮動。 1

left 設置定位元素左外邊距邊界與其包含塊左邊界之間的偏移。 2

overflow 規定當內容溢出元素框時發生的事情。 2

position 規定元素的定位類型。 2

right 設置定位元素右外邊距邊界與其包含塊右邊界之間的偏移。 2

top 設置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。 2

vertical-align 設置元素的垂直對齊方式。 1

visibility 規定元素是否可見。 2

z-index 設置元素的堆疊順序。 2

CSS 打印屬性（Print）

屬性描述 CSS

orphans 設置當元素內部發生分頁時必須在頁面底部保留的最少行數。 2

page-break-after 設置元素後的分頁行為。 2

page-break-before 設置元素前的分頁行為。 2

page-break-inside 設置元素內部的分頁行為。 2

widows 設置當元素內部發生分頁時必須在頁面頂部保留的最少行數。 2

CSS 表格屬性（Table）

屬性描述 CSS

border-collapse 規定是否合並表格邊框。 2

border-spacing 規定相鄰單元格邊框之間的距離。 2

caption-side 規定表格標題的位置。 2

empty-cells 規定是否顯示表格中的空單元格上的邊框和背景。 2

table-layout 設置用於表格的布局算法。 2

CSS 文本屬性（Text）

屬性描述 CSS

color 設置文本的顏色。 1

direction 規定文本的方向 / 書寫方向。 2

letter-spacing 設置字符間距。 1

line-height 設置行高。 1

text-align 規定文本的水平對齊方式。 1

text-decoration 規定添加到文本的裝飾效果。 1

text-indent 規定文本塊首行的縮進。 1

text-shadow 規定添加到文本的陰影效果。 2

text-transform 控制文本的大小寫。 1

unicode-bidi 設置文本方向。 2

white-space 規定如何處理元素中的空白。 1

word-spacing 設置單詞間距。 1

hanging-punctuation 規定標點字符是否位於線框之外。 3

punctuation-trim 規定是否對標點字符進行修剪。 3

text-align-last 設置如何對齊最後一行或緊挨著強制換行符之前的行。 3

text-emphasis 向元素的文本應用重點標記以及重點標記的前景色。 3

text-justify 規定當 text-align 設置為 "justify" 時所使用的對齊方法。 3

text-outline 規定文本的輪廓。 3

text-overflow 規定當文本溢出包含元素時發生的事情。 3

text-shadow 向文本添加陰影。 3

text-wrap 規定文本的換行規則。 3

word-break 規定非中日韓文本的換行規則。 3

word-wrap 允許對長的不可分割的單詞進行分割並換行到下一行。 3

2D/3D 轉換屬性（Transform）

屬性描述 CSS

transform 向元素應用 2D 或 3D 轉換。 3

transform-origin 允許你改變被轉換元素的位置。 3

transform-style 規定被嵌套元素如何在 3D 空間中顯示。 3

perspective 規定 3D 元素的透視效果。 3

perspective-origin 規定 3D 元素的底部位置。 3

backface-visibility 定義元素在不面對屏幕時是否可見。 3

過渡屬性（Transition）

屬性描述 CSS

transition 簡寫屬性，用於在一個屬性中設置四個過渡屬性。 3

transition-property 規定應用過渡的 CSS 屬性的名稱。 3

transition-duration 定義過渡效果花費的時間。 3

transition-timing-function 規定過渡效果的時間曲線。 3

transition-delay 規定過渡效果何時開始。 3

用戶界面屬性（User-interface）

屬性描述 CSS

appearance 允許您將元素設置為標準用戶界面元素的外觀 3

box-sizing 允許您以確切的方式定義適應某個區域的具體內容。 3

icon 為創作者提供使用圖標化等價物來設置元素樣式的能力。 3

nav-down 規定在使用 arrow-down 導航鍵時向何處導航。 3

nav-index 設置元素的 tab 鍵控制次序。 3

nav-left 規定在使用 arrow-left 導航鍵時向何處導航。 3

nav-right 規定在使用 arrow-right 導航鍵時向何處導航。 3

nav-up 規定在使用 arrow-up 導航鍵時向何處導航。 3

outline-offset 對輪廓進行偏移，並在超出邊框邊緣的位置繪制輪廓。 3

resize 規定是否可由用戶對元素的尺寸進行調整。 3

屬性	描述	CSS
@keyframes	規定動畫。	3
animation	所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。	3
animation-name	規定 @keyframes 動畫的名稱。	3
animation-duration	規定動畫完成一個周期所花費的秒或毫秒。	3
animation-timing-function	規定動畫的速度曲線。	3
animation-delay	規定動畫何時開始。	3
animation-iteration-count	規定動畫被播放的次數。	3
animation-direction	規定動畫是否在下一周期逆向地播放。	3
animation-play-state	規定動畫是否正在運行或暫停。	3
animation-fill-mode	規定對象動畫時間之外的狀態。	3

屬性	描述	CSS
background	在一個聲明中設置所有的背景屬性。	1
background-attachment	設置背景圖像是否固定或者隨著頁面的其余部分滾動。	1
background-color	設置元素的背景顏色。	1
background-image	設置元素的背景圖像。	1
background-position	設置背景圖像的開始位置。	1
background-repeat	設置是否及如何重復背景圖像。	1
background-clip	規定背景的繪制區域。	3
background-origin	規定背景圖片的定位區域。	3
background-size	規定背景圖片的尺寸。	3

屬性	描述	CSS
border	在一個聲明中設置所有的邊框屬性。	1
border-bottom	在一個聲明中設置所有的下邊框屬性。	1
border-bottom-color	設置下邊框的顏色。	2
border-bottom-style	設置下邊框的樣式。	2
border-bottom-width	設置下邊框的寬度。	1
border-color	設置四條邊框的顏色。	1
border-left	在一個聲明中設置所有的左邊框屬性。	1
border-left-color	設置左邊框的顏色。	2
border-left-style	設置左邊框的樣式。	2
border-left-width	設置左邊框的寬度。	1
border-right	在一個聲明中設置所有的右邊框屬性。	1
border-right-color	設置右邊框的顏色。	2
border-right-style	設置右邊框的樣式。	2
border-right-width	設置右邊框的寬度。	1
border-style	設置四條邊框的樣式。	1
border-top	在一個聲明中設置所有的上邊框屬性。	1
border-top-color	設置上邊框的顏色。	2
border-top-style	設置上邊框的樣式。	2
border-top-width	設置上邊框的寬度。	1
border-width	設置四條邊框的寬度。	1
outline	在一個聲明中設置所有的輪廓屬性。	2
outline-color	設置輪廓的顏色。	2
outline-style	設置輪廓的樣式。	2
outline-width	設置輪廓的寬度。	2
border-bottom-left-radius	定義邊框左下角的形狀。	3
border-bottom-right-radius	定義邊框右下角的形狀。	3
border-image	簡寫屬性，設置所有 border-image-* 屬性。	3
border-image-outset	規定邊框圖像區域超出邊框的量。	3
border-image-repeat	圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。	3
border-image-slice	規定圖像邊框的向內偏移。	3
border-image-source	規定用作邊框的圖片。	3
border-image-width	規定圖片邊框的寬度。	3
border-radius	簡寫屬性，設置所有四個 border-*-radius 屬性。	3
border-top-left-radius	定義邊框左上角的形狀。	3
border-top-right-radius	定義邊框右下角的形狀。	3
box-decoration-break	3
box-shadow	向方框添加一個或多個陰影。	3

屬性	描述	CSS
overflow-x	如果內容溢出了元素內容區域，是否對內容的左/右邊緣進行裁剪。	3
overflow-y	如果內容溢出了元素內容區域，是否對內容的上/下邊緣進行裁剪。	3
overflow-style	規定溢出元素的首選滾動方法。	3
rotation	圍繞由 rotation-point 屬性定義的點對元素進行旋轉。	3
rotation-point	定義距離上左邊框邊緣的偏移點。	3

屬性	描述	CSS
color-profile	允許使用源的顏色配置文件的默認以外的規範。	3
opacity	規定書簽的級別。	3
rendering-intent	允許使用顏色配置文件渲染意圖的默認以外的規範。	3

屬性	描述	CSS
bookmark-label	規定書簽的標記。	3
bookmark-level	規定書簽的級別。	3
bookmark-target	規定書簽鏈接的目標。	3
float-offset	將元素放在 float 屬性通常放置的位置的相反方向。	3
hyphenate-after	規定連字單詞中連字符之後的最小字符數。	3
hyphenate-before	規定連字單詞中連字符之前的最小字符數。	3
hyphenate-character	規定當發生斷字時顯示的字符串。	3
hyphenate-lines	指示元素中連續斷字連線的最大數。	3
hyphenate-resource	規定幫助瀏覽器確定斷字點的外部資源（逗號分隔的列表）。	3
hyphens	設置如何對單詞進行拆分，以改善段落的布局。	3
image-resolution	規定圖像的正確分辨率。	3
marks	向文檔添加裁切標記或十字標記。	3
string-set	3

屬性	描述	CSS
height	設置元素高度。	1
max-height	設置元素的最大高度。	2
max-width	設置元素的最大寬度。	2
min-height	設置元素的最小高度。	2
min-width	設置元素的最小寬度。	2
width	設置元素的寬度。	1

屬性	描述	CSS
box-align	規定如何對齊框的子元素。	3
box-direction	規定框的子元素的顯示方向。	3
box-flex	規定框的子元素是否可伸縮。	3
box-flex-group	將可伸縮元素分配到柔性分組。	3
box-lines	規定當超出父元素框的空間時，是否換行顯示。	3
box-ordinal-group	規定框的子元素的顯示次序。	3
box-orient	規定框的子元素是否應水平或垂直排列。	3
box-pack	規定水平框中的水平位置或者垂直框中的垂直位置。	3

屬性	描述	CSS
font	在一個聲明中設置所有字體屬性。	1
font-family	規定文本的字體系列。	1
font-size	規定文本的字體尺寸。	1
font-size-adjust	為元素規定 aspect 值。	2
font-stretch	收縮或拉伸當前的字體系列。	2
font-style	規定文本的字體樣式。	1
font-variant	規定是否以小型大寫字母的字體顯示文本。	1
font-weight	規定字體的粗細。	1

屬性	描述	CSS
content	與 :before 以及 :after 偽元素配合使用，來插入生成內容。	2
counter-increment	遞增或遞減一個或多個計數器。	2
counter-reset	創建或重置一個或多個計數器。	2
quotes	設置嵌套引用的引號類型。	2
crop	允許被替換元素僅僅是對象的矩形區域，而不是整個對象。	3
move-to	從流中刪除元素，然後在文檔中後面的點上重新插入。	3
page-policy	確定元素基於頁面的 occurrence 應用於計數器還是字符串值。	3

屬性	描述	CSS
grid-columns	規定網格中每個列的寬度。	3
grid-rows	規定網格中每個列的高度。	3

屬性	描述	CSS
target	簡寫屬性，設置target-name、target-new以及target-position屬性。	3
target-name	規定在何處打開鏈接（鏈接的目標）。	3
target-new	規定目標鏈接在新窗口還是在已有窗口的新標簽頁中打開。	3
target-position	規定在何處放置新的目標鏈接。	3

屬性	描述	CSS
list-style	在一個聲明中設置所有的列表屬性。	1
list-style-image	將圖象設置為列表項標記。	1
list-style-position	設置列表項標記的放置位置。	1
list-style-type	設置列表項標記的類型。	1
marker-offset	2

屬性	描述	CSS
margin	在一個聲明中設置所有外邊距屬性。	1
margin-bottom	設置元素的下外邊距。	1
margin-left	設置元素的左外邊距。	1
margin-right	設置元素的右外邊距。	1
margin-top	設置元素的上外邊距。	1

屬性	描述	CSS
marquee-direction	設置移動內容的方向。	3
marquee-play-count	設置內容移動多少次。	3
marquee-speed	設置內容滾動得多快。	3
marquee-style	設置移動內容的樣式。	3

屬性	描述	CSS
column-count	規定元素應該被分隔的列數。	3
column-fill	規定如何填充列。	3
column-gap	規定列之間的間隔。	3
column-rule	設置所有 column-rule-* 屬性的簡寫屬性。	3
column-rule-color	規定列之間規則的顏色。	3
column-rule-style	規定列之間規則的樣式。	3
column-rule-width	規定列之間規則的寬度。	3
column-span	規定元素應該橫跨的列數。	3
column-width	規定列的寬度。	3
columns	規定設置 column-width 和 column-count 的簡寫屬性。	3

屬性	描述	CSS
padding	在一個聲明中設置所有內邊距屬性。	1
padding-bottom	設置元素的下內邊距。	1
padding-left	設置元素的左內邊距。	1
padding-right	設置元素的右內邊距。	1
padding-top	設置元素的上內邊距。	1

屬性	描述	CSS
fit	示意如何對width和height屬性均不是auto的被替換元素進行縮放。	3
fit-position	定義盒內對象的對齊方式。	3
image-orientation	規定用戶代理應用於圖像的順時針方向旋轉。	3
page	規定元素應該被顯示的頁面特定類型。	3
size	規定頁面內容包含框的尺寸和方向。	3

屬性	描述	CSS
bottom	設置定位元素下外邊距邊界與其包含塊下邊界之間的偏移。	2
clear	規定元素的哪一側不允許其他浮動元素。	1
clip	剪裁絕對定位元素。	2
cursor	規定要顯示的光標的類型（形狀）。	2
display	規定元素應該生成的框的類型。	1
float	規定框是否應該浮動。	1
left	設置定位元素左外邊距邊界與其包含塊左邊界之間的偏移。	2
overflow	規定當內容溢出元素框時發生的事情。	2
position	規定元素的定位類型。	2
right	設置定位元素右外邊距邊界與其包含塊右邊界之間的偏移。	2
top	設置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。	2
vertical-align	設置元素的垂直對齊方式。	1
visibility	規定元素是否可見。	2
z-index	設置元素的堆疊順序。	2

屬性	描述	CSS
orphans	設置當元素內部發生分頁時必須在頁面底部保留的最少行數。	2
page-break-after	設置元素後的分頁行為。	2
page-break-before	設置元素前的分頁行為。	2
page-break-inside	設置元素內部的分頁行為。	2
widows	設置當元素內部發生分頁時必須在頁面頂部保留的最少行數。	2

屬性	描述	CSS
border-collapse	規定是否合並表格邊框。	2
border-spacing	規定相鄰單元格邊框之間的距離。	2
caption-side	規定表格標題的位置。	2
empty-cells	規定是否顯示表格中的空單元格上的邊框和背景。	2
table-layout	設置用於表格的布局算法。	2

屬性	描述	CSS
color	設置文本的顏色。	1
direction	規定文本的方向 / 書寫方向。	2
letter-spacing	設置字符間距。	1
line-height	設置行高。	1
text-align	規定文本的水平對齊方式。	1
text-decoration	規定添加到文本的裝飾效果。	1
text-indent	規定文本塊首行的縮進。	1
text-shadow	規定添加到文本的陰影效果。	2
text-transform	控制文本的大小寫。	1
unicode-bidi	設置文本方向。	2
white-space	規定如何處理元素中的空白。	1
word-spacing	設置單詞間距。	1
hanging-punctuation	規定標點字符是否位於線框之外。	3
punctuation-trim	規定是否對標點字符進行修剪。	3
text-align-last	設置如何對齊最後一行或緊挨著強制換行符之前的行。	3
text-emphasis	向元素的文本應用重點標記以及重點標記的前景色。	3
text-justify	規定當 text-align 設置為 "justify" 時所使用的對齊方法。	3
text-outline	規定文本的輪廓。	3
text-overflow	規定當文本溢出包含元素時發生的事情。	3
text-shadow	向文本添加陰影。	3
text-wrap	規定文本的換行規則。	3
word-break	規定非中日韓文本的換行規則。	3
word-wrap	允許對長的不可分割的單詞進行分割並換行到下一行。	3

屬性	描述	CSS
transform	向元素應用 2D 或 3D 轉換。	3
transform-origin	允許你改變被轉換元素的位置。	3
transform-style	規定被嵌套元素如何在 3D 空間中顯示。	3
perspective	規定 3D 元素的透視效果。	3
perspective-origin	規定 3D 元素的底部位置。	3
backface-visibility	定義元素在不面對屏幕時是否可見。	3

屬性	描述	CSS
transition	簡寫屬性，用於在一個屬性中設置四個過渡屬性。	3
transition-property	規定應用過渡的 CSS 屬性的名稱。	3
transition-duration	定義過渡效果花費的時間。	3
transition-timing-function	規定過渡效果的時間曲線。	3
transition-delay	規定過渡效果何時開始。	3

屬性	描述	CSS
appearance	允許您將元素設置為標準用戶界面元素的外觀	3
box-sizing	允許您以確切的方式定義適應某個區域的具體內容。	3
icon	為創作者提供使用圖標化等價物來設置元素樣式的能力。	3
nav-down	規定在使用 arrow-down 導航鍵時向何處導航。	3
nav-index	設置元素的 tab 鍵控制次序。	3
nav-left	規定在使用 arrow-left 導航鍵時向何處導航。	3
nav-right	規定在使用 arrow-right 導航鍵時向何處導航。	3
nav-up	規定在使用 arrow-up 導航鍵時向何處導航。	3
outline-offset	對輪廓進行偏移，並在超出邊框邊緣的位置繪制輪廓。	3
resize	規定是否可由用戶對元素的尺寸進行調整。	3

最後祝大家的Blog顏值++,訪問++ (^_^)

(然後就這麽水了一篇博(逃))

[技術] 如何正確食用cnblogs的CSS定制

:after 渲染聲明 osi 幫助目的 align mode 快速定位用過cnblogs的估計都知道cnblogs提供了相對比較開放的個性化選項,其中最為突出的估計就是頁面CSS定制了.但是沒學過Web前端的人可能並不會用這個東西... 所以我打算在此分享一些定制

[技術] 如何正確食用cnblogs的CSS定制

1.何謂CSS

2. 定制中的有力工具:瀏覽器

3. 背景更改

4. Blog主要內容的透明度設置

5. SimpleMemory側邊欄模塊的標題樣式設置

6. 字體設置

7. 從他人博客中"借鑒"CSS

附: 各種其他可能用到的屬性

CSS3 動畫屬性（Animation）

CSS 背景屬性（Background）

CSS 邊框屬性（Border 和 Outline）

Box 屬性

Color 屬性

Content for Paged Media 屬性

CSS 尺寸屬性（Dimension）

可伸縮框屬性（Flexible Box）

CSS 字體屬性（Font）

內容生成（Generated Content）

Grid 屬性

Hyperlink 屬性

CSS 列表屬性（List）

CSS 外邊距屬性（Margin）

Marquee 屬性

多列屬性（Multi-column）

CSS 內邊距屬性（Padding）

Paged Media 屬性

CSS 定位屬性（Positioning）

CSS 打印屬性（Print）

CSS 表格屬性（Table）

CSS 文本屬性（Text）

2D/3D 轉換屬性（Transform）

過渡屬性（Transition）

用戶界面屬性（User-interface）

相關推薦