網(wǎng)頁樣式CSS總結(jié)

1、第2章 網(wǎng)頁樣式CSS總結(jié)一、CSS的概念與作用Css全稱為級聯(lián)樣式表（Cascading Style Sheet）,通常又稱為風(fēng)格樣式表（Style Sheet）,是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計(jì)的。通過設(shè)立樣式表，可以統(tǒng)一控制HTML中各標(biāo)簽的顯示屬性。CSS可以更有效地控制網(wǎng)頁外觀。使用CSS，可以精確的定位網(wǎng)頁元素的位置，美化網(wǎng)頁外觀。一個合理的CSS，還能有效地節(jié)省網(wǎng)絡(luò)帶寬，提高用戶體驗(yàn)。同時，使用CSS制作網(wǎng)頁，還有以下優(yōu)點(diǎn)：1、 內(nèi)容與表現(xiàn)分離。有了CSS，網(wǎng)頁的內(nèi)容（XHTML）與表現(xiàn)就可以分開了。2、 表現(xiàn)統(tǒng)一?？梢允咕W(wǎng)頁的表現(xiàn)非常統(tǒng)一，并且容易修改。3、 豐富的樣式。使得頁面布局更加

2、靈活。4、 減少網(wǎng)頁的代碼量，增加網(wǎng)頁的瀏覽速度，節(jié)省網(wǎng)絡(luò)帶寬。5、 運(yùn)用獨(dú)立于頁面的CSS，還有利于網(wǎng)頁被搜索引擎收錄。2、 標(biāo)簽標(biāo)簽可以用于定義HTML文檔中的分區(qū)或節(jié)，即可以把HTML文檔分割為獨(dú)立的、不同的部分。標(biāo)簽就像一個容器，可以放置其他的HTML標(biāo)簽，如段落，列表，圖片，表單等。CSS的基本語法結(jié)構(gòu)：=“text/css”選擇器屬性：屬性值;.選擇器：表示被修飾的對象，如頁面中被修飾的段落標(biāo)簽、列表標(biāo)簽等。屬性：希望改變的樣式，如顏色color、字體大小fontsize等，屬性和屬性值用冒號（：）隔開。例如，設(shè)置頁面中所有的標(biāo)簽的文字顏色為紅色，字體大小為15px，對應(yīng)的樣式代碼

3、如下：Licolor:#ff0000;fontsize:15px;3、 CSS選擇器：根據(jù)選擇器表示所修飾的內(nèi)容類別，選擇器又分為標(biāo)簽選擇器、類選擇器、ID選擇器、并集選擇器和后代選擇器。其中，前3類是CSS的基本選擇器，后2類是由多個選擇器或標(biāo)簽復(fù)合而成的選擇器，簡稱復(fù)合選擇器。1、 標(biāo)簽選擇器當(dāng)需要對頁面內(nèi)HTML標(biāo)簽的內(nèi)容進(jìn)行修飾時，則采用標(biāo)簽選擇器。標(biāo)簽選擇器的語法：標(biāo)簽名屬性：屬性值;.例如，設(shè)置頁面中標(biāo)簽中的文本顏色為灰色，字體大小為28px,代碼如下所示：h1Color:#cccccc;fontsize:28px;2、 類選擇器使用標(biāo)簽選擇器修飾的范圍比較廣，是針對某一類的表簽進(jìn)

4、行修飾，如果希望設(shè)置個別標(biāo)簽的樣式，那么就使用類選擇器。類選擇器的語法：.類名屬性：屬性值;.類名可以任意選擇，應(yīng)用樣式時使用標(biāo)簽的class屬性引用類樣式，即：標(biāo)簽內(nèi)容3、 ID選擇器ID屬性是HTML元素的唯一標(biāo)志，因此要求頁面內(nèi)不能有重復(fù)的ID標(biāo)記屬性，W3C以將ID屬性定義為HTML元素的標(biāo)準(zhǔn)屬性。對應(yīng)的ID選擇器一般用于修飾對應(yīng)ID標(biāo)記的HTML元素內(nèi)容。ID選擇器的語法：#ID名稱屬性：屬性值;.4、 并集選擇器：并集選擇器是多個選擇器通過逗號連接而成的，是復(fù)合選擇器之一。在聲明各種CSS選擇器時，如果某些選擇器的風(fēng)格是完全相同的，或者部分相同，這時便可以利用并集選擇器同時聲明風(fēng)格

5、相同的CSS選擇器。并集選擇器的語法：標(biāo)簽名,類名，#ID名稱屬性：屬性值;.5、后代選擇器后代選擇器也是復(fù)合選擇器中的一種，主要通過嵌套的方式對特殊位置的HTML標(biāo)簽進(jìn)行聲明。后代選擇器的寫法是把外層的表簽寫在后面，之間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時，內(nèi)層的表簽就成為外層標(biāo)簽的后代。后代選擇器的語法：p span屬性：屬性值;.4、 CSS的繼承性： 所有的CSS語句都是居于各個標(biāo)簽之間的繼承關(guān)系的，為了更好的理解繼承關(guān)系，首先要從HTML文件的組織結(jié)構(gòu)入手。 樣式優(yōu)先級：樣式的優(yōu)先級可以分為以下幾種：1、 基本選擇器之間：ID選擇器類選擇器標(biāo)簽選擇器。2、 樣式表之間：行內(nèi)樣式內(nèi)嵌樣式外部樣

