02-htmlcssjq課程html基礎(chǔ)加強(qiáng)

1、北京傳智播客教育 HTML基礎(chǔ)加強(qiáng)講師：楊洪波 郵箱 課前說明HTML : Hypertext Markup Language 超文本標(biāo)記語言CSS : Cascading Style Sheet 層疊樣式表目標(biāo)：掌握手寫HTML實現(xiàn)一般難度的Web頁面的能力（如網(wǎng)站注冊表單），為 學(xué)習(xí)打基礎(chǔ)。堅持手寫HTML，可視化設(shè)計只是一種自學(xué)的手段。參考書：張孝祥JavaScript網(wǎng)頁開發(fā)體驗式學(xué)習(xí)教程瀏覽器介紹什么是瀏覽器？解釋和執(zhí)行HTML源碼的工具。IE是瀏覽器，瀏覽器就是IE嗎？五大瀏覽器：IE【IE6及以下版本（IE7及以上）】、FF(FireFox)、Chrome、Opera、Safar

2、i(Apple)搜狗、騰訊TT、遨游（Maxthon） 、360瀏覽器、(不是一個級別)Trident引擎，（就是IE的WebBrowser控件）WebKit引擎(開源瀏覽器內(nèi)核)，現(xiàn)在很多非IE核心的瀏覽器用的是WebKit引擎，比如遨游3或搜狗的雙核、Chrome、Safari. HTMLHTML就是描述網(wǎng)頁長什么樣子、有什么內(nèi)容的一個文本。查看網(wǎng)頁的描述內(nèi)容（HTML）的方式：使用IE瀏覽器的話，在網(wǎng)頁上點(diǎn)擊右鍵，選擇“查看源文件”。 HTML之所以能展現(xiàn)出各種各樣的效果，是瀏覽器的功能。瀏覽器兼容性問題：描述文件是一個統(tǒng)一的，但是就像口語翻譯一樣，不同的翻譯翻譯出來的東西也是不一樣的。

3、不同瀏覽器品牌對HTML的支持是有差異的，所以同一個網(wǎng)頁在IE上和FireFox上看起來可能長得不一樣，最明顯的就是以前QQ空間上的頁面在FireFox上顯示就有問題，甚至有的頁面在IE6、IE7、IE8上長的也不一樣。因此Web開發(fā)過程中的一個重要的也是最頭疼的問題就是瀏覽器的兼容。測試FireFox（簡稱FF）、Chrome等瀏覽器安裝各自的軟件就可以，測試不同版本的IE可以用IETester、IE Collection(使用IE Collection瀏覽頁面時，最好通過http:/的方式瀏覽，否則部分版本瀏覽器會報錯。)CSS、JavaScript都存在瀏覽器兼容問題，CSS尤甚，我們只

4、考慮JS的兼容。靜態(tài)頁面、動態(tài)頁面（*）網(wǎng)站頁面分為靜態(tài)頁面和動態(tài)頁面兩種靜態(tài)頁面：后綴名為html或htm都是靜態(tài)頁面。有一個html頁面文件保存在服務(wù)器上，瀏覽器要這個頁面的時候服務(wù)器就把這個頁面文件發(fā)給瀏覽器；動態(tài)頁面：動態(tài)頁面中會包括一些腳本代碼。服務(wù)器上沒有瀏覽者要看的頁面，而是服務(wù)器動態(tài)生成的HTML頁面發(fā)給瀏覽器，動態(tài)語言的服務(wù)器端可以用C#、 、PHP、Java、C等編寫。htm、html都是靜態(tài)頁面。asp、aspx、jsp、php等都是動態(tài)頁面。開發(fā)工具記事本、高級記事本(Editplus、Notepad+、UltraEdit)（推薦）其他工具：Dreamweaver、Ex

5、pression Web(FrontPage的改頭換面版) 等快速開發(fā)工具，這些工具是給頁面美工用的。開發(fā)人員用VisualStudio寫html就夠了。一開始學(xué)的時候全部手寫（使用文本編輯器，不要用快速開發(fā)工具）?！靖呤钟脴淙~也能殺死人，菜鳥使槍也沒姿勢！】不要把精力放到怎么把界面做好看上，正規(guī)公司都有專門的頁面美工，不正規(guī)公司都是偷別人的美工頁面，無論是偷別人的頁面，還是使用公司美工開發(fā)出來的頁面，對于開發(fā)人員要做的“填模板”工作都是一樣的。第一個網(wǎng)頁,網(wǎng)頁基本結(jié)構(gòu)使用記事本創(chuàng)建網(wǎng)頁新建一個文本文件，后綴名改為.html或.htm輸入我的第一個網(wǎng)頁Hello world注意windows隱

