CSS概述

CSS是層疊樣式表（Cascading Style Sheets）用來定義網頁的顯示效果。可以解決html代碼對樣式定義的重復，提高了后期樣式代碼的可維護性，并增強了網頁的顯示效果功能。簡單一句話：CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。
那么CSS和HTML是如何在網頁代碼中相結合的呢？通過四種方式：style屬性 、style標簽、導入和鏈接。

CSS與HTML相結合的四種方式

1、style屬性方式
這種方式很少用，因為還是和HTML差不多。
一般用后面3種。

<p style="background-color:#FF0000; color:#FFFFFF">p標簽段落內容。 </p>

2、style標簽方式

<style type=”text/css”>p { color:#FF0000;} </style>

3、導入方式

<style type="text/css">@import url(myDiv.css) </style>

4、鏈接方式

<link rel="stylesheet" type="text/css" href="css_3.css" media="screen" />

相關語法

樣式優先級

由上到下，由外到內。優先級由低到高。——總之，一般情況是以后加載為主，但還有細節優先級問題（后面會講到）。

CSS代碼格式

選擇器名稱 { 屬性名：屬性值；屬性名：屬性值；…….}

屬性與屬性之間用 分號 隔開
屬性與屬性值直接按用 冒號 連接
如果一個屬性有多個值的話，那么多個值用 空格 隔開。

選擇器

就是指定CSS要作用的標簽，那個標簽的名稱就是選擇器。意為：選擇哪個容器（標簽本身就是封裝數據的容器）。

選擇器共有三種：

1) html標簽名選擇器。使用的就是html的標簽名。
(也就是直接用html中的標簽)
2) class選擇器。其實使用的是標簽中的class屬性。
(前面加：# )
3) id選擇器。其實使用的是標簽的中的id屬性。
(前面加：. )

每一個標簽都定義了class屬性和id屬性。用于對標簽進行標識，方便對標簽進行操作。
在定義的中，多個標簽的class屬性值可以相同，而id值要唯一，因為JavaScript中經常用。

選擇器的優先級
標簽名選擇器 < class選擇器 < id選擇器 < style屬性

擴展選擇器

關聯選擇器

標簽是可以嵌套的，要讓相同標簽中的不同標簽顯示不同樣式，就可以用此選擇器。例如：

p { color:#00FF00;} p b { color:#FF000;} <p>P標簽<b>湖南城市學院</b>段落樣式</p> <p>P標簽段落</p>

設置P標簽。
設置P標簽中的b標簽。

組合選擇器

對多個選擇器進行相同樣式的定義。例如，我們想對“div中的標簽”和“類名為cc”的區域設置相同的樣式，則可以定義如下的組合選擇器：

.cc, div b{/*不同選擇器之間用逗號分開*/background-color:#0000ff;color:#fff; }

設置id=”cc”的標簽和div標簽下的b標簽。

偽元素選擇器

其實就在html中預先定義好的一些選擇器，稱為偽元素。

格式：標簽名:偽元素。類名 標簽名。類名:偽元素。

超鏈接a標簽中的偽元素：

a:link 超鏈接未點擊狀態。
a:visited 被訪問后的狀態。
a:hover 光標移到超鏈接上的狀態（未點擊）。
a:active 點擊超鏈接時的狀態。

段落p標簽中的偽元素：
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一個字母。

自定義偽元素：

:focus 具有焦點的元素（其實有點類似點擊后的監聽）

div:hover{background-color:#f00;color:#fff;}

CSS的盒子模型

◇邊框(border)
上 border-top
下 border-bottom
左 border-left
右 border-right

◇內補丁(Paddings)：內邊距
上 padding-top
下 padding-bottom
左 padding-left
右 padding-right

◇外補丁(Margins)：外邊距
上 margin-top
下 margin-bottom
左 margin-left
右 margin-right

邊框(border)—這個元素內容的封閉圖形的邊界
內補丁(Paddings)：內邊距—自己這個元素邊界距離自己內容文字的距離
外補丁(Margins)：外邊距—自己這個元素的邊界距離另一個元素的邊界（邊框）的距離

CSS布局——漂浮

◇ float : none | left | right
none :　默認值。對象不飄浮
left :　文本流向對象的右邊
（本對象流向左邊）
right :　文本流向對象的左邊
（本對象流向右邊）

◇ clear : none | left | right | both
none :　 默認值。允許兩邊都可以有浮動對象
left :　 不允許左邊有浮動對象
right :　 不允許右邊有浮動對象
both :　 不允許有浮動對象

（如果不允許浮動對象，且正好有一個對象漂浮過來，需要占這個對象一行位置，則這個對象移動，給那個漂浮過來的對象讓出一行位置，讓他們不會重疊）

CSS布局——定位
◇ position : static | absolute | fixed | relative
static :　 默認值。無特殊定位，對象遵循HTML定位規則。
absolute : 將對象從文檔流中拖出，使用 left ， right ， top ， bottom 等屬性相對于其最接近的一個最有定位設置的父對象進行絕對定位。如果不存在這樣的父對象，則依據 body 對象。而其層疊通過 z-index 屬性定義。
fixed :　 未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規范。
relative :　對象不可層疊，但將依據 left ， right ， top ， bottom 等屬性在正常文檔流中偏移位置。

absolute —絕對定位。
如果某個對象用了絕對定位，其實就相當于這個對象漂浮在另一個層面（重疊），而原來層面上自己占的位置被其他模塊覆蓋。

relative —相對定位。
如果某個對象用了相對定位，也相當于這個對象漂浮在另一個層面（重疊），但是原來層面上自己占的位置不會被其他模塊覆蓋。

CSS布局——圖文混排
CSS布局——圖像簽名
（這2個方式的實現其實就是用了盒子模型，絕對定位或相對定位來實現的）

CSS還有很多知識點，可以多寫寫，看看API就熟悉了，基本語法也就這么多~~

總結

以上是生活随笔為你收集整理的CSS---网络编程的全部內容，希望文章能夠幫你解決所遇到的問題。

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