第三章頁設(shè)計(jì)與制作電子樣式表入門

1、讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效第三章 CSS入門CSS核心基礎(chǔ)CSS文本相關(guān)樣式CSS選擇器CSS高級特性讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效 目錄3.13.1CSS核心基礎(chǔ)3.23.2CSS文本相關(guān)樣式3.33.3CSS高級特性3.43.4階段案例制作新聞頁面讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效3.1 CSS核心基礎(chǔ) 3.1.1 CSS樣式規(guī)則樣式規(guī)則使用HTML時(shí)，需要遵從一定的規(guī)范。CSS亦如此，要想熟練地使用CSS對網(wǎng)頁進(jìn)行修飾，首先需要了解CSS樣式規(guī)則，具體格式如下： 在上面的樣式規(guī)則中，選擇器用于指定CSS樣式作用的HTML對象，花括號內(nèi)是對該對

2、象設(shè)置的具體樣式。其中，屬性和屬性值以“鍵值對”的形式出現(xiàn)，屬性是對指定的對象設(shè)置的樣式屬性，例如字體大小、文本顏色等。屬性和屬性值之間用英文“:”連接，多個(gè)“鍵值對”之間用英文“;”進(jìn)行區(qū)分。選擇器屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效3.1 CSS核心基礎(chǔ)初學(xué)者在書寫CSS樣式時(shí)，除了要遵循CSS樣式規(guī)則，還必須注意CSS代碼結(jié)構(gòu)中的幾個(gè)特點(diǎn)，具體如下： CSS樣式中的選擇器嚴(yán)格區(qū)分大小寫，屬性和值不區(qū)分大小寫，按照書寫習(xí)慣一般將“選擇器、屬性和值”都采用小寫的方式。 多個(gè)屬性之間必須用英文狀態(tài)下的分號隔開，最后一個(gè)屬性后的分號可以省略

3、，但是，為了便于增加新樣式最好保留。 如果屬性的值由多個(gè)單詞組成且中間包含空格，則必須為這個(gè)屬性值加上英文狀態(tài)下的引號。 在編寫CSS代碼時(shí)，為了提高代碼的可讀性，通常會加上CSS注釋。讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效3.1 CSS核心基礎(chǔ) 在CSS代碼中空格是不被解析的，花括號以及分號前后的空格可有可無。因此，可以使用空格鍵、Tab鍵、回車鍵等對樣式代碼進(jìn)行排版，即所謂的格式化CSS代碼，這樣可以提高代碼的可讀性。讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效3.1 CSS核心基礎(chǔ) 3.1.2 引入引入CSS樣式表樣式表1、行內(nèi)式、行內(nèi)式行內(nèi)式也稱為內(nèi)聯(lián)樣式，是通過標(biāo)記的style屬性來設(shè)置元素的樣式

4、，其基本語法格式如下：該語法中style是標(biāo)記的屬性，實(shí)際上任何HTML標(biāo)記都擁有style屬性，用來設(shè)置行內(nèi)式。其中屬性和值的書寫規(guī)范與CSS樣式規(guī)則相同，行內(nèi)式只對其所在的標(biāo)記及嵌套在其中的子標(biāo)記起作用。 內(nèi)容 讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效3.1 CSS核心基礎(chǔ)2、內(nèi)嵌式、內(nèi)嵌式內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的頭部標(biāo)記中，并且用標(biāo)記定義，其基本語法格式如下：該語法中，標(biāo)記一般位于標(biāo)記中標(biāo)記之后，也可以把他放在HTML文檔的任何地方。標(biāo)記定義，其基本語法格式如下：選擇器 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效3.1 CSS

5、核心基礎(chǔ)3、鏈入式鏈入式鏈入式是將所有的樣式放在一個(gè)或多個(gè)以.css為擴(kuò)展名的外部樣式表文件中，通過標(biāo)記將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下：該語法中，標(biāo)記需要放在頭部標(biāo)記中，并且必須指定標(biāo)記的三個(gè)屬性，具體如下：讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效3.1 CSS核心基礎(chǔ) href：定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。 type：定義所鏈接文檔的類型，在這里需要指定為“text/css”，表示鏈接的外部文件為CSS樣式表。 rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個(gè)樣式表文件。讓

