Html篇裡提到過

css是啥，CSS樣式是表現。就像網頁的外衣

。比如，標題字型、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。

1、一個CSS樣式示例：

CSS全稱為“層疊樣式表 （Cascading Style Sheets）”，它主要是用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字型加粗等。

例子：從程式碼可以看到，我在結構裡定義了一個名字為c的css樣式，並且在裡對其中一個Dathon使用了它。

<

style

type

=

“text/css”

>

c

{

font-size

：

20

px

；

/*設定文字字號*/

color

：

red

；

/*設定文字顏色*/

font-weight

：

bold

；

/*設定字型加粗*/

}

style

>

head

>

<

body

>

<

p

><

c

>

Dathon，

c

>

Dathon

p

>

body

>

html

>

結果：

2、CSS樣式語法

2.1）css 樣式由選擇符和宣告組成，而宣告又由屬性和值組成

，如下圖所示：

2.2）選擇符：

又稱選擇器，指明網頁中要應用樣式規則的元素。

2.3）宣告：

在英文大括號“｛｝”中的的就是宣告，屬性和值之間用英文冒號“：”分隔。當有多條宣告時，中間可以英文分號“；”。

注意：

為了使用樣式更加容易閱讀，可以將每條程式碼寫在一個新行內，如下所示：

p{font-size：12px；color：red；}

3、CSS樣式的種類

3.1)、內斂式css樣式，直接寫在現有的html標籤中

，程式碼如下：

這裡文字是紅色。

若有多條css樣式程式碼可以寫在一起，中間用分號隔開

，程式碼如下：

這裡文字是紅色。

內聯式的缺點：

若多個元素都需要用css樣式，那麼程式碼量就多很多。

3.2)、嵌入式css樣式，寫在當前的檔案中

，嵌入式css樣式，就是可以把css樣式程式碼寫在標籤之間，程式碼如下：

注：嵌入式css樣式必須寫在之間，並且一般情況下嵌入式css樣式寫在之間。

3.3）、外部式css樣式，寫在單獨的一個檔案中

。簡單來說就是我們新創一個檔案，寫上css樣式並命名為style。css例如：

span{color：red；}

然後我們在另一個html文件中使用<link>標籤將樣式檔案連結

，程式碼如下：

注：

1、css樣式檔名稱以有意義的英文字母命名，如 main。css。

2、rel=“stylesheet” type=“text/css” 是固定寫法不可修改。

3、標籤位置一般寫在標籤之內。

3.4）、三種方法的優先順序

如果你將這幾種方法都用於某個元素，那麼它最後會程式哪個CSS樣式呢，這其實涉及權值的問題，可以大致的理解為優先順序：

內聯式 > 嵌入式 > 外部式

4、CSS選擇器

4.1）、什麼是選擇器？

在{}之前的部分就是“選擇器”，如：

選擇器{

樣式；}

4.2）、標籤選擇器

標籤選擇器其實就是html程式碼中的標籤。如、、

、

、。例如下面程式碼：

p{font-size：12px；line-height：1。6em；}

4.3）、類選擇器

類選擇器在css樣式編碼中是最常用到的，語法：

。類選器名稱{css樣式程式碼；}

注：

1、英文圓點開頭

2、其中類選器名稱可以任意起名（但不要起中文噢）

使用方法：

（1）建立css樣式：

。setgGeen{color：green；}

（2）將類選擇器使用到某個元素中去：

Dathon

4.4）、ID選擇器

語法：與類選擇器僅只是。和#的區別

#setGreen{color：green；}

使用方法：

與類選擇器一致，但class變為id。

4.5）、類和ID選擇器的區別

1、ID選擇器只能在文件中使用一次。

2、可以使用類選擇器詞列表方法為一個元素同時設定多個樣式。（ID選擇器不行）

4.6）、通用選擇器

它使用一個（*）號指定，它的作用是匹配html中所有標籤元素，如下使用下面程式碼使用html中任意標籤元素字型顏色全部設定為紅色，語法：

* {color：red；}

5、CSS的性質

5.1）、繼承

CSS的某些樣式是具有繼承性的，繼承是一種規則，它允許樣式不僅應用於某個特定html標籤元素，而且應用於其後代。比如下面程式碼：如某種顏色應用於p標籤，這個顏色設定不僅應用p標籤，還應用於p標籤中的所有子元素文字，這裡子元素為span標籤。但注意有一些css樣式是不具有繼承性的。如border：1px solid red。

p{color：red；}

三年級時，我還是一個膽小如鼠的小女孩。

5.2）、層疊

如果在html檔案中對於同一個元素可以有多個css樣式存在並且這多個css樣式具有相同權重值怎麼辦？

標籤的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100。

層疊就是在html檔案中對於同一個元素可以有多個css樣式存在，當有相同權重的樣式存在時，會根據這些css樣式的前後順序來決定，處於最後面的css樣式會被應用。

5.3）、重要性

我們在做網頁程式碼的時，有些特殊的情況需要為某些樣式設定具有最高權值，怎麼辦？這時候我們可以使用！important來解決，語法：

p{color：red！important；}

6、CSS樣式語法

6.1）、字型設定，

語法：

body{font-family：“宋體”；}

6.2）、字號與顏色設定，

#666灰色

body{font-size：12px；color：#666}

6.3）、粗體

。當然也可以用html等去做

span{font-weight：bold；}

6.4）、斜體

a{font-style：italic；}

6.5）、下劃線

a{text-decoration：underline；}

6.6）、刪除線

。oldPrice{text-decoration：line-through；}

6.7）、段落排版 -- 縮排

：以下為縮排文字2倍大小的意思（可理解為縮排兩個空格），再也不用一直打 

p{text-indent：2em；}

6.8）、段落排版 -- 行高

p{line-height：1。5em；}

6.9）、段落排版 -- 文字間距

h1{letter-spacing：50px；}

。。。

Dathon

結果：

6.10）、段落排版 -- 單詞間距

h1{ word-spacing：50px；}

。。。

Dathon=Data+python

結果：

6.11）、段落排版 -- 對齊

h1{text-align：center；}

css相關的內容暫時就總結這些，非常基礎，主要是輔助自身工作用，而不是做前端。那資料分析所需要的前端技能篇就暫時告一段落，往後應該是寫

機器學習入門篇。

姐妹篇：

小匿：資料分析師所需的程式設計技能 ： html篇

一個記錄會計到資料、演算法路上所學的微信公眾號：

Dathon