一、CSS書寫格式 1.行內樣式 可以直接將CSS代碼直接寫到開始標簽中 <div style="color:red">我是div</div> 2.內嵌樣式 可以在一對head標簽中寫上一堆style標簽，然後再style標簽中編寫CSS代碼 <head> <style> div{ color:re ...
一、CSS書寫格式
1.行內樣式
可以直接將CSS代碼直接寫到開始標簽中
<div style="color:red">我是div</div>
2.內嵌樣式
可以在一對head標簽中寫上一堆style標簽，然後再style標簽中編寫CSS代碼
<head> <style> div{ color:red; } </style> </head>
3.外鏈樣式
單獨寫一個css文件，把CSS代碼寫到這個文件裡面，然後html文件中通過link標簽把這個文件和html文件關聯起來。
這是HTML文件
<head> <link rel="stylesheet" href="194_Css.css"> </head> 這是CSS文件 div{ color:red; }
4.導入樣式
與第三種方式相類似，但是導入的方式是不同的
<head> <style> @import "194_Css.css"; </style> </head>
註意點：企業開發中大多使用外鏈的樣式，這樣使得結構和樣式相互分離。那麼為什麼不使用導入樣式呢？
外鏈樣式是通過link標簽關聯而導入樣式而導入樣式則是通過@import關聯，@import是CSS2.1之後推出的，因此可能會有相容問題；外鏈樣式在顯示界面的時候，會先載入CSS樣式，在載入結構，所以用戶看不到界面的時候一定已經設置了樣式，而導入樣式在顯示界面的時候，會先載入結構，再載入樣式，所以用戶看到界面的時候不一定會看到完整的界面。
二、從0到1構建一個網站
1.編寫網站要做的第一件事情
創建站點文件夾，並且創建一些子文件夾和子文件，例如：CSS文件夾、js文件夾、image文件夾，index.html
註意點：創建站點文件夾可以使用中文命名，但是站點文件夾裡面的子文件夾和子文件不能出現中文。
2.重置所有的預設樣式和設置一些全局樣式，並且將設置樣式的css文件和對應的界面相關聯起來
3.製作一個努比亞的網頁
（1）先來看看結構目錄
（2）主題內容代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="CSS/base.css"> <link rel="stylesheet" href="CSS/index.css"> </head> <body> <!--頂部區域--> <div class="top"></div> <!--廣告區域--> <div class="banner"></div> <!--內容區域--> <div class="content"></div> <!--底部區域--> <div class="footer"></div> </body> </html>
（3）CSS樣式代碼
/*頂部區域*/ .top{ height:60px; width:100%;/*也就是和父元素一樣寬，這裡使用百分比的形式，使得網頁擴大減小都不會變形*/ background-color: red; } /*廣告區域*/ .banner{ height: 800px; width: 100%; background-color: green; } /*內容區域*/ .content{ height: 1883px; width: 100%; background-color: blue; } /*底部區域*/ .footer{ }
三、源碼：
D194_CSSWritingFormat.html
項目：Nubia
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D194_CSSWritingFormat.html
https://github.com/ruigege66/HTML_learning/tree/master/Nubia
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客園：https://www.cnblogs.com/ruigege0000/
4.歡迎關註微信公眾號：傅里葉變換，個人賬號，僅用於技術交流，後臺回覆“禮包”獲取Java大數據學習視頻禮包
