HTML5+CSS3+JavaScript+Bootstrap網(wǎng)站開發(fā)技術(shù)（第3版）課件 第3章 美化網(wǎng)頁-使用CSS技術(shù)

第3章美化網(wǎng)頁——使用CSS技術(shù)CSS概述1CSS基本選擇器2在HTML中使用CSS的方法3CSS復(fù)合選擇器4用CSS設(shè)置文本樣式5用CSS設(shè)置顏色與背景6用CSS設(shè)置圖像效果7應(yīng)用案例8小結(jié)93.1CSS概述CSS(CascadingStyleSheet)稱為層疊樣式表，也稱樣式表，其文件擴(kuò)展名為.css。CSS是用于控制網(wǎng)頁樣式，并允許將網(wǎng)頁內(nèi)容與樣式信息分離的一種標(biāo)記語言。結(jié)構(gòu)和風(fēng)格分離擴(kuò)充了HTML標(biāo)記提高了網(wǎng)站維護(hù)的效率可以實(shí)現(xiàn)精美的頁面布局CSS的優(yōu)點(diǎn)3.1CSS概述1996年12月，W3C發(fā)布CSS1.0規(guī)范。1998年5月，CSS2規(guī)范發(fā)布。2001年5月，W3C完成了CSS3的工作草案。CSS的發(fā)展CSS的引入HTML語言更好地適應(yīng)頁面的美工設(shè)計(jì)在提供了豐富的格式化功能，如字體、顏色、背景和整體排版等可以針對(duì)各種可視化瀏覽器來設(shè)置不同的樣式風(fēng)格3.1CSS概述瀏覽器對(duì)CSS3的支持主濟(jì)瀏覽器都支持CSS3樣式。少數(shù)標(biāo)記需要在不同瀏覽器中加以說明。CSS的編輯器CSS文件是文本格式文件NodePad++、記事本等DreamweaverCS6，WebStorm等3.2CSS基本選擇器選擇器，selector。根據(jù)功能或作用范圍，將選擇器主要分為標(biāo)記選擇器、類別選擇器和ID選擇器3種。CSS可以認(rèn)為是由多個(gè)選擇器組成的集合，每個(gè)選擇器由3個(gè)基本部分組成：“選擇器名稱”、“屬性”和“值”。selector{property:value;}3.2CSS基本選擇器3.2.1標(biāo)記選擇器一個(gè)HTML頁面由很多不同的標(biāo)記組成<p>、<h1>、<div>、……標(biāo)記選擇器用于控制頁面中所有同類標(biāo)記的顯示樣式tagName{ property:value;}3.2CSS基本選擇器3.2.2類選擇器類選擇器用來為一系列標(biāo)記定義相同的呈現(xiàn)方式.className{property:value}className是選擇器的名稱，具體名稱由用戶命名。3.2CSS基本選擇器

demo0303.html3.2CSS基本選擇器3.2.3ID選擇器對(duì)特定屬性的屬性值進(jìn)行設(shè)置ID選擇器和類選擇器的區(qū)別一個(gè)HTML文件中ID的屬性值是唯一的

#idName{property:value;}idName是選擇器名稱，可以由CSS定義者自己命名。3.2CSS基本選擇器

demo0304.html3.3在HTML中使用CSS的方法為了設(shè)置的CSS樣式能夠在網(wǎng)頁中產(chǎn)生作用，必須將CSS和HTML文件聯(lián)接在一起，才可以正常工作。在HTML文件中使用CSS的方式有4種：行內(nèi)樣式、嵌入式、鏈接式和導(dǎo)入式。3.3在HTML中使用CSS的方法CSS的樣式行內(nèi)樣式把CSS代碼添加到HTML標(biāo)記上嵌入樣式定義樣式集，通過<style>和</style>聲明鏈接樣式用Link標(biāo)記聲明導(dǎo)入樣式<style>標(biāo)記中，使用@import導(dǎo)入外部的CSS文件<h1style="color:blue;font-style:bold“></h1><linkrel=”stylesheet”type=”text/css”href=”mystyle.css”/><styletype="text/css“>

