網(wǎng)頁(yè)設(shè)計(jì)第13次課CSS和字體屬性

1、第三章 使用CSS樣式表（上）第1節(jié)、CSS介紹及字體屬性一、什么是CSSCSS (Cascading Style Sheet,層疊樣式表）是一種制作網(wǎng)頁(yè)的新技術(shù)。網(wǎng)頁(yè)最初是用HTML標(biāo)記來定義頁(yè)面文檔及格式，如標(biāo)題、段落、表格 等，但這些標(biāo)記不能滿足更多的文檔樣式需求。為了解決這個(gè)問題，在1997年頒布HTML4標(biāo)準(zhǔn)的同時(shí)也公布了有關(guān)樣式表的第一個(gè)標(biāo)準(zhǔn)CSS1。1、CSS的功能與作用 CSS是一種設(shè)計(jì)網(wǎng)頁(yè)樣式的工具，用于（增強(qiáng)）控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語言。CSS可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其他效果實(shí)現(xiàn)精確控制，獨(dú)立文件的css樣式表，其后綴名為.

2、css。請(qǐng)問同學(xué)們要怎樣設(shè)置才能滿足上述“測(cè)試文字”的需求？（1）以前）以前Html中的原始做法中的原始做法在頁(yè)面中預(yù)覽的效果（2）現(xiàn)在使用）現(xiàn)在使用CSS技術(shù)的做法技術(shù)的做法在頁(yè)面中預(yù)覽的效果兩種方法對(duì)比圖兩種方法對(duì)比圖2、結(jié)構(gòu)與樣式分離的網(wǎng)頁(yè)設(shè)計(jì)思想 網(wǎng)頁(yè)（網(wǎng)站）設(shè)計(jì)和制作一般涉及三個(gè)部分的內(nèi)容：結(jié)構(gòu)，樣式和行為，分別是由HTML，CSS和Javascript來實(shí)現(xiàn)。Web標(biāo)準(zhǔn)是由一系列標(biāo)準(zhǔn)組合而成，其核心理念就是將網(wǎng)頁(yè)的結(jié)構(gòu)、樣式和行為分離開來，HTML標(biāo)簽只用負(fù)責(zé)承載內(nèi)容，而樣式交給了CSS，行為交給了JavaScript。3、HTML與CSS分離的優(yōu)點(diǎn)：（1）使頁(yè)面載入得更快：）使頁(yè)

3、面載入得更快：由于將大部分頁(yè)面代碼寫在了CSS文件當(dāng)中，使得頁(yè)面體積容量變得更小。相對(duì)于表格嵌套的方式的逐層加載速度快。 （2）修改設(shè)計(jì)時(shí)更有效率：）修改設(shè)計(jì)時(shí)更有效率：在修改頁(yè)面的時(shí)候更加容易定位，也不會(huì)破壞頁(yè)面其他部分的布局樣式。而表格布局則不省事。 （3）保持視覺的一致性：）保持視覺的一致性：以往表格嵌套的制作方法，會(huì)使得頁(yè)面與頁(yè)面，或者區(qū)域與區(qū)域之間的顯示效果會(huì)有偏差。而DIV+CSS最重要的優(yōu)勢(shì)之一就是保持視覺的一致性。（4）更好地被搜索引擎收錄：）更好地被搜索引擎收錄：由于將大部分的HTML代碼和內(nèi)容樣式寫入了CSS文件中，這就使得網(wǎng)頁(yè)中代碼更加適合搜索引擎。 二、DIV與SPAN

4、空元素div和span都是HTML里的空元素，最大的特點(diǎn)是默認(rèn)都沒有對(duì)元素內(nèi)的對(duì)象進(jìn)行任何格式化渲染（例如標(biāo)簽里面就會(huì)是標(biāo)題，標(biāo)簽里面就會(huì)是加粗顯示，而div和span標(biāo)簽并沒有這樣的意義），但是這兩個(gè)元素專門為樣式表（即CSS）定義而生，如果對(duì)和定義樣式表以后，其中內(nèi)容的樣式就會(huì)隨之變化。語法：1、塊級(jí)元素DIV div是一個(gè)塊級(jí)元素，即它的內(nèi)容在顯示時(shí)會(huì)自動(dòng)地開始一個(gè)新行，即瀏覽器為它分配了一個(gè)獨(dú)立區(qū)域，形成一個(gè)一個(gè)“塊”。它里面可以包含一個(gè)標(biāo)題，一個(gè)段落，也可以包含圖片在內(nèi)的很多元素，甚至div里面也可以再包含div等。div元素有一個(gè)align屬性（即將廢棄）。HTML文檔中連續(xù)的di

5、v（塊級(jí)）元素的典型顯示方式就是“堆疊”。其它屬于塊級(jí)元素的還有Hn、p等。語法：測(cè)試內(nèi)容區(qū)塊有序列表、無序列表、定義列表元素表單標(biāo)題字水平線段落預(yù)格式化文本表格系列元素常見塊級(jí)元素列表2、內(nèi)聯(lián)元素SPAN span是一個(gè)是行內(nèi)元素(也譯作內(nèi)嵌元素、內(nèi)聯(lián)元素)，即它的內(nèi)容在顯示時(shí)通常不會(huì)以新行開始,而且內(nèi)容有多寬就占用多寬的空間距離，它可以用來定義一小段文字的樣式。 HTML文檔中連續(xù)的span（行內(nèi)）元素的典型顯示方式就是“連接”，其它屬于行內(nèi)元素的還有a、img、input等。語法：測(cè)試文字內(nèi)容常見行內(nèi)元素列表行內(nèi)元素鏈接字體加粗呈現(xiàn)大號(hào)、小號(hào)字體效果換行斜體文本效果圖像輸入框?yàn)?inpu

