前端 字体 颜色 背景 边框 盒子模型

内容概要

• 伪元素选择器
• 字体样式
• 颜色
• 背景、边框
• 盒子模型

内容详细

伪元素选择器

        # 首字调整>>>:也是一种文档布局的方式
        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选择器 > 类选择器 > 标签选择器

字体相关

        1.宽和高
            只有块儿级标签可以设置 行内标签无法设置
            p {
                    height: 1000px;
                    width: 50px;
                }
        2.字体大小
            font-size: 99px;  # 字体大小一般有固定的大小参考(肉眼适应)
        3.粗细
            font-weight: bolder;  
          font-weight: lighter;
        4.文本颜色
            color:red;  # 第一种
          color:#4e4e4e;  # 第二种
          color:rgb(88,88,88)  # 第三种
                        rgba(88,88,88,0.2)  # 最后一个参数调整透明度(0-1)
        5.文字对齐
            text-align: center;  # 居中展示
        6.文字装饰(很常用!!!)
            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;
                }
        1.外边距(标签之间的距离)
            margin简写
            margin:0px;  # 上下左右都一致
            margin:10px 10px;  # 第一个控制上下 第二个控制左右
            margin:20px 10px 20px;  # 上 左右 下
            margin:10px 2px 3px 5px;  # 上 右 下 左
        2.内边距(文本内容到边框的距离)
            padding简写
            padding:0px;  # 上下左右都一致
            padding:10px 10px;  # 第一个控制上下 第二个控制左右
            padding:20px 10px 20px;  # 上 左右 下
            padding:10px 2px 3px 5px;  # 上 右 下 左

__EOF__

本文作者：向上
本文链接：https://www.cnblogs.com/ydy001/p/15846889.html
关于博主：没有收拾残局的能力，就别放纵善变的情绪
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！