@import"mystyle.css";</style>3.3在HTML中使用CSS的方法示例demo0305.htmldemo0306.htmldemo0307.html3.3在HTML中使用CSS的方法各種方式的優(yōu)先級(jí)同一個(gè)頁面使用多種引用CSS樣式表的方法，比如同時(shí)使用行內(nèi)樣式、鏈接樣式和嵌入樣式，當(dāng)幾種方式的樣式定義共同作用于同一屬性，會(huì)出現(xiàn)優(yōu)先級(jí)問題。導(dǎo)入樣式鏈接樣式嵌入樣式行內(nèi)樣式樣式的優(yōu)先級(jí)按箭頭方向逐漸升高3.4CSS復(fù)合選擇器復(fù)合選擇器就是兩個(gè)或多個(gè)基本選擇器，通過不同方式組合而成的選擇器.實(shí)現(xiàn)更強(qiáng)、更方便的選擇功能。包括交集選擇器、并集選擇器和后代選擇器等。偽類選擇器和偽對(duì)象選擇器。3.4CSS復(fù)合選擇器3.4.1交集選擇器交集選擇器是由兩個(gè)選擇器直接連接構(gòu)成，其結(jié)果是選中兩者各自作用范圍的交集。第一個(gè)必須是標(biāo)記選擇器，第二個(gè)必須是類選擇器或ID選擇器。tagName.className{ property:value;}demo0311.html3.4CSS復(fù)合選擇器3.4.2并集選擇器并集選擇器就是對(duì)多個(gè)選擇器進(jìn)行集體聲明，多個(gè)選擇器之間用“，”隔開每個(gè)選擇器可以是任何類型的選擇器selector1,selector2,…{property:value;}demo0312.html3.4CSS復(fù)合選擇器3.4.3后代選擇器通過嵌套的方式，對(duì)特殊位置的HTML標(biāo)記進(jìn)行控制后代選擇器的寫法是把外層的標(biāo)記寫在前面，內(nèi)層的標(biāo)記寫在后面，之間用空格隔開selector1selector2{property:value;}demo0313.html3.4CSS復(fù)合選擇器3.4.4子選擇器子選擇器用于選中標(biāo)記的直接后代（兒子），它的定義符號(hào)是大于號(hào)（>）selector1>selector23.4.5相鄰選擇器相鄰（adjacent-sibling）選擇器的定義符號(hào)是加號(hào)（+）選中緊跟在它后面的一個(gè)兄弟元素（這兩個(gè)元素具有共同的父元素）。3.4CSS復(fù)合選擇器3.4.6屬性選擇器CSS3的屬性選擇器可以將樣式與具有某種屬性的元素綁定，實(shí)現(xiàn)各種復(fù)雜的選擇。設(shè)置網(wǎng)頁中id值為“first”的元素背景色和前景顏色div[id="first"]{ color:blue; background-color:yellow; }屬性選擇器選擇器說明[att*="value"]匹配屬性包含含有特定值的元素。例如，a[href*="lnnu"]，匹配<ahref="">包含匹配</a>[att^="value"]匹配屬性包含以特定值開頭的元素。例如，a[href^="ftp"]，匹配<ahref="">頭匹配</a>[att$="value"]匹配屬性包含以特定值結(jié)尾的元素。例如，a[href$="cn"]，匹配<ahref="">尾匹配</a>[att="value"]匹配屬性等于某特定值的元素。例如，[type="text"]，匹配<inputtype="text"name="username"/>屬性選擇器中的通配符3.4CSS復(fù)合選擇器3.4.7偽類選擇器偽類選擇器是在CSS中已經(jīng)定義的選擇器，而不是由用戶自行定義的。分為結(jié)構(gòu)偽類選擇器和UI元素偽類選擇器2種。結(jié)構(gòu)偽類選擇器是CSS3新增的選擇器之一。1基本結(jié)構(gòu)偽類選擇器:root:not:empty:target3.4CSS復(fù)合選擇器2與元素位置有關(guān)的結(jié)構(gòu)偽類選擇器E:first-childE:last-childE:nth-child(n)E:nth-last-child(n)3UI偽類選擇器E:enabledE:disabledE:checkedE:readonly……3.4CSS復(fù)合選擇器3.4.8偽元素選擇器:first-letter、:first-line、:before和:after之所以稱偽元素選擇器，是因?yàn)樗鼈冊(cè)谛Ч鲜刮臋n增加了一個(gè)臨時(shí)的元素這是應(yīng)用“虛構(gòu)標(biāo)記”的一個(gè)典型實(shí)例。選擇器:first-letter和:first-line選擇器:before和:after3.5用CSS設(shè)置文本樣式3.5.1字體屬性字體屬性用于控制網(wǎng)頁中文本字符的顯示方式。包括font，font-family，font-size，font-style，font-variant和font-weight等。font-family屬性確定要使用的字體列表。font-size屬性font-size屬性用于控制文字的大小，它的取值分為4種類型：絕對(duì)大小、相對(duì)大小、長(zhǎng)度值以及百分?jǐn)?shù)。該屬性的默認(rèn)值是medium。demo0322.html3.5用CSS設(shè)置文本樣式font-style屬性font-style屬性確定指定元素顯示的字形。值包括normal、italic和oblique三種。默認(rèn)值為normal表示普通字形。font-variant屬性定義了瀏覽器顯示指定元素的字體變體。值包括normal、small-caps和inherit。font-weight屬性定義了字體的粗細(xì)值，取值是：normal、bold、bolder和lighter。3.5用CSS設(shè)置文本樣式font復(fù)合屬性使用font屬性可一次性設(shè)置前面介紹的各種字體屬性（屬性之間以空格分隔）。在使用font屬性設(shè)置字體格式時(shí)，字體屬性名可以省略。排列順序是：font-weight、font-variant、font-style、font-size和font-family。demo0325.html3.5用CSS設(shè)置文本樣式3.5.2文本屬性用于控制段落格式和文本的修飾方式設(shè)置單詞間距、字符間距、首行縮進(jìn)、段落對(duì)齊方式等常用文本屬性包括word-spacing、letter-spacing、text-align、text-indent、line-height、text-decoration等。word-spacing和letter-spacing屬性word-spacing用于設(shè)定單詞之間的間隔，取值可以是normal或具體的長(zhǎng)度值，也可以是負(fù)值。3.5用CSS設(shè)置文本樣式text-align屬性指定了所選元素的對(duì)齊方式（類似于HTML標(biāo)記符的align屬性）取值是：left、right、center和justify。在CSS3中，增加了start、end、string三個(gè)屬性值，分別表示向行的開始邊緣對(duì)齊、向行的結(jié)束邊緣對(duì)齊。text-indent屬性對(duì)特定選項(xiàng)的文本進(jìn)行首行縮進(jìn)取值可以是長(zhǎng)度值或百分比。默認(rèn)值是0，表示無縮進(jìn)。3.5用CSS設(shè)置文本樣式line-height屬性決定了相鄰行之間的間距（或者說行高）取值可以是數(shù)字、長(zhǎng)度或百分比，默認(rèn)值是normal。當(dāng)以數(shù)字指定值時(shí)，行高就是當(dāng)前字體高度與該數(shù)字相乘的倍數(shù)。div{font-size:l0pt;line-height:1.5;}3.5用CSS設(shè)置文本樣式text-decoration屬性對(duì)特定選項(xiàng)的文本進(jìn)行修飾取值為：none、underline、overline、line-through和blink，默認(rèn)值為none。text-transform屬性text-transform屬性用于轉(zhuǎn)換文本取值為：capitalize、uppercase、lowercase和none，默認(rèn)值是nonecapitalize值表示選中文本的每個(gè)單詞的首字母以大寫顯示uppercase值表示所有的文本都以大寫顯示lowercase值表示所有文本都以小寫顯示3.5用CSS設(shè)置文本樣式text-shadow為文本添加陰影word-wrap長(zhǎng)單詞換行方式取值normal,break-word3.6用CSS設(shè)置顏色與背景顏色屬性color設(shè)置元素內(nèi)文本的顏色背景屬性則可以控制元素的背景顏色以或背景圖像。包括background、background-attachment、background-color、background-image、background-position和background-repeat等。3.6用CSS設(shè)置顏色與背景color屬性用于控制HTML元素內(nèi)文本的顏色。顏色名：直接使用顏色的英文名稱作為屬性值例如blue表示藍(lán)色#rrggbb：用一個(gè)6位的十六進(jìn)制數(shù)表示顏色例如，#0000FF可以表示為#00F#rgb：使用十進(jìn)制數(shù)表示顏色的紅、綠、藍(lán)含量rgb(0,0,0)代表黑色rgb(rrr%,ggg%,bbb%):使用百分比表示顏色的紅、綠、藍(lán)含量rgb(50%,50%,50%)表示rgb(128,128,128)demo0328.html3.6用CSS設(shè)置顏色與背景background-color屬性設(shè)置HTML元素的背景顏色屬性的默認(rèn)值是transparent，表示沒有任何顏色（或者說是透明色），此時(shí)上級(jí)元素的背景可以在子元素中顯示出來background-image設(shè)置HTML元素的背景圖像取值為url(imageurl)或none。默認(rèn)值為none3.6用CSS設(shè)置顏色與背景background-attachment屬性用于控制背景圖像是否隨內(nèi)容一起滾動(dòng)，取值為scroll或fixed。默認(rèn)值為scroll，表示背景圖像隨著內(nèi)容一起滾動(dòng)；fixed表示背景圖像靜止，而內(nèi)容可以滾動(dòng)。background-position屬性指定背景圖像相對(duì)于關(guān)聯(lián)區(qū)域左上角的位置。該屬性通常指定由空格隔開的兩個(gè)值，既可以使用關(guān)鍵字left/center/right和top/center/bottom，也可以指定百分?jǐn)?shù)值，或者指定以標(biāo)準(zhǔn)單位計(jì)算的距離。3.6用CSS設(shè)置顏色與背景background-repeat屬性用來表示背景圖像是否重復(fù)顯示。取值是：repeat/repeat-x/repeat-y/no-repeat。默認(rèn)值是repeat，表示在水平方向和垂直方向都重復(fù)；repeat-x表示在水平方向上平鋪；repeat-y表示在垂直方向上平鋪；no-repeat表示不平鋪。background屬性background屬性與font屬性類似，是一個(gè)組合屬性可用于同時(shí)設(shè)置background-color、background-image、background-attachment、background-position和background-repeat等背景屬性指定background屬性時(shí)，各屬性值的位置可以是任意的demo0329.html3.6.3圓角邊框和圖像邊框圓角邊框CSS3使用border-radius屬性可以設(shè)計(jì)各種類型的圓角邊框直接給border-radius屬性賦一組值來定義圓角。直接給border-radius屬性賦4個(gè)值，這4個(gè)值按照top-left、top-right、bottom-left、bottom-right的順序來設(shè)置。3.6.3圓角邊框和圖像邊框div{ background:#cba276;/*制作圓角邊框用這行代碼border:5pxsolidred;*/ text-align:left; width:200px; height:120px; padding:15px;border-radius:8px;-moz-border-radius:8px;/*兼容Firefox*/-webkit-border-radius:8px;/*兼容Chrome*/ }3.6.3圓角邊框和圖像邊框圖像邊框CSS3增加了一個(gè)border-image屬性，可以讓處于隨時(shí)變化狀態(tài)的元素長(zhǎng)或?qū)挼倪吙蚪y(tǒng)一使用一個(gè)圖像文件來繪制。div{