6、藏文件后綴名問題。HTML頁結(jié)構(gòu)說明所有內(nèi)容都在標(biāo)簽之內(nèi)；內(nèi)放的是頭部信息，是對頁面的描述，不會直接顯示在頁面中，內(nèi)的中設(shè)置的是頁面的標(biāo)題，只能放在中；是頁面的主體，大部分顯示內(nèi)容都定義在這里。所有頁面都應(yīng)該至少包含這些部分，由于瀏覽器容錯性強(qiáng)，所以即使不包含也能正常顯示，但是最好還是寫完全了。HTML注釋： 。易錯：title標(biāo)簽的結(jié)束標(biāo)簽，如果忘記 / ,則整個頁面都不顯示。HTML中中可以包括 網(wǎng)頁標(biāo)題 當(dāng)前文檔中導(dǎo)入另外一個文檔 指定網(wǎng)頁中超鏈接的基準(zhǔn)地址。分兩種：1.關(guān)于網(wǎng)頁的描述信息2.模擬http響應(yīng)頭信息。每1秒鐘刷新一次當(dāng)前頁面。顏色體系body標(biāo)簽的bgcolor屬性可以設(shè)

7、定網(wǎng)頁的背景顏色。bgcolor的取值可以是英文單詞red、blue、yellow，也可以是十六進(jìn)制的顏色#00FF69、#23AEFF。(#000000黑色、#FFFFFF白色)。#00FF69這就是HTML中表示顏色的方式，每兩個是一組，三組分別就表示R、G、B的值，是16進(jìn)制表示。關(guān)于RGB見備注1。取色工具：ColorPic、PicPick、VS自帶的顏色選擇對話框、FastStone Capture。 （見備注2）bgcolor=“rgb(10,125,200)”或bgcolor=“rgb(10%,125%,20%)”也可以但存在瀏覽器兼容性問題FF、Opera、Chrome不支持（

8、*）HTML和XML的聯(lián)系、區(qū)別（*）html與xml相同點(diǎn)：都是標(biāo)記語言、注釋都是：都可以通過dom編程方式來訪問都可以通過CSS來改變外觀html與xml的不同點(diǎn)：xml比html語法要求更嚴(yán)格。有開始標(biāo)簽必須有結(jié)束標(biāo)簽、大小寫一致、屬性用雙引號等。xml側(cè)重于數(shù)據(jù)存儲，html側(cè)重于數(shù)據(jù)展示。趨勢：數(shù)據(jù)存儲與數(shù)據(jù)表現(xiàn)相分離(html中只有要顯示的頁面內(nèi)容，樣式都有CSS來控制,html頁面中不再有等標(biāo)簽，控制樣式都用CSS)。xhtml：可擴(kuò)展超文本置標(biāo)語言（eXtensibleHyperTextMarkupLanguage，XHTML），更符合xml語法規(guī)范的html。xhtml的出現(xiàn)

9、主要是為了向xml過度，通過xml+css也能實現(xiàn)很好的頁面?！緓html要求：全部小寫、有開始結(jié)束標(biāo)簽、屬性用雙引號】dhtml： Dynamic HTML的簡稱，就是動態(tài)的html。 HTML、樣式表和JavaScript 的組合html常用標(biāo)簽：文字格式h標(biāo)簽（標(biāo)題），HTML定義了到六個h標(biāo)簽，分別表示不同大小的字體。h1最大，h6最小。只是回車，是分段。前后會有比較大的空白，而則沒有。傳智播客居中顯示.a粗體，推薦。b斜體。c帶下劃線。強(qiáng)調(diào)，斜體2下標(biāo)，如：H2O2上標(biāo)，如：102字體標(biāo)簽，紅色。color（設(shè)置顏色） size（1-7） face（設(shè)置字體,設(shè)置字體是注意用戶計算機(jī)

