部份css樣式詳解(附實際應用)

本文的全部實例均基於博客園的頁面定製。 全部表格內容來自W3CSchool。

頁面背景（background）

博客開通以後，不少人最早作的事情必定是改頁面的背景，換成一張圖片或者換上一個本身喜歡的顏色，這時候用到的就是background屬性。

可是，在什麼地方用呢？

全部的html標籤都支持這個屬性。因此，隨便用。

咱們常常能看到相似background: #fff;這種使用方式，若是背景是張圖片，那可能會看到background: url('xxx.jpg');這種使用方式。

即便沒有系統的學過css，僅看這兩條代碼也能知道前者是在設置背景色，後者則是在設置背景圖片。

實際就是選擇圖片作背景仍是選擇顏色作背景。

那麼如今設置一下博客的背景：

body {
 background: #FFE4C4;
}
複製代碼

顏色確實改變了哈，同理能夠設置圖像背景。

咱們在瀏覽器中檢查元素（F12），能夠看到background其實是一系列屬性的集合

對於單純的背景顏色來講，這一系列的屬性一般能夠無視，對於圖像背景，則按需設置這些內容（通常是postion, size, repeat, attachment這幾條）。

這些屬性的具體使用方式能夠經過手冊查找到，這裏再也不敘述。

上面換上了背景圖像以後，咱們使用手機打開，發現圖像平鋪了（未設置repeat），可是關閉了這條屬性，手機瀏覽器只是居中顯示一張圖像(在手機上只能看到圖像的一部分)，很差看，這顯然是違背了咱們更改樣式的初衷（咱們確定是要美化博客不是）。

那怎麼解決呢？這屬於多終端兼容問題，並非能夠經過css就能解決的。能夠經過響應式設計來解決。

負責任的說一句，css實際上是能夠解決這個問題的，但也只是簡單的作一些適應性調整，我的認爲這並不是是一個很好的解決方案（有些場合可能就足夠了，好比這裏），解決方法用到的是@media查詢。

@media only screen and (max-width : 480px) {
 body {
   background: #FFE4C4;
 }  
}  
複製代碼

再打開手機瀏覽器就會發現背景再也不是圖像，而是純色。這一樣能夠在電腦上預覽。

附background的詳細屬性：

值	描述	CSS標準支持
background-color	規定要使用的背景顏色。	1
background-position	規定背景圖像的位置。	1
background-size	規定背景圖片的尺寸。	3
background-repeat	規定如何重複背景圖像。	1
background-origin	規定背景圖片的定位區域。	3
background-clip	規定背景的繪製區域。	3
background-attachment	規定背景圖像是否固定或者隨着頁面的其他部分滾動。	1
background-image	規定要使用的背景圖像。	1
inherit	規定應該從父元素繼承 background 屬性的設置。	1

建議使用background屬性，而不是使用表中的單條屬性。

僞元素

注意，是僞元素，而不是僞類。 僞元素針對元素的特定內容進行操做，僞類則是選擇元素當前的狀態。 關於僞元素和僞類的區別，可參考寒月十八的文章

如今我想在公告欄加一段文字，應該怎麼作，若是有js權限，那麼能夠經過：

var boardcast = document.getElementById('#blog-news');
boardcast.before = "something";
boardcast.after = 'something';
複製代碼

可是爲了加個固定的內容去申請js權限，顯然是大材小用了，咱們徹底能夠經過僞元素:before和:after來實現。

css3的標準規定僞元素是以雙冒號開頭的，可是部分瀏覽器（如IE8）並不兼容，因此也依然支持單冒號的寫法，爲了向後兼容，咱也得寫成單冒號開頭的形式。在瀏覽器的控制檯中，能夠看到對應的標籤後有一個::before。

具體爲：

div#blog-news:before {
    content: "我是一名君子，但這並不影響我貪婪的本性;我對技術着迷，我喜歡數學，我貪婪的汲取着全部知識";
}

div#blog-news:after {
    content: "粉絲好少，我好傷心";
}
複製代碼

這樣一波操做，顯然更簡單，並且你會發現一個附加功用（是好是壞得本身判斷），這個內容在網頁內是不可選中的，但依舊能夠經過瀏覽器的控制檯找到該內容。

比js操做更方便的是，經過css，咱們能夠直接對這個content設定樣式。

div#blog-news:before {
    content: "我是一名君子，但這並不影響我貪婪的本性;我對技術着迷，我喜歡數學，我貪婪的汲取着全部知識";
    font-size: 16px;
    color: rebeccapurple;
}
複製代碼

這個仍是有侷限的，content中的內容只會被解析成字符串，即便有HTML標籤，也會被當成字符串顯示。 緣由是，css並不能改變DOM樹

這裏列出幾個比較經常使用的僞元素：

僞元素	描述	CSS標準支持
:before	在某個元素以前插入內容。	2
:after	在某個元素以後插入內容。	2

