《網(wǎng)頁(yè)設(shè)計(jì)與制作》課件-第六章 CSS常用屬性

第六章CSS常用屬性本章知識(shí)點(diǎn)CSS屬性簡(jiǎn)述文檔流文本和字體列表盒子模型浮動(dòng)定位其他常用屬性一、CSS屬性簡(jiǎn)述我們最終是通過(guò)屬性來(lái)控制HTML元素的樣式繼承性某些CSS屬性具有繼承性，即在父元素中對(duì)某屬性進(jìn)行了設(shè)置，那么該父元素的所有后代元素都會(huì)自動(dòng)獲得該屬性的設(shè)置如后代元素需要該屬性，在其CSS中就不需重復(fù)設(shè)置；否則，該屬性就必須在其CSS中重新聲明兼容性CSS經(jīng)歷了多次版本修訂，瀏覽器的版本更新更加頻繁，導(dǎo)致某些屬性在某些瀏覽器中其效果不能實(shí)現(xiàn)建議以Firefox瀏覽器為測(cè)試的主瀏覽器，IE為次瀏覽器，查看效果顯示是否存在差異二、文檔流文檔流是HTML元素在網(wǎng)頁(yè)中默認(rèn)如何排列的統(tǒng)稱，也稱為文本流文檔流的基本內(nèi)容將網(wǎng)頁(yè)自上而下分成一行一行，并在每行中按從左至右的順序擺放HTML元素“行布局”：在文檔流中，HTML元素的表現(xiàn)形式始終以行進(jìn)行顯示二、文檔流在文檔流中，所有的HTML元素可以分成兩類塊級(jí)元素（blockelement）以塊顯示的元素，每次占據(jù)一整行，后面的內(nèi)容必須新起一行顯示具有完整的盒子模型特征非塊級(jí)元素可通過(guò)css的display:block更改為塊級(jí)元素常見(jiàn)塊級(jí)元素：div、p、h1-h6、table、所有列表元素二、文檔流在文檔流中，所有的HTML元素可以分成兩類內(nèi)聯(lián)元素（inlineelement）也稱為行內(nèi)元素，像文本一樣的顯示，不會(huì)獨(dú)自占據(jù)一行盒子模型特征不完整塊級(jí)元素可通過(guò)css的display:inline更改為內(nèi)聯(lián)元素常見(jiàn)內(nèi)聯(lián)元素：a、span、img、label、所有表單元素內(nèi)聯(lián)元素又分為置換和非置換兩種置換內(nèi)聯(lián)元素：指img、input、textarea、select、object等這類默認(rèn)就有CSS格式化外表范圍的元素。這些元素?fù)碛袃?nèi)在尺寸，可以設(shè)置width和height。置換內(nèi)聯(lián)元素可與其它內(nèi)聯(lián)元素處在同一行，并且擁有完整的盒子特征非置換內(nèi)聯(lián)元素：除置換內(nèi)聯(lián)元素以外的內(nèi)聯(lián)元素二、文檔流Display屬性block：將HTML元素強(qiáng)制作為塊級(jí)元素none：隱藏對(duì)象Inline：將HTML元素強(qiáng)制作為“非置換內(nèi)聯(lián)元素”Inline-block：將HTML元素強(qiáng)制作為“置換內(nèi)聯(lián)元素”三、文本和字體CSS中控制文字樣式的屬性可以分成兩類文本屬性color：設(shè)置文本顏色line-height：設(shè)置行間距text-align：設(shè)置文本的水平對(duì)齊方向text-decoration：向文本添加修飾text-indent：設(shè)置文本首行縮進(jìn)text-transform：控制英文字母大小寫(xiě)white-space：設(shè)置空白的處理方式word-spacing：針對(duì)英文系文本，設(shè)置字間距三、文本和字體CSS中控制文字樣式的屬性可以分成兩類字體屬性font-family：設(shè)置字體類型名稱font-size：設(shè)置字體的尺寸font-style：設(shè)置字體斜體樣式font-variant：針對(duì)英文系文本，設(shè)置小型小寫(xiě)字體或正常字體font-weight：設(shè)置字體粗細(xì)可將與字體相關(guān)的設(shè)置放在同一屬性font中，對(duì)初學(xué)者不建議使用四、列表列表選項(xiàng)的修飾list-style-image：將圖像設(shè)置為列表項(xiàng)標(biāo)記list-style-position：設(shè)置列表項(xiàng)標(biāo)記放置的位置list-style-type：設(shè)置列表項(xiàng)標(biāo)記的類型list-style：簡(jiǎn)寫(xiě)屬性五、盒子模型盒子模型是CSS中最重要的知識(shí)之一，理解了盒子模型，就能使用CSS控制網(wǎng)頁(yè)的布局，盒子模型涉及的CSS屬性主要包括：邊框邊距尺寸背景五、盒子模型盒子模型的概念文檔流具有“行布局”特征，由HTML元素的盒子模型特征決定網(wǎng)頁(yè)中所有的HTML元素都可以看成是一個(gè)盒子盒子模型由content（內(nèi)容）、border（邊框）、padding（間隙）和margin（間隔）四個(gè)部分組成，其中border、padding、margin又分為上下左右四個(gè)方向塊級(jí)元素和經(jīng)display屬性強(qiáng)制設(shè)置的內(nèi)聯(lián)元素可看作盒子模型五、盒子模型盒子模型的概念五、盒子模型盒子模型的概念盒子模型是由內(nèi)容、內(nèi)邊距、邊框、外邊距組成，那么它的實(shí)際尺寸也應(yīng)是這四部分相加五、盒子模型內(nèi)容尺寸內(nèi)容是盒子模型中最里面的部分，其主要的CSS屬性是尺寸屬性height：設(shè)置元素的高度width：設(shè)置元素的寬度還有最大、最小的高度、寬度設(shè)置（但I(xiàn)E不支持）內(nèi)容尺寸只適用于“塊級(jí)元素、置換內(nèi)聯(lián)元素”元素在瀏覽器中所占的大小寬度=元素的寬度（width）+左填充（padding-left）+右填充（padding-right）+左邊框+右邊框。高度的計(jì)算與寬度類似。五、盒子模型邊框（border）邊框是盒子與盒子之間的明顯分界線，CSS中有大量的邊框設(shè)置屬性border-color：設(shè)置邊框顏色border-width：設(shè)置邊框粗細(xì)border-style：設(shè)置邊框樣式border-top：設(shè)置頂邊框border-bottom：設(shè)置底邊框border-left：設(shè)置左邊框border-right：設(shè)置右邊框五、盒子模型內(nèi)邊距（padding）在盒子模型中，邊框與內(nèi)容之間的間隙叫內(nèi)邊距，CSS中內(nèi)邊距支持上下左右四個(gè)方向的單獨(dú)設(shè)置:padding：簡(jiǎn)寫(xiě)屬性padding-top：設(shè)置頂端間隙padding-bottom：設(shè)置底端間隙padding-left：設(shè)置左端間隙padding-right：設(shè)置右端間隙五、盒子模型外邊距（margin）外邊距是盒子模型最外圍的部分，CSS中外邊距也支持上下左右四個(gè)方向的單獨(dú)設(shè)置:margin：簡(jiǎn)寫(xiě)屬性margin-top：設(shè)置上邊距margin-bottom：設(shè)置下邊距margin-left：設(shè)置左邊距margin-right：設(shè)置右邊距五、盒子模型背景（background）在邊框以內(nèi)的內(nèi)邊距、內(nèi)容的背后，可以設(shè)置背景顏色或背景圖片，統(tǒng)稱為背景網(wǎng)頁(yè)中的圖片有兩個(gè)作用作為內(nèi)容：如新聞中的圖片、照片、廣告圖片等，是網(wǎng)頁(yè)內(nèi)容的一部分，使用<img>標(biāo)簽引用作為結(jié)構(gòu)：如網(wǎng)頁(yè)的背景、各種作為修飾的圖片，是網(wǎng)頁(yè)結(jié)構(gòu)的一部分，使用CSS中的屬性引用五、盒子模型背景（background）通過(guò)設(shè)置合適的“background-position”，可以將圖片中的某一部分顯示在盒子里CSSSprites是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式，允許將一個(gè)頁(yè)面涉及的所有零星圖片都包含在一張大圖中減少網(wǎng)頁(yè)的http請(qǐng)求，提高頁(yè)面性能減少圖片的字節(jié)只需對(duì)一張集合的圖片命名更換風(fēng)格方便五、盒子模型內(nèi)容溢出（overflow）如果盒子中的內(nèi)容超出了設(shè)置的尺寸，可以使用CSS中的內(nèi)容溢出屬性“overflow”精確控制課堂練習(xí)字體大小18px，藍(lán)色，超鏈接無(wú)下劃線，上、右外邊距分別為10px和20px（提示：要實(shí)現(xiàn)右對(duì)齊，可以將a先轉(zhuǎn)換為塊級(jí)元素）寬度200px，高度300px，內(nèi)邊距10px，背景色#FC0，邊框5px黑色實(shí)線（提示：div要實(shí)現(xiàn)水平居中，需設(shè)置其左右外邊距為auto）右對(duì)齊，顏色#333詩(shī)句部分行間距40px六、浮動(dòng)使多個(gè)塊級(jí)元素并排放在一行的方式設(shè)置塊級(jí)元素的display屬性，將塊級(jí)元素變成置換內(nèi)聯(lián)元素使用“浮動(dòng)”（float）float：設(shè)置HTML元素是否浮動(dòng)及浮動(dòng)方向clear：設(shè)置是否清除及如何清除HTML元素周圍的浮動(dòng)兩種方式有細(xì)微差別，內(nèi)聯(lián)元素之間默認(rèn)是有間隙的，因此我們布局采用“float”六、浮動(dòng)HTML元素浮動(dòng)后，有以下特征自動(dòng)轉(zhuǎn)換為塊級(jí)元素，即display屬性等于block浮動(dòng)元素會(huì)向左或向右移動(dòng)直到遇到邊框?yàn)橹垢?dòng)元素如果沒(méi)有設(shè)置寬度，會(huì)自動(dòng)縮成其包含的內(nèi)容的寬度六、浮動(dòng)HTML元素浮動(dòng)后，有以下特征浮動(dòng)元素將從正常文檔流中脫離出來(lái)，不占有正常文檔流的空間，具體表現(xiàn)為：內(nèi)聯(lián)元素將會(huì)環(huán)繞浮動(dòng)元素周圍如果一個(gè)盒子向左浮動(dòng)，它后面的非浮動(dòng)塊級(jí)元素會(huì)顯示在該元素原來(lái)的位置如果需要其它的塊級(jí)元素環(huán)繞浮動(dòng)元素周圍，這些塊級(jí)元素必須設(shè)置相同的浮動(dòng)方向如果父元素中有子元素是浮動(dòng)元素，那么父元素將檢測(cè)不到該子元素的存在一個(gè)設(shè)置了clear屬性的元素，將不會(huì)包圍其前面的浮動(dòng)元素七、定位浮動(dòng)是網(wǎng)頁(yè)布局中最常用的方法，但某些需求通過(guò)浮動(dòng)實(shí)現(xiàn)不了，如讓盒子固定在某個(gè)位置，這時(shí)我們會(huì)使用“定位（position）”來(lái)實(shí)現(xiàn)“定位”是指將某個(gè)元素放置于某個(gè)位置。HTML中通過(guò)“position”屬性來(lái)實(shí)現(xiàn)定位，將元素放置于靜態(tài)、相對(duì)、絕對(duì)或固定的位置static：默認(rèn)值，靜態(tài)定位relative：相對(duì)定位absolute：絕對(duì)定位fixed：固定定位七、定位定位距離定位元素可以通過(guò)“top、bottom、left、right”四個(gè)屬性調(diào)節(jié)其位置，這四個(gè)屬性稱為“定位距離”top：設(shè)置元素的頂邊與參考元素的頂邊的距離bottom：設(shè)置元素的底邊與參考元素的底邊的距離left：設(shè)置元素的左邊與參考元素的左邊的距離right：設(shè)置元素的右邊與參考元素的右邊的距離z-index：設(shè)置元素的堆疊順序只有定位元素可以使用定位距離注意區(qū)分定位距離和邊距，邊距是盒子的組成部分，而定位距離不是七、定位靜態(tài)定位當(dāng)position的取值為static時(shí)，為靜態(tài)定位。該取值也是position的默認(rèn)值。使用靜態(tài)定位的標(biāo)簽不脫離文檔流，將按照標(biāo)準(zhǔn)文檔流的組織方式在頁(yè)面中排列七、定位相對(duì)定位當(dāng)position屬性設(shè)置為relative時(shí)，即相對(duì)定位。設(shè)置為相對(duì)定位的元素不脫離文檔流，按照標(biāo)準(zhǔn)文檔流的規(guī)則在網(wǎng)頁(yè)中排列，但是相對(duì)定位的元素可以設(shè)置其left、right、top和bottom屬性來(lái)進(jìn)行偏移。偏移時(shí)參照該元素在標(biāo)準(zhǔn)文檔流中的原位置，偏移后僅在顯示上出現(xiàn)了坐標(biāo)變化，但其在標(biāo)準(zhǔn)文檔流中的位置沒(méi)有發(fā)生任何變化。七、定位相對(duì)定位相對(duì)原位置，向右偏移50px，向上偏移25px。#box2{background-color:#00f00f;position:relative;left:50px;/*向右移動(dòng)50px*/top:-25px;/*向上移動(dòng)25px*/}七、定位絕對(duì)定位當(dāng)position的取值設(shè)置為absolute時(shí)，代表絕對(duì)定位。元素通過(guò)設(shè)置left、right、top和bottom屬性進(jìn)行定位，絕對(duì)定位元素將選取其“最近的上級(jí)定位元素，直到body元素為止”的元素作為定位參考。絕對(duì)定位的元素將脫離標(biāo)準(zhǔn)文檔流，不受標(biāo)準(zhǔn)文檔流的限制，在標(biāo)準(zhǔn)文檔流中不占用其空間，不影響標(biāo)準(zhǔn)文檔流中的元素，看似懸浮于頁(yè)面之上。七、定位絕對(duì)定位相對(duì)文檔原點(diǎn)坐標(biāo)，向右偏移100px，向下偏移30px。#box2{background-color:#00f00f;position:absolute;left:100px;top:30px;}七、定位絕對(duì)定位思考：如果將上例中class屬性為box的元素（父元素）的定位方式改為relative，class屬性為box2的元素會(huì)怎么移動(dòng)？#box{border:3pxsolidred;margin-top:100px;

