JavaScript程序設(shè)計(jì)實(shí)例教程教案第23-24單元

《頁面架構(gòu)》

《JavaScript程序設(shè)計(jì)》課第23單元

課程單元教學(xué)設(shè)計(jì)

（2019?2020學(xué)年第1學(xué)期）

單元名稱：JavaScript初探

所屬系部：計(jì)算機(jī)與通信工程學(xué)院

制定人：___________________

合作人：_________________________

制定時(shí)間：2020.8

***學(xué)院教務(wù)處制

JavaScript程序設(shè)計(jì)課程單元教學(xué)設(shè)計(jì)

單元教學(xué)學(xué)時(shí)2

單元標(biāo)題：頁面架構(gòu)的實(shí)現(xiàn)在整體設(shè)計(jì)中

第23次

的位置

16web上課上課計(jì)算機(jī)實(shí)

授課班級(jí)每周一1,2節(jié)

班時(shí)間地點(diǎn)驗(yàn)室

能力目標(biāo)知識(shí)目標(biāo)素質(zhì)目標(biāo)

教學(xué)

1.能夠?qū)崿F(xiàn)系統(tǒng)頁面架構(gòu)的整

鞏固學(xué)習(xí)培養(yǎng)學(xué)生項(xiàng)目開

體布局

目標(biāo)HTML和CSS的發(fā)的能力；培養(yǎng)學(xué)

2,能使用MUI框架布局首頁，列

使用方法生色彩搭配能力

表頁面，

任務(wù)：頁面架構(gòu)

教學(xué)組織：

能力訓(xùn)練

1,帶領(lǐng)學(xué)生了解課程任務(wù)

2,講解學(xué)習(xí)HTML和CSS的使用方法，實(shí)現(xiàn)MUI框架布局首頁，列表

任務(wù)

頁面

3.設(shè)計(jì)頁面架構(gòu)

div+csscss3JavaScript

本次課使documentgetElementByld

menustyledisplay

用的外語marginposition

background

單詞

background-repeat

案例：頁面架構(gòu)

教學(xué)材料：

案例和1.教材名稱：JavaScript程序設(shè)計(jì)實(shí)例教程》第2版主編：程樂、鄭

麗萍、劉萬輝，出版社：機(jī)械工業(yè)出版社，出版日期：2020年3月。

教學(xué)2.參考教材名稱：《JavaScript與jQuery案例教程》主編：鄭麗萍，

出版社：高等教育出版社。

材料3.教學(xué)多媒體課件，項(xiàng)目源文件。

多媒體資料：http://www.icourse163.org/course/HCIT72067068284.

儀器與設(shè)備：計(jì)算機(jī)等

單元教學(xué)進(jìn)度設(shè)計(jì)（綱要）

教學(xué)內(nèi)容

時(shí)間

步驟及能力/知教師活動(dòng)學(xué)生活動(dòng)

（分鐘）

識(shí)目標(biāo)

1

介紹本節(jié)課

情境導(dǎo)導(dǎo)入本次課教學(xué)情境學(xué)生了解工作情境2

的教學(xué)目標(biāo).

入

2任務(wù)：頁面架

交代任務(wù)學(xué)生接受任務(wù)3

引入構(gòu)

掌握主界面結(jié)構(gòu)主要

講解主界面結(jié)構(gòu)分析組成部分，主題背景10

色的設(shè)定

掌握主體樣式的設(shè)

3講解頁面主體樣式的設(shè)定10

定，

知識(shí)點(diǎn)頁面木構(gòu)

講解頁腳導(dǎo)航部分的布局

講解掌握導(dǎo)航布局和樣式10

及樣式設(shè)定

主界面頁面背景色的

教師巡視，發(fā)現(xiàn)問題設(shè)定，各部分樣式的15

設(shè)定

掌握頁面架構(gòu)制作的

教師演示10

4步驟和方法

頁面架頁面木構(gòu)

使用MUI框架布局首

構(gòu)設(shè)計(jì)教師巡視，發(fā)現(xiàn)問題20

頁，列表頁面

5檢查學(xué)生完抽查學(xué)生完成情況，講解出演示自己的界面，修

5

評(píng)比成情況現(xiàn)的問題改出現(xiàn)的問題

6重點(diǎn)強(qiáng)調(diào)學(xué)生練習(xí)中出現(xiàn)

頁面架構(gòu)學(xué)生思考反饋5

總結(jié)的問題

作業(yè)如何改變?cè)氐膬?nèi)容？

課后

體會(huì)

、情境導(dǎo)入

介紹本節(jié)課的教學(xué)目標(biāo)

二、引入

任務(wù)：頁面架構(gòu)

