前端（三）

一.伪元素选择器

/*首字调整>>>:也是一种文档布局的方式*/
p:first-letter {
            font-size: 48px;  /*字体大小*/
            color: red;
        }
/*在文本的前面通过css动态渲染文本>>>:特殊文本无法选中*/
p:before {
            content: '嘿嘿';
            color: red;
        }
<p>::before言而有信 品行端正 光明磊落 待人以诚</p>
/*在文本的后面通过css动态渲染文本>>>:特殊文本无法选中*/
p:after {
            content: '呵呵';
            color: greenyellow;
        }
<p>言而有信 品行端正 光明磊落 待人以诚::after</p>
/*
以后我们在编写爬虫程序爬取页面内容的时候如果没有正常文本
那么可能是因为伪元素选择器的问题
*/

二.选择器的优先级

/*
我们学习了三种css引入方式并且学习了很多选择器
那么如果出现多个选择器修改同一个标签样式 会优先参考谁的
    研究基本选择器即可
        标签选择器 类选择器 id选择器 行内选择器
*/
/*相同选择器不同导入方式
    选择器系统遵循就进原则 从上往下谁离标签更近谁说了算
不同选择器不遵循就近原则>>>:优先级
    行内选择器 > id选择器 > 类选择器 > 标签选择器*/

三.字体相关

/*宽和高
    只有块儿级标签可以设置 行内标签无法设置*/
      p {
            height: 1000px;
            width: 50px;
        }
/*字体大小*/
    font-size: 99px;  
/*字体大小一般有固定的大小参考(肉眼适应)*/
/*粗细*/
    font-weight: bolder;  
  font-weight: lighter;
/*文本颜色*/
    color:red;  
        color:#4e4e4e; 
        color:rgb(88,88,88)  
     rgba(88,88,88,0.2)  
/*文字对齐
    text-align: center;  
# 居中展示*/
/*文字装饰(很常用!!!)
    text-decoration: none;  # 主要用于去除a标签默认的下划线
7.首行缩进
    text-indent: 32px;  # 默认文字大小是16px*/

四.背景属性

background-color: orange;  /*背景颜色*/
background-image: url('url');  /*背景图片*/
background-repeat: no-repeat;  /*是否铺满*/
background-position:左右 上下;  /*图片位置*/
/*多个属性名前缀相同 那么可以简写*/
background:orange url('url');  /*一个个编写即可 不写就默认*/
  
/*如何实时修改图片位置
    浏览器找到标签的css代码 然后方向键上下按住即可动态调整*/

五.边框属性

    p {
            /*border-left-color: red;*/
            /*border-left-style: solid;*/
            /*border-left-width: 3px;*/
            /*多个属性有相同的前缀  一般都可以简写*/
            /*border-left: 5px red  solid;   !*没有顺序*!*/
            /*border-top:orange 10px dotted;*/
            /*border-right: black dashed 5px;*/
            /*border-bottom: deeppink 8px solid;*/
            /*多个属性有相同的前缀  一般都可以简写*/
            border: 5px red solid;  /*上下左右一致*/
        }
        div {
            height: 500px;
            width: 500px;
            border: 5px solid red;
              /*画圆*/
            border-radius: 50%;
        }

六.display属性

div {
            display: inline;  /*行内*/
        }
        span {
            /*display: block;  !*块级*!*/
            display: none;
            /*
            隐藏标签 页面上看不见也不再占用页面位置
            但是通过浏览器查找标签是可以看到的
            到后面学习django会讲跨站请求伪造(钓鱼网站)
            */
        }
        p {
            display: inline-block;
            /*
            具备块级标签可以修改长宽的特性
            也具备行内标标签文本多大就占多大的特性
            */
        }

七.盒子模型

/*
以快递盒为例
    1.快递盒与快递盒之间的距离            外边距(标签之间的距离)
    2.快递盒的厚度                                边框
    3.内部物品到盒子的距离                 内边距(文本内容到边框的距离)
    4.物品本身的大小                             文本大小
*/
/*body标签默认自带8px的外边距 在编写的时候应该提前去掉*/
     body {
            margin: 0;
        }
/*外边距(标签之间的距离)*/
    margin简写
      margin:0px;  # 上下左右都一致
    margin:10px 10px;  # 第一个控制上下 第二个控制左右
    margin:20px 10px 20px;  # 上 左右 下
    margin:10px 2px 3px 5px;  # 上 右 下 左
/*内边距(文本内容到边框的距离)*/
    padding简写
      padding:0px;  # 上下左右都一致
    padding:10px 10px;  # 第一个控制上下 第二个控制左右
    padding:20px 10px 20px;  # 上 左右 下
    padding:10px 2px 3px 5px;  # 上 右 下 左