一、CSS概念 1.什么是CSS
官方解釋：CSS，即“ Style Sheet（層疊樣式表）”，是用來控制網頁的外觀的一門技術。
2.CSS的作用
前端基礎技術中一般分為三個知識點，Html、CSS和。Html是用來控制網頁結構，CSS控制網頁的外觀，則是控制網頁的行為。
一句話總結：控制頁面和美化外觀，做定位和布局。
3.為什么要使用CSS
開發中使用CSS可以將樣式和Html內容分離。各自進行獨立管理，便于開發、復用和維護。
二、CSS基本語法和規范 1.基本語法
<style>
img{
width: 100px;
height: 150px;
}
</style>
模擬一個img標簽的css樣式中。
完整示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>默認頁面</title>
</head>
<style>
img{
width: 300px;
height: 350px;
}
</style>
<body>
<img src="./images/test.jpeg" alt="" >
</body>
</html>
效果：一個寬度300px;高度350px的圖片。
2.CSS的引入方式
在Html中CSS一共有三種。
解釋引入方式 1.內部樣式表
內部樣式表網頁添加css樣式表的方式，又稱內嵌樣式。指的就是把CSS代碼和HTML代碼放在同一個文件中，用標簽包裹，在標簽體內添加選擇器、屬性名字和屬性值。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>默認頁面</title>
</head>
<style>
p{
font-size: 25px;
color: red;
}
</style>
<body>
<p>我是內部樣式表</p>
</body>
</html>
效果：
說明：這種方式的CSS會對頁面中所有滿足條件的選擇器都生效。
2.外部樣式表
創建單獨的.CSS文件,存放在工作區的css文件夾下。然后在頁面中使用 link標簽 或 @指令引入進來。
link標簽方式：
<link rel="stylesheet" href="文件路徑">
@指令方式：
<style>
@import 'Css文件路徑';
</style
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>默認頁面</title>
</head>
<link rel="stylesheet" href="./css/index.css">
<body>
<p>我是外部樣式Link標簽方式</p>
</body>
</html>
效果：
3.內聯樣式表
在元素中網頁添加css樣式表的方式，寫style屬性，在style屬性中編寫樣式。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>默認頁面</title>
</head>
<body>
<p style="font-size: 20px;color: darkmagenta;">我是內聯樣式表</p>
</body>
</html>
效果：
總結：CSS內容比較多，下一篇繼續講解CSS-選擇器。