伪元素选择器， css修改

• 伪元素选择器

• 选择器优先级

• css修改文字属性

• css修改字体属性

• css修改其他属性

• 伪元素选择器

  1、修改首个字体样式(first-letter)
  <p>守得云开见月明 静待花开终有时</p>
    
  p:first-letter {
              color: darkslategray;  /* 修改字体的颜色*/
              font-size: 40px;  /* 修改字体的尺寸为40像素*/
          }
      
  2、在文本开头增加内容(before)
   p:before {  /* 在文本开头增加字体 */
              content:'enen';  /* 增加的内容 */
              color: #62680c;
              }
    
  3、在文本末尾增加内容(after)
    p:after {  /* 在文本末尾增加字体 */
              content: 'wuhu';  /* 增加的内容 */
              color: blueviolet;
              }
  

• 选择器的优先级

1、相同的选择器
<p>守得云开见月明 静待花开终有时</p>
          p:before {  /* 在文本开头增加字体 */
            content:'enen';  /* 增加的内容 */
        }
        p:before {  /* 在文本末尾增加字体 */
            content: 'wuhu';  /* 增加的内容 */
        }
效果:
    wuhu守得云开见月明 静待花开终有时
 '就近原则': 离得近就听谁的
    
    
2、不同选择器
<p class="c1" id="d1">守得云开见月明 静待花开终有时</p>
        .c1 {  /* 类选择器*/
            color: darkslategray;
        }
        #d1 {  /* id选择器*/
            color: blueviolet;
        }
        p {  /*标签选择器*/
            color: brown;
        }
 执行效果:1蓝紫2墨绿3大红
# 增加行内选择器后
<p style=color:#bd961a; class="c1" id="d1">守得云开见月明 静待花开终有时</p>
执行效果只能是#bd961a
'''
 行内选择器> id选择器 > 类选择器 > 标签选择器
'''

• 选择器总结

CSS选择器是所有选择器的基础————后期框架提供的、后期爬虫模块提供的

• css修改文字属性—字体样式

# 文字字体
  (更改字体font-family)
p {
   font-family: 华文楷体;
}

# 字体大小(font-size)
p {
    font-size: 25px;
   }

# 字体粗细(font-weight)
font-weight: lighter;  /*变细*/
font-weight: bolder;  /*加粗*/
    
# 字体颜色
方式一:
 p {
     color: brown;
    }  
方式二:
     p {
     color:rgb(128, 0, 128);
    }  
# 通过光学三原色红绿蓝调配， 范围(0~255)
方式三:
    p {
    color:#bd961a;
        }  
# 根据色卡自己找颜色
"""
  1、微信、QQ自带的截图功能内有提取颜色的功能
  2、pycharm提供的取色器
"""

• css修改文字属性

# 文字对齐
text-align: center;  /*居中*/
text-align: left;  /*左对齐*/
text-align: right;  /*右对齐*/
   
# 文字装饰(重点)
"""
 a标签默认带下划线， 并且还有颜色(没有点击时为蓝色， 点击之后为紫色)
"""
 /* 去除下面的线*/
text-decoration: none;

/* 删除线 */
 text-decoration: line-through;

/* 上边线 */
text-decoration: overline;

/* 下边线 */
text-decoration: underline;

# 首行缩进
/* 首行缩进 */
text-indent: 20px;
"""
 可以使用浏览器做样式的动态调整
  查找标签的css， 然后左键选中，通过方向键上下动态修改数值
"""

• css修改文字属性—背景属性

# 背景颜色 (background-color)
    background-color: darkslategray;
   
# 背景图片
background-image:url("图片地址");
background-repeat: no-repeat; 不填充
background-repeat: repeat-x;  横向填充
background-repeat: repeat-y;  纵向填充
# 图片位置设置
background-position: top;  朝上  
background-position: bottom; 最下
left 左， right 右 
# 控制背景附着
background-attachment: fixed;  背景附着
    
"""
 当多个属性名具有相同的后缀，我们就可以整合在一起， 写一个前缀名就可以
 background: darkslategray url('1.png') no-repeat left top;
"""

• css修改文字属性—边框

# 自定义边框的边
  border-left/top/right/bottom-color: black;  边框的颜色
  border-left/top/right/bottom-width: 5px;  边框的距离
  border-left/top/right/bottom-style: solid; 边框的呈现形式，实现、虚线等
 """
  dotted	点状虚线边框
  dashed	矩形虚线边框
  solid		实线边框
  """
# 同一调整每个边的边框
# 直接控制四个边框的形式
border: 10px solid yellowgreen;
    
# 画圆
border-radius: 50%

• css修改文字属性—display属性

"""
 只要块儿级标签可以设置长宽，行内标签是不可以的(长宽有内部文本决定)
"""
display:inline;  让标签具备行内标签的特性——不能修改长宽
display:block;   让标签具备块儿级标签的特性——可以修改长宽
display:inline-block;  使元素同时具备行内元素和块儿级元素的特点
display:none;  隐藏标签， 在页面上不保留位置， 也不显示
visibility:hidde;  也是隐藏标签但是页面上回显示出来一个空地

• 盒子模型

# 所有的标签都有一个盒子模型
盒子模型可以看成一个包装好的蛋糕
"""
 蛋糕盒组成部分:
  盒子模型
  内部物品 contect(内容)
  内部物品和盒子内部的距离 padding(内边距)
  盒子的厚度 border/边框
  盒子内部到盒子外部的距离margin(外边距)
  两个标签之间的距离， 有时候可以用margin也可以只用padding
"""
# 1、body标签默认自带8px的margin值， 写页面的时候要改掉
margin-top: 0;  上
margin-right: 0;  右
margin-bottom: 0;  下
margin-left: 0;  左
简写:
margin: 1px 2px 3px 4px	     上 右 下 左
margin: 1px 2px 3px			上 左右  下
margin: 1px 1px				上下	左右
margin: 1px					统一设置一个值 
   
# 2、padding用法和margin相同

盒子模型页面布局
标签水平居中，可以使用固定搭配
margin: 0 auto;

• 浮动(重要)

# 浮动的作用
float: left/right;
"""
  浮动是所有网站页面布局必备的， 可以将块儿级标签浮动起来，脱离正常的文档流
  是多个块儿级标签可以在一行显示(全部飘在了空中)
"""
# 浮动的影响
  浮动造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面，原本鼓鼓的口袋， 现在空了)
    
# 补充
 浮动的元素有时候也会遮挡底下的区域， 如果这个区域里面有文本内容， 那么浏览器会遵循文本内容优先展示的原则， 将文本展示出来

• 解决浮动造成的影响

clear: left;  规定元素左边不允许其他元素浮动， 
clear: right;  规定元素右边不允许其他元素浮动，
推导流程:
    1、直接写div然后写对应的长宽
    2、写div然后添加clear属性， 避免去查找长宽
      3.万能公式(固定搭配 记住就可以)
  	.clearfix:after {
            content: '';
            clear: both;
            display: block;
        }
 # 碰到那个标签塌陷了就给谁添加上clearfix类名即可