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