西安交通大學(xué)《JAVA WEB》-ch4-Web

1、楊琦楊琦yangqiyangqi lCSSCSS樣式表的概念與作用樣式表的概念與作用lCSSCSS的基本語法和使用方法的基本語法和使用方法lCSSCSS的層次及其作用優(yōu)先級的層次及其作用優(yōu)先級lCSSCSS的屬性單位的屬性單位lCSSCSS的常用屬性的常用屬性lCSSCSS布局布局CSS樣式表的概念與作用CSS的基本語法和使用方法CSS的層次及其作用優(yōu)先級CSS的屬性單位CSS的常用屬性CSS布局lCascading Style Sheets(Cascading Style Sheets(層疊樣式表層疊樣式表) )l樣式表的定義及引用樣式表的定義及引用 鏈入外部樣式表鏈入外部樣式表 定義內(nèi)部樣

2、式塊對象定義內(nèi)部樣式塊對象 內(nèi)聯(lián)定義內(nèi)聯(lián)定義 引入外部樣式表引入外部樣式表lCSSCSS對網(wǎng)頁的控制是通過對網(wǎng)頁的控制是通過CSSCSS屬性實(shí)現(xiàn)的，這些屬性可以分為以下幾類：屬性實(shí)現(xiàn)的，這些屬性可以分為以下幾類：l(1) (1) 字體屬性：用來控制文本的字體、字號等屬性。字體屬性：用來控制文本的字體、字號等屬性。l(2) (2) 顏色和背景屬性：用來控制頁面或元素的顏色、背景顏色、背景圖等屬顏色和背景屬性：用來控制頁面或元素的顏色、背景顏色、背景圖等屬性。性。l(3) (3) 文本屬性：用來控制文本的間距、段落的間距、行高、縮進(jìn)等屬性。文本屬性：用來控制文本的間距、段落的間距、行高、縮進(jìn)等屬性

3、。l(4) (4) 容器屬性：容器是指其內(nèi)部可以包含內(nèi)部元素、對象或數(shù)據(jù)的元素，如容器屬性：容器是指其內(nèi)部可以包含內(nèi)部元素、對象或數(shù)據(jù)的元素，如表格、單元格等，頁面也是容器對象。表格、單元格等，頁面也是容器對象。CSSCSS中對這樣的對象都統(tǒng)一用容器屬中對這樣的對象都統(tǒng)一用容器屬性來控制。它包括以下子類：性來控制。它包括以下子類：l(a) (a) 邊距屬性；邊距屬性；(b) (b) 填充屬性；填充屬性；(c) (c) 邊框?qū)傩?；邊框?qū)傩裕?d) (d) 圖文混排屬性。圖文混排屬性。l(5) (5) 列表屬性：用來對列表進(jìn)行控制。列表屬性：用來對列表進(jìn)行控制。l(6) (6) 鼠標(biāo)狀態(tài)屬性：用來

4、控制和理性鼠標(biāo)的形狀。鼠標(biāo)狀態(tài)屬性：用來控制和理性鼠標(biāo)的形狀。l(7) (7) 定位屬性：用來精確控制頁面上的對象的位置。定位屬性：用來精確控制頁面上的對象的位置。l(8) (8) 濾鏡屬性：用來對設(shè)置和控制對象或元素特殊顯示效果。在后面的實(shí)驗(yàn)濾鏡屬性：用來對設(shè)置和控制對象或元素特殊顯示效果。在后面的實(shí)驗(yàn)中再討論。中再討論。 l什么時(shí)候需要什么時(shí)候需要 當(dāng)樣式需要被應(yīng)用到很多頁面的時(shí)候，外部樣式表將是理想的選擇。 使用外部樣式表，你就可以通過更改一個文件來改變整個站點(diǎn)的外觀。l步驟：步驟： 建立外部樣式表文件（.css） 使用HTML的link對象l示例如下示例如下： title of art

5、icle link rel=stylesheet type=text/css url(css.css); url(css.css); import url(csss.css) ;/import url(csss.css) ;/單引號也可以單引號也可以 import css.css;/import css.css;/單引號也可以單引號也可以 二者不同點(diǎn)：二者不同點(diǎn)： 引入式是：將樣式文件的全部內(nèi)容復(fù)制到import關(guān)鍵字所在的位置 鏈入式：只有HTML文件體需要引用CSS文件中的某個樣式時(shí)，才連接樣式文件 一、什么時(shí)候需要一、什么時(shí)候需要當(dāng)單個文件需要特別樣式時(shí)，就可以使用內(nèi)部樣式表。二、語法二

