导入方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
/*写css代码 先取标签span 选择器，全部改*/
span{
color:green;
}
</style>
<style>
@import "./css/test2.css";
/*或者在链接式里再导入*/
</style>
<!-- href 连接一个文件,后缀名一定是css,-->
<link rel="stylesheet" href="./css/test.css">
</head>
<body>
<!--引入css的方法
1、行内样式
直接在标签元素内定义 红色
2、内接样式
开发项目不要直接在head里写样式 绿色
3、外接样式
3.1 链接式
3.2 导入式
<link/>标签属于XHTML,@import是属性css2.1
使用<link/>链接的css文件先加载到网页当中，再进行编译显示
使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
-->
<div>
<p style="color:red">
行内改
</p>
</div>
<div>
<span>内接改</span>
</div>
<p>
链接式改
</p>
<a >导入式改</a>
<div>
</div>
</body>
</html>
基本选择器
1.标签选择器
所有的标签元素都可以作为目标标签
所有的相同标签都会更改
目标标签即使被嵌套也能选中
2.id选择器
同一页面不能重复
任何标签都可以设置id,命名要规范，大小写严格区分
id如果和class选中一个标签，id会覆盖class
3.类选择器
尽量用类选择器
类就是标签中定义class
任何标签都可以加class,可以重复
class 可以有多个名，空格分开
相同的样式设置成一个类，每个标签可以选择多个类组合叠加
4.通用选择器
选择所有元素
*{
}
用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test4</title>
<style>
/*标签选择器 标签名*/
p{
color: red;
}
/*id选择器 #id名*/
#test{
color:blue;
}
/*类选择器 .class名*/
.t1{
font-size: 30px;
}
.t2{
color: green;
}
.t3{
text-decoration: underline;
}
/*通用选择器*/
*{
color: blueviolet;
}
</style>
</head>
<body>
<div>
<!--相互组合-->
<p class="t1 t2" id="test">
小明
</p>
<p class="t2 t3">
小明
</p>
<p class="t1 t3">
小明
</p>
</div>
<!--div>p*3 tab 快捷键div下有三个p-->
<div>
<p></p>
<p></p>
<p></p>
<ol>
<li>通用选择器</li>
</ol>
</div>
</body>
</html>
效果