6、t 元素定義標(biāo)注（標(biāo)記）單選或多選菜單下標(biāo)上標(biāo)文本多行文本輸入控件3、DIV和SPAN的區(qū)別與聯(lián)系 總的來說，div是指定渲染HTML的容器。span是指定內(nèi)嵌文本容器。div一般用于文檔的布局和排版，它取代了使用表格定義布局的老式方法，而span一般用于局部文字的樣式。div（塊元素）和span（行內(nèi)元素也）不是一成不變的，可以通過定義CSS的display屬性值實(shí)現(xiàn)互相轉(zhuǎn)化。DIV（塊級(jí)元素） SPAN（行內(nèi)元素）display:inlinedisplay:block三、添加CSS的方法添加CSS有4種方法：鏈接外部樣式表、內(nèi)部樣式表、導(dǎo)入外部樣式表和內(nèi)嵌樣式。下面分別進(jìn)行介紹。1、鏈接外

7、部樣式表鏈接外部樣式表就是在網(wǎng)頁(yè)中調(diào)用已經(jīng)定義好的樣式表來實(shí)現(xiàn)樣式表的應(yīng)用，在頁(yè)面中用標(biāo)記鏈接到這個(gè)單獨(dú)的樣式表文件， 標(biāo)記必須放到頁(yè)面的 標(biāo)簽內(nèi)。這種方法最適合大型網(wǎng)站的CSS樣式定義。如下： 2、內(nèi)部樣式表這種CSS樣式表一般位于HTML文件的頭部，即與標(biāo)簽內(nèi)，并且以標(biāo)記開始，以標(biāo)記結(jié)束，這些定義的樣式就可應(yīng)用到頁(yè)面中。如：3、導(dǎo)入外部樣式表導(dǎo)入外部樣式表是指在內(nèi)部樣式表的里導(dǎo)入一個(gè)外部樣式表，導(dǎo)入時(shí)用import。如：import my.css4、內(nèi)嵌樣式表內(nèi)嵌樣式是混合在HTML標(biāo)記里使用的，用這種方法，可以很簡(jiǎn)單地對(duì)某個(gè)元素單獨(dú)定義樣式，它主要是在網(wǎng)頁(yè)的body內(nèi)實(shí)現(xiàn)。內(nèi)嵌樣式的使用