10、中必須有該字體才能正常顯示） color size（厚度） width（長度） align=left/center/right （默認(rèn)為劇中顯示） 預(yù)格式化 保持本色html編碼（特殊字符）用于顯示一些特殊字符，有特殊含義的()以及鍵盤上無法輸入的字符。HTML編碼以&開頭，以;結(jié)尾。在網(wǎng)頁上顯示helloChina，helloChina特殊字符：HTML中是有特殊含義的、空格是不會被顯示的（輸入一個帶空格的字符串看看），所以需要特殊符號，相當(dāng)于C#中的n轉(zhuǎn)義符。（大于號，greater than）；（空格，Nonbreaking space ）。見備注。上網(wǎng)搜：ISO Latin-1 Cha

11、racter Set 或ISO Latin-1 字符集，查看所有。URL、超鏈接URL：URL表示資源在網(wǎng)絡(luò)中的地址，比如 、28/b.zip。還有URI的概念，比URL大，有的類中使用URI這種說法，可以暫時看成和URL一樣就行。超級鏈接：如鵬網(wǎng)。a標(biāo)簽的一些常用屬性：href、title、target、name（錨記時用）中還可以嵌套圖片，這樣就是點(diǎn)擊圖片打開連接超鏈接深入相對URL：相對URL表示相對于當(dāng)前文檔的資源，“/”表示網(wǎng)站根目錄，“./”表示父目錄，“././”表示父目錄的父目錄，“./”或者不寫任何斜線表示相對于當(dāng)前路徑的目錄。站內(nèi)引用最好用相對URL，這樣域名改變了、目錄改

12、變了都不受影響。不要再出現(xiàn)c:aaaa.jpg這種絕對路徑了。將的target屬性設(shè)定為_blank就可以在新窗口中打開超鏈接。國情：國內(nèi)的網(wǎng)站很多都是默認(rèn)在新窗口中打開。錨記：用name屬性為 起名字：這里是最后。這樣可以通過轉(zhuǎn)到平臺來跳轉(zhuǎn)到超鏈接的部分。案例：去往評論、回到正文。多敲幾個回車創(chuàng)建電子郵件鏈接URL格式為mailto(協(xié)議):收件人的郵箱名?subject=主題名&body=郵件內(nèi)容需要安裝郵件客戶端(outlook)(發(fā)郵件要有這個客戶端)如:發(fā)個郵件(這么做會啟動默認(rèn)的那個客戶端,如果想用其他的郵件客戶端只需要更改默認(rèn)的就可以了)圖片注意圖片是鏈接的，不是插入的，所以如果

13、src指向的文件不存在了，就看不了了。alt屬性為圖片無法顯示時的顯示文本，鼠標(biāo)方式去也會有懸浮提示“點(diǎn)擊查看大圖”；title用來顯示當(dāng)鼠標(biāo)放到圖片上時顯示的文字；border屬性指定邊框，border=0不顯示邊框；width、height屬性指定圖片的顯示大小，如果不指定則是圖片的原始大小。最好指定width、height，哪怕是原始尺寸大小，因為如果不指定大小，圖片會不占位置，圖片下載后才調(diào)整大小，會造成頁面很亂。如果指定了width、height哪怕圖片沒有加載完成，也會先把位置占上。如果網(wǎng)頁上要顯示小圖（比如縮略圖），不要僅僅是把大圖設(shè)定一下width、height來縮小，因為仍然

14、會下載大圖，會使得加載速度很慢。易錯，不要以為把bmp后綴改為jpg就是改文件格式了！發(fā)送圖片格式介紹的文檔。知識補(bǔ)充px (Pixel)單位名稱為像素，相對長度單位，像素（px）是相對于顯示器屏幕分辨率而言的（隨著屏幕分辨率而變化）,國內(nèi)推薦； QQ截圖也是使用PX作為長度寬度單位。 em單位名稱為相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸，國外使用比較多；如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸。呵呵列表、表格dldefinition list(定義列表)，一般可用于名詞解釋之類。ulunordered list(無序列表)，注意多個ul嵌套時的寫法。olor

