CSS属性及选择器
- css三种格式
- 内部样式 写在head内
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css语法</title> <style type="text/css"> div{ color: aqua } </style> </head> - 外部样式-link 写在head内,使用link标签添加关联，单独写一个home.css文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css语法</title> <link rel="stylesheet" type='text/css' href="css/home.css" /> </head> - 外部样式-import 写在head内，css提供的一种方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css语法</title> <style type="text/css"> @import url(css/home.css) </style> </head> - 内联样式 也叫行内样式，写在行内属性里面
<div style="color: red">div</div>
- 内部样式 写在head内
- 外部样式的两种区别，推荐使用link
- 当使用js控制dom去改变样式的时候，只能使用link标签，dom无法控制@import
- 兼容性差别，link优于@import
- 加载顺序，link引用的css会和页面同时加载，@import需要等页面加载完才开始加载
- link是属于XHTML标签，@import只是css提供的方法，link能做的事情更多
- css三种样式权重
- 三种样式都能同时存在，当属性冲突的时候将会以优先级决定最终样式。
- 内联>外部|内联，内联和外部的优先级相同，谁写在后面将会覆盖前面的样式。
- css选择器
- p{} div{} 元素选择器/标签选择器/类型选择符
- id选择器 #id{}
- .class{} class选择器
- .class,#id,p{} 组群选择器
- div ul li{} 包含选择器
- *{} 通配符 代表所有页面内元素，一般用来重置样式，一般考虑到性能影响不常用
- 伪类选择器 为了简化代码，一般使用先声明标签颜色，然后再声明鼠标滑过的状态颜色2步状态
- a:link{} 未访问的链接状态
- a:avisited{} 已访问的链接状态
- a:hover{} 鼠标滑过的链接状态
- a:active{} 鼠标按下去的状态
- 选择器权重
- 权重相同的情况下，执行后写的样式，优先比最高位（11个class还是id的权重更高）
- 类型 1
- class 10
- id 100
- 子选择符 0
- 属性选择符 10
- 伪类选择器 10
- 伪元素选择符 10
- 内联样式 1000
- 继承样式 0
- 包含选择器 包含选择符的权重之和
