CSS的引入方式和書寫規範
css介紹
1. css是什麼
CSS 指層疊樣式表 (Cascading Style Sheets)
l 樣式定義如何顯示 HTML 元素
l 樣式通常儲存在樣式表中
l 把樣式新增到 HTML 4.0 中，是為了解決內容與表現分離的問題
l 外部樣式表可以極大提高工作效率
l 外部樣式表通常儲存在 CSS 檔案中
l 多個樣式定義可層疊為一
2. css作用
1. 樣式表解決了html的內容與表現分離
2. 使用樣式表極大的提高了工作效率。
3. css書寫規則
基本語法
CSS規則主要由兩部分組成 1.選擇器2.一條或多條宣告
選擇器主要作用是為了確定需要改變樣式的HTML元素
每一條宣告由一個屬性和一個值組成，使用花括號來包圍宣告，屬性與值之間使用冒號(:)分開
引入方式css★★★
我們介紹以下幾種匯入css方式:
內聯樣式表
要使用內聯樣式，你需要在相關的標籤內使用樣式（style）屬性。Style屬性可以包含任何CSS屬性
例如:
<div style=”border:1px solid black”>這是一個DIV</div>
內嵌樣式
內嵌樣式是把css的程式碼嵌入到html標籤中<div style="color:red;font-size: 100px;">你好啊 小朋友</div>
語法：
(1)使用style屬性將樣式嵌入到html標籤中
(2)屬性的寫法：屬性：屬性值
(3)多個屬性之間使用分號;隔開
不建議使用
注意
內部樣式表
我們可以使用<style>標籤在html文件的<head>中來定義樣式表。
內部樣式
在head標籤中使用style標籤進行css的引入
<style type="text/css">
div{color:red;font-size: 100px;}
</style>
語法：
(1)使用style標籤進行css的引入
<style type="text/css">
屬性：type：告知瀏覽器使用css解析器去解析
(2)屬性的寫法：屬性：屬性值
(3)多個屬性之間使用分號;隔開
例如:
這種方式，樣式只適合應用於一個頁面
外部樣式表
如果想要在多個頁面使用同一個樣式表，可以使用外部樣式表來匯入。
我們可以在html頁面上使用<link>標籤來匯入外部樣式表。
外部樣式
將css樣式抽取成一個單獨css檔案 誰去使用誰就引用
<link rel="stylesheet" type="text/css" href="demo1.css"/>
語法：
(1)建立css檔案 將css屬性寫在css檔案中
(2)在head中使用link標籤進行引入
<link rel="stylesheet" type="text/css" href="css檔案地址"/>
rel:代表要引入的檔案與html的關係
type：告知瀏覽器使用css解析器去解析
href：css檔案地址
(3)屬性的寫法：屬性：屬性值
(4)多個屬性之間使用分號;隔開
例如:
瀏覽器會從mystyle.css檔案中讀取樣式，並對頁面上的html進行修飾。
外部樣式表，應該以css為字尾來儲存，可以使用任意文字編輯器對css檔案進行編輯。
下面是mystyle.css檔案的內容:
@import匯入
這種方式也是外部匯入。
@import方式
<style type="text/css">
@import url("css地址");
</style>
link與@import方式的區別：
(1)link所有瀏覽器都支援 import部分低版本IE不支援
(2)import方式是等待html載入完畢之後在載入
(3)import方式不支援js的動態修改
使用方式如下：
關於@import與引用外部樣式表的區別:
1. @import這種方式只有firefox支援，而ie不支援。
[email protected]這種方式匯入的css，會在整個頁面載入後，才會載入樣式。如果網路不好情況下，會先看到無樣式修飾的頁面，閃爍一下後，才會看到有樣式修飾的頁面。
而使用外部樣式表，會先裝載樣式表，這樣看到的就是有樣式修飾的頁面。
[email protected]不支援通過javascript修改樣式，而link支援。
優先順序問題
內聯樣式表>內部樣式表>外部樣式表