一、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大資料學習視頻禮包
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/49959.html
標籤：Html/Css
上一篇：2.reset.css檔案
下一篇：Echarts快速入門