web前端（7）—— 瞭解CSS樣式，引入css樣式的方式
CSS
在前面大概的介紹了css，從本片博文開始，會詳細的介紹它，在最開始介紹web前端時，開啟百度首頁，當時我提出了一個問題，為什麼百度首頁的輸入框可以放在正中間，就是由於有css的控制，我們可以開啟瀏覽器的除錯介面檢視這個輸入框的css樣式：
圖中我圈出來的左邊html程式碼的就是html屬性的鍵值對，然後圈出的右邊位置就是css樣式，然後右邊那個視窗你還可以所謂的線上編輯，在最後點選一下，就可以編輯：
這個此時就暫且不提了，以後學到的時候再新增，然後那些已經有的也可以去掉，把選項框裡的“√”去掉（即再點一下就可以去掉）
但是你發現，好像百度的輸入框沒有什麼變化對吧？
你去輸入文字試試呢？
是的，你發現輸入框變小了，然後輸入框外層還包含有一個大的框，這樣的話，我們確實改動了百度首頁的輸入框對吧？
好的，我們很簡單的體驗了一把修改css樣式。那麼這些css樣式每一個代表什麼作用呢？
接下來我們才正式進入css的講解
0.為什麼要學習css樣式
使用css樣式可以幫助我們調整美觀html標籤，以及如何對html進行佈局
1.什麼是css樣式
CSS是指層疊樣式表(Cascading Style Sheets)，樣式定義如何顯示HTML元素，樣式通常又會存在於樣式表中。也就是說把HTML元素的樣式都統一收集起來寫在一個地方或一個CSS檔案裡
2.css樣式的作用
CSS的出現解決了下面兩個問題：
- 將HTML頁面的內容與樣式分離。
- 提高web開發的工作效率。
- 內容與表現分離
- 網頁的表現統一，容易修改
- 豐富的樣式，使頁面佈局更加靈活
- 減少網頁的程式碼量，增加網頁瀏覽器速度，節省網路頻寬
- .運用獨立頁面的css,有利於網頁被搜尋引擎收錄
3.css樣式語法
CSS語法可以分為兩部分：
- 選擇器
- 宣告
語法：
html元素（有的又叫選擇器） {
css語句：值；
css語句：值；
……
}
註釋：
/* …… */
例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>div</title>
<style>
h1{
font-size: 16px;
color: red;
}
</style>
</head>
<body>
<h1>這只是一個測試</h1>
</div>
</body>
</html>
以上的兩個，font-size表示字型大小，值16px表示16畫素，px即表示畫素單位，還有em，rpx作為單位，這個後期會用到；color表示顏色，值red表示紅色
開啟瀏覽器檢視測試：
說到這，就要說下css樣式新增的方式了：
css新增方式：
- 內聯樣式
- 行內樣式表
- 外部樣式表
- 連結式
- 匯入式
內聯式：
像上面那個例子，在html檔案裡的head標籤下新增style，並把css寫進style標籤裡就是內斂式：
行內樣式：
寫在html標籤元素裡：
外聯樣式表-連結式
建立一個style.css樣式(名字隨意，匯入時必須寫同名的檔案)，並把樣式寫進此檔案
在html標籤裡的head標籤裡引入link標籤（注意語法），href屬性寫上css樣式檔案所在路徑加檔名
這樣就是一個外聯樣式的外鏈式
外聯樣式表[email protected] url()方式 匯入式
這種引入方式只是做一個瞭解，很少用到
同樣的建立一個css樣式檔案，這裡內容和前面的一樣就不貼圖了
在html檔案裡的head新增style標籤，然後使用語法 @import url(''); 匯入
連結式與匯入式的區別
<link/>標籤屬於XHTML,@import是屬性css2.1
使用<link/>連結的css檔案先載入到網頁當中，再進行編譯顯示
使用@import匯入的css檔案，客戶端顯示HTML結構，再把CSS檔案載入到網頁當中
@import是屬於CSS2.1特有的，對於不相容CSS2.1的瀏覽器來說就是無效的