position:relative;}相對(duì)父元素原點(diǎn)坐標(biāo)，向右偏移100px，向下偏移30px。七、定位固定定位當(dāng)position屬性設(shè)置為fixed時(shí)，即固定定位。設(shè)置為固定定位的元素脫離文檔流，這里的“固定”指的是在瀏覽器窗口上固定。請(qǐng)同學(xué)們練習(xí)P148-149代碼06_07_02_05.html，比較定位距離與外邊距的差別。七、定位層疊效果自然層疊順序：根據(jù)HTML元素出現(xiàn)的先后順序自定義層疊順序：使用CSS的“z-index”屬性，“z-index”只對(duì)定位元素有效，其值越大，層疊順序越高八、其他常用屬性不屬于某類，但很常用的屬性cursor：設(shè)置光標(biāo)類型（形狀）visibility：設(shè)置元素是否可見(jiàn)clip：設(shè)置元素的形狀zoom：IE下激活對(duì)象的hasLayout模式opacity：設(shè)置元素的不透明度本章小結(jié)CSS屬性的作用、拼寫(xiě)，常用的值，適用哪些元素，有無(wú)繼承性，兼容性怎樣在文檔流中，HTML元素?cái)[放的特點(diǎn)是“行布局”的形式在文檔流中，所有的HTML元素可以分成“塊級(jí)元素”和“內(nèi)聯(lián)元素”CSS中控制文字樣式的屬性可以分為兩類：文本屬性（font）和字體屬性（text）網(wǎng)頁(yè)中所有的HTML元素都可以看作是一個(gè)盒子，會(huì)占據(jù)一定的頁(yè)面空間，在已占據(jù)的空間內(nèi)，不能再放置其它任何占據(jù)頁(yè)面空間的元素本章小結(jié)盒子模型由conte