6、、語法 head 部分通過 標(biāo)簽定義內(nèi)部樣式表三、示例如下三、示例如下 允許不支持這類型的瀏覽器忽略樣式表單。 一、什么時(shí)候用一、什么時(shí)候用當(dāng)特殊的樣式需要應(yīng)用到個別元素時(shí)，使用內(nèi)聯(lián)樣式。一、內(nèi)聯(lián)定義一、內(nèi)聯(lián)定義 在對象的標(biāo)記內(nèi)使用對象的style屬性定義適用其的樣式表屬性。 樣式僅限于此標(biāo)記內(nèi) 二、語法二、語法Selectorproperty: value 參數(shù)說明：參數(shù)說明： Selector - 選擇符 property : value - 樣式表定義 屬性和屬性值之間用冒號(:)隔開。定義之間用分號(;)隔開 This is a paragraphlCSS CSS 語法由三部分構(gòu)成：選

7、擇器、屬性和值：語法由三部分構(gòu)成：選擇器、屬性和值： selector property: valueselector property: value body color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif; l選擇器的分組選擇器的分組 h1,h2,h3,h4,h5,h6 color: green; l繼承繼承 Body font-family: Verdana, sans-serif; Body內(nèi)所有的標(biāo)簽都繼承這個樣式 一、作用一、作用 用于定義一個元素

8、獨(dú)有的樣式。HTML文檔中只能引用一次 id 選擇器以 # 來定義 二、語法二、語法#id 名規(guī)則1，規(guī)則2例如：#mystyle 提示：內(nèi)聯(lián)樣式可以是這樣的效果（一次），但id選擇器更好，可以將定義和引用分開。 一、作用一、作用 一般情況同種標(biāo)記遵循同一種樣式，若希望同種標(biāo)記不遵循同一種樣式，或則不同標(biāo)記遵循同種樣式二、語法二、語法.center text-align: center td.fancy color: #f60; background: #666; 在樣式表中定義具有樣式值的類：類名類名規(guī)則規(guī)則1，規(guī)則，規(guī)則2在標(biāo)記中定義類選擇符：標(biāo)記名標(biāo)記名.類名類名規(guī)則規(guī)則1，規(guī)則，規(guī)則2

9、注意： *. my 表示任何標(biāo)記中都可以用my p.my 表示只有標(biāo)記中可以用my style ex 一、作用一、作用用于定義嵌套標(biāo)記樣式。二、語法二、語法 H2 em 規(guī)則 HTML文檔中的： 講引用該樣式li strong font-style: italic; font-weight: normal; 我是粗體字 我是斜體字 我是正常的字體。 一、作用一、作用用于向某些選擇器添加特殊的效果 一、定義格式一、定義格式選擇符：偽類屬性：值A(chǔ):visited COLOR: #0000ff; TEXT-DECORATION: noneA:visited COLOR: #0000ff; TEXT-

10、DECORATION: noneA:link FONT-SIZE: 9pt; COLOR: #0000ff; FONT-FAMILY: A:link FONT-SIZE: 9pt; COLOR: #0000ff; FONT-FAMILY: 宋體宋體; ; TEXT-DECORATION: noneTEXT-DECORATION: noneA:hover FONT-SIZE: 12pt; COLOR: #003333; FONT-FAMILY: A:hover FONT-SIZE: 12pt; COLOR: #003333; FONT-FAMILY: 宋體宋體; ; BACKGROUND-COL

11、OR: #ffcc99; TEXT-DECORATION: noneBACKGROUND-COLOR: #ffcc99; TEXT-DECORATION: nonea:link color: #FF0000 a:link color: #FF0000 / /* * 未訪問的鏈接未訪問的鏈接 * */ / a:visited color: #00FF00 a:visited color: #00FF00 / /* * 已訪問的鏈接已訪問的鏈接 * */ / a:hover color: #FF00FF a:hover color: #FF00FF / /* * 鼠標(biāo)移動到鏈接上鼠標(biāo)移動到鏈接上

12、* */ / a:active color: #0000FF a:active color: #0000FF / /* * 選定的鏈接選定的鏈接 * */ / 這是一個鏈接。這是一個鏈接。l作用：給出樣式而不必將樣式附加在一個作用：給出樣式而不必將樣式附加在一個HTMLHTML的原有標(biāo)的原有標(biāo)記上記上l行級元素行級元素l標(biāo)簽被用來組合文檔中的行內(nèi)元素標(biāo)簽被用來組合文檔中的行內(nèi)元素 l可以為可以為 span span 應(yīng)用應(yīng)用 id id 或或 class class 屬性，這樣既可以增屬性，這樣既可以增加適當(dāng)?shù)恼Z義，又便于對加適當(dāng)?shù)恼Z義，又便于對 span span 應(yīng)用樣式應(yīng)用樣式。 som

