JavaWeb8.3【CSS概述、CSS與HTML的結合方式】
阿新 • • 發佈：2021-06-26
-
概念： Cascading Style Sheets 層疊樣式表
- 層疊：多個樣式可以作用在同一個html的元素上，同時生效
- 頁面美化和佈局控制
-
好處：
- 功能強大
- 將內容展示和樣式控制分離
- 降低耦合度。解耦
- 讓分工協作更容易
- 提高開發效率
-
CSS的使用：CSS與html結合方式
-
內聯樣式
- 在標籤內使用style屬性指定css程式碼
- 如：
<div style="color:red;">hello css</div>
-
內部樣式
- 在head標籤內，定義style標籤，style標籤的標籤體內容就是css程式碼
-
外部樣式
- 定義css資原始檔。
- 在head標籤內，定義link標籤，引入外部的資原始檔
- 注意：
- 1,2,3種方式 css作用範圍越來越大（當前標籤-->當前頁面-->引入.css的所有頁面）
- 1方式不常用，後期常用2,3
- 第3種格式在html頁面中可以這樣引入：
-
<link rel="stylesheet" href="../css/a.css">
或
<style>
@import "../css/a.css";
</style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css&html結合方式1</title> </head> <body> <!--內聯樣式 在標籤內使用style屬性指定css程式碼--> <div style="color: red">hello css</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css&html結合方式2</title> <style> div{ color:blue; } </style> </head> <body> <!--內部樣式 在head標籤內，定義style標籤，style標籤的標籤體內容就是css程式碼--> <div>hello css</div> </body> </html>
div{
color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css&html結合方式2</title>
<!--<link rel="stylesheet" href="../css/a.css">-->
<!--或者也可以這樣引入-->
<style>
@import "../css/a.css";
</style>
</head>
<body>
<!--外部樣式
1. 定義css資原始檔。
2. 在head標籤內，定義link標籤，引入外部的資原始檔-->
<div>hello css</div>
</body>
</html>