15、dered list(有序列表)，用嵌套u(yù)l或ol來模擬二級菜單。與都有一個type屬性，用來設(shè)置序列的顯示樣式。type的取值可以是：A、a、1、i、I、disc、circle、square。(可用CSS控制ul、ol的type樣式)列表、表格表格：為表格，在內(nèi)部通過創(chuàng)建行，內(nèi)部通過 創(chuàng)建單元格。可以將table的border屬性設(shè)為0來隱藏表格線。填充、間距cellpadding內(nèi)容和表格邊線之間的距離 cellspacing單元格之間的間距。的屬性：align，水平對齊，可選值left、right、center；valign，垂直對齊，可選值top、middle、bottom。也有ali

16、gn和valign。tom20男：子標(biāo)簽?zāi)J(rèn)繼承父標(biāo)簽的屬性，如果自己單獨(dú)指定了屬性，則會覆蓋父標(biāo)簽的屬性。還可以使用rowspan(合并行)、colspan（和并列）進(jìn)行單元格的合并。rowspan、colspan是td的屬性。一個完整的表格。table、caption、thead、tbody、tfoot、tr、th、tdHTML表格的相關(guān)屬性bgcolor(背景顏色)、border(邊框),bordercolor(邊框顏色)、cellspacing(單元格之間間隔)，cellpadding(單元格與內(nèi)容之間間隔)、width(寬)、height(高)align、valign、bgcolor

17、、width、height、colspan、rowspan練習(xí)練習(xí)1：分別使用 顯示歌曲列表，使用a,b,c格式顯示，使用實心圓顯示。練習(xí)2：使用做一個員工表格.顯示員工姓名、性別、工資，表頭加粗、居中顯示。顯示4個員工。見備注。練習(xí)練習(xí)3：跨行跨列。學(xué)生成績表格、學(xué)生基本情況表格表格練習(xí)，作業(yè)：注意：當(dāng)單元格內(nèi)容為空時，加與不加的區(qū)別。（沒有doctype的時候需要手動添加）HTML背景body屬性(后面用樣式表,樣式表強(qiáng)大的多)text屬性(文本的顏色)我很帥啊(隨便玩的深水炸彈)link屬性(連接的顏色)(如果把這個改成白色誰都看不見很無語啊)alink屬性(active 點(diǎn)擊的時候連接

18、的顏色)vlink屬性(visited點(diǎn)擊之后的顏色)bgcolor屬性(背景顏色)background屬性(背景圖片,平鋪)表單網(wǎng)站表單與填表。標(biāo)簽為表單標(biāo)簽。如果要把數(shù)據(jù)提交到服務(wù)器，則需要將、等表單元素放到form中。是主要的表單元素，type的可選值：submit（提交按鈕）、button（普通按鈕）、checkbox（復(fù)選框）、file（文件選擇框）、hidden（隱藏字段）、image（圖片按鈕）、password（密碼框）、radio（單選按鈕）、reset（重置按鈕）、text（文本框）。為什么要使用表單?用于向服務(wù)器傳數(shù)據(jù)表單和框架單行文本輸入框(TEXT)單選按鈕(RADI

19、O)復(fù)選框(CHECKBOX)下拉列表(SELECT)重置按鈕(RESET)提交按鈕(SUBMIT)多行文本框(TEXTAREA)密碼框(PASSWORD)表單元素的基本格式表單標(biāo)簽1 文本框:2 密碼框3 單選按鈕Name相同的屬于同一組4 復(fù)選框 5 復(fù)位按鈕6 提交按鈕7普通按鈕input表單詳解submit：點(diǎn)擊submit按鈕表單就會被提交給服務(wù)器，中文IE下默認(rèn)按鈕文本為“提交查詢”，可以設(shè)置value屬性修改按鈕的顯示文本text：size屬性為寬度，value為值，maxlength為可以輸入的最大長度，readonly只讀。（只寫屬性名，不寫屬性值）或者（推薦）checkbo

20、x：checked屬性表示是否被選中，或者(推薦)checked、readonly等這種一個可選值的屬性都可以省略屬性值。radio：相同name屬性的為一只有組，不同radio設(shè)定不同的value值，這樣通過取指定name的值就可以知道誰被選中了，不用單獨(dú)的判斷。file：使用file，則form的enctype必須設(shè)置為multipart/form-data、method屬性為POST（*）image：使用src屬性指定圖片的地址，用來實現(xiàn)美化的“登錄按鈕”。用圖片實現(xiàn)的submit按鈕，同時提交了用戶點(diǎn)擊圖片的坐標(biāo)。標(biāo)簽用來創(chuàng)建類似于WinForm中的ComboBox或者ListBox如