三、知識(shí)點(diǎn)講解

a.隱藏列表頂部的空隙

#list1{

margin-top:-1px;

)

<標(biāo)題<標(biāo)題

Item1

Item1

Item2

Item2

Item3

Item3

區(qū)◎

黨區(qū)春照

處件設(shè)置

首頁-e

b.讓導(dǎo)航欄、標(biāo)題欄中背景色為黃色、活動(dòng)項(xiàng)前景色為紅色

.mui-active.mui-tab-labeI{color:red;}

.mui-active.mui-icon{color:red;}

.mui-bar*{color:green;background:#FFFF88}

<h1class="mui-titIe"styIe="margin-right:-50px;margin-1eft:-50px;">標(biāo)題</h1>

<標(biāo)題<標(biāo)題

Item1Item1

Item2Item2

Item3Item3

貸%區(qū)?區(qū)播

首頁電話揚(yáng)件S34首頁亳話S3

新建app項(xiàng)目

3、真機(jī)調(diào)試及運(yùn)行

不管是iOS還是Android,不管是模擬器還是真機(jī)，都可以與HBuilder連接進(jìn)

行真機(jī)運(yùn)行。

以往開發(fā)App,需要改一個(gè)界面，然后打包，然后安裝到手機(jī)上，然后進(jìn)入那

個(gè)界面，看看改對(duì)了沒。沒有的話循環(huán)這套動(dòng)作，非常低效。

有了真機(jī)運(yùn)行，改了代碼后保存，手機(jī)立即看到效果，如果在手機(jī)上運(yùn)行時(shí)發(fā)生

錯(cuò)誤,那么日志和錯(cuò)誤信息也都可以反饋到HBuilder控制臺(tái)。

有些開發(fā)者喜歡alert大法，但事實(shí)上在HBuilder的js里敲clog,用打日志來

調(diào)程序更好。

頁面總體架構(gòu)描述

首頁

五、評(píng)比

檢查學(xué)生完成情況

六、總結(jié)

主體頁面架構(gòu)

《JavaScript初探》

《JavaScript程序設(shè)計(jì)》課第24單元

課程單元教學(xué)設(shè)計(jì)

（2019?2020學(xué)年第1學(xué)期）

單元名稱：JavaScript初探

所屬系部：計(jì)算機(jī)與通信工程學(xué)院

制定人：___________________

合作人:_________________________

制定時(shí)間：2020.8

***學(xué)院教務(wù)處制

JavaScript程序設(shè)計(jì)課程單元教學(xué)設(shè)計(jì)

單元教學(xué)學(xué)時(shí)2

單元標(biāo)題：JavaScript初探在整體設(shè)計(jì)中的

第1次

位置

16移1周9月5日第

授課班上課上課計(jì)算機(jī)實(shí)

動(dòng)開1節(jié)至1周9

級(jí)時(shí)間地點(diǎn)驗(yàn)室

發(fā)班月5日第2節(jié)

能力目標(biāo)知識(shí)目標(biāo)素質(zhì)目標(biāo)

了解JavaScript簡(jiǎn)

教學(xué)1.能夠使用多種方案引入史和引擎的工作原

JavaScript腳本代碼到HTML文檔樹立學(xué)習(xí)信

理。掌握

目標(biāo)中。心；培養(yǎng)討論

的組

2.能夠使用常用的輸出語句。JavaScript思考的習(xí)慣

3.能夠獲取元素并改變?cè)貎?nèi)容。成、主要特點(diǎn)和相關(guān)

應(yīng)用。

任務(wù)：JavaScript初探

能力訓(xùn)教學(xué)組織：

1.帶領(lǐng)學(xué)生了解課程任務(wù)

練任務(wù)2.講解JavaScript簡(jiǎn)史及相關(guān)術(shù)語

3.引入JavaScript腳本代碼到HTML文檔中，使用常用的輸出語句

JavaScriptWeb

本次課

functionDate

getFuIIYeargetMonthgetDate

使用的

documentgetEIementByIdinnerHTML

外語單

詞

案例：JavaScript初探-文字的切換

案例和教學(xué)材料：

1.教材名稱：《JavaScript程序設(shè)計(jì)實(shí)例教程》第2版主編：程樂、鄭

教學(xué)麗萍、劉萬輝，出版社：機(jī)械工業(yè)出版社，出版日期：2020年3月

2.教學(xué)多媒體課件，項(xiàng)目源文件

材料3.多媒體資料:http:〃www.icourse163.org/course/HCIT-1206706828

4.儀器與設(shè)備：計(jì)算機(jī)等

單元教學(xué)進(jìn)度設(shè)計(jì)（綱要）

