11.19笔记

1.权重问题：
类选择器权重为0010  选择器根据权重大小生效  权重大小会叠加
标签选择器：0001  class选择器：0010  id选择器：0100  伪类选择器：0010  包含选择器：权重之和  属性选择器：0010  伪元素选择器：0001  内联样式：1000
注 权重相同是，下面的生效

2.字体相关的样式
是否斜体文本 
font-style: italic;
字体粗细 
font-weight: bold;
字体大小
font-size: large;
声名字体 
font-family: "微软雅黑" ;
可以连写
font: 600 italic 29px/200px

3.文本相关样式：
/* 文本缩进   2em可以根据字体大小进行缩进 */
            /* text-indent: 2em; */

                  /* 文本水平居中 */
            /* div{text-align: center;
            width: 200px;
            height: 200px;
            background-color: aqua;}      
         */

         /* 设置行高  可以通过设置行高达成垂直居中  可与font连写 */
         /* p{
            line-height: 100px;
         } */

4.文本装饰
text-decoration:（none:去掉a链接默认样式   line-through：划线）
color:（设置字体颜色）

5.列表相关样式
/* 将无序列表前的黑点去掉 */
            /* list-style-type: none; */
            list-style: none;
            /* 将图片作为前面样式 */
            list-style-image: url();
            /* 改变标识的位置 */
            list-style-position: inside;

6背景
/* 背景颜色 */
            background-color: aqua;
            /* 背景图片 */
            background-image: url(../images/th.jfif);
            /* 不重复 */
            background-repeat: no-repeat;
            /* 使背景图固定 */
            background-attachment: fixed;
            /* 固定左上角 */
            background-position: left top;
            /* 强行铺满 */
            background-size: cover;
            /* 在y轴铺满 */
            background-repeat: repeat-y;
        }

7.文本方向
 direction: rtl;

8隐藏元素
display: none
visibility: hidden
opacity: 0

9元素类型
/* 元素：块元素，行内元素，行内块元素
        块元素：默认独占一行，设置宽高，设置内外边距   div h1-h6 p li
        行内元素：无法直接设置宽高，内外间距，多个元素可以放在同一行 a span
        行内块元素：可以直接设置宽高，不会独占一行 img input

         */
         span{
            display: block;
            /* 将其转化为块元素 */
         }
         div{
            display: inline-block;
            /* 将其转化为行内块元素 */
         }

10.边框
* border-width: 10px;  宽
            border-style: double;  边框线
            border-color: black;   边框颜色
            border-radius: 10px;   弧度*/

11.表格
border-collapse: collapse
取消边框重叠

12.文本域
 textarea{
            resize: none;
        }
        /* 使文本框不能拖拽 */
        div{
            width: 300px;
            height: 300px;
            background-color: red;
            cursor: cell;
            /* 改变鼠标样式 */
        }

13.绝对定位
position: relative;
            /* 相对定位 */
 position: absolute;
            /* 绝对定位  子代作绝对定位会根据父代，所以父代一定要有相对定位，不然会根据浏览器定位 */
top: 200px;
            /* 距离顶部200px */
            right: 0px;
            /* 距离右边0px */
            z-index: 1;
            /* 优先显示 */

14.固定定位
 position: fixed

15.粘性定位
position: sticky