<div style="width:200px;height:200px;background-color:Black;">
（3）設(shè)置外邊距、寬度、高度和背景顏色：
<div style="margin:5px 10px 20px 30px;width:200px; height:200px;background-color:White;">
（4）設(shè)置定位方式：position:relative（定位方式：相對(duì)定位）
<div style="position:relative; top:10px;left:10px; width:140px; height:140px;background-color:White;">
2、<p>是段落標(biāo)簽
段落標(biāo)簽語(yǔ)法：<p>內(nèi)容</p>
<p>是一個(gè)有特定語(yǔ)義的標(biāo)簽，表示段落，是用來(lái)區(qū)分段落的。在大部分的瀏覽器中對(duì)P基本上都有一個(gè)上下的邊距。但是沒有行首縮進(jìn)，因?yàn)樾惺卓s進(jìn)只是表示段落的方式，并不是一定的或必需的方式。所以在用<P>標(biāo)簽的時(shí)候，如果需要可以針對(duì)P設(shè)定一下行首縮進(jìn)。
段落標(biāo)簽常用的屬性是對(duì)齊方式。即：<p align="center">、<p align="right">或者<p align="Left">
在使用段落標(biāo)簽的地方，瀏覽器會(huì)自動(dòng)地給下面的文章空出兩行的空格。因此，我們?cè)诰幾淖只蛘邎D片的時(shí)候，如果想讓兩部分內(nèi)容之間空出兩行空格，就用<p>標(biāo)簽；如果想讓兩部分內(nèi)容之間空出一行空格，就用<div>標(biāo)簽。
3、<span>標(biāo)簽
<span> 標(biāo)簽被用來(lái)組合文檔中的行內(nèi)元素。
span 沒有固定的格式表現(xiàn)。當(dāng)對(duì)它應(yīng)用樣式時(shí)，它才會(huì)產(chǎn)生視覺上的變化。
可以為 span 應(yīng)用 id 或 class 屬性，這樣既可以增加適當(dāng)?shù)恼Z(yǔ)義，又便于對(duì) span 應(yīng)用樣式。
<span>在行內(nèi)定義一個(gè)區(qū)域，也就是一行內(nèi)可以被<span>劃分成好幾個(gè)區(qū)域，從而實(shí)現(xiàn)某種特定效果。<span>本身沒有任何屬性。
<span>在CSS定義中屬于一個(gè)行內(nèi)元素，而<div>是塊級(jí)元素。所謂“塊元素”，是以另起一行開始渲染的元素，“行內(nèi)元素”（又叫做“內(nèi)嵌元素”），在它后邊的內(nèi)容不會(huì)換行。我們可以通俗地理解為<div>為大容器，<span>就是小容器。
4、定位標(biāo)簽與代碼
在制作網(wǎng)頁(yè)時(shí)，我們常常需要給網(wǎng)頁(yè)中的元素進(jìn)行定位。定位有水平對(duì)齊、垂直對(duì)齊、居中標(biāo)簽、絕對(duì)定位、相對(duì)定位等幾種方式。
（1）水平對(duì)齊方式：align=left（左對(duì)齊） align=center（居中對(duì)齊）align=right（右對(duì)齊）
水平對(duì)齊方式常常作為其它標(biāo)簽（例如：表格、段落、塊區(qū)等標(biāo)簽）的屬性使用。
（2）垂直對(duì)齊方式：valign=top（頂部對(duì)齊）valign=bottom（底部對(duì)齊）middle（中部對(duì)齊）
垂直對(duì)齊方式也常常作為其它標(biāo)簽（例如：表格、段落、塊區(qū)等標(biāo)簽）的屬性使用，垂直對(duì)齊方式還常常和水平對(duì)齊方式配合使用。
（3）居中標(biāo)簽：居中標(biāo)簽一般是單獨(dú)使用的，居中標(biāo)簽有尾標(biāo)簽。標(biāo)簽語(yǔ)法：<center>內(nèi)容</center>
（4）絕對(duì)定位語(yǔ)法：POSITION: absolute（定位：絕對(duì)定位）。
絕對(duì)定位是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡(jiǎn)稱TRBL)進(jìn)行定位，在沒有設(shè)定TRBL，默認(rèn)依據(jù)父級(jí)的做標(biāo)原始點(diǎn)為原始點(diǎn)。如果設(shè)定TRBL并且父級(jí)沒有設(shè)定position屬性，那么當(dāng)前的absolute則以瀏覽器左上角為原始點(diǎn)進(jìn)行定位，位置將由TRBL決定。
絕對(duì)定位舉例：style="LEFT: 0px; WIDTH: 940px; POSITION: absolute; TOP: 20px"
（5）相對(duì)定位語(yǔ)法：POSITION: relative（定位：相對(duì)定位）。
相對(duì)定位是參照父級(jí)的原始點(diǎn)為原始點(diǎn)，無(wú)父級(jí)則以BODY的原始點(diǎn)為原始點(diǎn)，配合TRBL進(jìn)行定位，當(dāng)父級(jí)內(nèi)有padding等CSS屬性時(shí)，當(dāng)前級(jí)的原始點(diǎn)則參照父級(jí)內(nèi)容區(qū)的原始點(diǎn)進(jìn)行定位。
相對(duì)定位舉例：style="LEFT: 0px; WIDTH: 940px; POSITION: relative; TOP: 20px"
5、<strong>強(qiáng)調(diào)標(biāo)簽
標(biāo)簽語(yǔ)法：< strong>內(nèi)容< /strong>
strong 意思是著重，這是有語(yǔ)義的，作用也很簡(jiǎn)單。至于樣式，是加粗著重，還是用色彩表明著重，都由你自行選擇。
6、<em>標(biāo)簽
標(biāo)簽語(yǔ)法：< em>內(nèi)容< /em>
< em >標(biāo)簽是表示強(qiáng)調(diào)，一般瀏覽器的默認(rèn)值是斜體。
<strong>標(biāo)簽與< em>標(biāo)簽都有強(qiáng)調(diào)的意思，但是強(qiáng)調(diào)的力度有所不同。strong要比em力度更大一點(diǎn)。如果說(shuō)em是漢語(yǔ)中的“強(qiáng)調(diào)”、“注意”，那么strong就是“再三強(qiáng)調(diào)”、“特別注意”。
7、<br>標(biāo)簽與<wbr>標(biāo)簽
<br>換行標(biāo)簽。在<br>后面的內(nèi)容，會(huì)顯示在下一行。<br>標(biāo)簽是空標(biāo)簽，它沒有尾標(biāo)簽。
wbr 是 Word BReak 的縮寫，用來(lái)指定軟換行（或單詞換行）。即使用 <nobr>禁止了換行，使用 <wbr> 仍然可以換行，但是又不是強(qiáng)制換行，這點(diǎn)和 <br> 不一樣。換不換行要看瀏覽器的橫幅。
8、<nobr>標(biāo)簽
<nobr>：不換行標(biāo)簽。標(biāo)簽語(yǔ)法：<nobr>內(nèi)容</nobr>
在一段文字或者幾個(gè)圖片代碼的前面輸入<nobr>標(biāo)簽，后面輸入它的尾標(biāo)簽</nobr>，這些文字和圖片就不會(huì)換行了。
作業(yè)：
1、認(rèn)識(shí)上面講解的這8種標(biāo)簽，理解這些標(biāo)簽各自表示的意義。
2、熟悉這些標(biāo)簽的表達(dá)語(yǔ)法。
3、自己找一些網(wǎng)頁(yè)代碼，認(rèn)識(shí)這些標(biāo)簽并體會(huì)它們的用法。把你認(rèn)為精彩的標(biāo)簽，設(shè)置一個(gè)文件夾保存起來(lái)。
第一章 代碼基礎(chǔ)知識(shí)
第十三節(jié) CSS樣式
本節(jié)講解有關(guān)CSS樣式的內(nèi)容。
CSS是什么？
CSS是英語(yǔ)Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來(lái)表現(xiàn)HTML或 XML 等文件樣式的計(jì)算機(jī)語(yǔ)言。 CSS目前最新版本為CSS3，能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁(yè)中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象盒模型的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語(yǔ)言。
CSS樣式表能為我們做什么?
CSS樣式表的作用是定義網(wǎng)頁(yè)的外觀（例如字體，顏色等等），它也可以和javascript等瀏覽器端腳本語(yǔ)言合作做出許多動(dòng)態(tài)的效果。
這是一個(gè)沒有添加css的普通網(wǎng)頁(yè)： “沒有添加CSS的HTML網(wǎng)頁(yè)” ，我們不改動(dòng)網(wǎng)頁(yè)的HTML代碼，只是添加了一些CSS規(guī)則，就得到了一個(gè)非常美觀的網(wǎng)頁(yè)：“添加了css的網(wǎng)頁(yè)”。
這不是CSS作用的全部，CSS可以將格式和結(jié)構(gòu)分離?？梢砸郧八从械哪芰刂祈?yè)面布局?？梢灾谱黧w積更小下載更快的網(wǎng)頁(yè)。可以將許多網(wǎng)頁(yè)同時(shí)更新，比以前更快更容易。瀏覽器將成為你更友好的界面 。
css的內(nèi)容
css的內(nèi)容是對(duì)“層疊樣式表”使用方法的講解。它包括：樣式表的基本語(yǔ)法、把樣式表加入網(wǎng)頁(yè)的方式、文字屬性的設(shè)置、文本屬性的設(shè)置、背景屬性的設(shè)置、列表項(xiàng)目的應(yīng)用、div和span標(biāo)簽、盒子、定位方法、鏈接方法等內(nèi)容。
應(yīng)用css樣式標(biāo)簽舉例：
代碼1：
<IMG style="BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; WIDTH: 1000px; BORDER-TOP-WIDTH: 0px;
BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 305px; BORDER-LEFT-WIDTH: 0px"
src="http://image52.360doc.com/DownloadImg/2012/06/1523/24884561_1.jpg">
注釋：
1、上面的圖片標(biāo)簽解析：
<圖片標(biāo)簽 樣式＝“圖片右邊框?qū)挾龋?px；圖片外邊距寬度：0px；圖片寬度：1000px；圖片上邊框?qū)挾龋?px；圖片下邊框?qū)挾龋?px；圖片高度：305px；圖片右邊框?qū)挾龋?px" 圖片地址＝"http://image52.360doc.com/DownloadImg/2012/06/1523/24884561_1.jpg">
2、說(shuō)明：
上面的圖片標(biāo)簽中使用了css樣式，定義了圖片的四個(gè)邊框的寬度、圖片外邊距的寬度、圖片高度和圖片寬度。
代碼2：
<marquee style="width: 621px; height: 66px; color: rgb(255, 0, 255); font-size: 24pt; font-weight: bold;"
id="class=" direction="right" behavior="alternate" scrollAmount="1">
注釋：
1、上面的移動(dòng)標(biāo)簽解析：
<移動(dòng)標(biāo)簽 樣式＝屏幕寬度：621px；高度＝66px；顏色：十進(jìn)制顏色（紅色值255，綠色值0，藍(lán)色值255）；文字字號(hào)：24px；文本粗細(xì)：粗體；序號(hào)＝“選擇器”＝“移動(dòng)方向”＝“向右” 移動(dòng)方式＝“來(lái)回走” 移動(dòng)速度＝“1”>
2、說(shuō)明：
上面的移動(dòng)標(biāo)簽中使用了css樣式，定義了移動(dòng)屏幕的寬度和高度、文字顏色、文字字號(hào)、文本粗細(xì)、標(biāo)簽序號(hào)（包括移動(dòng)方向、移動(dòng)方式和移動(dòng)速度）
代碼3：
<div style="position:fixed; top:210px;left:210px; background-color:Navy;width:100px;height:100px;">
注釋：
1、上面的塊區(qū)標(biāo)簽解析：
<塊區(qū)標(biāo)簽 樣式＝定位類型：絕對(duì)定位；居頂：210px；居左：210px；背景顏色（設(shè)置純色）：海軍藍(lán)；寬度：100px；高度：100px；>
2、說(shuō)明：
上面的塊區(qū)標(biāo)簽中使用了css樣式，定義了定位類型（絕對(duì)定位）、居頂距離、居左距離、背景顏色、寬度和高度
。
編者聲明：
我對(duì)CSS不是非常熟悉，在這里只向您介紹這些內(nèi)容，css的具體內(nèi)容以及使用方法，請(qǐng)您參閱我收藏的這些文章：
作業(yè)：
1、認(rèn)識(shí)CSS的作用，初步了解CSS的內(nèi)容。
2、閱讀有關(guān)CSS的文章，學(xué)習(xí)CSS語(yǔ)法。
3、應(yīng)用CSS樣式，試著制作幾篇文章。
