網(wǎng)站設(shè)計(jì)與Web應(yīng)用開發(fā)技術(shù)(第四版)（微課版）ch04 層疊樣式表(CSS)_第1頁(yè)
網(wǎng)站設(shè)計(jì)與Web應(yīng)用開發(fā)技術(shù)(第四版)（微課版）ch04 層疊樣式表(CSS)_第2頁(yè)
網(wǎng)站設(shè)計(jì)與Web應(yīng)用開發(fā)技術(shù)(第四版)（微課版）ch04 層疊樣式表(CSS)_第3頁(yè)
網(wǎng)站設(shè)計(jì)與Web應(yīng)用開發(fā)技術(shù)(第四版)（微課版）ch04 層疊樣式表(CSS)_第4頁(yè)
網(wǎng)站設(shè)計(jì)與Web應(yīng)用開發(fā)技術(shù)(第四版)（微課版）ch04 層疊樣式表(CSS)_第5頁(yè)
已閱讀5頁(yè)，還剩26頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第4章層疊樣式表(CSS)教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)過(guò)程第2頁(yè)教學(xué)目標(biāo)理解CSS與網(wǎng)頁(yè)制作之間的關(guān)系掌握在網(wǎng)頁(yè)中加入CSS的基本方法理解CSS選擇器及盒子模型掌握CSS濾鏡的用法

CSS典型案例第3頁(yè)教學(xué)重點(diǎn)在網(wǎng)頁(yè)中使用CSS的基本方法

CSS選擇器及盒子模型第4頁(yè)教學(xué)過(guò)程

CSS概述將CSS引入網(wǎng)站

用CSS定義樣式

CSS選擇器及盒子模型

CSS的濾鏡應(yīng)用

CSS典型用法實(shí)例第5頁(yè)4.1CSS概述是CascadingStyleSheet的簡(jiǎn)稱，中文翻譯為：層疊樣式表；為網(wǎng)頁(yè)設(shè)計(jì)者提供更大的網(wǎng)頁(yè)空間應(yīng)用彈性；將網(wǎng)頁(yè)的文字內(nèi)容與版面設(shè)計(jì)分開處理幾乎所有的瀏覽器都支持可取代以前一部分必須通過(guò)專門的圖像處理軟件實(shí)現(xiàn)的圖片特效功能更易于管理樣式，方便編排，減少管理成本便于統(tǒng)一風(fēng)格第6頁(yè)4.2

將CSS引入網(wǎng)站要想使用CSS來(lái)進(jìn)行樣式的設(shè)定和管理，首先需要定義CSS，再讓瀏覽器識(shí)別并調(diào)用。通常添加樣式的方式有如下四種：內(nèi)嵌樣式內(nèi)部樣式表鏈入外部樣式表導(dǎo)入外部樣式表請(qǐng)注意這四種方式的各自特點(diǎn)和適用場(chǎng)合，并理解當(dāng)幾種方式同時(shí)出現(xiàn)時(shí)，按照優(yōu)先級(jí)高低來(lái)決定哪個(gè)生效第7頁(yè)4.2

將CSS引入網(wǎng)站內(nèi)嵌樣式<pstyle="color:blue;font-size:10pt;">CSS樣式表</p>內(nèi)部樣式表在<head><sytle>下設(shè)置：p{color:blue;font-size:10pt;}鏈入外部樣式表在單獨(dú)的CSS文件中定義，之后在網(wǎng)頁(yè)<head>中添加：<linkrel="stylesheet"href="aDefinedCSS.css"type="text/css">導(dǎo)入外部樣式表在單獨(dú)的CSS文件中定義，之后在網(wǎng)頁(yè)<head><sytle>下添加：@import"aDefinedCSS.css"第8頁(yè)4.2

將CSS引入網(wǎng)站CSS的定義是由三個(gè)部分構(gòu)成：選擇符、屬性和屬性的取值，定義方法如下： selector{property:value} 如：body{color:black} p{text-align:center;color:red}p{text-align:center;color:black;font-family:arial}此處定義的是：段落排列居中，段落中文字為黑色，字體是arial。

第9頁(yè)4.3CSS選擇器<!doctypehtml><html><head><style>p{text-align:center;color:black;font-family:arial;}</style>

</head><body><h3align="right"color="blue">