教學(xué)內(nèi)容

時(shí)間

步驟及能力/知教師活動(dòng)學(xué)生活動(dòng)

（分鐘）

識(shí)目標(biāo)

1

介紹本節(jié)課

情境導(dǎo)導(dǎo)入本次課教學(xué)情境學(xué)生了解工作情境2

的教學(xué)目標(biāo).

入

任務(wù)：

2JavaScript

交代任務(wù)學(xué)生接受任務(wù)3

引入初探-文字的

切換

講解JavaScript簡(jiǎn)史及相了解JavaScript簡(jiǎn)史

10

關(guān)術(shù)語及相關(guān)術(shù)語

講解JavaScript引擎的工了解JavaScript引擎

10

3JavaScript作原理的工作原理

知識(shí)點(diǎn)初探掌握引入JavaScript

講解引入JavaScript腳本

講解腳本代碼到HTML文檔10

代碼到HTML文檔中方法

中方法

教師巡視，發(fā)現(xiàn)問題多種引入方案練習(xí)15

掌握常用的輸出語句

JavaScript教師演示10

方法

4實(shí)踐初探文字的

切換教師巡視，發(fā)現(xiàn)問題常用的輸出語句練習(xí)20

5檢查學(xué)生完抽查學(xué)生完成情況，講解出演示自己的界面，修

5

評(píng)比成情況現(xiàn)的問題改出現(xiàn)的問題

6JavaScript重點(diǎn)強(qiáng)調(diào)學(xué)生練習(xí)中出現(xiàn)

學(xué)生思考反饋5

總結(jié)初探的問題

作業(yè)Javascript的主要特點(diǎn)？

課后

體會(huì)

一、情境導(dǎo)入

介紹本節(jié)課的教學(xué)目標(biāo)

二、引入

任務(wù)：JavaScript初探-文字的切換

三、知識(shí)點(diǎn)講解

術(shù)語"ECMAScript"和"JavaScript"指的是同一個(gè)東西。但如果把

JavaScript看成是“Mozilla或其他組織的ECMAScript實(shí)現(xiàn)"，那么

ECMAScript就是實(shí)現(xiàn)JavaScript所依據(jù)的標(biāo)準(zhǔn)。術(shù)語“ECMAScript”也用來描

述語言版本(比如ECMAScript5)0

JavaScript解析引擎就是能夠“讀懂"JavaScript代碼，并準(zhǔn)確地給出代

碼運(yùn)行結(jié)果的一段程序。比方說，當(dāng)編寫了vara=1+1;這樣一段代碼，

JavaScript引擎做的事情就是看懂(解析)你這段代碼，并且將a的值變?yōu)?。

JavaScript引擎就是直接解析并將代碼運(yùn)行結(jié)果輸出的JavaScript的解釋器

JavaScript由三部分組成：

?核心(ECMAScript)描述了該語言的語法和基本對(duì)象

?文檔對(duì)象模型(DOM,Documnet)描述了處理網(wǎng)頁內(nèi)容的方法和接口

?瀏覽器對(duì)象模型(B0M)描述了與瀏覽器進(jìn)行交互的方法和接口

JavaScript的主要特點(diǎn)

JavaScript相關(guān)應(yīng)用

選擇JavaScript腳本編輯器

引入JavaScript腳本代碼到HTML文檔中方法

Javascript常用的輸出語句：

?使用window.alert()彈出警告框。

,使用document.write。方法將內(nèi)容寫到HTML文檔中。

?使用innerHTML寫入到HTML元素。

?使用console.log()寫入到瀏覽器的控制臺(tái)。

四、任務(wù)實(shí)施

document.getElementById("demo"),使用id屬性來查找id為demoHTML

元素，然后給它的innerHTML屬性重新的賦值為新的字符串，就有了我們看到的切換文字的效

果。

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8n>

<title>SamplePage!</title>

</head>

<body>

<script>

functionclickMe()

(

document.getElementById("demo").innerHTML二”開始學(xué)習(xí)JavaScript!";

1

</script>

<divid="demo"style="font-family:微軟雅黑'；font-size:36px;color:#00f;n

onclick="clickMe。">準(zhǔn)備好了就點(diǎn)擊這里!v/div>

</body>

</html>

五、評(píng)比

檢查學(xué)生完成情況

六、總結(jié)

文字切換

頁面布局基礎(chǔ)

HTML標(biāo)簽介紹

網(wǎng)頁結(jié)構(gòu)

?一個(gè)HTML文件是有自己固定的結(jié)構(gòu)的。

CDOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

</head>

<body>

</body>

</html>

?<!DOCTYPEhtml>定義文檔類型，告知瀏覽器用哪一種標(biāo)準(zhǔn)解釋HTML

?可告知瀏覽器其自身是一個(gè)HTML文檔。

?<head></head>標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有

tle>><script>><style>><link>、<meta>等標(biāo)簽.

?<bodyx/body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，如<hl>、<p>、<a>、<img>等網(wǎng)

頁內(nèi)容標(biāo)簽，在這里的標(biāo)簽中的內(nèi)容會(huì)在瀏覽器中顯示出來。

?<titlex/title>元素可定義文檔的標(biāo)題。

?〈link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)

