1.CSS認識

在談論CSS的概念之前，我們先說一說web標準的目的——其在于創建一個統一的用于web表現層的技術標準，以便通過不同瀏覽器或終端設備向最終用戶展示信息內容。一個網頁的呈現是由三部分組成：結構(Structure)、表現(Presentation)和行為(Behavior)。

而三大部分又是由html、css、js來編寫組成的：

結構

HTML

樣式

CSS

行為

JS

1.1 CSS的概念及作用

CSS是(Cascading Style Sheets)層疊樣式表的縮寫 ，簡稱樣式表。

網頁設計者使用CSS可以定義元素的樣式，包括字體，顏色及其它的高級樣式。

采用CSS樣式的優點：

1. 提高頁面瀏覽速度。 使用CSS方法，比傳統的web設計方法至少節約50%以上的大小。

2. 縮短改版時間，將表現與內容相分離。 只要簡單的修改幾個CSS文件就可以重新設計一個有成千上萬個網頁。

3.降低網站流量的費用。帶寬要求降低(代碼更簡潔),成本更低

4.聯想容易被搜尋引擎搜索到。 提高網站在百度或google中的排名

5.內容能被更廣泛的設備所訪問。包括屏幕閱讀機，手持設備等。

1.2 CSS的三種基本寫法

語法簡單說明如下：

單個樣式：

樣式屬性名：樣式屬性值 ; 比如 color:red;

多個樣式：

樣式屬性名：樣式屬性值 ; 樣式屬性名：樣式屬性值 ;

比如 color:red;font-size:120px;

注意：

1.屬性值不需要使用引號括起來，除非屬性值是由多個單詞組成，如：font-family: "sans serif"；

2.有的屬性可以指定多個屬性值，多個屬性值間以“,”隔開；

3.當定義多個值時，瀏覽器按照從前向后順序選擇屬性值。如果第1個值有效，則嘗試使用，如果第1個無效，則使用第2個，依次類推。

①寫法一：在標簽中的style屬性中直接寫樣式

1 2 疊層樣式表

②寫法二：在style標簽內書寫樣式，標簽可以放在頁面的任何位置；推薦寫在head、body中

1 2 3 Insert title here 4 5 13 14 15 疊層樣式表16

③寫法三：外部引入樣式，實際項目中應用最多，使用link標簽進行.css文件外部引用

1 2 3 Insert title here 4 5 6 7 8 9 疊層樣式表10

.css文件中寫入選擇器對應的樣式列表，如下：

1 @CHARSET "UTF-8";2 div {3 color: red;4 font-weight: bold;5 font-style: italic;6 font-family:楷體;7 }

2.CSS選擇器

2.1基本選擇器

CSS基本選擇器比較簡單，主要分為：通用選擇器、標簽選擇器、類選擇器、ID選擇器四大類。直接上代碼看一下就懂了：

1 2 3 Insert title here 4 34 35 36 41 div樣式42 span樣式43 a超鏈接樣式44

2.2其他選擇器

CSS其他選擇器主要有：多元素選擇器、后代選擇器、子元素選擇器、相鄰元素選擇器、屬性選擇器這五大類，具體還是看代碼：

1 2 3 Insert title here 4 47 48 49 55 div樣式56 span樣式57

p1標簽樣式

58 a超鏈接樣式59 60

61 我是大p
62 我是大p里面的span63

64

我是小p

65 66 span樣式67

p2標簽樣式

68 baidu.com
69 taobao.com70

另外獨立來說一說偽類選擇器，CSS偽類選擇器主要用于某些選擇器添加特殊的效果。主要在支持CSS的瀏覽器上對鏈接的不同狀態以不同的方式顯示。這些狀態包括：活動狀態(active)，已被訪問狀態(visited)，未被訪問狀態(link)，和鼠標懸停狀態(hover)。

1 a:link {color: #FF0000} /* 未訪問的鏈接 */2 a:visited {color: #00FF00} /* 已訪問的鏈接 */3 a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */4 a:active {color: #0000FF} /* 選定的鏈接 */

提示：在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。

提示：偽類名稱對大小寫不敏感。

下面以一個a:hover的例子來解釋一下偽類選擇器的作用：

1 2 3 Insert title here 4 17 18 19 25 百度網址26

顯示效果如下：

更多CSS偽類知識可以參考：http://www.w3school.com.cn/css/css_pseudo_classes.asp

3. CSS的優先級

CSS樣式是有優先級的，具體的樣式優先級(渲染順序)如下：

!important > 行內樣式 > id選擇器 > 類選擇器 > 標簽選擇器，在選擇器優先級(先看優先級)相同的情況下，參照就近原則，具體示例如下代碼：

1 2 3 Insert title here 4 6 23 24 25 我被渲染了26

4.CSS的繼承性

HTML文檔以樹形結構進行組織，各元素之間是一種層次關系，這種層次關系同樣反映在樣式表的應用中。具有層次關系的元素之間，內層元素將繼承外層元素的樣式，多個外層元素中定義的樣式將疊加到內層元素。

HTML中，

是其他元素的容器，是其他元素的最外層元素，所以元素中定義的樣式將影響其他所有元素的顯示格式。

具體示例如下：

1 2 3 Insert title here 4 5 13 14 15 21 22

字體變紅

23 24 25

字體變紅

26 27

具有繼承的CSS屬性：

說明

對應屬性

文本相關的屬性是繼承的

text-align、color、text-indent、font-family、font-size、

font-style、font-weight、 letter-spacing、word-spacing、

text-transform、line-height等

列表相關的屬性是繼承的(ul,ol,li)

list-style、 list-style-image、list-style-position、list-style-type

總結

以上是生活随笔為你收集整理的css a标签去掉下划线_CSS入门知识汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。