[程序設計]css基礎精解和實(shí)例分析
css就是cascading style sheets層疊樣式表
一、基本語(yǔ)法
1、選擇符
selector {proper: value}
選擇符 {屬性：值}
如：body {color: black}
?。╞ody頁(yè)面主體部分，color控制的文字顏色屬性，black屬性的值，此例的效果是頁(yè)面文字為黑色ID嵌套樣式問(wèn)題。）
如果屬性的值由多個(gè)單詞組成ID嵌套樣式問(wèn)題，必須加引號，如
p {font-family: “sans serif“}
如果一個(gè)選擇符指定多個(gè)屬性時(shí)ID嵌套樣式問(wèn)題，用分號分開(kāi)，如
p {text-align: center; color: black}
為了便于閱讀ID嵌套樣式問(wèn)題，分行書(shū)寫(xiě)
p {text-align: center;
color: black;
font-family: arial}
?。ǘ温渚又信帕蠭D嵌套樣式問(wèn)題，段落中文字為黑色，字體為arial）
2、選擇符組
把相同屬性和值的選擇符組合起來(lái)ID嵌套樣式問(wèn)題，用逗號分開(kāi)，如
h1,h2,h3,h4,h5,h6 {color: green}
?。ㄒ陨纤袠祟}的顏色為綠色）
p,table {font-size: 9pt}
?。ǘ温浜捅砀窳说奈淖殖叽鐬?號字）
等價(jià)于p {font-size: 9pt}
table {font-size: 9pt}
3、類(lèi)選擇符
如你想要兩個(gè)不同的段落ID嵌套樣式問(wèn)題，一個(gè)向右對齊，一個(gè)居中，你可以先定義兩個(gè)類(lèi)
p.right {text-align: right}
p.center {text-align: center}
然后用在不同的段落里ID嵌套樣式問(wèn)題，只要在HTML標記里加入你定義的class參數：
p class=“right“段落向右對齊/p
p class=“center“段落居中對齊/p
類(lèi)的名稱(chēng)可以為任何英文單詞或英文開(kāi)頭與數字的組合
類(lèi)選擇符的另一個(gè)用法是在選擇符中省略html標記名ID嵌套樣式問(wèn)題，這樣可以把幾個(gè)不同的元素定義成相同的樣式：
.center {text-align: center}（定義.center為文字居中排列）
這樣的類(lèi)可以應用到任何元素ID嵌套樣式問(wèn)題，如：
h1 class=“center“這個(gè)標題居中排列/h1
p class=“center“這個(gè)段落居中排列/p
4、ID選擇符
定義ID選擇符要在ID名稱(chēng)前加一“#”號，黑類(lèi)選擇符一樣也有兩個(gè)方法ID嵌套樣式問(wèn)題。
下面的例子只匹配id=“intro“的段落元素：
p#intro
font-size: 100%;
font-weight: bold;
color: #0000ff
background-color: transparent
?。ㄔ摱温涞淖煮w尺寸為默認尺寸的110%；粗體；蘭色ID嵌套樣式問(wèn)題，背景顏色透明）
下面的例子ID嵌套樣式問(wèn)題，id屬性匹配所有的id=“intro“的元素：
#intro
font-size: 100%;
font-weight: bold;
color: #0000ff
background-color: transparent
5、包含選擇符
可以對某元素包含關(guān)系定義ID嵌套樣式問(wèn)題，元素1包含元素2，這種方式對元素1里的元素2定義，對元素1或元素2沒(méi)有定義，如：
table a
font-size: 12px
在表格內的鏈接文字為12像素，而表格外的鏈接文字仍為默認大小ID嵌套樣式問(wèn)題。
6、樣式表的層跌性
層跌性就是繼承性ID嵌套樣式問(wèn)題，例如在div標記中嵌套p標記：
div {color: red; font-size:9pt}
div
p
這個(gè)段落的文字為紅色9號字
/p
/div
?。╬元素的內容繼承div定義的屬性）
當樣式表的繼承有沖突時(shí)ID嵌套樣式問(wèn)題，以最后定義的為準，如：
div {color: red; font-size:9pt}
p {color: blue}
div
p
這個(gè)段落的文字為藍色9號字
/p
段落里的文字繼承了div屬性，而color屬性依照最后的定義ID嵌套樣式問(wèn)題。
優(yōu)先級!important id選擇符 類(lèi)選擇符 選擇符ID嵌套樣式問(wèn)題，如：
p. {color: #FF0000 !important}
.blue {color: #0000FF}
#id1 {color: #FFFF00}
我們同時(shí)對一個(gè)段落加上這個(gè)3個(gè)樣式，它最后會(huì )依照!important申明為紅色文字，如果去掉!important則依照優(yōu)先權id選擇符為黃色文字ID嵌套樣式問(wèn)題。
7、注釋
注釋便于閱讀ID嵌套樣式問(wèn)題，不會(huì )在瀏覽器中顯示，如
/* 定義段落樣式 */
p
text-align: center; /* 文本居中排列 */
color: black /* 文字為黑色 */
font-family: /*字體為arial */
二、偽類(lèi)——動(dòng)態(tài)鏈接
1、語(yǔ)法
selector:pseudo-class {property: value}
選擇符：偽類(lèi){屬性：值}
類(lèi)選擇符及其他選擇符可以和偽類(lèi)混用
selector.class:pseudo-class {property: value}
選擇符.類(lèi)：偽類(lèi){屬性：值}
2、錨的偽類(lèi)
最常用的4中a(錨)元素的偽類(lèi)
a:link {color: #FF0000; text-decoration: none} /* 未訪(fǎng)問(wèn)的鏈接 */
a:visited {color: #00FF00; text-decoration: none} /* 已訪(fǎng)問(wèn)的鏈接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠標在鏈接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活鏈接 */
上面的例子中，這個(gè)鏈接位訪(fǎng)問(wèn)為紅色無(wú)下劃線(xiàn)，訪(fǎng)問(wèn)時(shí)為綠色無(wú)下劃線(xiàn)，激活時(shí)為藍色有下劃線(xiàn)，鼠標在鏈接上時(shí)為紫色有下劃線(xiàn)ID嵌套樣式問(wèn)題。
3、偽類(lèi)和類(lèi)選擇符的組合
我們定義一組連接為紅色ID嵌套樣式問(wèn)題，訪(fǎng)問(wèn)后為蘭色，另一組為綠色，訪(fǎng)問(wèn)后為黃色
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF0000}
應用
a class=“red“ href=“...“第一組連接/a
a class=“blue“ href=“...“第二組連接/a
4、其他偽類(lèi)
首字和首行（frist-letter和frist-line），ie5.5以上支持ID嵌套樣式問(wèn)題。
style type=“text/css“
p:frist-letter {font-size: 300%}
/style
p
這個(gè)段落的首字為默認的300%
/p
style type=“text/css“
div:first-line {color: red}
/style
div
p
這個(gè)段落第一行
第二行
第三行
/p
/div
?。ǘ温涞谝恍袨榧t色ID嵌套樣式問(wèn)題，第2，3行為默認顏色）
三、如何在網(wǎng)頁(yè)中插入css
1、鏈入外部樣式表ID嵌套樣式問(wèn)題，如
head
link rel=“stylesheet“ type=“text/cs“ href=“mystyle.css“
/head
表示從mystyle.css文件中讀出定義的樣式表ID嵌套樣式問(wèn)題，rel=“stylesheet“ 指頁(yè)面中使用的是外部樣式表，type=“text/cs“指文件的類(lèi)型為樣式表文本
ID嵌套樣式問(wèn)題。 href=“mystyle.css“是文件所在的位置。一個(gè)外部樣式表可以應用多個(gè)頁(yè)面，樣式表文件可以用記事本編輯，擴展名為css。
2、內部樣式表
head
style type=“text/css“
hr {color: sienna}
/style
/head
3、導入外部樣式表
head
style type=“text/css“
@import “mystyle.css“
其他內部樣式表的聲明
/style
/head
導入外部樣式表必須在其他內部樣式表的上面
4、內嵌樣式
p style=“color: sienna; margin-left:20px“
/p
這個(gè)段落顏色為土黃ID嵌套樣式問(wèn)題，左邊距為20像素
5、多重樣式表疊加
優(yōu)先級
內嵌樣式 〉 內部樣式（鏈入外部樣式表ID嵌套樣式問(wèn)題，二者按最后定義確定優(yōu)先級 〉導入外部樣式表
四ID嵌套樣式問(wèn)題，實(shí)例分析
1、某index.css源碼分析
style type=“text/css“
BODY {FONT-FAMILY: 宋體; FONT-SIZE: 9pt}
td {font-size: 9pt} /*td標記中字體為9號 */
a:link {text-decoration: none; color: #000000}
a:visited {color: #000000; text-decoration: none}
a:active {color: #000000; text-decoration: underline}
a:hover {color: #000000; text-decoration: underline}
div {font-size: 9pt}
/style
2、某style.css源碼分析
A
TEXT-DECORATION: none;
A:hover
COLOR: #0099FF;
A:link {
color: #205064;
A:visited {
color: #006699;
/* 定義4個(gè)常用錨 */
BODY
FONT-FAMILY: 宋體;
FONT-SIZE: 9pt;
text-decoration: none;
line-height: 150%;
background-color: #FBFDFF;
TD
FONT-FAMILY:宋體;
FONT-SIZE: 9pt;
Input
FONT-SIZE: 9pt;
HEIGHT: 20px;
/* 定義輸入框 */
Button
FONT-SIZE: 9pt;
HEIGHT: 20px;
/* 定義按鈕 */
Select
FONT-SIZE: 9pt;
HEIGHT: 20px;
/* 定義選擇框 */
.border
border: 1px solid #CCCCCC;
/* 定義邊界類(lèi) */
.border2
background:#fef8ed;
BORDER-RIGHT: #999999 1px solid;
BORDER-LEFT: #999999 1px solid
.title
background:#f6f6f6;
/* 定義標題類(lèi) */
.title_left
background:url(images/left_bg.gif);
.title_right
background:url(images/right_bg.gif);
/* 定義標題類(lèi)的背景圖片 */
.title_main
background:url(Images/jiaodian_bg.gif);
.tdbg{
background:#FFFFFF;
line-height: 120%;
/* 定義td標記類(lèi)的 */
.tdbg_left{
background:#fef8ed;
line-height: 150%;
.tdbg_right{
background:#EAF1FB;
line-height: 150%;
.tdbg_main{
background:#ffffff;
line-height: 150%;
.topborder
border-right: 1px solid #6687BA;
border-left: 1px solid #6687BA;
border-bottom: 1px solid #6595D6;
width: 760px;
.nav_top
background-image: url(Skin/1/topbg.gif);
.nav_bottom
background-image: url(Skin/1/bottombg.gif);
.nav_menu
background:url(Skin/1/topBar_bg.gif);
.menu
background-color: #F0F9FF;
width:97%;
border: 1px;
/* 定義菜單類(lèi) */
td.MenuBody
background-color: #F0F9FF;
這個(gè)其實(shí)大都是他根據自己具體情況定義的類(lèi)選擇符ID嵌套樣式問(wèn)題，注釋倒成了畫(huà)蛇添足，如果要更改某一種樣式可以根據他定義的類(lèi)選擇符到標記中更改
相關(guān)的類(lèi)選擇符的屬性值ID嵌套樣式問(wèn)題。
青風(fēng)劍客制作整理，保留所有權利ID嵌套樣式問(wèn)題。
021yin.com
021yin.com
這個(gè)是我根據以前的筆記一個(gè)字一個(gè)字敲的ID嵌套樣式問(wèn)題，不可謂不經(jīng)典，希望對大家有點(diǎn)幫助，如果你掌握了這些知識，別人的ccs文件大都能被你看穿和
利用：）