21、果size屬性大于1就是ListBox（size的值為顯示出來的列表數(shù)量），否則就是ComboBox?；蛘撸ㄍ扑]），那么就是可以多選的ListBox。select中的項是，北京還可以設(shè)定項的值北京。將一個option設(shè)置為選中：333或者333(推薦)就可以將這個項設(shè)定為選擇項如何實現(xiàn)“不選擇”，添加一個-不選擇-，然后編程判斷select選中的值如果是-1就認(rèn)為是不選擇。select分組選項，可以使用optgroup對數(shù)據(jù)進(jìn)行分組，分組本身不會被選擇，無論對于下拉列表還是列表框都適用。見備注。其他標(biāo)簽多行文本（也是表單元素）：文本，cols=“50”、rows=“15”屬性表示行數(shù)和列數(shù)。

22、readonly和 disabled：在前可以寫普通的文本來修飾，但是單擊修飾文本的時候input并不會得到焦點(diǎn)，而用label則可以，for屬性指定要修飾的控件的id，asdfad；”txt1”為被修飾的控件設(shè)置一個唯一的id。(label的accesskey=“r”屬性指定快捷鍵，F(xiàn)F不支持)婚否 fieldset：GroupBox效果，將控件劃分一個區(qū)域，看起來更規(guī)整 常用 submit(提交)、reset(恢復(fù)為默認(rèn)值)*滾動文字 *播放聲音（dw中添加媒體插件）、顯示flash，見備注。練習(xí)練習(xí)1：實現(xiàn)登錄界面，有用戶名、密碼、驗證碼（使用普通圖片代替）、“記住密碼”復(fù)選框、登錄按鈕

23、、重置按鈕。使用Table進(jìn)行布局。使用label來寫修飾文本。練習(xí)2：實現(xiàn)注冊頁面，分為兩個頁面，第一個頁面是協(xié)議顯示頁面，點(diǎn)擊“我同意”超鏈接進(jìn)入第二個注冊頁面，填寫內(nèi)容：用戶名、密碼、重復(fù)密碼、省份（下拉列表）、性別（男、女、保密三個Radio）、職業(yè)（學(xué)生、公司職員、其他三個Radio）、愛好（登山、籃球、足球、讀書、游泳五個CheckBox）。使用label來寫修飾文本。將愛好幾個CheckBox放到一個fieldset(GroupBox)中meta標(biāo)簽(*)meta標(biāo)簽包括在head標(biāo)簽中。主要用來描述頁面自身信息,元信息。標(biāo)簽，有指定name和指定http-equiv兩種用法：關(guān)

24、于網(wǎng)頁的描述信息。模擬http響應(yīng)頭信息。例如：指定網(wǎng)頁編碼 三秒鐘后刷新此網(wǎng)頁。 三秒鐘后重定向到新網(wǎng)頁。發(fā)帖成功后提示“發(fā)帖成功，即將轉(zhuǎn)向帖子查看頁面”。 禁止瀏覽器緩存頁面。在MSDN中輸入meta。使用VS創(chuàng)建網(wǎng)頁新建Web項目（新建 Web應(yīng)用程序、新建網(wǎng)站），新建html頁面（添加新建項WebHTML頁）查看頁面的方式：切換到“設(shè)計”視圖，可以在這里查看初步的預(yù)覽效果，不是很準(zhǔn)，可以在“設(shè)計”視圖從工具箱中拖放控件可視化的設(shè)計，設(shè)計復(fù)雜頁面的時候很少直接可視化設(shè)計。在編輯器上點(diǎn)右鍵，選擇“在瀏覽器中查看”。無法進(jìn)行調(diào)試。將要查看的頁面設(shè)為起始頁（在文件上點(diǎn)擊右鍵“設(shè)為起始頁”），然