6、IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效3.1 CSS核心基礎(chǔ)4、導(dǎo)入式導(dǎo)入式導(dǎo)入式與鏈入式相同，都是針對外部樣式表文件的。對HTML頭部文檔應(yīng)用style標(biāo)記，并在標(biāo)記內(nèi)的開頭處使用import語句，即可導(dǎo)入外部樣式表文件。其基本語法格式如下：該語法中，style標(biāo)記內(nèi)還可以存放其他的內(nèi)嵌樣式，import語句需要位于其他內(nèi)嵌樣式的上面。import url(css文件路徑);或 import css文件路徑;/* 在此還可以存放其他CSS樣式*/ 讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效3.1 CSS核心基礎(chǔ) 3.1.3 CSS基礎(chǔ)選擇器基礎(chǔ)選擇器要想將CSS樣式應(yīng)用于特定的HTML元素，首先需要找到該

7、目標(biāo)元素。在CSS中，執(zhí)行這一任務(wù)的樣式規(guī)則部分被稱為選擇器，CSS基礎(chǔ)選擇器有四種：1、標(biāo)記選擇器、標(biāo)記選擇器標(biāo)記選擇器是指用HTML標(biāo)記名稱作為選擇器，按標(biāo)記名稱分類，為頁面中某一類標(biāo)記指定統(tǒng)一的CSS樣式。其基本語法格式如下：標(biāo)記選擇器最大的優(yōu)點(diǎn)是能快速為頁面中同類型的標(biāo)記統(tǒng)一樣式，同時(shí)這也是他的缺點(diǎn)，不能設(shè)計(jì)差異化樣式。標(biāo)記名屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; 讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效3.1 CSS核心基礎(chǔ)2、類選擇器類選擇器類選擇器使用“.”（英文點(diǎn)號）進(jìn)行標(biāo)識，后面緊跟類名，其基本語法格式如下：類選擇器最大的優(yōu)勢是可以為元素對象定義單獨(dú)或相同的樣式

8、。3、 id選擇器選擇器id選擇器使用“#”進(jìn)行標(biāo)識，后面緊跟id名，其基本語法格式如下：該語法中，id名即為HTML元素的id屬性值，大多數(shù)HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應(yīng)于文檔中某一個(gè)具體的元素。.類名屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; #id名屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; 讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效3.1 CSS核心基礎(chǔ)4、通配符選擇器通配符選擇器通配符選擇器用“*”號表示，他是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：*屬性1:屬性值1; 屬性2:屬性值2; 屬性3

9、:屬性值3; 例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標(biāo)記的默認(rèn)邊距。* margin: 0; /* 定義外邊距*/padding: 0; /* 定義內(nèi)邊距*/讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效 3.2.1 CSS字體樣式屬性字體樣式屬性1、font-size:字號大小字號大小font-size屬性用于設(shè)置字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位。其中，相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少。具體如下：3.2 CSS文本樣式相對長度單位說明em相對于當(dāng)前對象內(nèi)文本的字體尺寸px像素，最常用，推薦使用絕對長度單位說明in英寸c

10、m厘米mm毫米pt點(diǎn)讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效2、font-family:字體字體font-family屬性用于設(shè)置字體。網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網(wǎng)頁中所有段落文本的字體設(shè)置為微軟雅黑，可以使用如下CSS樣式代碼：可以同時(shí)指定多個(gè)字體，中間以逗號隔開，表示如果瀏覽器不支持第一個(gè)字體，則會嘗試下一個(gè)，直到找到合適的字體。3.2 CSS文本樣式p font-family:微軟雅黑;讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效使用使用font-family設(shè)置字體時(shí)，需要注意以下幾點(diǎn)：設(shè)置字體時(shí)，需要注意以下幾點(diǎn)： 各種字體之間必須使用英文狀態(tài)下的逗號隔開。 中文字體需要加英文