8、是直接在HTML標(biāo)記里添加style參數(shù)， 而style參數(shù)的內(nèi)容就是CSS的屬性和值。如：我是測(cè)試文字在頁(yè)面中預(yù)覽的效果p color:red; 我是測(cè)試文字1我是測(cè)試文字2我是測(cè)試文字35、CSS就近原則 在使用CSS樣式的時(shí)候，可能會(huì)有一些網(wǎng)頁(yè)元素同時(shí)使用于多個(gè)CSS樣式，那么這時(shí)候CSS就會(huì)遵循就近原則以避免沖突。 如： p color:blue; 大家推測(cè)一下第1行、第2行和第3行測(cè)試文字分別會(huì)是什么顏色？CSS“就近原則”實(shí)例演示結(jié)果四、CSS的基本語法CSS的語法結(jié)構(gòu)僅由3部分組成，選擇符、樣式屬性和值，基本語法如下：選擇符 樣式屬性1 : 取值 ; 樣式屬性2 : 取值 ; 樣

9、式屬性3 : 取值 ; ; 如，p font-family:楷體; font-size:50px; color:blue; 我是測(cè)試文字（一）CSS三種定義方式 標(biāo)記定義型：標(biāo)記定義型：即HTML標(biāo)簽，如div，p，body等。格式如：p color:green; 我是測(cè)試文字1我是測(cè)試文字2我是測(cè)試文字3 class定義型：定義型：在HTML標(biāo)簽中自定義的，css中定義其屬性前邊要加“.”，格式如：.p1 color:cyan; 我是測(cè)試文字1我是測(cè)試文字2我是測(cè)試文字3 id定義型：定義型：也是也是在HTML標(biāo)簽中自定義的，css中定義其屬性前邊要加“#”，格式如：.p1 color:re

10、d; #p1 color:blue; 我是測(cè)試文字1我是測(cè)試文字2我是測(cè)試文字3（二）CSS里的優(yōu)先級(jí) CSS規(guī)定，范圍越小，優(yōu)先級(jí)越高。由小到大排列如下： 行內(nèi)定義 id定義型 class定義型 標(biāo)記定義型。Style=“” #P1 .p2 p（三）CSS常用樣式屬性介紹核心內(nèi)容預(yù)警線-核心內(nèi)容預(yù)警線-1、字體屬性（Font）前面HTML中己經(jīng)介紹了網(wǎng)頁(yè)中文字的常見標(biāo)記，使用CSS定義的文字樣式更如豐富，實(shí)用性更強(qiáng)。（1）字體）字體 font-family：在HTML中，設(shè)置文字的字體屬性需要通過標(biāo)記中的face屬性，而在CSS中則使用font-family屬性。語法，font-family

11、 : “字體1”, “字體2”,（2）字號(hào)）字號(hào) font-size：在HTML中，字體的大小是由標(biāo)記中的size屬性（只有1-7個(gè)取值）來控制的。在CSS里可以使用font-size屬性來自由控制字體的大小。 語法，font-size : 像素值 / 百分比值 / 絕對(duì)字體尺寸(xx-small, x-small, small, medium, large,x-large, xx-large) / 相對(duì)字體尺寸(smaller,larger)學(xué)完就練之1-1（請(qǐng)將源代碼復(fù)制到頁(yè)面中，開始練習(xí)）：1、武漢生物工程學(xué)院（字體變化，字號(hào)最大）2、計(jì)信系（字號(hào)較大）3、園林系（字體變化）4、藝術(shù)系（

12、字體變化，有候補(bǔ)字體，字號(hào)中等） 5、體育系（字號(hào)較小） 6、創(chuàng)業(yè)學(xué)院（字號(hào)最?。?（3）字體風(fēng)格）字體風(fēng)格 font-style： 在HTML里使用標(biāo)記來表示文字為斜體顯示，而在CSS中，字體風(fēng)格font-style屬性用來設(shè)置字體是否為斜體。樣式的取值有3種：【normal是默認(rèn)的正常字體；italic以斜體顯示文字；oblique屬于中間狀態(tài)，以偏斜體顯示?！空Z法，font-style : normal / italic / oblique（4）加粗字體）加粗字體 font-weight：在HTML里使用標(biāo)記設(shè)置文字為粗體顯示，而在CSS中利用font-weight屬性來設(shè)置字體的粗細(xì)。