?<meta>定義文檔的元數(shù)據(jù)，網(wǎng)頁的元信息(charset="utf8”國(guó)際編碼類型)

第一節(jié)HTML基本結(jié)構(gòu)

<style>

p(

color:#777777;

)

.list01{

width:660px;

)

</style>

<divclass="list01">標(biāo)簽的內(nèi)容v/div>

<br/>

<imgsrc=""/>

?HTML標(biāo)簽是由<>包圍的關(guān)鍵詞，例：<html>

?HTML標(biāo)簽通常成對(duì)出現(xiàn)，分為標(biāo)簽開頭和標(biāo)簽結(jié)尾，例：<html></html>

?有部分標(biāo)簽是沒有結(jié)束標(biāo)簽，成為單標(biāo)簽，單標(biāo)簽內(nèi)必須用/結(jié)尾，例：<br/>

?頁面中所有的內(nèi)容，都要放在HTML標(biāo)簽中

?HTML標(biāo)簽主題分為三個(gè)部分

—標(biāo)簽名稱

-標(biāo)簽內(nèi)容

標(biāo)簽屬性

?HTML標(biāo)簽具有語義化

-語義化：就是僅通過標(biāo)簽名就能判斷出該標(biāo)簽的內(nèi)容。

語義化的作用

?網(wǎng)頁結(jié)構(gòu)層次更清晰。

-更容易被搜索引擎收錄。

更容易讓屏幕閱讀器讀出網(wǎng)頁內(nèi)容。

?標(biāo)簽的內(nèi)容就是在一對(duì)標(biāo)簽內(nèi)部的內(nèi)容

-標(biāo)簽的內(nèi)容可以是其他標(biāo)簽

第二節(jié)標(biāo)簽（元素）全局標(biāo)準(zhǔn)屬性

在HTML規(guī)范中，規(guī)定了8個(gè)全局標(biāo)準(zhǔn)屬性：

class屬性

?用于定義元素的類名。

id屬性

?用于指定元素的唯一id

?要注意該屬性的值在整個(gè)HTML文檔中要具有唯一性

style屬性

?用于指定元素的行內(nèi)樣式

?使用該屬性后將會(huì)覆蓋任何全局的樣式設(shè)定

title屬性

?用于指定元素的額外信息

文本標(biāo)簽

段落標(biāo)簽<p></p>

段落標(biāo)簽用來描述一段文字

標(biāo)題標(biāo)簽<hx></hx>

?標(biāo)題標(biāo)簽用來描述一個(gè)標(biāo)題

?標(biāo)題標(biāo)簽總共有六個(gè)級(jí)別，由高到低分別是hl,h2,h3,h4,h5,h6

vhl>我是一級(jí)標(biāo)題v/hl>

vh2>我是二級(jí)標(biāo)題v/h2>

vh3>我是三級(jí)標(biāo)題v/h3>

vh4>我是四級(jí)標(biāo)題v/h4>

vh5>我是五級(jí)標(biāo)題v/h5>

vh6>我是六級(jí)標(biāo)題v/h6>

?<hl></hl>標(biāo)簽在每個(gè)頁面中通常只出現(xiàn)一次

強(qiáng)調(diào)語句標(biāo)簽<em>v/em>

用于強(qiáng)調(diào)某些文字的重要性

更加強(qiáng)調(diào)標(biāo)簽<strong>v/strong>

和<em>標(biāo)簽一樣，用于強(qiáng)調(diào)文本，但它強(qiáng)調(diào)的程度更強(qiáng)一些

無語義標(biāo)簽<span>v/span>

<span>標(biāo)簽是沒有語義。

短文本引用標(biāo)簽<q></q>

簡(jiǎn)短文字的引用。

長(zhǎng)文本引用標(biāo)簽<blockquote>v/blockquote>

定義長(zhǎng)的文本引用

換行標(biāo)簽<br/>

<br/>標(biāo)簽作用相當(dāng)于word文檔中的回車，起到文字換行的作用

第三節(jié)列表

無序列表標(biāo)簽

?Ul-li是沒有前后順序的信息列表

?<ulxul/>列表定義一個(gè)無序列表

?代表無需列表中的每一個(gè)元素

<ul>

<li>HTML<li/>

<li>CSS<li/>

<li>JavaScript<li/>

</ul>

有序列表vol><li>vli/>v/ol>

Ol-li列表默認(rèn)情況下，每個(gè)li在瀏覽器中都會(huì)顯示一個(gè)數(shù)字，代表自己的序號(hào)

定義列表<dl></dl>

?定義列表通常和<dt></dt>和<dd></dd>標(biāo)簽一起使用

?<dt></dt>定義列表中的項(xiàng)目

?<ddx/dd>描述列表中的項(xiàng)目

<dl>

vdt>學(xué)習(xí)WEB前段需要掌握哪三種語言v/dt>

vdd>需要掌握HTML,搭建網(wǎng)頁結(jié)構(gòu)v/dd>

<dd>需要掌握CSS,用于修改網(wǎng)頁結(jié)構(gòu)的樣式</dd>

<dd>需要掌握J(rèn)avaScript,用于用戶和計(jì)算機(jī)交互</dd>

</dl>

第四節(jié)表格

表格標(biāo)簽<table></table>

表格的一行vtrx/tr>

有幾對(duì)tr,表格就有幾行。

單元格<td></td>

?表格的一個(gè)單元格，一行中包含幾對(duì)<tdxtd/>,說明一行中就有幾列。

<table>

<tr>

vth>姓名</th>

vth>性別</th>

<th>年齡v/th>

</tr>

<tr>

<td>張三v/td>

<1(1>男</td>

<td>25</td>

</tr>

<tr>

<td>小花</td>

<td>女</td>

<td>23</td>

</tr>

<tr>

vtd>李四</td>

<td>男</td>

<td>28</td>

</tr>

</table>

表格的表頭vth>v/th>

表格的頭部的一個(gè)單元格，表格表頭。

表格合并

?同一行內(nèi)，合并幾列colspan="2"

?同一列內(nèi)，合并幾行rowspan="3"

*

第五節(jié)表單標(biāo)簽系列

表單標(biāo)簽vform>

?<form></form>表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就

可以處理表單傳過來的數(shù)據(jù)。

?<formmethod="^^Caction=呻麻飄

?action：瀏覽者輸入的數(shù)據(jù)被傳送到的地方，比如一個(gè)PHP頁面（save.php）

?method：數(shù)據(jù)傳送的方式（get/post）

輸入標(biāo)簽〈input/〉

input是最重要的表單標(biāo)簽，重要屬性包括：

?name：為文本框命名，用于提交表單，后臺(tái)接收數(shù)據(jù)用。

?value：為文本輸入框設(shè)置默認(rèn)值。（一般起到提示作用）

,type：通過定義不同的type類型，input的功能有所不同（見下表）

type功能說明

text單行文本輸入框

password密碼輸入框（密碼顯示為***）

radio單選框（checked屬性用于顯示選中狀態(tài)）

checkbox復(fù)選框（checked屬性用于顯示選中狀態(tài)）

file上傳文件

button普通按鈕

reset重置按鈕（點(diǎn)擊按鈕，會(huì)觸發(fā)form表單的reset事件）

submit提交按鈕（點(diǎn)擊按鈕，會(huì)吃飯form表單的submit事件）

email專門用于輸入e-mail

url專門用于輸入url

number專門用于number

range顯示為滑動(dòng)條，用于輸入一定范圍內(nèi)的值

date選取日期和時(shí)間（還包含：month、week、time>datetime>

datetime-local）

color選取顏色

〈button〉按鈕

button標(biāo)簽的功能與<input>按鈕功能相同，button是雙標(biāo)簽，內(nèi)部可以嵌套其他

行內(nèi)元素。

下拉選擇框<select>v/select>

<select>

<optionvalue二"看書”>看書</option〉

<optionvalue二"旅游"selected="selected”,旅游〈/option〉

<optionvalue二“運(yùn)動(dòng)"〉運(yùn)動(dòng)〈/option〉

<optionvalue二“購物"〉購物〈/option〉

</select>

?<optionvalue=”提植）選Voption>是下拉選擇框里面的每一個(gè)選項(xiàng)

?selected：當(dāng)某個(gè)option選項(xiàng)有這個(gè)屬性時(shí)候，select默認(rèn)選中這個(gè)選項(xiàng)

文本域<textarea></textarea>

?當(dāng)用戶想輸入大量文字的時(shí)候，使用文本域

,cols：多行輸入域的列數(shù)。

?rows：多行輸入域的行數(shù)

CSS概述

第一節(jié)css代碼語法

,CSS全稱為層疊樣式表(CascadingStyle

Sheets),它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、顏色、字體

加粗等。

?css代碼通常存放在<style></style>標(biāo)簽內(nèi)

?CSS樣式由選擇符和聲明組成，而聲明又由屬性和值組成

?■值例：p{color:red;}

?選擇符：又稱選擇器，指明網(wǎng)頁中要應(yīng)用樣式規(guī)則的元素

?聲明：在英文大括號(hào){}中的的就是聲明，屬性和值之間用英文冒號(hào)：分隔。當(dāng)有多條聲明

時(shí)，中間用英文分號(hào)；分隔，如：

P(

font-size:12px;

color:red;

第二節(jié)CSS放置位置

行內(nèi)樣式

?直接書寫在標(biāo)簽的style屬性中

?不建議使用

<divstyle=''width:200px;height:200px;"></div>

內(nèi)聯(lián)式樣式表

?寫在<style*/style)標(biāo)簽中

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<style>

.box{

width:200px;

height:200px;

background-color:red;

)

</style>

</head>

<body>

</body>

</html>

外聯(lián)樣式表

?將一個(gè)獨(dú)立的.css文件引入到HTML文件中，使用<link>標(biāo)簽寫在<head>標(biāo)簽中。

鏈接式會(huì)以網(wǎng)頁文件主體裝載前裝載CSS文件。

?rel="stylesheet”定義類型為層疊樣式表，一定要寫

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<linkhref="My.cssnrel="stylesheet"type="text/css">

</head>

<body>

</body>

</html>

第三節(jié)CSS的繼承

?css的某些樣式是具有繼承性的，那么什么是繼承呢？繼承是一種規(guī)則，它允許樣式不僅

應(yīng)用于某個(gè)特定html標(biāo)簽元素，而且應(yīng)用于其后代。

,不可繼承樣式：display>margin>border>padding>backgroundsheight>min-height>max

-height、width、min-width>max-width、overflow>position>left>right>top>bottom>z-i

ndex>float、clear

?可以繼承的樣式：letter-spacing>word-spacing>white-space>line-height>color>font>fon

t-family>font-size>font-style>font-variant>font-weight、text-decoration>text-transform>

direction>visibility>cursor

css選擇器

第一節(jié)選擇器的種類

標(biāo)簽選擇器

通過標(biāo)簽的名字，修改css樣式

div{

width:200px;

height:300px;

)

通配符選擇器

?選擇頁面中所有的元素

*{

margin:?;

padding:0;

)

屬性選擇器

后代選擇器

?選擇某個(gè)父元素下面所有的元素

.boxp{

background-color:red;

)

一級(jí)子元素選則器

?選擇某個(gè)父元素的直接子元素

?后代選擇器是選擇父元素的所有子孫元素，一級(jí)子元素原則器只選擇第一級(jí)子元素，不會(huì)

再向下查找元素

.box>p{

background-color:red;

}

id選擇器

通過id查找頁面中唯一的標(biāo)簽，用#標(biāo)示id

#wrap{

width:200px;

height:300px;

class選擇器

通過特定的class（類）來查找頁面中對(duì)應(yīng)的標(biāo)簽，以.class名稱

.box{

width:200px;

height:300px;

)

<divclass="box"x/div>

偽類選擇器

?:hover鼠標(biāo)移入某個(gè)元素

.box:hover{

color:red;

)

?：before在某個(gè)元素的前面插入內(nèi)容

div:before{

content:'-臺(tái)詞";

background-color:yellow;

color:red;

font-weight:bold;

)

?:after在某個(gè)元素的后面插入內(nèi)容

diy:after{

content:n-臺(tái)詞”；

background-color:yellow;

color:red;

font-weight:bold;

)

群組選擇器

?可以對(duì)多個(gè)不同的選擇器設(shè)置相同的樣式

.box,.boxl,.box2{

width:200px;

height:300px;

)

第二節(jié)選擇器的優(yōu)先級(jí)

?當(dāng)有不同的選擇器對(duì)同一個(gè)對(duì)象進(jìn)行樣式指定時(shí)，并且兩個(gè)選擇器有相同的屬性被賦予不

同的值時(shí)。

?通過測(cè)算那個(gè)選擇器的權(quán)重值最高，應(yīng)用哪一個(gè)選擇器的樣式

?權(quán)重計(jì)算方式

標(biāo)簽選擇器：1

-class選擇器：10

-id選擇器：100

-行內(nèi)樣式：1000

-1important最高級(jí)別，提高樣式權(quán)重，擁有最高級(jí)別

p{width:200px}/*權(quán)重1*/

.box{width:200px}/*權(quán)重10*/

.boxp{width:200px}/*權(quán)重11*/

#txt{width:200px}

?如果兩個(gè)選擇器的權(quán)重值一樣高，則應(yīng)用距離對(duì)象最近的css樣式

css樣式（屬性）

第一節(jié)背景樣式

背景顏色background-color

?background-color:red

?背景顏色的值可以是英文，可以是十六進(jìn)制顏色值，可以是rgb,也可以是rgba

背景圖片background-image

?background-image:url（bg01.jpg）;

?背景圖片的大小可以和容器大小不一樣

?背景圖片不會(huì)占位

?如果容器大，背景圖片小，背景圖片會(huì)平鋪鋪滿整個(gè)容器

背景圖片位置background-position

?background-position:10px100px;

?背景圖片定位的值是兩個(gè)單位，分別代表坐標(biāo)x,y軸

,背景圖片定位的值可以是應(yīng)為left,right,top,bottom,center

?背景圖片定位的值也可以是百分比或者像素

背景圖片重復(fù)background-repeat

?background-repeat:no-repeat

?no-repeat設(shè)置圖像不重復(fù)，常用

?round自動(dòng)縮放直到適應(yīng)并填充滿整個(gè)容器

?space以相同的間距平鋪且填充滿整個(gè)容器

背景圖片定位background-attachment

?background-attachment:fixed

?背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)

background-attachment的值可以是scroll（跟隨滾動(dòng)），fixed（固定）

background縮寫

?background:#ff0000url（bg01.jpg）no-repeatfixedcenter

*

第二節(jié)字體樣式

字體族font-family

?font-family:"彳1^J黜；

使用逗號(hào)隔開多種字體（優(yōu)先級(jí)從前向后，如果系統(tǒng)中沒有找到當(dāng)前字體，則往后面尋找

）

字體大小font-size

?font-size:12px;

?網(wǎng)頁默認(rèn)字體大小是16Px

字體粗細(xì)font-weight

?font-weight:400；

,normal（默認(rèn)）

?bold（加粗）

,bolder（相當(dāng)于〈strong〉和vb＞標(biāo)簽）

?lighter（常規(guī)）

?100?900整百（400=normal,700=bold）

字體顏色color

?顏色的英文單詞color:red;

?十六進(jìn)制色：color:#FFFF00;

?RGB（紅綠藍(lán)）color:rgb（255,255,0）

?RGBA（紅綠藍(lán)透明度）A是透明度在。?1之間取值。color:rgba（255,255,0,0.5）

字體斜體font-style

font-style:italic

,normal文本正常顯示

?italic文本斜體顯示

?oblique文本傾斜顯示

*

第三節(jié)文本屬性

彳丁injline-height

?line-height:50px;

?可以將父元素的高度撐起來

文本水平對(duì)齊方式text-align

?left左對(duì)齊

,center文字居中

,right右對(duì)齊

文本所在行高的垂直對(duì)齊方式vertical-align

,baseline默認(rèn)

?sub垂直對(duì)齊文本的下標(biāo)，和。1|13＞標(biāo)簽一樣的效果

?super垂直對(duì)齊文本的上標(biāo)，和。1^＞標(biāo)簽一樣的效果

?top對(duì)象的頂端與所在容器的頂端對(duì)齊

?text-top對(duì)象的頂端與所在行文字頂端對(duì)齊

?middle元素對(duì)象基于基線垂直對(duì)齊

?bottom對(duì)象的底端與所在行的文字底部對(duì)齊

?text-bottom對(duì)象的底端與所在行文字的底端對(duì)齊

文本縮進(jìn)text-indent

?text-indent:2em;

?通常用在段落開始位置的首行縮進(jìn)

字母之間的間距l(xiāng)etter-spacing

單詞之間間距word-spacing

文本的大小寫text-transform

?capitalize文本中的每個(gè)單詞以大寫字母開頭。

,uppercase定義僅有大寫字母。

?lowercase定義僅有小寫字母。

文本的裝飾text-decoration

?none默認(rèn)。

?underline下劃線。

?overline上劃線。

?line-through中線。

自動(dòng)換行word-wrap

?word-wrap:break-word;

*

第四節(jié)基本樣式

寬度width

?width:200px;

?定義元素的寬度

高度height

?height:300px

?元素默認(rèn)沒有高度

?需要設(shè)置高度

?可以不定義高度，讓元素的內(nèi)容將元素?fù)胃?/p>

