html與css設計
『壹』 html與CSS的區別
網頁現在的新標準是W3C。目前的模式是html+css+javascript，如何理解呢，就是html是網頁的結構，版CSS是網頁的樣式，javascript是行為。結構就權是蓋房子先要把結構建出來，然後用CSS來裝飾。其實你在用dreamweaver做網頁時就已經用到了CSS，比如你用DW的屬性面板來設置一個字的字體、顏色和大小，當你選好後，就會自動生成一個.style1的紅色代碼，在<style></style>之間不知道你注意過沒有，這就是CSS,這樣講的話你應該能理解html和CSS的區別了吧。CSS的名稱就叫「層疊樣式表」,從字面也就能理解了。
『貳』 求《HTML&CSS設計與構建網站》pdf
網頁鏈接雲盤鏈接發你了，
『叄』 html+css+div網頁設計與布局怎麼樣
方法/步驟
一個網頁設計時，我們可以將一個頁面設置為頭部，中間，和底部三部分； 頭部有分為店招（logo）和導航等
中間既內容部分，內容也可一個整體，也可左右分離，
底部來頁面結尾，一般寫版權信息，友情鏈接等
END
頭部編輯
店招：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘寶助手網</title>
<style>
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
</style>
</head>
<body>
<div id="top">
<div id="logo">店招</div>
<div id="nav">導航</div>
</div>
<!--------頭部------------>
<div id="centre">
<div id="centreLeft">內容左</div>
<div id="centreRight">內容右</div>
</div>
<!--------中間------------->
<div id="bottom">底部</div>
<!-----------底部---------------->
</body>
</html>
導航：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘寶助手網</title>
<style>
a,ul,li,div,span,td{ padding:0; margin:0;}
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
#nav{ width:100%; height:30px; background:#300}
a{ text-decoration: none; display:block;den}
ul li{list-style: none;}
#nav>ul>li{ float:left; margin-left: 50px; line-height:30px; }
#nav>ul>li>a{ color:#FFF; font-weight:900px}
</style>
</head>
<body>
<div id="top">
<div id="logo">店招</div>
<div id="nav">
<ul>
<li><a href="" title="" target="_blank">淘寶</a></li>
<li><a href="" title="" target="_blank">圖片</a></li>
<li><a href="" title="" target="_blank">視頻</a></li>
<li><a href="" title="" target="_blank">資料下載</a></li>
<li><a href="" title="" target="_blank">視頻下載</a></li>
</ul>
</div>
</div>
<!--------頭部------------>
<div id="centre">
<div id="centreLeft">內容左</div>
<div id="centreRight">內容右</div>
</div>
<!--------中間------------->
<div id="bottom">底部</div>
<!-----------底部---------------->
</body>
</html>
END
內容
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘寶助手網</title>
<style>
a,ul,li,div,span,td{ padding:0; margin:0;}
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
#nav{ width:100%; height:30px; background:#300}
a{ text-decoration: none; display:block;}
ul li{list-style: none;}
#nav>ul>li{ float:left; margin-left: 50px; line-height:30px; }
#nav>ul>li>a{ color:#FFF; font-weight:900px}
/*******===================頭====================************/
#centre{ margin:0 auto; width:1200px; height:auto; }
#centreLeft{ float:left; width:70%; height:500px;border:1px #333333 solid;}
#centreRight{ float: right; width:27%; height:400px;border:1px #333333 solid;}
</style>
</head>
<body>
<div id="top">
<div id="logo">店招</div>
<div id="nav">
<ul>
<li><a href="" title="" target="_blank">淘寶</a></li>
<li><a href="" title="" target="_blank">圖片</a></li>
<li><a href="" title="" target="_blank">視頻</a></li>
<li><a href="" title="" target="_blank">資料下載</a></li>
<li><a href="" title="" target="_blank">視頻下載</a></li>
</ul>
</div>
</div>
<!--------頭部------------>
<div id="centre">
<div id="centreLeft">內容左</div>
<div id="centreRight">內容右</div>
</div>
<!--------中間------------->
<div id="bottom">底部</div>
<!-----------底部---------------->
</body>
</html>
END
底部
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘寶助手網</title>
<style>
a,ul,li,div,span,td{ padding:0; margin:0;}
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
#nav{ width:100%; height:30px; background:#300}
a{ text-decoration: none; display:block;}
ul li{list-style: none;}
#nav>ul>li{ float:left; margin-left: 50px; line-height:30px; }
#nav>ul>li>a{ color:#FFF; font-weight:900px}
/*******===================頭====================************/
#centre{ margin:0 auto; width:1200px; height:auto; overflow: hidden }
#centreLeft{ float:left; width:70%; height:500px;border:1px #333333 solid;}
#centreRight{ float: right; width:27%; height:400px;border:1px #333333 solid;}
/***********==============內容===================*******/
#bottom{ margin:0 auto; width:1200px; height:200px; border:1px #333333 solid; margin-top:20px; }
/***********==============底部===================*******/
</style>
</head>
<body>
<div id="top">
<div id="logo">店招</div>
<div id="nav">
<ul>
<li><a href="" title="" target="_blank">淘寶</a></li>
<li><a href="" title="" target="_blank">圖片</a></li>
<li><a href="" title="" target="_blank">視頻</a></li>
<li><a href="" title="" target="_blank">資料下載</a></li>
<li><a href="" title="" target="_blank">視頻下載</a></li>
</ul>
</div>
</div>
<!--------頭部------------>
<div id="centre">
<div id="centreLeft">內容左</div>
<div id="centreRight">內容右</div>
</div>
<!--------中間------------->
<div id="bottom">底部</div>
<!-----------底部---------------->
</body>
</html>
『肆』 我想學網頁設計，是先學HTML還是先學CSS
html語言是整個網頁最基礎的架構！是基礎！
css是用來進行網頁風格設計的。
意思就是：html是基礎，能做成基本的網頁。css能讓這個網頁更加美化和合理等....
學的話，html基礎語言 > css常用樣式 > div+css > W3C標准
具體的可以網路一下！
『伍』 CSS是什麼和HTML有什麼區別
一、css是Cascading Style Sheets 的縮寫,即層疊式樣式表單，它是由W3C協會制定並發布的一個網頁排版式標准,是對HTML語言功能的補充。
二、HTML和CSS的區別?
1、定義不同：
html是HyperTextMark-upLanguage的縮寫，即超文本標記語言；
css是Cascading Style Sheets 的縮寫,即層疊式樣式表單，它是由W3C協會制定並發布的一個網頁排版式標准,是對HTML語言功能的補充。
2、用途不同：
html則是用於文本內容，包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內容。
css是多用於樣式，主要的用途是對網頁中字體、顏色、背景、圖像及其他各種元素的控制,使網頁能夠完全按照設計者的要求來顯示。
3、CSS語法與HTML語法完全不同：
HTML里代碼是功能標簽，如DIV、SPAN、A鏈接、em標簽、I斜體標簽、u下劃線等，html代碼語法範例：<div>內容</div>
CSS樣式代碼語法是div{樣式單詞：值}
三、HTML和CSS聯系：
CSS與HTML相同之處在於，兩個共同作用讓網頁實現需要的布局樣式。
(5)html與css設計擴展閱讀：
1、標記符<html>,說明該文件是用超文本標記語言（本標簽的中文全稱）來描述的,它是文件的開頭;而</html>,則表示該文件的結尾，它們是超文本標記語言文件的開始標記和結尾標記。
2、CSS為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。
CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個專門的CSS文件中，以供HTML頁面引用。總之，CSS樣式表可以將所有的樣式聲明統一存放，進行統一管理。
『陸』 HTML+CSS網頁設計與布局從入門到精通的目錄
第1部分HTML基礎篇
第1章網頁設計基礎知識3
1.1基礎概念
1.2網頁與HTML語言4
1.3Web標准：結構、表現與行為5
1.3.1標準的重要性5
1.3.2「Web標准」概述6
1.4初步理解網頁設計與開發的過程7
1.4.1基本任務與角色7
1.4.2明確網站定位8
1.4.3收集信息和素材8
1.4.4策劃欄目內容8
1.4.5設計頁面方案9
1.4.6製作頁面9
1.4.7實現後台功能9
1.4.8整合與測試網站10
1.5與設計相關的技術因素10
1.6本章小結12
第2章HTML網頁文檔結構13
2.1HTML簡介13
2.1.1創建第一個HTML文件13
2.1.2HTML文件結構15
2.2簡單的HTML案例16
2.3網頁源文件的獲取18
2.3.1直接查看源文件19
2.3.2保存網頁19
2.4輔助：利用Dreamweaver快速建立基本文檔20
2.5本章小結24
第3章用HTML設置文本和圖像25
3.1文本排版25
3.1.1實現段落與段內換行(p和br)25
3.1.2設置標題(h1～h6)27
3.1.3使文字水平居中(center)27
3.1.4設置文欄位落的縮進(blockquote)29
3.2設置文字列表29
3.2.1建立無序列表(ul)29
3.2.2建立有序列表(ol)30
3.3HTML標記與HTML屬性31
3.3.1用align屬性控制段落的水平位置31
3.3.2用bgcolor屬性設置背景顏色32
3.3.3設置文字的特殊樣式34
3.3.4設置文字的大小和顏色(font)35
3.4忘記過時的HTML標記和屬性35
3.5特殊文字元號36
3.6在網頁中使用圖像(img)38
3.6.1網頁中的圖片格式38
3.6.2一個簡單的圖片網頁38
3.6.3使用路徑39
3.7用width和height屬性設置圖片的尺寸41
3.8用alt屬性為圖像設置替換文本43
3.9輔助：利用Dreamweaver設置文本和圖像43
3.10輔助：利用Dreamweaver代碼視圖提高效率47
3.10.1代碼提示47
3.10.2代碼折疊49
3.10.3使用拆分視圖對代碼快速定位49
3.11本章小結50
第4章用HTML建立超鏈接(a)51
4.1設置基本文字超鏈接51
4.1.1URL的格式51
4.1.2URL的類型52
4.2設置頁面內部的特定目標的鏈接53
4.3設置圖片的超鏈接54
4.4設置電子郵件鏈接54
4.5設置以新窗口顯示鏈接頁面55
4.6創建熱點區域55
4.6.1用HTML建立熱點區域(map和area)56
4.6.2輔助：利用Dreamweaver精確定位熱點區域57
4.7框架之間的鏈接59
4.7.1建立框架與框架集(frame和frameset)59
4.7.2用cols屬性將窗口分為左右兩部分60
4.7.3用rows屬性將窗口分為上中下三部分60
4.7.4框架的嵌套61
4.7.5用src屬性在框架中插入網頁61
4.7.6用src屬性在框架之間鏈接62
4.7.7創建嵌入式框架(iframe)64
4.8鏈接增多後網站的組織結構與維護65
4.9本章小結66
第5章用HTML創建表格67
5.1表格基本結構(table)67
5.2合並單元格68
5.2.1用colspan屬性左右合並單元格68
5.2.2用rowspan屬性上下合並單元格69
5.3用align屬性設置對齊方式70
5.4用bgcolor屬性設置表格背景色和邊框顏色71
5.5用cellpadding屬性和cellspacing屬性設定距離72
5.6完整的表格標記(thead、tbody和tfoot)73
5.7需要拋棄的方法：用表格進行頁面布局75
5.8本章小結78
第2部分CSS基礎篇
第6章(X)HTML與CSS概述81
6.1HTML與XHTML81
6.1.1追根溯源81
6.1.2DOCTYPE(文檔類型)的含義與選擇82
6.1.3XHTML與HTML的重要區別83
6.2(X)HTML與CSS84
6.2.1CSS標准85
6.2.2傳統HTML的缺點85
6.2.3CSS的引入86
6.2.4如何編輯CSS88
6.2.5瀏覽器與CSS89
6.3本章小結90
第7章CSS核心基礎91
7.1構造CSS規則91
7.2基本CSS選擇器92
7.2.1標記選擇器92
7.2.2類別選擇器93
7.2.3ID選擇器95
7.3在HTML中使用CSS的方法96
7.3.1行內樣式96
7.3.2內嵌式97
7.3.3鏈接式98
7.3.4導入樣式99
7.3.5各種方式的優先順序問題100
7.4本章小結102
第8章手工編寫與藉助工具103
8.1從零開始103
8.2設置標題104
8.3控制圖片105
8.4設置正文106
8.5設置整體頁面106
8.6對段落進行分別設置107
8.7完整代碼108
8.8CSS的注釋109
8.9輔助：使用Dreamweaver創建頁面109
8.10輔助：在Dreamweaver中新建CSS規則110
8.11輔助：在Dreamweaver中編輯CSS規則112
8.12為圖像創建CSS規則114
8.13本章小結116
第9章CSS的高級特性117
9.1復合選擇器117
9.1.1「交集」選擇器117
9.1.2「並集」選擇器118
9.1.3後代選擇器120
9.2CSS的繼承特性122
9.2.1繼承關系122
9.2.2CSS繼承的運用123
9.3CSS的層疊特性125
9.4本章小結126
第10章用CSS設置文本樣式127
10.1長度單位127
10.2顏色定義128
10.3准備頁面129
10.4設置文字的字體129
10.5設置文字的傾斜效果130
10.6設置文字的加粗效果131
10.7英文字母大小寫轉換132
10.8控制文字的大小133
10.9文字的裝飾效果133
10.10設置段落首行縮進134
10.11設置字詞間距135
10.12設置段落內部的文字行高136
10.13設置段落之間的距離136
10.14控制文本的水平位置137
10.15設置文字與背景的顏色138
10.16設置段落的垂直對齊方式138
10.16.1使用line-height屬性進行設置138
10.16.2更通用的解決方案139
10.17本章小結140
第11章用CSS設置圖像效果141
11.1設置圖片邊框141
11.1.1基本屬性141
11.1.2為不同的邊框分別設置樣式142
11.2圖片縮放144
11.3圖文混排145
11.3.1文字環繞145
11.3.2設置圖片與文字的間距146
11.4案例——八大行星科普網頁147
11.5設置圖片與文字的對齊方式150
11.5.1橫向對齊方式150
11.5.2縱向對齊方式151
11.6本章小結154
第12章用CSS設置背景顏色與圖像155
12.1設置背景顏色155
12.2設置背景圖像156
12.3設置背景圖像平鋪157
12.4設置背景圖像位置159
12.5設置背景圖片位置固定162
12.6設置標題的圖像替換163
12.7使用滑動門技術的標題166
12.8本章小結168
第3部分CSS高級篇
第13章CSS盒子模型171
13.1「盒子」與「模型」的概念探究171
13.2邊框(border)172
13.2.1設置邊框樣式(border-style)173
13.2.2屬性值的簡寫形式174
13.2.3邊框與背景176
13.3設置內邊距(padding)177
13.4設置外邊距(margin)178
13.5盒子之間的關系179
13.5.1HTML與DOM180
13.5.2標准文檔流183
13.5.3div標記與span標記184
13.6盒子在標准流中的定位原則187
13.6.1行內元素之間的水平margin187
13.6.2塊級元素之間的豎直margin188
13.6.3嵌套盒子之間的margin189
13.6.4margin屬性可以設置為負值191
13.7思考題192
13.8本章小結196
第14章盒子的浮動與定位197
14.1盒子的浮動197
14.1.1准備代碼197
14.1.2案例1——設置第1個浮動的div199
14.1.3案例2——設置第2個浮動的div199
14.1.4案例3——設置第3個浮動的div199
14.1.5案例4——改變浮動的方向200
14.1.6案例5——再次改變浮動的方向200
14.1.7案例6——全部向左浮動201
14.1.8案例7——使用clear屬性清除浮動的影響202
14.1.9案例8——擴展盒子的高度203
14.2盒子的定位204
14.2.1靜態定位(static)204
14.2.2相對定位(relative)205
14.2.3絕對定位(absolute)209
14.2.4固定定位(fixed)214
14.3z-index空間位置214
14.4盒子的display屬性215
14.5本章小結216
第15章用CSS設置表格樣式217
15.1控製表格217
15.1.1表格中的標記217
15.1.2設置表格的邊框219
15.1.3確定表格的寬度222
15.1.4其他與表格相關的標記223
15.2美化表格224
15.2.1搭建HTML結構224
15.2.2整體設置225
15.2.3設置單元格樣式226
15.2.4斑馬紋效果227
15.2.5設置列樣式227
15.3設置滑鼠指針經過時整行變色提示的表格232
15.3.1在Firefox和IE 7中實現滑鼠指針經過時整行變色232
15.3.2在IE 6中實現滑鼠指針經過時整行變色233
15.3.3最終合並代碼234
15.4輔助：使用jQuery實現更多效果236
15.4.1用jQuery實現斑馬紋效果237
15.4.2用jQuery實現「前3行」特殊樣式239
15.4.3用jQuery實現漸變背景色表格效果240
15.4.4用jQuery實現滑鼠指針經過變色效果241
15.5案例——日歷241
15.5.1搭建HTML結構241
15.5.2設置整體樣式和表頭樣式244
15.5.3設置日歷單元格樣式245
15.6本章小結248
第16章用CSS設置鏈接與導航菜單249
16.1豐富的超鏈接特效250
16.2創建按鈕式超鏈接252
16.3製作熒光燈效果的菜單253
16.3.1HTML框架254
16.3.2設置容器的CSS樣式254
16.3.3設置菜單項的CSS樣式255
16.4控制滑鼠指針257
16.5設置項目列表樣式257
16.5.1列表的符號258
16.5.2圖片符號260
16.6創建簡單的導航菜單261
16.6.1簡單的豎直排列菜單261
16.6.2橫豎自由轉換菜單264
16.7設置圖片翻轉效果265
16.8應用滑動門技術的玻璃效果菜單266
16.8.1基本思路266
16.8.2設置菜單整體效果267
16.8.3使用「滑動門」技術設置玻璃材質背景268
16.8.4進一步解決的問題269
16.9滑鼠指針經過時給圖片增加邊框270
16.10本章小結272
第17章用CSS建立表單273
17.1表單的用途和原理273
17.2表單輸入類型274
17.2.1文本輸入框274
17.2.2單選按鈕274
17.2.3復選按鈕275
17.2.4密碼輸入框275
17.2.5按鈕276
17.2.6多行文本框277
17.2.7列表框277
17.3CSS與表單278
17.3.1表單中的元素278
17.3.2像文字一樣的按鈕281
17.3.3多彩的下拉菜單283
17.4案例——「數獨」游戲網頁284
17.4.1搭建基本表格285
17.4.2設置表格樣式286
17.4.3加入文本輸入框287
17.4.4設置文本輸入框的樣式287
17.5對齊文本框和旁邊的圖像按鈕289
17.6本章小結290
第18章網頁樣式綜合案例——靈活的電子相冊291
18.1搭建框架291
18.2陣列模式293
18.3單列模式298
18.4改進陣列模式301
18.5IE 6兼容304
18.6雙向聯動模式306
18.6.1在Firefox中實現306
18.6.2IE 6兼容311
18.6.3改變方向312
18.7本章小結314
第4部分CSS布局篇
第19章固定寬度布局剖析與製作317
19.1向報紙學習排版思想317
19.2CSS排版觀念319
19.2.1兩列布局320
19.2.2三列布局320
19.2.3多列布局321
19.2.4布局結構的表達式與結構圖321
19.3圓角框325
19.3.1准備圖像325
19.3.2搭建HTML結構326
19.3.3放置背景圖像328
19.3.4設置樣式並修復缺口329
19.4單列布局330
19.4.1放置第一個圓角框331
19.4.2設置圓角框的CSS樣式331
19.4.3放置其他圓角框334
19.5「1-2-1」固定寬度布局335
19.5.1准備工作336
19.5.2絕對定位法337
19.5.3浮動法339
19.6「1-3-1」固定寬度布局341
19.7「1-((1-2)+1)-1」固定寬度布局343
19.8本章小結344
第20章變寬度網頁布局剖析與製作345
20.1「1-2-1」變寬度網頁布局345
20.1.1「1-2-1」等比例變寬布局345
20.1.2「1-2-1」單列變寬布局348
20.2「1-3-1」寬度適應布局352
20.2.1「1-3-1」三列寬度等比例布局352
20.2.2「1-3-1」單側列寬度固定的變寬布局352
20.2.3「1-3-1」中間列寬度固定的變寬布局353
20.2.4進一步的思考355
20.2.5「1-3-1」雙側列寬度固定的變寬布局356
20.2.6「1-3-1」中列和側列寬度固定的變寬布局358
20.3變寬布局方法總結359
20.4分列布局背景色問題360
20.4.1設置固定寬度布局的列背景色360
20.4.2設置特殊寬度變化布局的列背景色364
20.4.3設置單列寬度變化布局的列背景色364
20.5CSS排版與傳統的表格方式排版的分析365
20.6瀏覽器的兼容性問題368
20.7CSS布局頁面的調試技巧368
20.7.1技巧1：設置背景色或者邊框，確定錯誤范圍369
20.7.2技巧2：刪除無關代碼，暴露核心矛盾369
20.7.3技巧3：先用Firefox調試，然後使它兼容IE369
20.7.4技巧4：善於利用工具，提高調試效率370
20.7.5技巧5：善於提問，尋求幫助370
20.8本章小結370
第21章網頁布局綜合案例——兒童用品網上商店371
21.1案例概述371
21.2內容分析372
21.3HTML結構設計374
21.4原型設計377
21.5頁面方案設計380
21.6布局設計383
21.6.1整體樣式設計383
21.6.2頁頭部分384
21.6.3內容部分386
21.6.4頁腳部分389
21.7細節設計389
21.7.1頁頭部分389
21.7.2內容部分395
21.7.3左側的主要內容列395
21.7.4右邊欄398
21.8CSS布局的優點402
21.9交互效果設計403
21.9.1次導航欄403
21.9.2主導航欄404
21.9.3賬號區404
21.9.4圖像邊框405
21.9.5產品分類407
21.10遵從Web標準的設計流程407
21.11從「網頁」到「網站」408
21.11.1歷史回顧408
21.11.2不完善的辦法408
21.11.3伺服器出場409
21.11.4CMS出現409
21.11.5具體操作409
21.12 本章小結410
附錄A網站發布與管理411
A.1在Internet上建立自己的Web站點411
A.1.1製作網站內容411
A.1.2申請域名411
A.1.3信息發布411
A.2租用虛擬主機空間412
A.2.1了解基本的技術名詞412
A.2.2選擇和租用虛擬主機413
A.3向伺服器上傳網站內容414
A.3.1使用Dreamweaver上傳文件414
A.3.2使用IE瀏覽器上傳文件415
A.3.3使用專業FTP工具上傳文件416
A.4網站管理418
A.4.1修改密碼418
A.4.2集團郵箱管理419
A.4.3注意事項420
附錄BCSS英文小字典421
『柒』 html/CSS網頁設計
在第3個td裡面添加<a href="這里連接">姓名</a>
『捌』 UI設計師需要具體的學習CSS和HTML嗎
隨著設計行業的發展，設計規范日漸重要，好的設計規范標准可以大大提高工作效率和工作成功。
可以屬於藍湖設計規范來做設計管理
『玖』 html 和 css的區別
css與html區別：
1. 首先我們來看一下html：
html是HyperTextMark-upLanguage的縮寫，即超文本標記語言；
html是用來定義文檔內容結構的，包含了用戶需要瀏覽的內容，包括圖文、視頻，即構成網頁的基本元素；
html是網頁的結構（Structure），需要有多種框架和布局，比如frameset框架集、iframe內聯框架、div+css布局、table布局等，同時支持表單提交（HTML Form），包括基礎表單、input輸入框、輸入框類型、文本域、列表、label等。
html的結構包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內容。
我們來看一個關於html的小例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>
效果如下：
上面的效果可以非常清楚的說明關於css的用途。
通過上面對html和css基本內容的介紹，我們可以非常清楚的看到css與html之間的區別是什麼，css是多用於樣式而html則是用於文本內容，你只要認真的去學習了，更多的東西都可以在學習過程中發現的。