11、狀態(tài)下的引號，英文字體一般不需要加引號。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。 如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態(tài)下的單引號或雙引號，例如font-family: Times New Roman;。 盡量使用系統(tǒng)默認(rèn)字體，保證在任何用戶的瀏覽器中都能正確顯示。3.2 CSS文本樣式讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效3、font-weight:字體粗細(xì)字體粗細(xì)font-weight屬性用于定義字體的粗細(xì)，其可用屬性值：normal、bold、bolder、lighter、100900（100的整數(shù)倍）。4、font-variant:變體變體font-va

12、riant屬性用于設(shè)置變體（字體變化），一般用于定義小型大寫字母，僅對英文字符有效。其可用屬性值如下：normal：默認(rèn)值，瀏覽器會顯示標(biāo)準(zhǔn)的字體。small-caps：瀏覽器會顯示小型大寫的字體，即所有的小寫字母均會轉(zhuǎn)換為大寫。但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。3.2 CSS文本樣式讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效5、font-style:字體風(fēng)格字體風(fēng)格font-style屬性用于定義字體風(fēng)格，如設(shè)置斜體、傾斜或正常字體，其可用屬性值如下： normal：默認(rèn)值，瀏覽器會顯示標(biāo)準(zhǔn)的字體樣式。 italic：瀏覽器會顯示斜體的字體樣式。 oblique：瀏覽器會

13、顯示傾斜的字體樣式。3.2 CSS文本樣式讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6、font:綜合設(shè)置字體樣式綜合設(shè)置字體樣式font屬性用于對字體樣式進(jìn)行綜合設(shè)置，其基本語法格式如下：使用font屬性時(shí)，必須按上面語法格式中的順序書寫，各個(gè)屬性以空格隔開。其中不需要設(shè)置的屬性可以省略（取默認(rèn)值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。3.2 CSS文本樣式選擇器font: font-style font-variant font-weight font-size/line-height font-family;讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效 3

14、.2.2 CSS文本外觀屬性文本外觀屬性1、color:文本顏色文本顏色color屬性用于定義文本的顏色，其取值方式有如下3種： 預(yù)定義的顏色值，如red，green，blue等。 十六進(jìn)制，如#FF0000，#FF6600，#29D794等。實(shí)際工作中，十六進(jìn)制是最常用的定義顏色的方式。 RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。需要注意的是，如果使用RGB代碼的百分比顏色值，取值為0時(shí)也不能省略百分號，必須寫為0%。3.2 CSS文本樣式讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效2、letter-spacing:字間距字間距l(xiāng)etter-spacing屬

15、性用于定義字間距，所謂字間距就是字符與字符之間的空白。其屬性值可為不同單位的數(shù)值，允許使用負(fù)值，默認(rèn)為normal。3.2 CSS文本樣式讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效3、word-spacing:單詞間距單詞間距 word-spacing屬性用于定義英文單詞之間的間距，對中文字符無效。和letter-spacing一樣，其屬性值可為不同單位的數(shù)值，允許使用負(fù)值，默認(rèn)為normal。 word-spacing和letter-spacing均可對英文進(jìn)行設(shè)置。不同的是letter-spacing定義的為字母之間的間距，而word-spacing定義的為英文單詞之間的間距。3.2 CSS文本樣

16、式讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效4、line-height:行間距行間距l(xiāng)ine-height屬性用于設(shè)置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。line-height常用的屬性值單位有三種，分別為像素px，相對值em和百分比%，實(shí)際工作中使用最多的是像素px。3.2 CSS文本樣式讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效5、text-transform:文本轉(zhuǎn)換文本轉(zhuǎn)換text-transform屬性用于控制英文字符的大小寫，其可用屬性值如下： none：不轉(zhuǎn)換（默認(rèn)值）。 capitalize：首字母大寫。 uppercase：全部字符轉(zhuǎn)換為大寫。 lowercase：

