HTML&CSS-Day05

一、选择器（补）

1.否定伪类选择器
从一类元素中剔除一些元素 p p2
p:not(.p2){}
2.伪元素选择器
::before  ::after 
::first-line第一行 ::first-letter第一个字符
3.属性选择器
 div[id='one']{}
 以什么什么开头属性
 input[name|='user']只能选取以-隔开的属性名
 css3
 input[name^='user']
 以什么什么结尾
 input[name$='name']
 css2必须设置属性全写name='username'
 input[name~='username']
 css3选取特定的字符
 input[name*='u']
4.通配符选择器 普遍选择器 *表示选中所有标签
 取消标签的默认样式
 *{
    list-style:none;
    text-decoration:none;
    margin:0;
    padding:0;
 }
二、CSS

1.CSS三大特性:
  （1）继承性 父元素设置样式后代元素继承
       color/text-/font-/line-
  （2）层叠性 
  （3）优先级
      !important 优先级最高
      style    权重1000
      id选择器 权重100
      类 伪类 属性 权重10
      标签 伪元素 权重1
      通配符选择器 + ~ 权重0 
      内联样式>内部样式/外部样式(就近原则)
2.文本属性
    color:1.关键字(red,blue) 2.十六进制(#346)
             3.rgb(red,green,blue)0~255
             4.rgba(r,g,b,alpha透明度0-1)
    text-开头属性
    text-decoration 设置上划线overline 下划线underline 删除线line-through
    text-align left right center
    text-transform 设置形变lowercase uppercase full-width captialize
    text-indent 设置首行缩进 2em
    text-shadow 设置文本阴影 h-shadow v-shadow blur color
    font-开头属性
    font-style设置是否开启斜体 italic normal
    font-width设置文本加粗 bold 100-900
    font-size 设置文字大小28px
    font-family设置文字类型"宋体","楷体","微软雅黑",serif
      网络字体库 webfont
      1.@font-face:"Zoom-A550" style标签第一行
      2.font-family:;
      字体图标库
      iconfont
         1.单色图标库
            link标签引入css文件
            2.class='iconfont xxx'
          2.多色图标库
            使用script标签引入iconfont.js文件
            svg>use标签 use href='#icon-lvshu-5'
        font-awesome
          1.使用link标签引入font-awesome.css文件bootcdn
          2.class='fa fa-tubiao fg-2x'
--------------------------------------------------------------
隐藏元素方式有哪些?*********
  1.display:none 隐藏元素 
    不占据原先在浏览器中的位置 js事件不会生效 会引起重排/回流
2.visibility:hidden
   占据原先在浏览器中的位置 js事件不会生效  会引起重绘
3.opacity:0
   占据原先在浏览器中的位置 js事件会生效   不一定 只有一个图层引起重绘 
************************************
当一个DOM元素(标签)的改变影响的几何信息(位置),浏览器计算DOM元素的几何信息,
将其正确的显示在页面中,这个过程就叫重排,也叫回流,
当DOM元素外观被改变,但是不影响布局排列,浏览器将其重新绘制的过程就叫重绘.
重绘不一定引起重排,重排会引起重绘
重排重绘占据浏览器(占据CPU)页面卡顿,UI迟缓
重排:DOM元素 增加 删除线line
重绘:隐藏元素 visibility