伪类选择器
<!--通过class操作文本内容-->
1.修改首个字体样式
p:first-letter{color:red;font-size:33px;}
2. 在文本开头添加内容
p:before{content:'aa';color:blue;}
3.在文本结尾添加内容
p:after{content:'aa';color:green;}
使用场景
1.用于后面清除浮动带来的负面影响
2.用于网站内容防爬
选择器优先级
# 研究方向
1.相同选择器
'就近原则':相同选择器谁离标签近就听谁的
2.不同选择器
行内选择器 > id选择器 > 类选择器 > 标签选择器
即锁定目标越精准，优先级则越高
选择器总结
css选择器是所有选择器的基础
后期框架、爬虫模块提供
所以css选择器很重要，为后期学习前端框架和爬虫奠定基础
字体样式
1.文字字体
font-family:"微软雅黑"
2.字体大小
font-size:22px
3.字体粗细
font-weight:lighter\bolder
4.字体颜色
方式1：color:red
方式2：color:rgb(128,128,128)
方式3：color:#4f
<!--
获取颜色的方式有很多
1.截图软件自带取色功能
微信、qq自带颜色编号 #4f4f4f
2.pycharm提供颜色的去色器
左侧颜色块点击即可
-->
![]()
文字属性
1.文字对齐
text-align:ccenter/left/right
2.文字装饰
<!--a标签默认带下划线 并且有颜色（没有带年纪过蓝色 点击过紫色）-->
text-decoration:none; 主要就是用于去除a标签的下划线
text-decoration:line-throught; 删除线
text-decoreation:overline; 上边线
text-decoration: underline; 下边线
3.首行缩进
text-indent: 32px; 首行缩进32px
<!--
补充：可以使用浏览器做样式的动态调整
查找到标签的css然后左键选中 通过方向键上下动态修改数值
-->
背景属性
1.背景颜色
background-color: red;
2.背景图片
background-imge:url("图片地址");
<!--背景图片如果没有设置区域大 那么默认自动填充满-->
background-repeat:no-repeat\repeat-x\repeat-y 是否平铺
background-position:left top; 图片位置
background-attachment: fixed; 背景附着
<!--
如果多个属性名具有相同的前缀 那么可以整合到一起编写（前缀名即可）
background:#334455 url('aa.png') no-repeat left top;
-->
边框
1.自定义调整每个的边框
boder-left/right/top/bottom-color:black;
boder-left/right/top/bottom-width:5px;
boder-left/right/top/bottom-style:solid;
2.border: 5px solid black; 顺序不重要，但三个属性都要有
<!--
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实现边框
-->
3.圆角边框
border-radius: 50%
如果长款一样那么就是园 不一样就是椭圆
display属性
<!--
只要块级标签可以设置长宽，行内标签是不可以的（长宽由内部文本决定）
-->
display:inline 让标签具备行内标签的特性（不能设置长宽）
display:block 让标签具备块级标签的特性（可以设置长宽）
display:inline-block 是元素同时具有行内元素和块级元的的特点
display:none 隐藏标签（重点）页面撒谎给你不会保留位置也不显示
visibility:hidde 也可以隐藏标签但是位置会保留
![]()
盒子模型
所有标签其实都是一个盒子模型
<!--
快递盒组成部分
盒子模型
内部物品
content（内容）
内部物品于盒子内部的距离
padding（内边距、内填充）
盒子厚度
border\边框
盒子与盒子之间的距离
margin（外边距）
两个标签之间的距离 有时候可以用margin也可以是padding
-->
1.body标签默认自带8px的margin值 我们在编写页面之前应该去掉
margin: 1px 2px 3px 4px 上 右 下 左
margin: 1px 2px 3px 上 左右 下
margin: 1px 2px 上下 左右
margin: 1px 统一设置个值
2.padding用法于margin一致
盒子模型页面布局
标签水平居中可以使用固定搭配
margin: 0 auto;
浮动
1.浮动的作用
float: left/right;
<!--
浮动是所有网站页面布局必备的 可以将块级标签浮动起来若离正常的文档流
也就是 多个块级标签子啊一行显示
-->
2.浮动的影响
浮动会造成父标签塌陷（类似将口袋里面的东西拿出来，而口袋瘪了下去）
补充说明：浮动的元素有时候也是会遮挡底下的区域 如果区域内右文本内容 那么浏览器会遵循文本内容优先展示的原则 会想方设法让文本展示出来
解决浮动造成的影响
clear:left; 规定元素的那一侧不允许其他浮动
1.直接写div然后写对应的长宽
2.写div然后添加clear属性 避免去查找长宽
3.万能公式（固定搭配
.c:after{
content:'';
clear:both;
display:block;
}
<!--
以后写网页 提前写好上面的代码
然后那个标签塌陷了就i给谁添加c类名即可
很多前端页面框架使用也是c类名
-->
浙公网安备 33010602011771号