25、后點(diǎn)擊“啟動調(diào)試”。可以調(diào)試。學(xué)沒有JS、C#代碼的時候用“在瀏覽器中查看”。修改頁面不用關(guān)閉瀏覽器再打開，刷新就可以。自動提示快速完成頁面，結(jié)束標(biāo)簽自動補(bǔ)全，Ctrl+J自動提示。文檔類型定義：指明當(dāng)前的html頁面是符合某種規(guī)范的。類似于各種合同書上面注明當(dāng)前條款是根據(jù)國家某某法律規(guī)定來制定的。doctype的主要作用是告訴瀏覽器或其他軟件當(dāng)前頁面所使用的語言版本信息，以便更精準(zhǔn)的解析與呈現(xiàn)頁面。Div層（什么都可以放）、Span(文本)div：將內(nèi)容放到層中，就以將這些內(nèi)容當(dāng)成一個整體進(jìn)行處理，比如整體隱藏、整體移動等。div非常強(qiáng)大和常用。類似于WinForm的Panel。span：d

26、iv是將內(nèi)容放到一個矩形的區(qū)塊中，會影響布局（兩端會換行），而span只是把一段內(nèi)容定義成一個整體進(jìn)行操作，但不影響布局、顯示（兩端沒有換行）。演示：一行文字用span與div截取部分文字的區(qū)別。Div在網(wǎng)頁布局中使用非常多。Span一般用來圈住一小段文字，設(shè)置不同的樣式。為什么不用標(biāo)簽，因為用可以通過CSS來設(shè)樣式。html這些標(biāo)簽去哪里查？Msdn目錄 web開發(fā) HTML and CSS HTML and DHTML Reference Objects樣式表、CSSCSS（層疊樣式表，Cascading Style Sheets）是用來美化頁面用的，可以對頁面元素進(jìn)行更精細(xì)的設(shè)置，樣式主

27、要描述元素的字體顏色、背景顏色、邊框等。使用CSS的好處：外觀美化 布局、定位樣式表能實現(xiàn)內(nèi)容與樣式的分離，方便團(tuán)隊開發(fā)方便統(tǒng)一定義格式,修改也方便.HTML標(biāo)簽的外觀樣式比較單一頁面色彩不生動樣式修改不方便樣式表的作用：為網(wǎng)頁設(shè)置外觀，相當(dāng)于華麗的衣服。常見屬性屬 性CSS名稱說 明邊界屬性margin-top設(shè)置對象的上邊距margin-right設(shè)置對象的右邊距margin-bottom設(shè)置對象的下邊距margin-left設(shè)置對象的左邊距邊框?qū)傩詁order-style設(shè)置邊框的樣式border-width設(shè)置邊框的寬度border-color設(shè)置邊框的顏色填充屬性padding-to

28、p設(shè)置內(nèi)容與上邊框之間的距離padding-right設(shè)置內(nèi)容與右邊框之間的距離padding-bottom設(shè)置內(nèi)容與下邊框之間的距離padding-left設(shè)置內(nèi)容與左邊框之間的距離常見CSS樣式Css樣式的屬性的鍵值對之間用“：”（冒號）隔開，而不同的屬性之間用”;”（分號）隔開。css計量單位：css中表示寬度、距離時有多種計量單位：px（像素）、30%（百分比）、em（相對單位）等。width:20px。background-color:Red;背景顏色；color：文本顏色border-style:solid;邊框風(fēng)格，實線（默認(rèn)是沒有），還有dotted(點(diǎn))等值；dashed虛線

29、，groove、border-color：邊框顏色；border-width：邊框?qū)挾?默認(rèn)是0)。例子：style=border-color:Red;border-width:1px;border-style:dotted;display：元素是否顯示，可選值none（不顯示）、block （顯示為塊級元素，此元素前后會帶有換行符。）、inline（顯示為內(nèi)聯(lián)元素，元素前后沒有換行符 ,為div增加display:inline;樣式后與span顯示效果一致。常見CSS樣式注意：【 】）等。cursor，鼠標(biāo)在元素上時顯示的光標(biāo)圖標(biāo)，可選值：cursor（默認(rèn)光標(biāo)）、pointer（超鏈接上的

30、手）、text（輸入Bean）、wait（忙沙漏）、help（幫助）等。還可以通過cursor:url(dinosau2.ani)使用ani、cur格式的自定義光標(biāo)圖片。LI不顯示圓點(diǎn)：LIST-STYLE-TYPE: none;一般設(shè)在li或者ul上margin(與表格的cellspacing屬性類似)、padding(與表格的cellpadding類似。)margin:值1; /上右下左都是 值1。margin:值1 值2; /上下為值1，左右為值2.margin:值1 值2 值3; /上為值1 左右為值2 下為值3;margin:值1 值2 值3 值4; /每個值分別是：上 右 下 左;

