CSS 层叠样式表

CSS

什么是CSS

即 层叠样式表 – cascoding style sheets。
样式定义如何对html元素排版，来对进行对页面的美化。
样式通常储存在样式表中，以此将内容与排版隔离。
各个样式可重叠为一，如果负责内容不同可兼容 如果相同后者可覆盖先前的样式 。

格式

CSS样式的三种使用方式

1.外部样式表 即css文件
通过导入文件夹中的css文件进行排版
通过link标签导入


也可以用@import 标签在style标签里导入css文件

1、 link 除了可以加载CSS外， 还可以定义RSS, 定义rel 连接属性等其他作用；@import只能加载CSS。

2. 加载顺序：link 引用的CSS会在页面被加载的时候同时加载；@import 引用的CSS会等到页面全部被下载完再被加载。

3. 兼容性的差别。 @import 是CSS2.1 提出的，老的浏览器不支持，IE5 以上的才能识别（不过现在来说，已经不是问题了，应该很少有使用IE5及以下的浏览器了）。 link 浏览器都支持。

4. 使用javascript 可以控制到 link, 但@import 却无法控制。
   5.@import 与内联样式 有冲突 @import 引用的CSS会等到页面全部被下载完再被加载。而内联优先级又是最高的
   2.内部样式表
   用 style 标签直接写入
   
   图中 内部 会覆盖前者 （就近原则）
   3.内联样式
   在标签上直接用style 写入
   

CSS常用选择器

css2常用选择器

1.html标签选择器（选择符）

直接使用标签选择

2.class 类选择器（选择符）

在html 中加入类属性 然后使用类名使用 类名可用空格隔开 表示多个类名。优先级比1高

3.id选择器（选择符）

在html中加入id属性 然后使用 <!-- 与2不同之处在于 id属性唯一 优先级更高 在标签中使用
!important会让此标签优先级达到最高-- >

4.关联选择器（选择符）

用空格表示包含关系 有ul 下的li 与ol下的li 可以用ul li 表示一个地方的li

5.选择器组（选择符组）

一起操作多个选择器，选择器名中间用逗号隔开

6.伪类选择器（选择符）

visited 点击后
hover 鼠标碰到后的格式
active 点击时的格式
link 点击前

css3常用选择器

关系选择器

div>p div的所有子元素 /* 二级子元素不算 */
div+p div后第一个p元素
div~p div后的所有p元素

属性选择器

标签后加[属性]{操作}
直接加入 属性 表示含有该属性
属性=value值 表示包含该属性等于该值
属性~=value值 表示（有多个属性名）表示包含该属性等于该值
属性|=value值 （用 - 隔开的属性名）表示包含该属性等于该值
属性^=value值 表示以该值为属性值开头的
属性$=value值 表示以该值为属性值结尾的
属性*=value值 表示属性值中含有该值的

结构性伪类选择器

状态伪类选择器

css 中的属性和单位