WEB前端基础之SCC（字体颜⾊背景-盒⼦模型）⽬录
⼀：伪元素选择器
1.⾸字调整>>>：也是⼀种⽂档布局的⽅式
p:first-letter {
font-size: 48px;  /*字体⼤⼩*/
color: red;
}
2.在⽂本的前⾯通过css动态渲染⽂本>>>：特殊⽂本⽆法选中
p:before {
html设置字体颜属性content: '嘿嘿';
color: red;
}
标签
<p>::before⾔⽽有信品⾏端正光明磊落待⼈以诚</p>
3.在⽂本的后⾯通过css动态渲染⽂本>>>：特殊⽂本⽆法选中
p:after {
content: '呵呵';
color: greenyellow;
}
<p>⾔⽽有信品⾏端正光明磊落待⼈以诚::after</p>
注意
1.以后我们在编写爬⾍程序爬取页⾯内容的时候如果没有正常⽂本
2.那么可能是因为伪元素选择器的问题
⼆：选择器的优先级
我们学习了三种css引⼊⽅式并且学习了很多选择器
1.选择器优先级
那么如果出现多个选择器修改同⼀个标签样式会优先参考谁的
研究基本选择器即可
标签选择器类选择器 id选择器⾏内选择器
2.相同选择器不同导⼊⽅式(相同距离优先)
相同选择器不同导⼊⽅式(相同距离优先)
选择器系统遵循就进原则从上往下谁离标签更近谁说了算
3.不同选择器不遵循就近原则>>>：优先级
不同选择器不遵循就近原则>>>：优先级
⾏内选择器 > id选择器 > 类选择器 > 标签选择器
三：字体相关
1.⾼度和宽度
只有块⼉级标签可以设置⾏内标签⽆法设置
<style>
p {
height: 1000px;  /*⾼度*/
width: 50px; /*宽度*/
}
</style>
2.字体⼤⼩
font-size: 99px;  # 字体⼤⼩⼀般有固定的⼤⼩参考(⾁眼适应)
3.字重(粗细)
font-weight⽤来设置字体的字重（粗细）。
font-weight: bolder;  /*字体粗*/
font-weight: lighter;  /*字体细*/
值描述
normal默认值，标准粗细
bold粗体
bolder更粗
lighter更细
100~900设置具体粗细，400等同于normal，⽽700等同于bold
inherit继承⽗元素字体的粗细值
四:⽂本颜⾊
颜⾊属性被⽤来设置⽂字的颜⾊。
颜⾊是通过CSS最经常的指定：
⼗六进制值 - 如: ＃FF0000
⼀个RGB值 - 如: RGB(255,0,0)
颜⾊的名称 - 如:  red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了⾊彩的透明度/不透明度，它的范围为0.0到1.0之间。
1.第⼀种⽅式
color:red;
2.第⼆种⽅式(颜⾊编码)
color:#4e4e4e;
3.第三种⽅式(0-255)
color:rgb(88,88,88)
rgba(88,88,88,0.2)  # 最后⼀个参数调整透明度(0-1)
五:⽂字属性
text-align 属性规定元素中的⽂本的⽔平对齐⽅式。
1.⽂字对齐
text-align: center;  # 居中展⽰
值描述
left左边对齐默认值
right右对齐
center居中对齐
justify两端对齐
2.⽂字装饰(很常⽤)
text-decoration 属性⽤来给⽂字添加特殊效果。
3.主要⽤于去除a标签默认的下划线
a {
text-decoration: none;
}
值描述
none默认。定义标准的⽂本。underline定义⽂本下的⼀条线。overline定义⽂本上的⼀条线。
line-through定义穿过⽂本下的⼀条线。
inherit继承⽗元素的text-decoration属性的值。
4.⾸⾏缩进
默认⽂字⼤⼩是16px 32像素：
p {
text-indent: 32px;
}
六：背景属性
1.背景颜⾊
<style>
div {
background-color: orange;
height: 1600px;
width: 1600px;
}
</style>
2.背景图⽚
background-image: url('url');
3.背景重复
是否铺满
background-repeat: no-repeat;
repeat(默认)：背景图⽚平铺排满整个⽹页
repeat-x：背景图⽚只在⽔平⽅向上平铺
repeat-y：背景图⽚只在垂直⽅向上平铺
no-repeat：背景图⽚不平铺
4.图⽚位置
background-position：左右上下;
5.指定位置
background-position:200px 200px;
6.左右上下居中
background-position:center center;
7.多个属性名前缀相同那么可以简写
background:orange url('url') no-repeat center center;
⼀个个编写即可不写就默认
8.如何实时修改图⽚位置
浏览器到标签的css代码然后⽅向键上下按住即可动态调整
七：边框属性
1.左侧边框
p {
/*border-left-color: red;*/
/*border-left-style: solid;*/
/*border-left-width: 3px;*/
}
/多个属性有相同的前缀⼀般都可以简写/ 2.简写(左侧边框)
/
*border-left: 5px red  solid;  !*没有顺序*!*/
3.简写(上下左右边框)可⾃定制
h1 {
/*border-left: 5px red  solid;
/*上侧边框*/