利用HTML標(biāo)簽很復(fù)雜</h1><p>利用CSS更簡(jiǎn)單</p></body></html>標(biāo)簽選擇器第10頁(yè)4.3CSS選擇器類別選擇符類別選擇器是根據(jù)類名來(lái)選擇應(yīng)用樣式的，因此用它可以將相同的元素分類定義為不同的樣式。實(shí)現(xiàn)時(shí)是通過(guò)在自定義類名前加點(diǎn)號(hào)，如： P.right{text-align:right} P.center{text-align:center}第11頁(yè)4.3CSS選擇器ID選擇器由HTML代碼中的ID參數(shù)指定單獨(dú)的樣式，和類選擇符類似。如：#intro{font-size:150%;}第12頁(yè)4.3CSS選擇器通用選擇器用*來(lái)表示匹配任何標(biāo)簽。如：

*{font-size:12px;}表示所有的元素的字體大小都是12px第13頁(yè)4.3CSS選擇器后代選擇器一種單獨(dú)針對(duì)某種元素包含關(guān)系而定義的樣式表，如：tablea{font-size:32px}第14頁(yè)4.3CSS選擇器交集選擇器只有選擇的元素要求同時(shí)具備多個(gè)條件時(shí)，交集選擇器才能匹配并應(yīng)用相關(guān)的樣式。注意，交集選擇器沒有空格，如：h3.special{color:red;}第15頁(yè)4.3CSS選擇器并集選擇器組為了減少樣式的重復(fù)定義，可將相同屬性和值的選擇器組合起來(lái)書寫，使用逗號(hào)將選擇器分開，從而構(gòu)成并集選擇器。例如： h1,h2,h3,h4,h5,h6{color:green}第16頁(yè)4.3CSS選擇器偽類選擇器偽類可以看作一種特殊的類別選擇器，一種支持CSS的瀏覽器能自動(dòng)識(shí)別的特殊選擇器。其最大的用處在于可以對(duì)鏈接在不同狀態(tài)下定義不同的樣式效果。例如：a:link{color:#FF0000;text-decoration:none;} /*未訪問(wèn)的鏈接*/a:visited{color:#00FF00;text-decoration:none;} /*已訪問(wèn)的鏈接*/a:hover{color:#FF00FF;text-decoration:underline;} /*鼠標(biāo)停留在鏈接上*/a:active{color:#0000FF;text-decoration:underline;} /*激活鏈接*/4.3CSS選擇器第17頁(yè)4.3CSS選擇器偽元素選擇器偽元素名說(shuō)

明::after用來(lái)和content屬性一起使用，設(shè)置在對(duì)象后(依據(jù)對(duì)象樹的邏輯結(jié)構(gòu))發(fā)生的內(nèi)容::before用來(lái)和content屬性一起使用，設(shè)置在對(duì)象前(依據(jù)對(duì)象樹的邏輯結(jié)構(gòu))發(fā)生的內(nèi)容::first-letter僅作用于塊對(duì)象。內(nèi)聯(lián)要素要使用該屬性，必須先設(shè)定對(duì)象的height或width屬性，或者設(shè)定position屬性為absolute，或者設(shè)定display屬性為block。設(shè)置對(duì)象內(nèi)的第一行樣式::first-line僅作用于塊對(duì)象。內(nèi)聯(lián)要素要使用該屬性，必須先設(shè)定對(duì)象的height或width屬性，或者設(shè)定position屬性為absolute，或者設(shè)定display屬性為block。如果未強(qiáng)制指定對(duì)象的width屬性，首行的內(nèi)容長(zhǎng)度可能不是固定的::placeholder設(shè)置對(duì)象文字占位符的樣式::selection設(shè)置對(duì)象被選擇時(shí)的樣式如：p::first-letter{font-size:300%;}第18頁(yè)4.3CSS選擇器樣式表的繼承性與層疊性層疊性指的是繼承性，樣式表的繼承規(guī)則是外部的元素樣式繼承給這個(gè)元素所包含的其他元素實(shí)際上，所有嵌套在元素中的元素都會(huì)繼承外層元素已指定的屬性值，有時(shí)會(huì)把很多層次所嵌套的樣式疊加在一起，除非另外設(shè)置

div{color:red;font-size:9pt}……<div><p>這個(gè)段落的文字為紅色9號(hào)字</p></div>P中內(nèi)容會(huì)繼承DIV所定義的樣式。但當(dāng)樣式表繼承遇到?jīng)_突時(shí)，總是以最后定義的樣式為準(zhǔn)

