伪类选择器，选择器优先级、字体文字背景属性、边框、display属性、盒子模型、浮动
伪元素选择器
'''通过css操作文本内容'''
1.修改首个字体样式
语法结构：
'''
元素:first-letter{
属性代码
}
'''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-letter {
color: red;
font-size: 66px;
}
</style>
</head>
<body>
<p>偏爱</p>
</body>
</html>
2.在文本开头添加内容
'''
元素:before{
属性代码
}
'''
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:before{
content: '***'; /*在文本开头添加三个*号*/
color: blue; /*设置字体颜色为蓝色*/
}
</style>
</head>
<body>
<p>偏爱</p>
</body>
</html>
3.在文本结尾添加内容
'''
元素:after{
属性代码
}
'''
使用场景
1.用于后面清除浮动带来的负面影响
2.用于网站的内容防爬
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:after{
content: '***'; /*在文本开头添加三个*号*/
color: blue; /*设置字体颜色为蓝色*/
}
</style>
</head>
<body>
<p class="c3">偏爱</p>
</body>
</html>
选择器优先级
# 研究方向
1.相同选择器
'就近原则':谁离标签越近就听谁的!!!
2.不同选择器
行内选择器 > id选择器 > 类选择器 > 标签选择器
字体样式
# 文字字体
font-family: "Microsoft Yahei"
# 字体大小
font-size: 24px
# 字体粗细
font-weight: lighter\bolder
# 字体颜色
方式1:
color: red;
方式2:
color: rgb(128, 128, 128);
方式3:
color: #4f4f4f;
"""
获取颜色的方式有很多
1.截图软件自带取色功能
微信、qq自带颜色编号 #4f4f4f
2.pycharm提供的取色器
左侧颜色块点击即可
"""
文字属性
# 文字对齐
text-align:center/left/right
# 文字装饰(重点)
"""a标签默认带下划线 并且有颜色(没有点击过是蓝色 点击过是紫色)"""
text-decoration: none; 主要就是用于去除a标签的下划线
text-decoration: line-through; 删除线
text-decoration: overline; 上边线
text-decoration: underline; 下划线
# 首行缩进
text-indent: 32px; # 首行缩进32px
背景属性
# 1.背景颜色
background-color: red;
# 2.背景图片
background-image:url("111.png");
"""背景图片如果没有设置的区域大 那么默认自动填充满"""
background-repeat:no-repeat\repeat-x\repeat-y 是否平铺
background-position:left top; 图片位置
background-attachment: fixed; 背景附着
"""
如果多个属性名具有相同的前缀 那么可以整合到一起编写(前缀名即可)
background:#336699 url('1.png') no-repeat left top;
"""
边框
# 1.自定义调整每个边的边框
border-left/top/right/bottom-color: black;
border-left/top/right/bottom-width: 5px;
border-left/top/right/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 也是隐藏标签 但是位置会保留
盒子模型
# 所有的标签其实都有一个盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
'ps:两个标签之间的距离 有时候可以用margin也可以用padding'
margin外边距
'''
margin(外边距)属性定义元素周围的空间。
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
'''
# 用法
margin-left: 0; 左
margin-top: 0; 上
margin-right: 0; 右
margin-bottom: 0; 下
margin: 1px 2px 3px 4px 上 右 下 左
margin: 1px 2px 3px 上 左右 下
margin: 1px 1px 上下 左右
margin: 1px 统一设置一个值
'''ps:margin可以使用负值，重叠的内容。'''
可以出现的值：
| 值 | 说明 |
|---|---|
| auto | 设置浏览器边距。 这样做的结果会依赖于浏览器 |
| length | 定义一个固定的margin（使用像素，pt，em等） |
| % | 定义一个使用百分比的边距 |
padding填充
padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
# 用法跟margin一直，把margin换成padding即可
padding填充可以使用的值
| 值 | 说明 |
|---|---|
| length | 定义一个固定的填充(像素, pt, em,等) |
| % | 使用百分比值定义一个填充 |
Float(浮动)(重要)
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素的移动方式
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边
# 彼此相邻的浮动元素
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
浮动的影响
浮动会造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面)
补充说明:
浮动的元素有时候也会遮挡住底下的区域 如果区域内有文本内容
那么浏览器会遵循文本内容优先展示的原则 会想法设法让文本展示出来
解决浮动造成的影响
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear(清除浮动) 属性。
clear 属性指定元素两侧不能出现浮动元素。
| 属性 | 描述 | 值 |
|---|---|---|
| clear | 指定不允许元素周围有浮动元素。 | left、right、both、none inherit |
| float | 指定一个盒子（元素）是否可以浮动。 | left right none inherit |
解决浮动万能公式
万能公式(固定搭配 记住就可以)
.clearfix:after {
content: '';
clear: both;
display: block;
}
"""
以后写网页 提前写好上面的代码
然后哪个标签塌陷了就给谁添加上clearfix类名即可
很多前端页面框架使用的也是clearfix类名
"""