鼠標(biāo)樣式cursor

定義鼠標(biāo)的樣式cursor:pointer

-default默認(rèn)

pointer小手形狀

-move移動(dòng)形狀

透明度opacity

?opacity:0.3

?透明度的值可以使。?1之間的數(shù)字，。代表透明，1代表完全不透明

?透明的元素，只是看不到了，但是還占據(jù)著文檔流

可見性visibility

?visibility:hidden;

,visible元素可見

?hidden元素不可見

?collapse當(dāng)在表格元素中使用時(shí)，此值可刪除一行或一列，不會(huì)影響表格的布局。

溢出隱藏overflow

?設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指定高度及寬度時(shí)如何顯示內(nèi)容

?visible默認(rèn)值，內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。

?hidden內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。

?scroll內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

?auto如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

邊框顏色outline

?input文本輸入框自帶邊框，且樣式丑陋，我們可以通過outline修改邊框

?outline:lpxsolid#ccc；

?outline:none清除邊框

第五節(jié)樣式重置

早期的網(wǎng)頁沒有css樣式，為了界面美觀，很多元素自帶margin、padding等樣式，但這些樣式

在不同瀏覽器解析的值都不一樣，需要將css樣式重置，保證在不同瀏覽器顯示一致。

清除元素的margin和padding