17、全部字符轉(zhuǎn)換為小寫。3.2 CSS文本樣式讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6、text-decoration:文本裝飾文本裝飾text-decoration屬性用于設(shè)置文本的下劃線，上劃線，刪除線等裝飾效果，其可用屬性值如下： none：沒有裝飾（正常文本默認(rèn)值）。 underline：下劃線。 overline：上劃線。 line-through：刪除線。另外，text-decoration后可以賦多個(gè)值，用于給文本添加多種顯示效果，例如希望文字同時(shí)有下劃線和刪除線效果，就可以將underline和line-through同時(shí)賦給text-decoration。3.2 CSS文本樣式讓IT

18、教學(xué)更簡單，讓IT學(xué)習(xí)更有效7、text-align:水平對齊方式水平對齊方式text-align屬性用于設(shè)置文本內(nèi)容的水平對齊，相當(dāng)于html中的align對齊屬性。其可用屬性值如下： left：左對齊（默認(rèn)值） right：右對齊 center：居中對齊8、text-indent:首行縮進(jìn)首行縮進(jìn)text-indent屬性用于設(shè)置首行文本的縮進(jìn)，其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對于瀏覽器窗口寬度的百分比%，允許使用負(fù)值, 建議使用em作為設(shè)置單位。3.2 CSS文本樣式讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效9、white-space:空白符處理空白符處理使用HTML制作網(wǎng)頁

19、時(shí)，不論源代碼中有多少空格，在瀏覽器中只會顯示一個(gè)字符的空白。在CSS中，使用white-space屬性可設(shè)置空白符的處理方式，其屬性值如下： normal：常規(guī)（默認(rèn)值），文本中的空格、空行無效，滿行（到達(dá)區(qū)域邊界）后自動換行。 pre：預(yù)格式化，按文檔的書寫格式保留空格、空行原樣顯示。 nowrap：空格空行無效，強(qiáng)制文本不能換行，除非遇到換行標(biāo)記。內(nèi)容超出元素的邊界也不換行，若超出瀏覽器頁面則會自動增加滾動條。3.2 CSS文本樣式讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效3.3 CSS高級特性 3.3.1 CSS復(fù)合選擇器復(fù)合選擇器復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過不同的方式組合而成的，

20、具體如下：1、標(biāo)簽指定式選擇器標(biāo)簽指定式選擇器標(biāo)簽指定式選擇器又稱交集選擇器，由兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)記選擇器，第二個(gè)為class選擇器或id選擇器，兩個(gè)選擇器之間不能有空格，如h3.special或p#one。2、后代選擇器后代選擇器后代選擇器用來選擇元素或元素組的后代，其寫法就是把外層標(biāo)記寫在前面，內(nèi)層標(biāo)記寫在后面，中間用空格分隔。當(dāng)標(biāo)記發(fā)生嵌套時(shí)，內(nèi)層讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效標(biāo)記就成為外層標(biāo)記的后代。3、并集選擇器并集選擇器并集選擇器是各個(gè)選擇器通過逗號連接而成的，任何形式的選擇器（包括標(biāo)記選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。如果某些

21、選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。3.3 CSS高級特性讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效 3.3.2 CSS層疊性和繼承性層疊性和繼承性1、層疊性層疊性所謂層疊性是指多種CSS樣式的疊加。例如，當(dāng)使用內(nèi)嵌式CSS樣式表定義標(biāo)記字號大小為12像素，鏈入式定義標(biāo)記顏色為紅色，那么段落文本將顯示為12像素紅色，即這兩種樣式產(chǎn)生了疊加。2、繼承性繼承性所謂繼承性是指書寫CSS樣式表時(shí)，子標(biāo)記會繼承父標(biāo)記的某些樣式，如文本顏色和字號。想要設(shè)置一個(gè)可繼承的屬性，只需將它應(yīng)用于父元素即可。3.3 CSS高級特性讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效 恰當(dāng)?shù)厥褂美^承可以簡化代碼，降低CSS樣式的復(fù)雜性。但是，如果在網(wǎng)頁中所有的元素都大量繼承樣式，那么判斷樣式的來源就會很困難，所以對于字體、文本屬性等網(wǎng)頁中通用的樣式可以使用繼承。例如，字體、字號、顏色、行距等可以在body元素中統(tǒng)一設(shè)置，然后通過繼承影響文