13、e text.some other text. p.tip span font-weight:bold; color:#ff9955; l是塊級元素，有是塊級元素，有align ,class,id,stylealign ,class,id,style屬性屬性l它的內(nèi)容自動地開始一個新行。實(shí)際上，換行是它的內(nèi)容自動地開始一個新行。實(shí)際上，換行是 固有的唯一格式表現(xiàn)?？梢酝ㄟ^固有的唯一格式表現(xiàn)?？梢酝ㄟ^ 的的 class class 或或 id id 應(yīng)用額外的樣式。應(yīng)用額外的樣式。l不必為每一個不必為每一個 都加上類或都加上類或 idid，雖然這樣做也有一，雖然這樣做也有一定的好處。定的好處。l

14、可以對同一個可以對同一個 元素應(yīng)用元素應(yīng)用 class class 或或 id id 屬性，但是屬性，但是更常見的情況是只應(yīng)用其中一種。這兩者的主要差異是，更常見的情況是只應(yīng)用其中一種。這兩者的主要差異是，class class 用于元素組（類似的元素，或者可以理解為某一類用于元素組（類似的元素，或者可以理解為某一類元素），而元素），而 id id 用于標(biāo)識單獨(dú)的唯一的元素用于標(biāo)識單獨(dú)的唯一的元素。 內(nèi)聯(lián)樣式中所定義的樣式的優(yōu)先級最高； 其他的樣式表按其在HTML文件中出現(xiàn)或被引用的順序，越在后出現(xiàn)，優(yōu)先級越高； 選擇符作用的優(yōu)先順序是上下文選擇符、類選擇符、id選擇符，其優(yōu)先級依次降低； 未

15、在任何文件中定義的樣式，將遵循瀏覽器的默認(rèn)樣式 字體屬性包括字體（font-family）、字號（font-size）、字體風(fēng)格（font-style）、字體加粗（font-weight）、字體變化（font-variant）及字體綜合設(shè)置（font）屬性 顏色和背景類屬性包括（前景）顏色（color）、背景顏色（background-color）、背景圖像（background-image）、背景重復(fù)（background-repeat）、背景附屬方式（background-attachment）、背景圖像位置（background-position）及背景屬性（background） 文本

16、屬性設(shè)置文字之間的顯示特性，包括字符間隔（letter-spacing）、文本修飾（text-decoration）、大小寫轉(zhuǎn)換（text-transform）、文本橫向排列（text-align）、文本縱向排列（vertical-align）、文本縮排（text-indent）、行高（line-height） 方框?qū)傩杂糜谠O(shè)置元素的邊界、邊框等屬性值，使用這些屬性的元素大多是塊元素，包括，（x=1,2,.,7）等 列表屬性用于設(shè)置列表標(biāo)記（和）的顯示特性，包括list-style-type，list-style-image，list-style-position和list-style CSS

17、提供用于二維和三維空間定位的屬性，它們是top，left和position l行內(nèi)樣式表行內(nèi)樣式表l文檔層次樣式表文檔層次樣式表l外部樣式表外部樣式表1 1、長度單位、長度單位CSSCSS中，長度單位有兩種，分別是絕對長度單位和相對中，長度單位有兩種，分別是絕對長度單位和相對長度單位。長度單位。絕對長度單位絕對長度單位絕對長度單位分為絕對長度單位分為inin（英寸）、（英寸）、cmcm（厘米）、（厘米）、mmmm（毫（毫米）、米）、ptpt（磅）、（磅）、pcpc（picapica）。其中，）。其中，inin（英寸）、（英寸）、cmcm（厘米）、（厘米）、mmmm（毫米）和實(shí)際中常用的單位完全相同。（毫米）和實(shí)際中常用的單位完全相同。ptpt（磅）：是標(biāo)準(zhǔn)印刷上常用的單位，（磅）：是標(biāo)準(zhǔn)印刷上常用的單位，72pt72pt的長度為的長度為1 1英寸。英寸。pcpc（picapica）：這也是一個印刷上用的單位，）：這也是一個印刷上用的單位，1pc1pc的長度的長度為為1212磅。磅。 l2 2、百分比單位、百分比單位 乘以包含塊的寬度 margi