width:200px;

padding:15px;border-mage:url(images/borderimage.png) 5101520/25px;-moz-border-image:url(images/ borderimage.png)5101520/25px;-webkit-border-image:url(images/ borderimage.png)5101520/25px; }3.7用CSS設(shè)置圖像效果HTML文檔中通過<img>標(biāo)記來添加圖片；使用border,width,height等屬性設(shè)置圖片；使用CSS，可以為圖片設(shè)置更加豐富的風(fēng)格和樣式，包括添加邊框、縮放圖片、實(shí)現(xiàn)圖文混排和設(shè)置對(duì)齊方式等。3.7用CSS設(shè)置圖像效果border-width：設(shè)置邊框的粗細(xì)border-color：定義邊框的顏色border-style：定義線型demo0332.html3.7.1為圖片添加邊框邊框的不同屬性在CSS中通過邊框?qū)傩詾閳D片添加各式各樣的邊框。一個(gè)邊框由3個(gè)屬性組成.3.7用CSS設(shè)置圖像效果為不同的邊框分別設(shè)置樣式可以單獨(dú)地定義邊框一邊的樣式。border-top-style設(shè)定上邊框樣式border-bottom-style設(shè)定下邊框樣式border-right-style設(shè)定右邊框樣式border-left-style設(shè)定左邊框樣式。為圖片設(shè)置不同的邊框的顯示效果3.7用CSS設(shè)置圖像效果3.7.2圖片縮放默認(rèn)情況，網(wǎng)頁上的圖片按原始大小顯示頁面排版時(shí)，通常情況下還需要對(duì)圖片的大小進(jìn)行重新設(shè)定設(shè)定圖片大小的三種方式使用img的標(biāo)記屬性width和height使用CSS3中max-width屬性和max-height屬性使用CSS中width和height屬性3.7用CSS設(shè)置圖像效果實(shí)例顯示效果——demo0335.html3.7用CSS設(shè)置圖像效果3.7.3圖文混排網(wǎng)頁效果的展示很多情況下都是通過圖文混排來實(shí)現(xiàn)的使用CSS，可以設(shè)置多種不同的圖文混排方式。文字環(huán)繞CSS使用float屬性來實(shí)現(xiàn)該效果。float:none/left/right;none表示默認(rèn)值對(duì)象不浮動(dòng)，left表示文本流向?qū)ο蟮挠疫?，right表示文本流向?qū)ο蟮淖筮叀?.7用CSS設(shè)置圖像效果文字環(huán)繞效果demo0336.html3.8應(yīng)用案例3.8.1用CSS美化表單案例用CSS美化一個(gè)網(wǎng)站的在線注冊(cè)頁面。3.8應(yīng)用案例3.8.2用CSS設(shè)計(jì)的網(wǎng)站頁面案例使用表格布局，頁面中的元素如文字、超級(jí)鏈接、水平線、表單等由CSS來控制。demo0338.html小結(jié)介紹了CSS的概念，這是本章的基礎(chǔ)，也是網(wǎng)頁設(shè)計(jì)內(nèi)容和格式分離的基礎(chǔ)。而且，到CSS3以后，更多的格式控制都已經(jīng)從標(biāo)記的屬性中轉(zhuǎn)移到CSS中。本章核心內(nèi)容如下。3種基本選擇器是標(biāo)記選擇器、類選擇器和ID選擇器。需要注