什么是CSS？
css(Cascading Style Sheets)是层叠样式表或级联样式表，是一组设置规则，用于控制web页面外观。
为什么使用CSS?
CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。
CSS 实例
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}CSS的特点：
css规则是由两部分组成：选择器和一条声明或多条声明。
什么是选择器：
选择器通常指你需要改变的HTML元素的标签名、类名或ID名。
什么是声明？
每一组声明都有一个属性和值组成，属性是你希望改变的样式名。
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* *（通配符）选择器选中所有元素 */
*{
color: #ff4100;
width: 100px;
}
/* 选中#dis下所有的元素 */
#dis *{
color: blue;
width: 100px;
}
</style>
</head>
<body>
<div id="dis" class="dec">
<p>#dis下的p标签</p>
<h2>#dis下的h2标签</h2>
... ...
</div>
</body>CSS 的引入方式
css常用引入方式：标签内（内联） 头部引入 外部引入
CSS是和html结合使用
根据定义CSS的位置不同，分为标签内（内联）、头部样式和外部样式。
头部引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的引入方式</title>
<!-- 头部引入 -->
<style type="text/css">
h1{
color: yellow;
}
</style>
</head>
<body>
<h1>你好，世界！！！</h1>
</body>
</html>
内联（标签内）引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的引入方式</title>
</head>
<body>
<!-- 标签内（内联） -->
<p style="color: red;">熊大最帅！！！</p>
</body>
</html>外部引入
/* index.css */
/* css外部文件 */
li{
color: green;
}
.ps{
color: pink;
}@import 引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的引入方式</title>
<!-- 外部引入-方法1 -->
<style type="text/css">
@import url("./css/index.css");
/*这里不予许在写任何样式*/
</style>
</head>
<body>
<h1 class="ps">你好，世界！！！</h1>
<ul>
<li>你好，前端！！！</li>
</ul>
</body>
</html>link引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的引入方式</title>
<!-- 外部引入-方法二 -->
<link rel="stylesheet" type="text/css" href="./css/02cssyinru.css"/>
</head>
<body>
<h1 class="ps">你好，世界！！！</h1>
<ul>
<li>你好，前端！！！</li>
</ul>
</body>
</html>
引入方式的优先级及语法
优先级（就近原理）
标签内（内联） ==> 头部引入 ==> 外部引入
<!-- 优先级演示 -->
<p class="ps" style="color: red;">最终的效果</p>语法及优缺点
标签内（内联）
语法：<p style="属性:值;..."></p> 优点：优先级高 缺点：冗余代码过多，不利于维护 适用场景：个别特殊样式适用。
头部引入
语法：
<head>
<style>
p{
属性:值;
属性:值;
...
}
</style>
</head> 优点：速度快，没有服务器请求压力 。
缺点：不易改版，代码可读性差，不易于前后台沟通 。
适用场景：单页面适用。
外部引入
语法：
1、<style>
@import url("外部css文件");
</style>
2、<link rel="stylesheet" href="外部css文件">优点：一个文件可以控制多个页面样式，利于维护，利于前后台沟通 。
缺点：冗余代码过多，有服务器请求压力 。
适用场景：各大企业官网。
link与@import的区别
区别1：
link是XHTML标签，除了加载css外还可以加载RSS等其他事务 @import是属于css范畴，只能加载css 。
区别2：
link是XHTML标签，无兼容性问题 @import是在css2.1提出的，低版本浏览器不支持
区别3：
link引入css时，在页面加载时同时加载css @import需要HTML页面完全载入后再加载css 。
区别4：
link支持使用javascript控制DOM改变样式 @import不支持使用javascript控制DOM改变样式。