第19頁(yè)4.3CSS選擇器注釋可以在CSS中插入注釋來(lái)說(shuō)明代碼的含義，注釋有利于自己或別人今后在編輯和更改代碼時(shí)理解代碼的含義

在瀏覽器中，注釋是不顯示的

注意與HTML中的注釋方式的區(qū)別，此處只能以“/*”開頭，以“*/”結(jié)尾

第20頁(yè)4.4

CSS的布局及盒子模型定位屬性值說(shuō)

明static是默認(rèn)選項(xiàng)，由元素框正常生成；塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分；行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中relative元素框相對(duì)于之前正常文檔流中的位置發(fā)生偏移，并且原先的位置仍然被占據(jù)；偏移時(shí)，可能會(huì)覆蓋其他元素absolute元素框不再占有文檔流位置，并且相對(duì)于包含塊進(jìn)行偏移(包含塊就是最近一級(jí)外層元素，其position不為static的元素)fixed元素框不再占有文檔流位置，并且相對(duì)于文檔顯示區(qū)域進(jìn)行定位sticky粘性定位，相當(dāng)于relative和fixed的融合；最初會(huì)被當(dāng)作是relative，相對(duì)于原來(lái)的位置進(jìn)行偏移；一旦超過(guò)一定閾值之后，會(huì)被當(dāng)成fixed定位，相對(duì)于視口進(jìn)行定位relative其偏移是相對(duì)于原先在文檔流中的位置第21頁(yè)4.4

CSS的布局及盒子模型尺寸定義方式說(shuō)

明px像素單位，顯示的最小單位；代表顯示屏上顯示的每一個(gè)小點(diǎn)，屬于絕對(duì)尺寸單位em相對(duì)于父元素的font-size，屬于相對(duì)尺寸單位；一般瀏覽器字體大小默認(rèn)為16px，則2em==32px，這種方式計(jì)算較為復(fù)雜rem與em類似，也屬于相對(duì)尺寸單位；主要不同在于它是相對(duì)于html根元素的font-size百分比純粹的相對(duì)尺寸單位，所描述的是其相對(duì)于父元素的百分比值第22頁(yè)4.4

CSS的布局及盒子模型CSS的盒子模型第23頁(yè)4.4

CSS的布局及盒子模型CSS的盒子模型<!doctypehtml><html><head><styletype="text/css">div{width:100px;height:20px;border:1pxsolidred;padding:20px;margin:30px;}</style></head><body><div>無(wú)中生有</div><div>緣木求魚</div></body></html>盒子真實(shí)占有屏幕寬度=左border+左padding+width+右padding+右border第24頁(yè)4.4

CSS的布局及盒子模型<!doctypehtml><html><body><ul><li>第一點(diǎn)</li><li>第二點(diǎn)</li><ul></body></html>CSS的盒子模型默認(rèn)的盒子參數(shù)第25頁(yè)4.4

CSS的布局及盒子模型常用布局要求設(shè)置方法行內(nèi)元素對(duì)父元素設(shè)置text-align:center;定寬塊狀元素設(shè)置左右margin值為auto;不定寬塊狀元素設(shè)置子元素為display:inline,然后在父元素上設(shè)置text-align:center;通用方案flex布局，對(duì)其父元素設(shè)置為display:flex;justify-content:center;CSS布局水平布局第26頁(yè)4.4

CSS的布局及盒子模型常用布局要求設(shè)置方法父元素一定，子元素為單行內(nèi)聯(lián)文本設(shè)置父元素的height等于行高line-height父元素一定，子元素為多行內(nèi)聯(lián)文本設(shè)置父元素的display:table-cell或inline-block，再設(shè)置vertical-align:middle;塊狀元素設(shè)置子元素position:fixed（absolute），然后設(shè)置margin:auto;通用方案flex布局，對(duì)其父元素設(shè)置為{display:flex;align-items:center;}CSS布局垂直布局第27頁(yè)4.5CSS濾鏡使用CSS的濾鏡，可以利用客戶端的計(jì)算資源對(duì)圖片生成各種類似于Photoshop特效濾鏡的效果CSS濾鏡屬性的標(biāo)識(shí)符是filter

filter:none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();第28頁(yè)4.5CSS濾鏡濾鏡對(duì)比

如實(shí)例4-28第29頁(yè)4.5CSS濾鏡復(fù)合濾鏡<!DOCTYPEhtml><html><html><head><metachars

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論