目的：為了把樣式和內容分開，並且使網頁元素更加豐富，引入了CSS
CSS頁面引入有三種方式：
1）內聯式：比較不常用，因為內容和樣式仍然在一起，不方便。示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--字體顏色、字體大小、字體類型、行高--> <div style="color: hotpink;font-size: 20px;font-family: 'Leelawadee UI Semilight';line-height: 50px"> 傳統布局：使用table來做整體頁面的布局 總結：這種方式來制作頁面現在也不是很多了，感覺並不是很高效。 需要先用photoshop量出頁面布局具體的尺寸位置，再將其划分為表格， 對每個格子進行編輯。每個格子可以嵌套表格，這樣有時候寫着寫着還有點迷糊， 要重新找到編輯位置屬於哪一個表格的哪個位置， 通常會將表格的border設置為1， 方便檢查 </div> <div> 博客園是一個面向開發者的知識分享社區。自創建以來, 博客園一直致力並專注於為開發者打造一個純凈的技術交流社區, 推動並幫助開發者通過互聯網分享知識,從而讓更多 </div> </body> </html>
2）嵌入式：由於這種方式速度快，一般用於首頁加載。示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>KID</title> <style type="text/css"> div{ color:hotpink; font-size:20px; font-family:'Microsoft YaHei UI'; line-height:50px } </style> </head> <body> <div> 博客園是一個面向開發者的知識分享社區。自創建以來, 博客園一直致力並專注於為開發者打造一個純凈的技術交流社區, 推動並幫助開發者通過互聯網分享知識,從而讓更多 </div> <div> 博客園是一個面向開發者的知識分享sdgdhgfgjkhljsadsfxcvbnm社區。自創建以來, 博客園一直致力並專注於為開發者打造一個純凈的技術交流社區, 推動並幫助開發者通過互聯網分享知識,從而讓更多 </div> </body> </html>
3）外聯式：樣式單獨保存在main.css文件中，樣式與內容完全分離，用於大多數網頁中。示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>KID</title> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div> 博客園是一個面向開發者的知識分享社區。自創建以來, 博客園一直致力並專注於為開發者打造一個純凈的技術交流社區, 推動並幫助開發者通過互聯網分享知識,從而讓更多 </div> <div> 博客園是一個面向開發者的知識分享sdgdhgfgjkhljsadsfxcvbnm社區。自創建以來, 博客園一直致力並專注於為開發者打造一個純凈的技術交流社區, 推動並幫助開發者通過互聯網分享知識,從而讓更多 </div> </body> </html>
main.css:
div{ color:hotpink; font-size:20px; font-family:'Microsoft YaHei UI'; line-height:50px }