6、式。3、 CSS樣式之間：在同一個選擇器中，兩條相同的聲明，后一條聲明會覆蓋前一條聲明，即顯示后一條聲明的結(jié)果。5、 CSS屬性：CSS文字屬性： color: #999999; /*文字顏色*/ font-family: 宋體,sans-serif; /*文字字體*/ font-size: 9pt; /*文字大小*/ font-style:itelic;/*文字斜體*/ font-variant:small-caps;/*小字體*/ letter-spacing: 1pt; /*字間距離*/ line-height: 200%; /*設(shè)置行高*/ font-weight:bold;/*文字粗

7、體*/ vertical-align:sub;/*下標(biāo)字*/ vertical-align:super;/*上標(biāo)字*/ text-decoration:line-through;/*加刪除線*/ text-decoration:overline;/*加頂線*/ text-decoration:underline;/*加下劃線*/ text-decoration:none;/*刪除鏈接下劃線*/ text-transform: capitalize; /*首字大寫*/ text-transform: uppercase; /*英文大寫*/ text-transform: lowercase; /

8、*英文小寫*/ text-align:right;/*文字右對齊*/ text-align:left;/*文字左對齊*/ text-align:center;/*文字居中對齊*/ text-align:justify;/*文字分散對齊*/ vertical-align屬性 vertical-align:top;/*垂直向上對齊*/ vertical-align:bottom;/*垂直向下對齊*/ vertical-align:middle;/*垂直居中對齊*/ vertical-align:text-top;/*文字垂直向上對齊*/ vertical-align:text-bottom;/*文

9、字垂直向下對齊*/ CSS符號屬性： list-style-type:none;/*不編號*/ list-style-type:decimal;/*阿拉伯?dāng)?shù)字*/ list-style-type:lower-roman;/*小寫羅馬數(shù)字*/ list-style-type:upper-roman;/*大寫羅馬數(shù)字*/ list-style-type:lower-alpha;/*小寫英文字母*/ list-style-type:upper-alpha;/*大寫英文字母*/ list-style-type:disc;/*實(shí)心圓形符號*/ list-style-type:circle;/*空心圓形符

10、號*/ list-style-type:square;/*實(shí)心方形符號*/ list-style-image:url(/dot.gif);/*圖片式符號*/ list-style-position:outside;/*凸排*/ list-style-position:inside;/*縮進(jìn)*/ CSS背景樣式： background-color:#F5E2EC;/*背景顏色*/ background:transparent;/*透視背景*/ background-image: url(/image/bg.gif); /*背景圖片*/ background-attachment: fixed;

11、/*浮水印固定背景*/ background-repeat: repeat; /*重復(fù)排列-網(wǎng)頁默認(rèn)*/ background-repeat: no-repeat; /*不重復(fù)排列*/ background-repeat: repeat-x; /*在x軸重復(fù)排列*/ background-repeat: repeat-y; /*在y軸重復(fù)排列*/ 指定背景位置 background-position: 90% 90%; /*背景圖片x與y軸的位置*/ background-position: top; /*向上對齊*/ background-position: buttom; /*向下對齊*/

12、 background-position: left; /*向左對齊*/ background-position: right; /*向右對齊*/ background-position: center; /*居中對齊*/ CSS連接屬性： a/*所有超鏈接*/ a:link/*超鏈接文字格式*/ a:visited/*瀏覽過的鏈接文字格式*/ a:active/*按下鏈接的格式*/ a:hover/*鼠標(biāo)轉(zhuǎn)到鏈接*/ 鼠標(biāo)光標(biāo)樣式： 鏈接手指 CURSOR: hand 十字體 cursor:crosshair 箭頭朝下 cursor:s-resize 十字箭頭 cursor:move 箭頭朝

13、右 cursor:move 加一問號 cursor:help 箭頭朝左 cursor:w-resize 箭頭朝上 cursor:n-resize 箭頭朝右上 cursor:ne-resize 箭頭朝左上 cursor:nw-resize 文字I型 cursor:text 箭頭斜右下 cursor:se-resize 箭頭斜左下 cursor:sw-resize 漏斗 cursor:wait 光標(biāo)圖案(IE6) p cursor:url(光標(biāo)文件名.cur),text; CSS框線一覽表： border-top: 1px solid #6699cc; /*上框線*/ border-bottom:

14、 1px solid #6699cc; /*下框線*/ border-left: 1px solid #6699cc; /*左框線*/ border-right: 1px solid #6699cc; /*右框線*/ 以上是建議書寫方式,但也可以使用常規(guī)的方式 如下: border-top-color: #369 /*設(shè)置上框線top顏色*/ border-top-width:1px /*設(shè)置上框線top寬度*/ border-top-style: solid/*設(shè)置上框線top樣式*/ 其他框線樣式 solid/*實(shí)線框*/ dotted/*虛線框*/ double/*雙線框*/ groov

15、e/*立體內(nèi)凸框*/ ridge/*立體浮雕框*/ inset/*凹框*/ outset/*凸框*/ CSS表單運(yùn)用： 文字方塊 按鈕 復(fù)選框 選擇鈕 多行文字方塊 下拉式菜單 選項(xiàng)1 選項(xiàng)2 CSS邊界樣式： margin-top:10px;/*上邊界*/ margin-right:10px;/*右邊界值*/ margin-bottom:10px;/*下邊界值*/ margin-left:10px;/*左邊界值*/ CSS邊框空白 padding-top:10px;/*上邊框留空白*/ padding-right:10px;/*右邊框留空白*/ padding-bottom:10px;/*下邊框留空白*/ padding-left:10px;/*左邊框留空白*/ 滾動條樣式 Scrollbar-face-color:#f3f3f3;/*滾動條凸出部分的顏色*/ Scrollbar-highlight-color:#f1f1f1/*滾動條陰影部分的顏色*/ Scrollbar-shadow-col