《WEB前臺技術_4_CSS【技術專攻】》由會員分享，可在線閱讀，更多相關《WEB前臺技術_4_CSS【技術專攻】（51頁珍藏版）》請在裝配圖網(wǎng)上搜索。
1、Neusoft Group Ltd.WEB前臺技術4-CSS1專業(yè)課Neusoft Group Ltd.課程結構內(nèi)容內(nèi)容課時（課時（H H）第一章：第一章：CSSCSS概述概述0.20.2第二章：第二章：CSSCSS的樣式的樣式0.30.3第三章第三章：CSSCSS基本語法基本語法2.02.0第四章：第四章：CSSCSS布局布局1.01.0第五章：第五章：使用使用JavaScriptJavaScript控制控制CSSCSS0.50.52專業(yè)課Neusoft Group Ltd.第一章：CSS概述學時：學時：0.20.2學時學時教學方法：講授教學方法：講授pptppt目標目標:本章旨在向?qū)W員介紹
2、本章旨在向?qū)W員介紹CSSCSS的相關的相關概念及優(yōu)點，通過本課的學習，概念及優(yōu)點，通過本課的學習，學員應該掌握如下知識：學員應該掌握如下知識：1 1）了解）了解CSSCSS的概念的概念2 2）了解）了解CSSCSS的優(yōu)點的優(yōu)點3專業(yè)課Neusoft Group Ltd.概述概述 CSSCSS（Cascading Style SheetCascading Style Sheet）級聯(lián)樣式表）級聯(lián)樣式表 在W3C標準中被定義為“一種對Web頁面進行外觀控制的機制”CSS和HTML、JavaScript是并列的3種用于Web開發(fā)的技術 CSSCSS開始是為開始是為HTMLHTML文檔設計的文檔設計的
3、 定義文檔樣式 將文檔的內(nèi)容與表現(xiàn)分離開4專業(yè)課Neusoft Group Ltd.示例示例5專業(yè)課Neusoft Group Ltd.示例示例6專業(yè)課Neusoft Group Ltd.基本概念基本概念 CSSCSS簡介簡介 CSS能夠?qū)⑽臋n的格式化信息與文檔的正文分離開來 CSS的功能不斷被擴充，目前為止，CSS樣式單有兩個官方標準：CSS1和CSS2 目前，CSS1的功能在大多數(shù)瀏覽器中都得到了廣泛的支持 CSSCSS的基本概念的基本概念 CSS由一定的語法組成，對Web頁面元素的外觀進行控制 CSS通過一定的機制與特定文檔相關聯(lián)，對此文檔進行樣式控制 CSS是Web標準推薦的頁面表現(xiàn)控
4、制方式 CSS被設計用來替代傳統(tǒng)的HTML表現(xiàn)代碼7專業(yè)課Neusoft Group Ltd.優(yōu)點優(yōu)點 CSSCSS優(yōu)點優(yōu)點 樣式代碼獨立于HTML頁面，有利于進行站點的統(tǒng)一控制 樣式文件可在瀏覽器中緩存，節(jié)省帶寬，提高加載速度 提高開發(fā)效率，有利于分工合作 由于HTML頁面中不再包含大量的表現(xiàn)代碼，提高了可訪問性 控制外觀更加容易 提供比傳統(tǒng)HTML更多的外觀控制手段8專業(yè)課Neusoft Group Ltd.第二章：CSS的樣式學時：學時：0.30.3學時學時教學方法：講授教學方法：講授ppt+ppt+演示演示目標目標:本章旨在向?qū)W員介紹本章旨在向?qū)W員介紹CSSCSS的樣式的樣式及怎樣將樣
5、式表加入到及怎樣將樣式表加入到HTMLHTML和和XMLXML中，通過本課的學習，學員中，通過本課的學習，學員應該掌握如下知識：應該掌握如下知識：1 1）了解）了解CSSCSS的樣式的樣式2 2）能夠?qū)邮奖砑尤氲剑┠軌驅(qū)邮奖砑尤氲紿TMLHTML中中3 3）能夠?qū)邮奖砑尤氲剑┠軌驅(qū)邮奖砑尤氲絏MLXML中中9專業(yè)課Neusoft Group Ltd.樣式樣式 CSSCSS的樣式的樣式 按CSS代碼的位置劃分 嵌入樣式（Internal Style Sheet）：嵌入一個樣式塊 內(nèi)聯(lián)樣式（Inline Style）外聯(lián)樣式（External Style Sheet）：鏈接一個樣式文件 將
6、樣式表加入到將樣式表加入到HTMLHTML中中 嵌入樣式 內(nèi)聯(lián)樣式 外聯(lián)樣式10專業(yè)課Neusoft Group Ltd.CSS使用使用-內(nèi)聯(lián)內(nèi)聯(lián) 內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式-Inline Styles -Inline Styles 示例：示例：inlineCSS.htmlinlineCSS.html 將樣式代碼直接內(nèi)聯(lián)到標記內(nèi)，以style作為屬性，語句作為屬性值 style屬性可以包含任意的CSS值 使用style控制標記的邊框樣式為不折疊 內(nèi)聯(lián)樣式特點內(nèi)聯(lián)樣式特點 看上去很直觀 僅針對個別元素進行控制 將外觀控制代碼散布于整個HTML文檔，和傳統(tǒng)的外觀控制方式?jīng)]有本質(zhì)的不同 一般不推薦使用11專業(yè)
7、課Neusoft Group Ltd.CSS使用使用-嵌入嵌入 嵌入樣式嵌入樣式-Internal Style Sheet -Internal Style Sheet 示例：示例：internalCSS.htmlinternalCSS.html 使用標記將一段CSS語句插入到HTML文檔層次結構中 一般將這段CSS語句作為一個獨立部分插入在和標記之間 嵌入樣式的特點嵌入樣式的特點 也是將CSS語句直接寫在HTML文檔中，但它做為一個獨立的標記塊存在，維護和修改都要方便得多 利用CSS規(guī)則來選擇標記 嵌入樣式僅能夠針對一個HTML文檔進行設置，無法與多個文檔關聯(lián)，一般用于控制一些針對性強的獨立樣
8、式 嵌入樣式是HTML文檔的一部分，仍然有需要重復加載的問題，無法利用瀏覽器的緩存機制12專業(yè)課Neusoft Group Ltd.CSS使用使用-外聯(lián)外聯(lián) 外聯(lián)樣式外聯(lián)樣式-External Style Sheet-External Style Sheet 通過外部樣式文件對頁面進行控制 建立外部樣式文件（.css）外部的樣式文件可以通過HTML的link元素連接到HTML文檔中 標記放置在文檔的head部分13專業(yè)課Neusoft Group Ltd.外聯(lián)示例外聯(lián)示例 外聯(lián)樣式外聯(lián)樣式-External Style Sheet -External Style Sheet 示例：示例：ext
9、ernalCSS.htmlexternalCSS.html 建立外部樣式文件（.css）外部的樣式文件不能含有任何像或這樣的HTML標記 樣式表文件僅僅由樣式規(guī)則或聲明組成14專業(yè)課Neusoft Group Ltd.外聯(lián)特點外聯(lián)特點 外聯(lián)樣式的特點外聯(lián)樣式的特點 當樣式被應用到很多的網(wǎng)頁時，一個外部樣式表是最理想的 網(wǎng)頁制作者使用外部樣式表，在改變整個網(wǎng)站的外觀時，僅需要改變一個文件 大多數(shù)瀏覽器會保存外部樣式表在緩沖區(qū)，從而如果樣式表在緩沖區(qū)就避免了在展示網(wǎng)頁時的延遲 在實際開發(fā)中一般都使用外聯(lián)樣式15專業(yè)課Neusoft Group Ltd.外聯(lián)詳解外聯(lián)詳解 外聯(lián)樣式外聯(lián)樣式-Exter
10、nal Style Sheet-External Style Sheet 建立外部樣式文件（.css）外部的樣式文件可以通過XML處理指令PI（Processing Instruction）連接到XML文檔中16專業(yè)課Neusoft Group Ltd.第三章：CSS基本語法學時：學時：2.02.0學時學時教學方法：講授教學方法：講授ppt+ppt+上機練習上機練習目標目標:本章旨在向?qū)W員介紹本章旨在向?qū)W員介紹CSSCSS的基本的基本語法，通過本課的學習，學員應語法，通過本課的學習，學員應該掌握如下知識：該掌握如下知識：1 1）知道）知道CSSCSS的基本語法的基本語法2 2）了解）了解CSS
11、CSS的選擇器的選擇器3 3）了解）了解CSSCSS的偽類及偽對象的偽類及偽對象17專業(yè)課Neusoft Group Ltd.選擇符選擇符 CSSCSS的基本語法的基本語法 選擇符 任何HTML元素都可以是一個CSS選擇符，選擇符僅僅是指向特別樣式的元素。如：P font-size:12pt當中的選擇符是P 選擇符分類 類選擇符 Id選擇符 關聯(lián)選擇符18專業(yè)課Neusoft Group Ltd.屬性屬性 CSSCSS的基本語法的基本語法-屬性（簡略了解）屬性（簡略了解）CSS的顏色 常用的，如red，#00ff00等 CSS的前景色 color屬性 CSS的背景 background、bac
12、kground-color、background-image、background-repeat、background-position CSS的文本 letter-spacing、word-spacing、text-decoration、text-transform、text-align、text-indent19專業(yè)課Neusoft Group Ltd.屬性屬性 CSSCSS的基本語法的基本語法-屬性（簡略了解）屬性（簡略了解）CSS的字體 font-family、font-size、font-style、font-variant、font-weight、font CSS的邊框 borde
13、r-width、border-color、border-style、border CSS的偽類 link、hover、active、visited20專業(yè)課Neusoft Group Ltd.選擇器選擇器 CSSCSS的基本語法的基本語法 選擇器 使用一定的規(guī)則來指定一個或一組標記，從而對它們進行統(tǒng)一的外觀控制 每個選擇器后面都跟著一組屬性，這些屬性用大括號括起來，以分號隔開 每組屬性包括屬性名稱和屬性值21專業(yè)課Neusoft Group Ltd.標記選擇器標記選擇器 使用標記選擇器使用標記選擇器 可以對HTML或XML中所有你想要定義的元素進行標識 選擇文檔內(nèi)所有指定標記的結點，然后對它們
14、應用樣式 html.csshtml.cssbody color:blockp font-family:”sans serif”p text-align:center;color:redp text-align:center;color:black;tont-family:arial如果是多個單詞，使用雙引號括上如果有多個屬性，使用分號將各個屬性分隔開注意代碼的格式，使可讀性更好22專業(yè)課Neusoft Group Ltd.標記選擇器標記選擇器 xml.cssxml.cssMusic display:blockTitle display:block;font-size:30pt;font-wei
15、ght:bold;text-align:centerSinger display:block;margin-bottom:4px;text-align:centerContent display:block;margin-bottom:4px;按塊的方式顯示其內(nèi)容粗體選擇器selector居中23專業(yè)課Neusoft Group Ltd.群組選擇器群組選擇器 標記選擇器標記選擇器-群組選擇器（群組選擇器（Group SelectorsGroup Selectors）為了減少樣式表的重復聲明，組合的選擇器聲明是允許的24專業(yè)課Neusoft Group Ltd.類型選擇器類型選擇器 標記選擇器標
16、記選擇器-類型選擇器類型選擇器 標記選擇器便于統(tǒng)一設置結點樣式 標記選擇器的應用范圍很大，對頁面中的所有這類標記都有效 需要把HTML/XML文檔中同一類型的兩個或兩個以上的元素設計成不同的樣式類型選擇器 類型選擇器類型選擇器 縮小指定的結點范圍 類型選擇器通過class屬性來指定要應用樣式的標記 將class屬性加到（同一類型）兩個或兩個以上的標記上，達到區(qū)分的目的，分別對其指定不同的樣式25專業(yè)課Neusoft Group Ltd.類型選擇器類型選擇器 類型選擇器類型選擇器 用class屬性區(qū)分標記通常在HTML/XML文檔中進行 通過class屬性指定要應用樣式的標記26專業(yè)課Neuso
17、ft Group Ltd.類型選擇器類型選擇器 類型選擇器類型選擇器 在W3C標準中規(guī)定class屬性是可以重復的，多個標記可以具有同樣的class屬性 但是在一個HTML/XML元素中只可以使用一個class屬性27專業(yè)課Neusoft Group Ltd.類型選擇器類型選擇器 類型選擇器類型選擇器在選擇器中省略了標記名稱，則可以在所有的HTML元素中使用此屬性28專業(yè)課Neusoft Group Ltd.id選擇器選擇器 idid選擇器選擇器 用戶可以使用id屬性對頁面中的標記進行自定義名稱 id是一個標識，在網(wǎng)頁中每個id名稱只能使用一次 和類型選擇器不同，id選擇器使用“#”代替“.”
18、實現(xiàn)標記的定位 用id屬性區(qū)分標記通常在HTML/XML文檔中進行 通過id屬性指定要應用樣式的標記29專業(yè)課Neusoft Group Ltd.id選擇器選擇器 idid選擇器選擇器 練習：建立一個HTML文件，其中有h1-h6標記的文字；對h1與h2標記使用類型選擇器設置樣式；對h3與h4標記使用id選擇器設置樣式；對h5標記使用通用的類型選擇器設置樣式；對h6標記使用通用的id選擇器設置樣式；css_choose.html30專業(yè)課Neusoft Group Ltd.層次選擇器層次選擇器 層次選擇器層次選擇器 通常HTML/XML文檔中某一子元素的格式化屬性依賴于其父元素的屬性規(guī)則 僅僅
19、想對某一個對象中的子對象進行樣式指定時，使用層次選擇器 層次選擇器是由多個子選擇器組成的，它們之間用空格符分開，子選擇器組合中前一個對象包含后一個對象31專業(yè)課Neusoft Group Ltd.組合選擇器組合選擇器 組合選擇器組合選擇器 對于所有CSS選擇器，無論是什么樣的選擇器，均可以進行組合使用32專業(yè)課Neusoft Group Ltd.繼承繼承 繼承繼承 在CSS中，一些樣式是可繼承的 當父結點定義了一些樣式，其子結點也會具有相同的樣式 如字體，文本的定義 一些樣式是不可繼承的 如邊框，間距，布局，定位等 設計HTML/XML文檔顯示格式時，不必對每個元素的屬性都進行設置33專業(yè)課N
20、eusoft Group Ltd.樣式就近原則樣式就近原則 樣式就近原則樣式就近原則 在CSS中，常常會有需要重復定義的場合出現(xiàn) 并列的定義 當定義重復時，后出現(xiàn)的定義會覆蓋前面的定義 對同一結點指定樣式，但選擇器的層次結構不一樣 在層次結構上最接近指定結點的CSS起作用34專業(yè)課Neusoft Group Ltd.偽類及偽對象偽類及偽對象 偽類及偽對象偽類及偽對象 一種特殊的類和對象 由CSS自動支持，屬CSS的一種擴展型類和對象 偽類及偽對象的名稱不能被用戶自定義 偽類及偽對象使用時只能按照標準格式進行應用35專業(yè)課Neusoft Group Ltd.偽對象偽對象CSS內(nèi)置的標準偽對象內(nèi)置
21、的標準偽對象36專業(yè)課Neusoft Group Ltd.偽類偽類CSS內(nèi)置的標準偽類內(nèi)置的標準偽類Pseudo-classes37專業(yè)課Neusoft Group Ltd.CSS注釋注釋 在在CSS中添加注釋中添加注釋/*/注釋，但要注意不要將注釋嵌入到選擇器語句里面38專業(yè)課Neusoft Group Ltd.第四章：CSS布局學時：學時：1.01.0學時學時教學方法：講授教學方法：講授ppt+ppt+上機練習上機練習目標目標:本章旨在向?qū)W員介紹本章旨在向?qū)W員介紹CSSCSS的布局的布局，通過本課的學習，學員應該掌，通過本課的學習，學員應該掌握如下知識：握如下知識：1 1）了解）了解div
22、div的概念的概念2 2）會使用）會使用CSSCSS的布局功能的布局功能39專業(yè)課Neusoft Group Ltd.div divdiv標簽標簽 一個容器，能夠放置內(nèi)容 專門用于布局設計的容器對象 div是CSS布局的核心對象 傳統(tǒng)采用表格式布局，在頁面中繪制一個由多個單元格組成的表格，在相應的表格中放入內(nèi)容40專業(yè)課Neusoft Group Ltd.div使用使用div 應用標簽形式，將內(nèi)容放置其中，并可以應用div標簽 div對象中除了直接放入文本，也可以放入其他標簽，也可以多個div標簽進行嵌套使用 div標簽只是一個標識，作用是把內(nèi)容標識成一個區(qū)域，并不負責其他事情 div只是CS
23、S布局工作的第一步 使用div對象時，可以加入其他屬性 id，class，align，style等 在CSS布局方面，為了實現(xiàn)內(nèi)容與表現(xiàn)分離，不應將align，style屬性寫在div標簽之中41專業(yè)課Neusoft Group Ltd.div 理解理解divdiv 在一個沒有任何CSS應用的頁面中，即使應用了div，也沒有任何實際效果 div是一個block對象 div用于大面積，大區(qū)域的塊狀排版 兩個div的關系，只是前后關系，div本身與樣式?jīng)]有任何關系 樣式需要編寫CSS來實現(xiàn)42專業(yè)課Neusoft Group Ltd.div csscss布局布局 使用div將內(nèi)容標記出來 然后為這
24、個div編寫出需要的CSS樣式 divdiv的并列與嵌套結構的并列與嵌套結構 div可以多層進行嵌套使用，實現(xiàn)更為復雜的頁面排版 應當盡可能少用嵌套，以保證瀏覽器不要過分消耗資源對嵌套關系進行解析43專業(yè)課Neusoft Group Ltd.div44專業(yè)課Neusoft Group Ltd.CSS盒模型盒模型 盒模型盒模型 將所有HTML/XML元素都放置在一個盒子中，然后通過對這個盒子的外觀控制來實現(xiàn)整個頁面的外觀控制 一個盒模型包括4個區(qū) 內(nèi)容（content）內(nèi)邊距（padding）邊框（border）外邊距（margin）45專業(yè)課Neusoft Group Ltd.CSS布局布局4
25、6專業(yè)課Neusoft Group Ltd.CSS布局布局 設計合理的設計合理的CSSCSS結構結構 采用2層CSS結構 既能夠統(tǒng)一全站風格，又能夠根據(jù)不同的頁面設計獨立的樣式 如：一個網(wǎng)站中有一個index.html文件，可以做設置47專業(yè)課Neusoft Group Ltd.CSS布局布局 使用使用DivDiv布局布局 真正使用div布局，要把頁面的內(nèi)容和表現(xiàn)完全分離開，在頁面的內(nèi)容部分不應該出現(xiàn)表現(xiàn)控制標簽，如font、color、height、width、align等標簽。使用Div+css設計：1、用div來定義語義結構；2、使用CSS來美化網(wǎng)頁，如加入背景、線條邊框、對齊屬性等 3
26、、在CSS定義的盒子內(nèi)加入內(nèi)容，如文字、圖片等（沒有表現(xiàn)屬性的標簽）48專業(yè)課Neusoft Group Ltd.第五章：使用JavaScript控制CSS學時：學時：0.50.5學時學時教學方法：講授教學方法：講授ppt+ppt+上機練習上機練習目標目標:本章旨在向?qū)W員介紹怎么使用本章旨在向?qū)W員介紹怎么使用JavaScriptJavaScript來控制來控制CSSCSS，通過本，通過本課的學習，學員應該掌握如下知課的學習，學員應該掌握如下知識：識：1 1）使用）使用JavaScriptJavaScript改變結點的改變結點的CSSCSS49專業(yè)課Neusoft Group Ltd.使用使用J
27、avaScript控制控制CSS stylestyle對象對象 在JavaScript中利用style對象來控制元素的CSS 每個style對象對應為該元素指定的CSS 示例：style.html 每個CSS屬性一一對應style對象的屬性，只是在書寫上有所區(qū)別 對于單個單詞的屬性，在style對象中的屬性名稱不變 對于雙單詞或多單詞的屬性，在style對象中的屬性名稱改寫為駱駝形寫法（第一個單詞首字母小寫，其它單詞首字母大寫）50專業(yè)課Neusoft Group Ltd.練習練習 練習練習-css_control.html-css_control.html 自己設計一個頁面，參考div布局布局的示例，分為頁頭、內(nèi)容、版權；內(nèi)容自己設定；引入外部CSS，在CSS文件中有兩套樣式（可以把樣式規(guī)定得簡單一些，不需要很多樣式代碼）；51專業(yè)課
WEB前臺技術_4_CSS【技術專攻】
