css：样式表，级联样式表，层叠样式表
一，css基础语法：
ss代码写在<style>里面 放在<head>标签中 大括号中写键值对语法
具体代码如下：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{color: red; font-family: "微软雅黑"; font-size: 50px; text-indent: 2em; text-align: center;}
</style>
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈
<br />
呵呵呵呵呵呵呵呵呵
</p>
</head>
<body>
</body>
</html>
二，实体化三属性
width；height；background
三，标签选择器
直接在css语法中写标签的名字就可以选中对应的标签
div代表大盒子，span代表小盒子
具体代码如下：
<style type="text/css">
p{color: red;}
div{color: blueviolet;}
span{color: yellow;}
</style>
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈</p><br />
<div>呵呵呵呵呵呵呵呵呵呵呵呵</div><br />
<span>嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</span>
image.png
四，id和class类选择器
1，id选择器语法：#名字 不能重复
具体代码如下：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a{color: red;}
#b{color: blue;}
#c{color: yellow;}
</style>
<p id="a">哈哈哈哈哈哈哈哈哈哈哈哈</p><br />
<p id="b">呵呵呵呵呵呵呵呵呵呵</p><br />
<p id="c">嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</p>
</head>
image.png
2，class类选择器语法： .名字 可以重复使用
具体代码如下：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a{color: red;}
.b{color: blue;}
.c{color: yellow;}
</style>
</head>
<body>
<p class="a">哈哈哈哈哈哈哈哈哈</p><br />
<p class="b">呵呵呵呵呵呵呵呵呵</p><br />
<p class="c">嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</p>
</body>
效果显示：
image.png
五，css的引入方式
- 1，内嵌式：style 标签放在head中
优点：方便书写，加载速度会相对快一些
缺点：html 和 css 代码没有分离，不方便修改 - 2，外链式：通过 link 放在<head> 标签中把外部文件引入html 文件中
优点：实现代码分离，方便修改
缺点：运行速度相对较慢
-3，行内式：一般不使用，代码量太大不方便修改
六,基础选择器权重：
id选择器>class类选择器>标签选择器
七，后代选择器
div span 用空格来连接，代表的意思是找到后代元素（后代元素可以是儿子 儿子的儿子）
具体代码如下：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{color: red;}
</style>
</head>
<body>
<div>
<p>哈哈哈哈哈哈哈 <br />
<span>
呵呵呵呵呵呵呵
</span>
</p>
</div>
</body>
八，并集，并列选择器
div，span，p1，h1，h2 用逗号连接选择器，代表这些元素被同时选中
具体代码如下：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div,span,p,.xx,#ll{color: red;}
</style>
</head>
<body>
<div>哈哈哈哈哈哈哈</div>
<span>呵呵呵呵呵呵</span>
<p>嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</p>
<h1 class="xx">嘻嘻嘻嘻嘻嘻嘻</h1>
<h2 id="ll">略略略略略</h2>
</body>
九，标签指定式，指定标签式
div.类名（标签和类名之间没有空格）
具体代码如下：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div.hh{color: red;}
</style>
</head>
<body>
<div>哈哈哈哈哈</div>
<div class="hh">呵呵呵呵呵呵呵呵呵</div>
</body>
十，高级权重对比
- 1，引入方式对比：
外链式和内嵌式权重相同，先写的被后写的覆盖，行内式的权重最大，想要覆盖它
可以给样式中添加 ！important 来吧权重提高 - 2，复合选择器权重：
id认为是100 class类名为10 标签为1
综合起来大，则权重高，若权重一样，则先写的被后写的覆盖
