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

下載本文檔

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

文檔簡介

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

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

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

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

用CSS定義樣式

CSS選擇器及盒子模型

CSS的濾鏡應(yīng)用

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

將CSS引入網(wǎng)站要想使用CSS來進(jìn)行樣式的設(shè)定和管理，首先需要定義CSS，再讓瀏覽器識別并調(diào)用。通常添加樣式的方式有如下四種：內(nèi)嵌樣式內(nèi)部樣式表鏈入外部樣式表導(dǎo)入外部樣式表請注意這四種方式的各自特點(diǎn)和適用場合，并理解當(dāng)幾種方式同時出現(xiàn)時，按照優(yōu)先級高低來決定哪個生效第7頁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)頁<head>中添加：<linkrel="stylesheet"href="aDefinedCSS.css"type="text/css">導(dǎo)入外部樣式表在單獨(dú)的CSS文件中定義，之后在網(wǎng)頁<head><sytle>下添加：@import"aDefinedCSS.css"第8頁4.2

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

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

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

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

第19頁4.3CSS選擇器注釋可以在CSS中插入注釋來說明代碼的含義，注釋有利于自己或別人今后在編輯和更改代碼時理解代碼的含義

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

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

第20頁4.4

CSS的布局及盒子模型定位屬性值說

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

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

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

CSS的布局及盒子模型CSS的盒子模型第23頁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>無中生有</div><div>緣木求魚</div></body></html>盒子真實(shí)占有屏幕寬度=左border+左padding+width+右padding+右border第24頁4.4

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

CSS的布局及盒子模型常用布局要求設(shè)置方法行內(nèi)元素對父元素設(shè)置text-align:center;定寬塊狀元素設(shè)置左右margin值為auto;不定寬塊狀元素設(shè)置子元素為display:inline,然后在父元素上設(shè)置text-align:center;通用方案flex布局，對其父元素設(shè)置為display:flex;justify-content:center;CSS布局水平布局第26頁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布局，對其父元素設(shè)置為{display:flex;align-items:center;}CSS布局垂直布局第27頁4.5CSS濾鏡使用CSS的濾鏡，可以利用客戶端的計(jì)算資源對圖片生成各種類似于Photoshop特效濾鏡的效果CSS濾鏡屬性的標(biāo)識符是filter

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

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

溫馨提示

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

評論

0/150

提交評論