CSS

css简介

        # 层叠样式表>>>:就是给HTML标签修改样式
        语法结构
            选择器 {
                属性名1:属性值1;
                属性名2:属性值2
          }
        注释语法
            /*注释内容*/ 
        引入方式
            1.style内部直接编写css代码
            平时学习、练习的时候推荐使用
          2.link标签引入外部css文件
            正式工作、实际生产环境推荐使用
          3.标签内直接书写
            一般情况下不推荐使用 容易造成荣誉现象
        """
        单独开设的css文件内代码也是非常多的 可以借助于注释管理	
            /*导航条样式*/	
            /*侧边栏样式*/
        """

基本选择器(重要)

        """
        css是用来调节标签样式的 那为什么需要学选择器呢?
            因为同一个页面上有很多相似的标签 并且这些标签在不同的位置有不同的样式 所以为了能够区分 我们肯定先需要学习如何查找指定的标签
        """
        1.标签选择器>>>:通过标签名直接查找
            /*查找所有的div标签*/
            div {  
                    color: red;
                }
        2.类选择器(关键符号为句点符.)>>>:通过class值查找标签
            /*查找所有含有c1样式类的标签*/
            .c1 {
                    color: red;
                }
        3.id选择器(关键符号为警号#)>>>:通过id值查找标签
            /*查找id为d1的标签*/
            #d1 {
                    color: orange;
                }
        4.通用选择器(了解)
            /*body内所有的标签*/
            * {
              color: darkgray;
            }

组合选择器(重点)

        """
        为了区分嵌套标签之间的关系 我们发明了一种称呼
            <div>
                <p>
                    <span></span>
                </p>
            </div>
        span是p的儿子 是div的孙子也可以说是div的后代
        p是div的儿子也是div后代 是span的父亲
        div是p的父亲是span的爷爷 也可以说是他们的祖先
        """
        1.后代选择器(特征为空格)
            /*查找div内部所有的后代span*/
            div span {  
                    color: red;
                }

        2.儿子选择器(特征>)
            /*查找div内部所有的儿子span*/
            div > span { 
                    color: greenyellow;
                }

        3.毗邻选择器(特征为+)
            /*查找同级别下面紧挨着的第一个span(不能有其他标签间隔)*/
            div + span {  
                    color: pink;
                }

        4.弟弟选择器(特征为~)
            /*查找同级别下面所有的span(不需要紧挨着)*/
            div ~ span {  
                    color: deeppink;
                }

属性选择器

        # 标签可以有默认的属性也可以自定义属性
            <p id="d1" class="c1" name="jason" pwd="123">123</p>


        [name] {  /*查找含有name属性名的标签*/
                    color: red;
                }

        [name='jason'] {  /*查找含有name属性名并且值为jason的*/
                    color: red;
                }

        p[name='jason'] {  /*查找含有name属性名并且值为jason的p*/
                    color: red;
                }

分组与嵌套

        # 多个相同选择器并列使用
        div,span,p {  /*查找div或者span或者p*/
                    color: red;
                }
        # 多个不同选择器并列使用
        div,#d1,.c1 {  /*标签查找div id查找d1 类查找c1*/
                    color: red;
                }
        # 不并列同样可以使用组合选择器
        .c1 p {   /*查找class为c1的后代p标签*/
                    color: red;
                }
        # 直接筛选
            div#d1 {  /*查找id为d1的div标签*/
            color: red;
          }
          div.c1 {  /查找class为c1的div标签/
            color: red;
          }
        """
        练习题
            #d1>div>.c1>span.c2
            查找id为d1的标签内部的儿子div
            并且在儿子div内部查找class为c1的儿子标签
            并且在该儿子内部查找class为c2的儿子span
        """

伪类选择器

        /*鼠标悬浮在上面*/
        a:hover {   # 重点掌握 很多网址都在用!!!
                    color: orange;
                }
        """a标签默认的颜色会变化 第一次是蓝色 后面是紫色"""


        input:focus {
                    background-color: red;
                }
        """我们将input框被用户点击即将录入数据的过程看成是focus状态(聚焦状态)"""

__EOF__

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