1、開發(fā)組技術(shù)培訓(xùn)CSS層疊樣式表（上）1CSS 概述CSS 指層疊樣式表 (Cascading Style Sheets)樣式定義如何顯示 HTML 元素樣式通常存儲(chǔ)在樣式表中把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問題外部樣式表可以極大提高工作效率外部樣式表通常存儲(chǔ)在 CSS 文件中多個(gè)樣式定義可層疊為一2CSS 概述HTML 標(biāo)簽原本被設(shè)計(jì)為用于定義文檔內(nèi)容。通過使用 、 這樣的標(biāo)簽，HTML 的初衷是表達(dá)“這是標(biāo)題”、“這是段落”、“這是表格”之類的信息。同時(shí)文檔布局由成瀏覽器來完，而不使用任何的格式化標(biāo)簽。3CSS層疊次序一般而言，所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一

2、個(gè)新的虛擬樣式表中，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)。1、瀏覽器缺省設(shè)置2、外部樣式表3、內(nèi)部樣式表（位于 標(biāo)簽內(nèi)部）4、內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）因此，內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明： 標(biāo)簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。4一個(gè)CSS 例子頁面的標(biāo)題b color: red這是我的第一個(gè)頁面。這是粗體文本。 選擇器屬性值5CSS 基礎(chǔ)語法CSS 語法由三部分構(gòu)成：選擇器、屬性和值除了英文單詞 red，我們還可以使用十六進(jìn)制的顏色值 #ff0000如果值為若干單詞，則要給值加引號(hào)如果要定義不止一

3、個(gè)聲明，則需要用分號(hào)將每個(gè)聲明分開與 HTML 相同，CSS 對大小寫不敏感。不過存在一個(gè)例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 的名稱對大小寫是敏感的body color: #000; background: #fff; margin: 0; padding: 0; font-family: “Georgia, Palatino, serif”;6CSS 高級(jí)語法選擇器的分組繼承派生選擇器id 選擇器類選擇器h1,h2,h2,h3,h5,h6 color: green; body font-size:12px;h1 font-size:20px;h1 font-

4、size:20px;h1 bcolor: blue;#red color:red;#green color:green; .center text-align: center7如何創(chuàng)建 CSS外部樣式表 內(nèi)部樣式表hr color: sienna;p margin-left: 20px;body background-image: url(images/back40.gif); 內(nèi)聯(lián)樣式 This is a paragraph 8CSS 背景屬性描述background簡寫屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中。background-attachment背景圖像是否固定或者隨著頁面的其余部分滾

5、動(dòng)。background-color設(shè)置元素的背景顏色。background-image把圖像設(shè)置為背景。background-position設(shè)置背景圖像的起始位置。background-repeat設(shè)置背景圖像是否及如何重復(fù)。9CSS 文本屬性描述color設(shè)置文本顏色direction設(shè)置文本方向。line-height設(shè)置行高。letter-spacing設(shè)置字符間距。text-align對齊元素中的文本。text-decoration向文本添加修飾。text-indent縮進(jìn)元素中文本的首行。text-transform控制元素中的字母。white-space設(shè)置元素中空白的處理方式

6、。word-spacing設(shè)置字間距。10CSS 字體屬性描述font簡寫屬性。作用是把所有針對字體的屬性設(shè)置在一個(gè)聲明中。font-family設(shè)置字體系列。font-size設(shè)置字體的尺寸。font-style設(shè)置字體風(fēng)格。font-variant以小型大寫字體或者正常字體顯示文本。font-weight設(shè)置字體的粗細(xì)。11CSS 列表屬性描述list-style簡寫屬性。用于把所有用于列表的屬性設(shè)置于一個(gè)聲明中。list-style-image將圖象設(shè)置為列表項(xiàng)標(biāo)志。list-style-position設(shè)置列表中列表項(xiàng)標(biāo)志的位置。list-style-type設(shè)置列表項(xiàng)標(biāo)志的類型。12

7、CSS 表格屬性描述border-collapse設(shè)置是否把表格邊框合并為單一的邊框。border-spacing設(shè)置分隔單元格邊框的距離。（僅用于 separated borders 模型）caption-side設(shè)置表格標(biāo)題的位置。empty-cells設(shè)置是否顯示表格中的空單元格。（僅用于 separated borders 模型）table-layout設(shè)置顯示單元、行和列的算法。13CSS 框模型14CSS 內(nèi)邊距屬性描述padding簡寫屬性。作用是在一個(gè)聲明中設(shè)置元素的所內(nèi)邊距屬性。padding-bottom設(shè)置元素的下內(nèi)邊距。padding-left設(shè)置元素的左內(nèi)邊距。pad

8、ding-right設(shè)置元素的右內(nèi)邊距。padding-top設(shè)置元素的上內(nèi)邊距。15CSS 邊框?qū)傩悦枋鯾order簡寫屬性，用于把針對四個(gè)邊的屬性設(shè)置在一個(gè)聲明。border-style用于設(shè)置元素所有邊框的樣式，或者單獨(dú)地為各邊設(shè)置邊框樣式。（線形）border-width簡寫屬性，用于為元素的所有邊框設(shè)置寬度，或者單獨(dú)地為各邊邊框設(shè)置寬度。border-color簡寫屬性，設(shè)置元素的所有邊框中可見部分的顏色，或?yàn)?4 個(gè)邊分別設(shè)置顏色。border-bottom簡寫屬性，用于把下邊框的所有屬性設(shè)置到一個(gè)聲明中。border-bottom-color設(shè)置元素的下邊框的顏色。border-

9、bottom-style設(shè)置元素的下邊框的樣式。border-bottom-width設(shè)置元素的下邊框的寬度。16CSS 邊框?qū)傩悦枋鯾order-left簡寫屬性，用于把左邊框的所有屬性設(shè)置到一個(gè)聲明中。border-left-color設(shè)置元素的左邊框的顏色。border-left-style設(shè)置元素的左邊框的樣式。border-left-width設(shè)置元素的左邊框的寬度。border-right簡寫屬性，用于把右邊框的所有屬性設(shè)置到一個(gè)聲明中。border-right-color設(shè)置元素的右邊框的顏色。border-right-style設(shè)置元素的右邊框的樣式。border-right-width設(shè)置元素的右邊框的寬度。border-top簡寫屬性，用于把上邊框的所有屬性設(shè)置到一個(gè)聲明中。border-top-color設(shè)置元素的上邊框的顏色。border-top-style設(shè)置元素的上邊框的樣式。border-top-width設(shè)置元素的上邊框的寬度。17CSS 外邊距屬性描述margin簡寫屬性。在一個(gè)聲明中設(shè)置所有外邊距屬性。margin-bott