web前端11.19笔记

权重问题

标签选择器  0001
类选择器    0010
id选择器   0100
伪类选择器  0010
包含选择器   权重之和
属性选择器  0010
伪元素选择器  0001
内联样式   1000

字体相关样式

是否斜体文本 font-style:italic;
加粗 font-weight:400/800/hold;
字体大小 font-size:...px;
字体类型 font-family:"微软雅黑“；
  连写  font:600 italic ...px/200px "微软雅黑”

  字体相关样式

缩进（开头空格）p{
                font-size:28px;
                text-indent:2em;
                line-height:20px;
               }




           div{
               width:800px;
               height:200px;
               background-color:....;
               text-align:center;right;
               line-height:200px;
            }

文本装饰

去除a链接默认样式
                a{
                  text-decoration:none/line-through;
                 }
设置文字颜色 
          color:rgb(red,green,blue);
          color:reba(red,green,blue,0-1);



         div{
             width:120px;
             height:120px;
             background-color:....;
             opacity:0.2;透明度
           }

列表相关样式

li{
   list-style-type:none/circle;
   list-style-image:url(../....);
   list-style-position:inside;
 连写 list-style:none;
   }

背景

body{
     height:3000px;
     background-color:...;
     background-image:url(../...);
     background-repeat:no-repeat/repeat-y;
     background-attachment:fixed;
     background-size:cover;
   }

文本方向

div{
    direction:rtl;
    }

隐藏元素

div{
   1.display:none;
   2.visibility:hidden;
   3.opacity:0;
      width:...px;
      height:..px;
      background-color:...;
   }

元素类型

块元素：独占一行，设置宽高，设置内外边距
          div,h1-h6,p,li
行内元素：无法直接设置宽高，内外间距，多个元素可以放在同一行
           a,span
          span{
               display:block;
               width:200px;
               height:...px;
               background-color:...;
            }
行内块元素：可以直接设置宽高，不会独占一行
           img,input
            div{
                display:inline-black;
                width:..px;
                height:...px;
                background-color:...;
             }

边框

div{
    width:...px;
    height:...px;
    background-color:...;
    border-width:2px;
    border-style:solid/dotted/double
    border-color:black;
     连写 border:1px solid red;
    border-radius:10px/20%;
  }

表格

td{
   border:1px solid black;
   width:...px;
   height:..px;
   text-align:center;
  }
table{
     border-collapse:collapse;
  }

文本域

textarea{
        resize:none;
    }
  
  cursor:pointer/cell

绝对定位

.father{
       position:relative;
       width:...px;
       height:400px;
       background-color:...;
     }
.son1{
      position:absolute;
      top:200px;
      right:0px;
      z-index:1;
      background-color:...;
     }
.son2{
      position:absolute;
      top:150px;
      right:0px;
      background-color:...;
     }

固定定位

div{
   position:fixed;
   bottom:...px;
   right:..px;
   height:..px;
   background-color:...;
  }

粘性定位