知道這個以後，可能就會有人有些想法了，這個粉絲數啥的是否是也能改呢？嘿嘿。確實能改，有了js權限更好改，可是這徹底就是欺騙本身，沒啥必要的=。=

僞類

我發現SimpleMemory模板的標題動畫不太合個人口味，我鼠標放上去不能向右移，我想讓他放大，這得改改。

鼠標放上去，這是一個狀態，在上一節提到，僞類是選擇元素當前的狀態。

那麼，我就能夠根據當前元素的狀態來應用不一樣的樣式了。

.postTitle a:hover {
	margin-left: 0px;
	color: #0f3647;
	text-decoration: underline;
	font-size: 25px;
}
複製代碼

可是這麼作完以後，放大的速度有點慢，緣由是什麼？由於模板中設置了transition: all 0.1s linear 0s;，這是設置過渡效果的。

若是不設置這個屬性，那麼就不會有過渡效果。

transition屬性屬於css3標準，因此低版本瀏覽器（IE8）是不兼容的。

這裏列出部分出現次數最多的僞類：

僞類	描述	CSS標準支持
:active	向被激活的元素添加樣式。	1
:focus	向擁有鍵盤輸入焦點的元素添加樣式。	2
:hover	當鼠標懸浮在元素上方時，向元素添加樣式。	1
:link	向未被訪問的連接添加樣式。	1
:visited	向已被訪問的連接添加樣式。	1

錨點、定位

博客主頁看上去基本沒啥要改的了，那點進博文看看。

不錯不錯，也挺好，不過貌似缺點兒啥？

是目錄！

雖然內置的有目錄，可是這並不酷，並且用處好少，往下翻翻，這個目錄就沒了。怎麼才能像別的網站那樣右下角一直有個目錄呢？

申請js權限以前，讓我先想一想css能不能作，畢竟js建個目錄也挺複雜的。

這時候就順勢想到博文中已存在的目錄，能不能對它操做呢？

找到這個目錄結點，設置以下樣式：

div[class='toc'] {
  position: fixed;
  right: 0;
  bottom: 0;
}
複製代碼

發現目錄出如今了右下角，並且是固定在這裏，不亂跑的。

不過有點小問題，就是在手機之類的小屏幕上，這個目錄可能就有點……但也能夠經過上面提到過的@media來取消這裏設定的樣式。

這段css代碼裏面出現了一些之前沒見過的東西，咱先看看position。

position有五種可能值，詳細以下：

值	描述
absolute	生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed	生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative	生成相對定位的元素，相對於其正常位置進行定位。所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。
static	默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit	規定應該從父元素繼承 position 屬性的值。

CSS3標準中新增了一個sticky:粘性定位
通常說定位的時候，都是在說前面三種
position: 絕對定位
relative: 相對定位
fixed: 固定定位

看完這張表可能也不能徹底理解absolute和relative。

沒有理解，其實主要是沒懂文檔流，上面表格的內容主要就是說文檔流的問題，設置爲absolute的元素會脫離文檔流，設置爲relative的元素不會脫離文檔流，設置爲fixed的元素會脫離文檔流。

在float屬性也有脫離文檔流的說法。

接下來咱們要回答下面的問題：

1. 文檔流是什麼？

標準的說法是，將網頁劃分紅多行，每行從左到右排列html元素。

2. 脫離文檔流去了哪裏？

標準的說法是，在離開當前層次，放置在另外一層上。

其實簡單說來，咱們能夠以地面-天空兩層模型來理解，當前網頁的文檔流是地面（腳踏實地），脫離文檔流那就是上天了（飄了）。

這個例子很差，可是理解起來很是容易，當了解了層佈局模型的時候，會對文檔流有一個更深刻的認識，而這時候能夠選擇 橫條筆記本-便利貼 模型，以筆記本的某一頁做爲當前文檔流（你如今在這一頁作筆記），當你以爲要作的某條筆記不該該放在當前頁，也不該該放在下一頁上，每每這時候你會撕下一頁便利貼，粘在當前頁的某處，這就是脫離了當前文檔流，其內部有本身的佈局。若在這張便利貼上再貼一張便利貼，那麼這張便利貼就相對其父元素（上一張便利貼）定位。
帶着這條內容去看層模型，必定會有所獲。

回到本節開頭所附的代碼，咱們設定了文章目錄所在的元素爲固定定位，因此它脫離了當前的文檔流，飄了。但被固定在了右下角（相對瀏覽器窗口定位）。

就像放風箏，風箏雖然飄在天上，但放風箏的人是抓着線不讓風箏亂飛的。

以上是定位的內容。

另外出現的div[class='toc']是選擇器的內容，匹配時，它要先匹配div標籤，其次匹配class爲toc的標籤，能夠作到精確匹配。

關於選擇器，這裏不展開說，由於關於選擇器的內容，已經有不少很好的文章了，再講，也很難跳出這個圈。

提醒一點，選擇器的內容，必定要和優先級的內容一塊兒看。