去掉自帶的列表符

?去掉自帶的下劃線

*{margin:?;padding:0;}/*清除頁面所有標(biāo)簽自帶的外間距和內(nèi)填充*/

ul,ol{list-style:none;}/*去掉自帶的列表符*/

a{text-decoration:none;}/*去掉自帶的下劃線*/

img,input(border:none;}/*清除IE下自帶的邊框*/

第六節(jié)盒模型樣式

HTML元素分類

在講解CSS布局之前，我們需要提前知道一些知識(shí)，在CSS中，html中的標(biāo)簽元素大體被分為

三種不同的類型：塊狀元素、內(nèi)聯(lián)元素和內(nèi)聯(lián)塊狀元素。

元素分類特性標(biāo)簽

塊級(jí)元素1、每個(gè)塊級(jí)元素都從新的一行開始，并且<div><p><hl>?<h6>

其后的元素也另起一行。<br/>2、元素的<ol><ul><dl>

高度、寬度、行高以及頂和底邊距都可設(shè)<address>

置。<br/>3、元素寬度在不設(shè)置的情況下，<blockquote><form>

是它本身父容器的100%（和父元素的寬度

一致），除非設(shè)定一個(gè)寬度。

行內(nèi)元素1、和其他元素都在一行上；<br/>2、元素<a><span><br/><i>

