數(shù)據(jù)采集與處理CSS常用樣式標(biāo)簽數(shù)據(jù)采集與處理課程教學(xué)團(tuán)隊(duì)CSS樣式常用選擇符CSS常用屬性標(biāo)簽23CSS簡(jiǎn)介1CSS簡(jiǎn)介CSSCascading（層疊）Style（樣式）Sheet（表）CSS是一種用來(lái)裝飾HTML的標(biāo)記集合，是對(duì)HTML標(biāo)記的一種擴(kuò)展，可以進(jìn)一步美化HTML頁(yè)面。簡(jiǎn)單的說(shuō)，CSS相當(dāng)于網(wǎng)頁(yè)的化妝品！CSS簡(jiǎn)介jscsshtml外觀行為結(jié)構(gòu)CSS語(yǔ)法選擇符{

樣式屬性名:

屬性值;

……}選擇符

div{color:red;

font-size:30px;

font-family:隸書;}屬性屬性的值CSS樣式常用選擇符一、類型選擇符以下是代碼片段：body{font-size:12px;}P{color:blue;}指對(duì)網(wǎng)頁(yè)中已有的標(biāo)簽類型作為名稱的選擇符，如上表示：body標(biāo)簽內(nèi)的所有文字大小為12px;段落內(nèi)的文字顏色為藍(lán)色。二、群組選擇符以下是代碼片段：h4,p,span{font-size:12px;}表示頁(yè)面所有的h4,p,span標(biāo)簽內(nèi)文字都為12px大小，即對(duì)一組對(duì)象進(jìn)行相同的樣式指定，每個(gè)標(biāo)簽之間用逗號(hào)分隔開(kāi)來(lái)。三、包含選擇符以下是代碼片段：divp{font-weight:bold;}表示div標(biāo)簽里邊的p標(biāo)簽內(nèi)的文字為粗體字、這是一種包含關(guān)系，每個(gè)標(biāo)簽之間用空格隔開(kāi)，可以為多級(jí)包含。CSS樣式常用選擇符四、id和class選擇符id是對(duì)頁(yè)面中的唯一元素進(jìn)行樣式定義，這個(gè)樣式在頁(yè)面中只使用一次、即id不重復(fù)以下是代碼片段：<divid="myDiv">..</div>#myDiv{font-size:12px;}class定義的是通用或經(jīng)常使用的樣式，一種樣式在一個(gè)頁(yè)面中需要出現(xiàn)多次，即可以為不同的標(biāo)簽指定相同的class，如下表示：div和p標(biāo)簽內(nèi)的字體都是藍(lán)色以下是代碼片段：<divclass="red"></div><pclass="red">..</p>.red{color:blue;}

CSS樣式常用選擇符五、組合選擇符使用id或class，同時(shí)也使用標(biāo)簽來(lái)進(jìn)行組合以下是代碼片段：h1#cont{}表示id為cont的h1標(biāo)簽以下是代碼片段：h1.cont{}表示所有class為cont的h1標(biāo)簽六、偽類選擇符常見(jiàn)為A標(biāo)簽,以下是代碼片段：a:link{}a:hover{}a:visited{}