31、(順時針方向)樣式選擇器對于非元素內(nèi)聯(lián)的樣式需要定義樣式選擇器，通俗的說就是這個樣式適合于哪些元素，三種：標(biāo)簽選擇器、class選擇器和id選擇器。(優(yōu)先級)標(biāo)簽選擇器 inputborder-color:Yellow;color:Red;，對于指定的標(biāo)簽采用統(tǒng)一的樣式class選擇器，以定義一個命名的樣式，然后在用到它的時候設(shè)定元素的class屬性為樣式的名稱，還可以同時設(shè)定多個class，名稱之間加空格,樣式名稱開頭加“.”同一個標(biāo)簽可以應(yīng)用多個類選擇器（空格隔開）。如果樣式表中的定義有重復(fù)，則以最后一個定義為準(zhǔn)。標(biāo)簽+class選擇器class選擇器也可以針對不同的標(biāo)簽，實現(xiàn)同樣的樣式名

32、對于不同的標(biāo)簽有不同的樣式，只要在樣式名前加標(biāo)簽名即可。input.accountnotext-align:right;color:Red;label.accountnofont-style:italic; id選擇器為指定id的元素設(shè)定樣式，id前加# #username font-size:10px;style、class可以同時組合使用更多選擇器(*)包含選擇器（層次選擇器）P strong background-color:Yellow表示P標(biāo)簽內(nèi)的strong標(biāo)簽內(nèi)的內(nèi)容使用的樣式fadsfasdfadsadfasfd組合選擇器，同時為多個標(biāo)簽設(shè)定一個樣式H1,H2,inputbac

33、kground-color:Greennihao(*)其他CSS選擇器：div p(子選擇器)、div + p（相鄰選擇器）、。IE7以下不支持。在jQuery中還會學(xué)習(xí)。偽選擇器偽選擇器：為標(biāo)簽的不同狀態(tài)設(shè)定不同的樣式：A:visited：超鏈接點(diǎn)擊過的樣式；A:active：選中超鏈接時的樣式；A:link：超鏈接未被訪問時的狀態(tài)；A:hover：鼠標(biāo)移到超鏈接時的狀態(tài)。A:link TEXT-DECORATION: noneA:hover TEXT-DECORATION: underlineA:active TEXT-DECORATION: noneA:visited TEXT-DECO

34、RATION: none說明：TEXT-DECORATION: none表示超鏈接不顯示下劃線。不是所有的元素都支持偽選擇器。（不同瀏覽器支持情況不一樣,IE7以下不支持input:hover等標(biāo)簽。），目前大多數(shù)只在A標(biāo)簽時使用。注意瀏覽器緩存問題。思考：頁面上 部分超鏈接默認(rèn)是紅色、部分超鏈接默認(rèn)是白色。怎么實現(xiàn)？（.myAnchor:link）使用CSS的三種方式CSS主要有元素內(nèi)聯(lián)、頁面嵌入和外部引用三種使用方式。CSS是描述元素的皮膚！元素內(nèi)聯(lián)(行內(nèi)樣式表)，直接將樣式寫入元素的style屬性中，適用于樣式?jīng)]有可復(fù)用性的場合。頁面嵌入（內(nèi)嵌樣式表）：在head中加入 inputbor

35、der-color:Yellow;color:Red; 表示頁面中所有input都是采用指定的樣式。適合于樣式復(fù)用，減小頁面體積外部引用（外部樣式表），將css內(nèi)容寫入css后綴的文件textareabackground:yellow然后在頁面中引用，在head中加入適合于多個頁面共享css。CSS外部導(dǎo)入CSS中后定義的樣式可以將先定義的樣式覆蓋，但通過!important可以提高優(yōu)先級。（color:red !important; color:green;最后顯示是red;）CSS選擇器優(yōu)先級：【Id選擇器 類選擇器 標(biāo)簽選擇器】z-index介紹知道import url(xx.css);在一個css中，添加對其他css文件的引用。CSS中的注釋：/* */盒子模型，在進(jìn)行網(wǎng)頁布局時需要明白。見下頁。