的高度、寬度、行高及頂部和底部邊距不<em><strong><label>

可設(shè)置；<br/>3、元素的寬度就是它包含<q>

的文字或圖片的寬度，不可改變。

行內(nèi)塊狀元1、和其他元素都在一行上；<br/>2、元素<img><input>select

素的高度、寬度、行高以及頂和底邊距都可textareabuttoniframe

設(shè)置。

元素分類轉(zhuǎn)換display

?block：將元素轉(zhuǎn)換為塊級(jí)元素

?inline：將元素裝換為行級(jí)元素

?inline-block：將元素轉(zhuǎn)換為內(nèi)聯(lián)塊元素

?none:將元素隱藏

描邊border

?border:2pxsolid#f00;

?盒子模型的邊框就是圍繞著內(nèi)容及補(bǔ)白的線，這條線你可以設(shè)置它的粗細(xì)、樣式和顏色（

邊框三個(gè)屬性）。

?線條的樣式：

-dashed（虛線）［dotted（點(diǎn)線）|solid（實(shí)線）。

?CSS樣式中允許只為一個(gè)方向的邊框設(shè)置樣式：

-下描邊border-bottom:lpxsolidred;

上描邊border-top:lpxsolidred;

右描邊border-right:lpxsolidred;

左描邊border-left:lpxsolidred;

間距margin

?div{margin:20px10px15px30px;}

?元素與其它元素之間的距離可以使用邊界（margin）來設(shè)置。邊界也是可分為上、右、下

、左。

?也可以分開寫：

div{

margin-top:20px;

margin-right:10px;

margin-bottom:15px;

margin-left:30px;

）

?當(dāng)margin給一個(gè)值時(shí)：指的是四個(gè)方向

?當(dāng)margin有兩個(gè)值時(shí)：指的是上下左右

?當(dāng)margin給三個(gè)值時(shí)：指的是上左右下

?當(dāng)margin給四個(gè)值時(shí)：值的是上右下左

內(nèi)填充padding

?padding:10px

?元素內(nèi)容與邊框之間是可以設(shè)置距離的，稱之為填充。填充也可分為上、右、下、左。

如下代碼：div{padding:20px10px15px30px;}

順序一定不要搞混。可以分開寫上面代碼:

div{

padding-top:20px;

paddi