CSS修改样式基本内容
- 1 > 选择器
- 1.1 > 伪元素选择器
- 1.2 > 选择器优先级
- 1.3 > 选择器总结
- 2 > 字体样式
- 3 > 文字属性
- 4 > 背景属性
- 5 > 边框
- 6 > display属性
- 7 > 盒子模型
- 8 > 浮动(重要)
- 9 > 解决浮动造成的影响
1 > 选择器
1.1 > 伪元素选择器
伪元素选择器的作用就是通过css来操作文本内容。具体操作代码如下：
1 > 修改首个字体样式
p:first-letter {
color: red;
font-size: 48px;
}2 > 在文本开头添加内容
p:befor {
content: '你好';
color: blue;
}3 > 在文本结尾添加内容 。它的使用作用是第一个用于后面清除浮动带来的负面影响，或者是用来网站的内容的防爬。
p:after {
content: '结束了';
color: yellow;
}1.2 > 选择器优先级
当选择器相同时，使用 ‘就近原则’ ：谁离标签近就听谁的。白话的意思就是那个选择器离标签更接近就使用选择器当中的样式。
当选择器不同的时候，选择器的优先级如下：
行内选择器 > id选择器 > 类选择器 > 标签选择器1.3 > 选择器总结
CSS选择器是所有选择器的基础，例如后期框架提供的选择器或者爬虫模块提供的选择器，所有CSS选择器是必须要掌握熟练的知识，这样在后期学前端框架和爬虫都会比较轻松。
2 > 字体样式
1 > 修改文字字体，格式如下：
font-famil:"Microsoft Yahei" # 修改字体为微软雅黑2 > 修改字体大小，格式如下:
font-size: 24px3 > 修改字体粗细，格式如下：
font-weight: lighter\bolder # 细\粗4 > 修改字体颜色，格式如下：
获取颜色的方式有很多，最常见的就是截图软件自带的取色功能（微信、qq自带颜色编号）。所有在pycharm中也是有提供的取色器。(在左侧颜色块点击即可)
方式 1：
color: red方式 2：
color: rgb(128, 128, 128)方式3：
color: #4f4f4f;3 > 文字属性
1 > 修改文字对齐方式
text-align: center/left/right # (居中/左对齐/右对齐) 2 > 文字装饰，方法如下：
在修改文字装饰时我们需要了解，a标签默认带下划线 并且有颜色(没有点击过是蓝色 点击过是紫色)
操作代码 | 代码作用 |
text-decoration: none; | 主要就是用于去除a标签的下划线 |
text-decoration: line-through; | 删除线 |
text-decoration: overline; | 上边线 |
text-decoration: underline; | 下划线 |
3 > 首行缩进
修改文字首行缩进是根据文字的字体大小来操作的。例如字体大小若是16px，那么它的首行缩进代码应该是以下这种：
text-indent: 32px; # 将字体大小为16px的文字首行缩进两个字符对于文字样式的动态调整我们也可以通过浏览器来设置，先查找到标签的css 然后左键选中，通过方向键上下动态修改数值。
4 > 背景属性
1 > 背景颜色
backgroud-color: red; # 将背景颜色换成红色2 > 背景图片
backgroud-image:url("111.png");
'''
当背景图片如果没有设置的区域大 那么默认会自动填充满整个区域
'''我们也可以根据具体参数来修改图片填充的方式，例如：
backgroud-repeat:no-repeat(不填充)\repeat-x(横线填充)\repeat-y(纵向填充)我们也可以根据具体参数来修改图片的位置：
backgroud-position:left top我们也可以根据具体参数来修改图片是否附着在背景上:
background-attachment: fixed; # 背景附着如果多个属性名具有相同的前缀 那么可以整合到一起编写(前缀名即可), 例如：
background:#336699 url('1.png') no-repeat left top;5 > 边框
设置边框颜色：
border-left/top/right/bottom-color: black; (将 左\上\右\下 的边框颜色设置成黑色)设置边框的宽度：
border-left/top/right/bottom-width: 5px; (将 左\上\右\下 的边框宽度设置成 5px)设置边框的样式：
border-left/top/right/bottom-style: solid; (将 左\上\右\下 的边框样式设置成 solid)
'''
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
'''我们可以 将上述三种方式统一来做边框的调整，操作如下：
border: 5px solid black; # 顺序无所谓，只要给三个参数就可以设置圆形边框：我们先需要将块儿级标签大小设置成统一长宽，若长宽不一样就不是圆形，则会变成椭圆了。
border-radius: 50%6 > display属性
该属性主要是用于控制HTML元素的显示效果。
值 | 含义 |
display:inline | 让标签具备行内标签的特性(不能设置长宽) |
display:block | 让标签具备块儿级标签的特性(可以设置长宽) |
display:inline-block | 使元素同时具有行内元素和块级元素的特点 |
display:none | 隐藏标签(重点) 页面上不会保留位置也不显示 |
visibility:hidde | 也是隐藏标签 但是位置会保留 |
7 > 盒子模型
所有的标签其实都有一个盒子模型，我们可以将盒子模型看作成一个个的快递盒。这个快递盒的组成部分分为以下几个部分。
快递盒组成部分 盒子模型
内部物品 content(内容)
内部物品与盒子内部的距离 padding(内边距、内填充)
盒子的厚度 border\边框
盒子与盒子之间的距离 margin(外边距)
# 两个标签之间的距离有时候可以用margin 也可以用paddingboby标签当中有一个默认自带8px的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 统一设置一个值
''' padding用法与margin一致
盒子模型页面布局的方法：标签的水平居中可以使用固定搭配
margin: 0 auto;8 > 浮动(重要)
浮动是所有网站页面布局必备的 可以将块儿级标签浮动起来脱离正常的文档流，是多个块儿级标签可以在一行显示(全部飘在了空中)
格式如下：
float: left/ right; 浮动会造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面)。
浮动的元素有时候也会遮挡住底下的区域 如果区域内有文本内容，那么浏览器会遵循文本内容优先展示的原则 会想法设法让文本展示出来。
9 > 解决浮动造成的影响
解决这个问题呢 我们可以在加上一个关键字参数，如下：
clear: left; # 规定元素的哪一侧不允许其他浮动元素解决思路：
1.直接写div然后写对应的长宽
2.写div然后添加clear属性 避免去查找长宽
3.万能公式(固定搭配 记住就可以)
.clearfix:after {
content: '';
clear: both;
display: block;
}以后写网页 提前写好上面的代码 ，然后哪个标签塌陷了就给谁添加上clearfix类名即可，很多前端页面框架使用的也是clearfix类名。
