>

今天和大家谈一谈 CSS的样式和引用方式 (=￣ω￣=)

1 - CSS 样式

－ css 样式由选择符和声明组成，而声明又由属性和值组成。

• 选择器{属性:值}

• 声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔。

• 注释方式 / /

2 - css 引用方式

－ 外部引用：在head位置用link引用

• 一个css可以控制多个html页面，复用率高
• 方便改版和维护
• 有效利用浏览器的缓存，实现加载更快
• 相对于整站来说，代码更少，更加方便于分工合作
• 相对于单页面来说，有垃圾代码，而且link标签中的href会增加服务器的压力
• 使用场景：整站，访问量不是那么大的网页中

－ ：在head位置用style引用

• 速度快(网络原因)，没有请求压力
• 相对外部引入来说代码更少
• 不利于代码的改版和维护
• 代码混乱，不利于跟前后台的沟通
• 使用场景：高访问量的网页(首页，活动页)

－ 内联样式：把css代码直接写在现有的HTML标签中

• 优先级最高，不会被其他样式覆盖影响
• 多余代码多
• 不利于代码的改版和维护
• 代码混乱，没有样式内容分离，影响阅读体验
• 使用场景：跟js和后台生成

－ @import url(reset.css);

• IE中使用@import会改变文件的加载顺序。这可能会增加CSS文件的加载时间，阻碍页面渲染。

优先级：外部引用 < 内部引用 < 内联样式
（范围越小，优先级越高）

3 - css 选择器

• id选择器：直接作用于叫该名称的标签元素，有唯一性。

  表现形式：＃id

• class选择器：作用于有该类名的元素，可复用。

  表现形式：.class

• 标签选择器：直接作用于选择的标签元素，是一个集合。

  表现形式：tag

• 通配选择器：作用于所有元素。

  表现形式：*

• 层级选择器：作用于指定元素后代的指定元素，生效在最里面的元素。

  表现形式：div span

• 分组选择器：用’，‘隔开，无顺序可言，偏重于代码优化。

  表现形式：html,body{width:100%;height:100%}

• 伪类选择器：用’:‘隔开

  表现形式：

  a:link {color: #FF0000} / 未访问的链接 /

  a:visited {color: #00FF00} / 已访问的链接 /

  a:hover {color: #FF00FF} / 鼠标移动到链接上 /

  a:active {color: #0000FF}

• 伪元素选择器：用’::‘隔开

－ !important 为某些样式设置最高权值