用過cnblogs的估計都知道cnblogs提供了相對比較開放的個性化選項,其中最爲突出的估計就是頁面CSS定製了.可是沒學過Web前端的人可能並不會用這個東西...css
因此我打算在此分享一些定製CSS過程當中使用的奇技淫巧一些方法來幫助你們定製blog qwq前端
之後若是想到新的主意或者更好的表述的話估計還會回來更新一波...本博文不按期更新吧w算法
博主並不是專業Web開發,因此可能有些語言不夠嚴謹或者不夠準確還請諒解qwq瀏覽器
若是有表意模糊的地方也歡迎留言qwqapp
1.何謂CSS
CSS,即層疊樣式表,能夠被認爲是HTML的擴充,用於給HTML裏結構化的內容指定顯示方式,好比字體/背景/大小/間距/特殊效果/過渡效果等.ide
Wikipedia中的概述以下:函數
層疊樣式表（英語：Cascading Style Sheets，簡寫 CSS），又稱串樣式列表、級聯樣式表、串接樣式表、層疊樣式表、階層式樣式表，一種用來爲結構化文檔（如 HTML 文檔或 XML 應用）添加樣式（字體、間距和顏色等）的計算機語言，由 W3C 定義和維護。工具
CSS可使HTML中僅包含結構信息而沒必要糾結如何顯示,也能夠像常量和函數同樣作到將信息集中在一處使得修改更方便.這也就是咱們自定義CSS的工做原理.佈局
網頁的讀者和做者均可以使用CSS來決定文件的顏色、字體、排版等顯示特性。CSS 最主要的目的是將文件的內容與顯示分隔開來。post
因此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設置中了.
UPDD: 個人CSS在此開放你們使用, 可是但願你們可以在CSS註釋中註明來源QAQ...感謝你們配合qwq!
讀書人的事怎麼能叫偷嘛
UPD: 可能有些博主使用了一些許可協議來保護博客內容, 這時就不能隨便"借鑑"了由於博主可能有權查你水錶...好比本人使用的CC-BY-NC-SA 4.0許可協議
附: 各類其餘可能用到的屬性
摘自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
最後祝你們的Blog顏值++,訪問++ (^_^)