七、通配選擇符以下是代碼片段：*{color:blue;}表示所有對(duì)象的字體都為藍(lán)色。CSS常用屬性標(biāo)簽PX：像素PT：點(diǎn)、磅EM：字高字體相關(guān)類以下是代碼片段：縮寫形式：FONT：文字展開(kāi)形式： FONT-FAMIY：字體（值：宋體simsong、黑體simhei） FONT-SIZE：字號(hào)（值：12px、9pt） FONT-COLOR：文字顏色（值：#FF0000、#F00、red） FONT-STYLE：文字形式（值：italic斜體、normal正常） FONT-WEIGHT：文字粗細(xì)（值：bold粗體、normal正常）常用單位CSS常用屬性標(biāo)簽TEXT-ALIGN：文本對(duì)齊方式（值：左對(duì)齊left、右對(duì)齊right、居中center）TEXT-INDENT：文本縮進(jìn)（值：1em、10px）TEXT-DECORATION：文本下劃線（值：下劃線underline、無(wú)下劃線none）LINE-HEIGHT：文本行高（值：20px、120%、9pt）COLOR：顏色（值：#000000、#000、black）背景相關(guān)類縮寫形式：BACKGROUND：背景展開(kāi)形式：BACKGROUND-COLOR：背景顏色（值：#FF0000；#F00、red）BACKGROUND-IMAGE：背景圖片（值：URL(圖片地址)）BACKGROUND-REPEAT：背景圖片重復(fù)方式（值：no-repeat不重復(fù)、repeat-x僅橫向重復(fù)、repeat-y僅縱向重復(fù)、repeat橫向和縱向同時(shí)重復(fù)[默認(rèn)]）BACKGROUND-ATTACHMENT：背景滾動(dòng)方式（值：fixed固定、scroll滾動(dòng)）BACKGROUND-POSITION：背景偏移（值：(left,top)、(10px,-5px)）文本相關(guān)類CSS常用屬性標(biāo)簽TEXT-ALIGN：文本對(duì)齊方式（值：左對(duì)齊left、右對(duì)齊right、居中center）TEXT-INDENT：文本縮進(jìn)（值：1em、10px）TEXT-DECORATION：文本下劃線（值：下劃線underline、無(wú)下劃線none）LINE-HEIGHT：文本行高（值：20px、120%、9pt）COLOR：顏色（值：#000000、#000、black）背景相關(guān)類縮寫形式：BACKGROUND：背景展開(kāi)形式：BACKGROUND-COLOR：背景顏色（值：#FF0000；#F00、red）BACKGROUND-IMAGE：背景圖片（值：URL(圖片地址)）BACKGROUND-REPEAT：背景圖片重復(fù)方式（值：no-repeat不重復(fù)、repeat-x僅橫向重復(fù)、repeat-y僅縱向重復(fù)、repeat橫向和縱向同時(shí)重復(fù)[默認(rèn)]）BACKGROUND-ATTACHMENT：背景滾動(dòng)方式（值：fixed固定、scroll滾動(dòng)）BACKGROUND-POSITION：背景偏移（值：(left,top)、(10px,-5px)）文本相關(guān)類CSS常用屬性標(biāo)簽---盒子模型相關(guān)

邊框類縮寫形式：BORDER：邊框展開(kāi)形式BORDER-TOP：上邊框BORDER-LEFT：左邊框BODER-RIGHT：右邊框BORDER-BOTTOM：下邊框BORDER-COLOR：邊框顏色BORDER-STYLE：邊框樣式（值：實(shí)線solid、虛線dotted、無(wú)線none）BORDER-WIDTH：邊框粗細(xì)（值：1px、2px……）繼續(xù)展開(kāi)，各值請(qǐng)參照上面的形式BORDER-TOP-STYLE：上邊框樣式BORDER-LEFT-STYLE：左邊框樣式BORDER-RIGHT-STYLE：右邊框樣式BORDER-BOTTOM-STYLE：下邊框樣式BORDER-TOP-WIDTH：上邊框粗細(xì)BORDER-LEFT-WIDTH：左邊框粗細(xì)BORDER-RIGHT-WIDTH：右邊框粗細(xì)BORDER-BOTTOM-WIDTH：下邊框粗細(xì)BORDER-TOP-COLOR：上邊框顏色BORDER-LEFT-COLOR：左邊框顏色BORDER-RIGHT-COLOR：右邊框顏色BORDER-BOTTOM-COLOR：下邊框顏色CSS常用屬性標(biāo)簽

縮寫形式： MARGIN：四邊的外邊距

展開(kāi)形式 MARGIN-TOP：上邊外邊距（值：10px、2em） MARGIN-LEFT：左邊外邊距

MARGIN-RIGHT：右邊外邊距 MARGIN-BOTTOM：下邊外邊距內(nèi)部填充類

縮寫形式：PADDING：內(nèi)部四邊填充

展開(kāi)形式 PADDING-TOP：上邊內(nèi)部填充（值：10px、2em） PADDING-LEFT：左邊內(nèi)部填充 PADDING-RIGHT：右邊內(nèi)部填充 PADDING-BOTTOM：下邊內(nèi)部填充外部邊距類CSS常用屬性標(biāo)簽

縮寫形式： WIDTH：寬（值：100px、100%） HEIGHT：高 FLOAT：浮動(dòng)（值：左浮動(dòng)left；右浮動(dòng)right） CLEAR：清除浮動(dòng)

（值：both清除兩邊浮動(dòng)、left清除左浮動(dòng)、right清除右浮動(dòng)）列表相關(guān)類LIST-STYLE：列表樣式風(fēng)格（值：無(wú)樣式none、圓點(diǎn)disc、空心圓circle實(shí)心方塊square、數(shù)字decimal）LIST-STYLE-TYPE：列表樣式風(fēng)格

（值：同上）盒子屬性類CSS常用屬性標(biāo)簽DISPLAY：視覺(jué)屬性（值：隱藏h