css笔记

前端3要素：
html css javascript
css: 层叠样式表，用于修饰文档，标记HTML 特点：从上到下依此解析 css大小写敏感
css语法：
1 属性名和属性值之间使用：隔开，多对属性之间使用；隔开，最后一堆属性可以不加分号。
id=“one” class=“one” style=“根据css语法设置” title=“one”

2 速记写法 简写形式 ： border: 1px solid red; 设置一个1像素的实线红色边框
盒子=内容区+内边距（padding）+边框+外边距 (margin)
padding:10px 20px 30px; 上10px 左右20px 下30px padding: 10px 20px 30px 40px;上 右 下 左
注释：
① 注释写法 /**/

• ② 注释的作用 解释说明 更好的维护和管理
  ③ 注释不能嵌套使用 浏览器只会找开始到结束之间的内容
  3 html中引人css的方式
  1 行内样式 style属性
  
  2 内联样式 style标签
  3 外部引入 创建.css为后缀的文件 link标签 【@import url() 不建议使用】 区别：link先加载css，再加载html。import反之。
  优先级： 行内>内联/外部引入 就近原则：哪一种设置方式更接近元素，哪一种样式优先级高
  4 选择器 标签选择器/元素选择器 根据标签名称选择 div{}
  id选择器：通过id属性选择一个元素 #value
  #one
  类选择器：通过class属性选择 .wealthy
  
  普遍选择器： 当前页面所有元素 {}
  后代选择器 selector1>selector2 :选择直接子元素 （某元素之后的元素） selector selector 选择当前元素的所有后代元素，包括孙代元素（某元素之后的元素和本身）
  兄弟选择器 +:选择当前元素之后的一个兄弟元素 #one+div one之后的一个兄弟 ~：选择当前元素之后的所有兄弟元素 #one~div one之后的所有div元素 所有元素#onediv
  属性选择器: class选择当前页面中具有class属性的元素 class=“one”选择当前元素具有class属性并且值为one的元素 class~=“one”选择当前元素为class属性值其中一个为one的元素
  多选择器使用逗号隔开 div,p{}当前元素中的所有div和p标签
  组合选择器：直接连接到一起使用 div.one{} div中class为one的元素
  伪类选择器： ：伪类名称
  ：div :first-child{} 有空格说明出现后代选择器 div:first-child 无空格div标签中的第一个子代
  空格 pre标签  
  行内元素不能设置宽高，只能将行内元素放入块级元素来改变
  基础值：style属性：1000 id选择器：100 类/属性/伪类：10 元素/为元素：1
  color:initial 不继承父类颜色 height: inherit; 默认继承父类高度
  颜色单位: 1：关键字 blue 2 rgb(f,b,g,)0-255之间
  ol设置有序

1. CSS选择器有哪些？分别包括什么？
   答：css的选择器：1.标签选择器/元素选择器（如：body;div;p;ul;li）
   2.类选择器()
   3.ID选择器(如：id=“name”,id=“name _txt”)
   4.普遍选择器
   5.层次选择器：后代选择器；子代选择器；相邻同胞选择器；一般同胞选择器。
   6.多选择器：多选择器；组合选择器。
   7.属性选择器
   8.伪类选择器
   9.伪元素选择器

选择器优先级是什么？
答：选择器的优先级既当面对相同元素相同样式时，我们就需要考虑选择器的优先级问题。
优先级顺序：1.！important
2.行间样式（内联样式）
3.ID选择器
4.class选择器，伪类选择器，属性选择器
5.元素选择器，伪元素选择器
6.*（通配符）选择器
7.元素的默认样式
优先级需要根据特性值来计算，特性值越大，优先级越高，特性值相同，越靠下优先级越高。
当元素的优先级相同时，后来居上（后面的代码覆盖前面的代码）。

    style属性中；1000
    ID选择器：100
    类选择器/属性选择器/伪类选择器：10
    元素选择器/伪元素选择器：1

页面导入样式，使用link与@import有什么区别？
答：1.link是HTML标签，除了加载css外，还能用于定于Rss，定义rel连接属性等作用；
@import是css提供的，只能用于加载css。
2.link引用css时，在页面载入时同时加载；
@import需要页面网页完全载入以后加载。
3.link是html标签，无兼容问题；
@import是在css2.1提出的，低版本（IE5及以下）的浏览器不支持。
4.link支持使用javascript控制DOM去改变样式；
@import不支持。