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