CSS簡單學習（一）-CSS介紹和CSS引入方式
阿新 • • 發佈：2018-12-07
CSS作用和發展
CSS（Cascading Style Sheet），稱之為層疊樣式表
- 一種專門描述結構文件的變現方式文件，主要用於網頁風格設計，包括字型大小，顏色，以及元素的精確定位等。
- 在傳統的網頁設計裡，使用CSS能讓單調的HTML網頁更富表現力
作用：
- 修飾HTML頁面
- 新增樣式，佈局，定位
- 比直接利用HTML完成樣式更好
- 功能更強大，可讀性好，佔用體積小
CSS目前也發展到3.0版本，使用HTML5和CSS3可以很強大
CSS引入方式
- 內聯樣式：
- 直接在元素上加style屬性，賦予屬性值，通常用於精確控制一個HTML元素的表現
- eg:
<p style="font-size: 20px;color: red;">這是一個段落</p> - 值裡面，可以有多個鍵值對："key:value;key:value..."
- 作用範圍：當前元素
- 內部樣式：
- 在head中加入style元素，裡面寫各種樣式
- 選擇器：
選擇器{ key:value; key:value; ...... } - eg：
<head> <!--內部樣式--> <style type="text/css"> p{ background-color: yellow;<!--背景色 --> } h2{ color: blue; } </style> </head> <body> <h2>這是一個標題</h2> <p>這也是一個段落</p> </body> - 作用範圍：可以針對當前頁面的多個元素修飾
- 連結外部樣式檔案：
- 在head中使用link標籤，引入外部樣式檔案
- eg：
<link href="style.css" type="text/css" rel="stylesheet"/> - css樣式檔案：直接寫上述選擇器就可以，如style.css檔案如下
P{ text-decoration: underline; } h2{ font-size: 24px; } - 把樣式和頁面內容徹底放開
- 作用範圍：可以修飾多個頁面
- 匯入外部樣式檔案（和連結外部樣式類似）：
- eg：
<!--兩種方式如下--> <style> /*@import "style.css";*/ @import url(style.css); </style> - 把樣式和頁面內容徹底放開
- 作用範圍：可以修飾多個頁面
- eg：
- 三四兩種方式對比
- 連結外部樣式：把CSS資源載入後，在展示頁面內容，顯示即有樣式的
- 匯入外部樣式：把HTML資源載入後，就顯示內容，CSS資源載入後再把樣式加上
- （如果網路較快，沒什麼差別，如果網路較慢，匯入外部樣式會先顯示HTML，然後慢慢顯示樣式）
- 總體對比
- 整體通用樣式，放到樣式檔案中
- 僅針對當前頁面效果，可以使用內聯樣式
- 快速有效的改變區域性元素，可以使用內聯樣式
- 優先順序：內聯樣式優先順序最高，
- 另外三個，按照前後順序，相同的屬性，後面的覆蓋前面的
- 不同的屬性都生效
示例程式碼
style.css
P{
text-decoration: underline;
}
h2{
font-size: 24px;
}CssAddMethod.html
<!--CSS的四種引入方式-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS四種引入方式</title>
<!--連結外部樣式檔案-->
<link href="style.css" type="text/css" rel="stylesheet"/>
<!--匯入外部樣式檔案-->
<style>
/*@import "style.css";*/
@import url(style.css);
</style>
<!--內部樣式-->
<style type="text/css">
p{
background-color: yellow;<!--背景色 -->
}
h2{
color: blue;
}
</style>
</head>
<body>
<h2>這是一個標題</h2>
<!--內聯樣式-->
<p style="font-size: 20px;color: red;">這是一個段落</p>
<p>這也是一個段落</p> <!--內聯樣式只作用於一個標籤，所以該標籤保持預設效果-->
</body>
</html>