Web前端 （CSS篇）
什么是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改变样式。