13、font-weight 的取值范圍 【包括normal、bold、bolder、lighter、number。其中 normal 表示正常粗細(xì)；bold表示粗體；bolder表示特粗體；lighter表示特細(xì)體；number不是真正的取值，其范圍是100900, 一般情況下都是整百的數(shù)字】語法，font-weight : normal / bold / bolder / lighter / number學(xué)完就練之1-2（請(qǐng)將源代碼復(fù)制到頁(yè)面中，開始練習(xí)）：1、瑯琊榜（正常風(fēng)格，加粗顯示）2、偽裝者（正常風(fēng)格，不加粗顯示）3、虎媽貓爸（偏斜體風(fēng)格，加粗顯示）4、羋月傳（偏斜體風(fēng)格，不加粗顯示）

14、5、盜墓筆記（斜體風(fēng)格，加粗顯示） 6、花千骨（斜體風(fēng)格，不加粗顯示） （5）小寫字母轉(zhuǎn)換為大寫：）小寫字母轉(zhuǎn)換為大寫：font-variant：使用font-variant屬性可以將小寫的英文字母轉(zhuǎn)化為大寫。在font-variant屬性中，可以設(shè)置的值只有兩個(gè)：【一個(gè)是normal,表示正常顯示，另一個(gè)是small-caps，它能將小寫的英文字母轉(zhuǎn)化為大寫字母且字體較小，即小型大寫字母?！空Z法，font-variant : normal / small-caps（6）字體復(fù)合屬性）字體復(fù)合屬性font：可以設(shè)置font的復(fù)合屬性，用來簡(jiǎn)化CSS代碼。字體復(fù)合屬性可以取值字體族科、字體大小、

15、字體風(fēng)格、加粗字體等，各值之間用空格相連。具體寫法順序?yàn)椋壕唧w寫法順序?yàn)椋骸咀煮w風(fēng)格(font-style)、字體變量(font-variant)、字體濃淡(font-weight)、字體大小(font-size)、字體名稱(font-family)】如，font : italic small-caps bold 40px “黑體” ;輸入順序錯(cuò)亂則顯示不正常按順序部分輸入會(huì)顯示正常font后面只有一個(gè)值時(shí)，也可以單獨(dú)正常顯示各種屬性，但字體屬性除外。但字體屬性除外。font里的【字體名稱屬性】非常特殊，它它只有和字體大小屬性只有和字體大小屬性一后一前排列才能被一后一前排列才能被正常顯示正常顯

16、示，而和其它屬性前后排列都不能被正常顯示。學(xué)完就練之1-3（請(qǐng)將源代碼復(fù)制到頁(yè)面中，開始練習(xí)）：1、duang， duang，duang （轉(zhuǎn)換為小型大寫字母）2、小鮮肉（黑體顯示）3、有錢，就是任性（字號(hào)40px）4、顏值（斜體顯示） 5、那畫面太美我不敢看（加粗顯示） 6、只想安靜地當(dāng)一個(gè)美男子（10px、加粗顯示） 7、也是醉了（30px、斜體、微軟雅黑） 8、且行且珍惜（斜體、加粗、25px、黑體）9、你造嗎？No zuo no die（斜體、大寫、加粗、16px、楷體）一、font屬性總結(jié)序號(hào)屬性名含義舉例1font-family字體家族font-family:”黑體” ;2font

17、-size字體大小font-size:30px;3 font-style字體風(fēng)格font-style: italic;4font-weight字體粗細(xì)font-weight:bold;5font-variant字體變量font-variant:small-caps;6font復(fù)合寫法font:italic small-caps bold 40px “黑體” ;華麗的分割線任務(wù) 1任務(wù)名稱：CSS字體屬性1葉良辰語錄任務(wù)要求：建立一個(gè)文件夾，用于放置網(wǎng)頁(yè)和素材文件，使用學(xué)習(xí)過的CSS技術(shù)設(shè)計(jì)出一個(gè)如效果圖中顯示的網(wǎng)頁(yè)。文件夾命名為：“任務(wù)1 *的CSS字體屬性1-葉良辰語錄”）任務(wù)參考圖：見下一頁(yè)幻燈片網(wǎng)頁(yè)效果圖（IE瀏覽器）華麗的分割線任務(wù) 2任務(wù)名稱：CSS字體屬性2歌詞排版，任務(wù)要求：建