Day02_2019-08-21

CSS属性及选择器

1. css三种格式
   • 内部样式 写在head内

   • 外部样式-link 写在head内,使用link标签添加关联，单独写一个home.css文件

   • 外部样式-import 写在head内，css提供的一种方式

   • 内联样式 也叫行内样式，写在行内属性里面

     div
     

2. 外部样式的两种区别，推荐使用link
   • 当使用js控制dom去改变样式的时候，只能使用link标签，dom无法控制@import
   • 兼容性差别，link优于@import
   • 加载顺序，link引用的css会和页面同时加载，@import需要等页面加载完才开始加载
   • link是属于XHTML标签，@import只是css提供的方法，link能做的事情更多
3. css三种样式权重
   • 三种样式都能同时存在，当属性冲突的时候将会以优先级决定最终样式。
   • 内联>外部|内联，内联和外部的优先级相同，谁写在后面将会覆盖前面的样式。
4. css选择器
   • p{} div{} 元素选择器/标签选择器/类型选择符
   • id选择器 #id{}
   • .class{} class选择器
   • .class,#id,p{} 组群选择器
   • div ul li{} 包含选择器
   • *{} 通配符 代表所有页面内元素，一般用来重置样式，一般考虑到性能影响不常用
   • 伪类选择器 为了简化代码，一般使用先声明标签颜色，然后再声明鼠标滑过的状态颜色2步状态
     1. a:link{} 未访问的链接状态
     2. a:avisited{} 已访问的链接状态
     3. a:hover{} 鼠标滑过的链接状态
     4. a:active{} 鼠标按下去的状态
5. 选择器权重
   • 权重相同的情况下，执行后写的样式，优先比最高位（11个class还是id的权重更高）
   • 类型 1
   • class 10
   • id 100
   • 子选择符 0
   • 属性选择符 10
   • 伪类选择器 10
   • 伪元素选择符 10
   • 内联样式 1000
   • 继承样式 0
   • 包含选择器 包含选择符的权重之和