2023.11.19笔记

 <!-- 选择器权重问题 -->

    <!--

        选择器的权重：

        标签选择器 0001

        class选择器 0010

        id选择器 0100

        伪类选择器 0010

        包含选择器 其权重等于涉及的选择器的权重之和

        属性选择器 0010

        伪元素选择器 0001

        内联样式 1000

    -->

<!-- 常见样式 -->

<!-- 字体相关样式 -->

<style>

    div{

         font-style:italic;                            /*是否斜体文本  */

          font-weight: 400;                        /*字体加粗（400为正常，小于则变细，大于则变粗  */

           font-size:20px;                          /*文字大小  */

           font-family:"微软雅黑" ;             /* 文字样式（默认为“微软雅黑”） */

           font:600 italic  20px/200px  "微软雅黑" ;     /*font可连写，但对于顺序有要求，如左所示 ，顺序为字体  大小  斜体/行高  样式 */

                                                        /* font连写可以控制文本行高！而且是同时控制！那个“/”不是“或”的意思！！ */

    }

</style>

 <div>盒子</div>  

 <!-- 文本相关样式 -->

<style>

    p{

        text-indent: 28px;     /*首行缩进（自己确认缩进多少px（较为死板，若字体大小发生变化就容易出错））  */

        text-indent: 2em;      /*首行缩进（用em，文本可进行自适应，一般用这个（此处即为缩进2个字））  */

        text-align: ;               /* 控制文本水平位置 */

        text-align: center;     /* 例：文本水平居中 */

        line-height:20px ;     /* 行高（文本竖直居中可通过调整行高实现） */

        /*  */

    }

</style>

<p>

    11月18日晚

</p>

<p>

    11月19日晚

</p>

<!-- 文本装饰 -->

<style>

    a{

        text-decoration: ;              /* 文本装饰 */

        text-decoration:none;       /* 文本装饰（此处为去除a链接默认样式 */

        color:blue;                        /*设置文字颜色  */

        color:rgb(255,255,255)    /*用rgb三原色调色来设置文字颜色  */

        /*  */

        /*  */

    }

    div{

        opacity:0.2           /* 透明效果(默认为1) */

    }

</style>

<!-- 列表相关样式 -->

<style>

li{

    list-style-type: none;          /* 无样式 */

    list-style-image:url();          /*以图片来作样式,（）中放图片  */

    list-style-position:inside;    /*指定标记框在主体块框中的位置  */

    list-style:none;                   /*连写,即为list-style-type: none的效果(通常用这个)  */

   

}

</style>

    <ul>

       <li>水果</li>

       <li>家具</li>

    </ul>

    <!-- 背景 -->

    <style>

        body{

            height:3000px;

            background-color: aqua;        /* 背景颜色 */

            background-image:url() ;         /*背景图片(默认会尽可能铺满整个网页)  */

            background-repeat: no-repeat;    /*控制图片循环,此处已经处理"默认会尽可能铺满整个网页"的情况,现在就不会出现这种情况  */

            background-position: left top;   /*设置背景图片初始位置(此处将其设置为左上角)  */

            background-attachment: fixed;    /*决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动(此处将其固定)  */

            background-size: cover;          /* 让背景图强行铺满网页 */

            background-repeat:y;             /*配合上一行一同使用,可让背景图尽可能铺满y轴  */

        }

        div{

            margin:0 auto ;                  /* margin 属性为给定元素设置所有四个（上右下左）方向的外边距属性 */

        }

    </style>

    <!-- 文本方向 -->

    <style>

        div{

            direction: ;/* 用于设置文本、表格列和水平溢出的方向*/

        }

    </style>

    <!-- 隐藏元素 -->

    <style>

        div{

        /* 三种隐藏方式 */

    display:none;        /* 直接移除 */

    visibility:hidden;    /* 隐藏内容，但会保留空间（简单来说就是有一块地方会空出来） */

    opacity:0;              /*将透明度调到0,视觉隐藏，也会保留空间 */

       }

    </style>

<!-- 元素种类:块元素,，行内元素 ,行内块元素

     块元素:默认独占一行,设置宽高,设置内外边距   如div,h1~h6,p,li等

     行内元素:无法直接设置宽高,内外间距   如a,span等

     行内块元素:可以直接设置宽高,不会独占一行  如img,input等

-->

<style>

    span{

    display: ;                   /*  设置元素是否被视为块或者内联元素以及用于子元素的布局   */

    display:inline-block ; /* 将其他元素转化为块元素   */

    }

</style>

<!-- 边框 -->

<style>

    div{

        border-width: 2px;           /*边框宽度  */              

        border-style: solid;          /*边框样式  */          

        border-color:azure  ;       /*边框颜色  */                

        border: 1px solid azure;  /*以上三个一定得一起设，否则没用,但写三个太麻烦了，所以可以连写,如左所示  */

        border-radius:30px ;          /*设置元素的外边框圆角  */

        border-collapse:collapse   /* 合并边框 */

    }

</style>

<!-- 文本域 -->

<style>

    textarea{

        width:33px;

        height:33px;

        resize:none;  /*resize 用于设置元素是否可调整尺寸，以及可调整的方向，此处为禁用尺寸调整  */

    }

    div{

        width:33px;

        height:33px;

        cursor:cell ;/*改变接触时鼠标的样式（此处为十字）  */

    }

</style>

<!--绝对定位  -->

<style>

     .one{

        position:relative;     /*相对定位  */

        position:absolute;   /*绝对定位 (子项做决对定位时，父项一定要加相对定位) */

        top:100px;              /*此处为上端与顶端的距离  */

        right:0px;                /*此处为右端与最右端的距离  */

        z-index:1;               /* 优先显示（默认为0，具体数字自己选择 */

                                       /* 若定位一直找不到，就会相对于浏览器定位 */

     }

</style>

<!-- 固定定位-->

<style>

    div{

        position:fixed    /*令目标一直停留在某一位置，跟随网址页面上升下落（无论页面位置如何）（就是百度百科里一直跟着的索引那样的效果）  */

    }

</style>

<!-- 粘性定位-->

<style>

    div{

        position:sticky;  /*令目标在网站页面抵达某一位置后一直停留在某一位置（无论页面位置如何）  */

        top:20px;         /*此行与上一行共用，可令目标在页面抵达距顶端20px的位置后一直停留在某一位置  */

    }

</style>