CSS基础

　　当一个页面的结构搭建完成之后，需要使用css样式表对其进行修饰，使得用户的体验更舒适，交互效果更好。CSS的全称是：cascading style sheet （层叠样式表）。其作用就是对网页进行渲染，控制网页的样式。

　　CSS的语法组成：

　　　　选择符 + 声明；

　　　　选择符选择的是要做渲染的标签；声明就是做什么样的渲染，声明又是由属性和属性值组成。

　　所有的CSS语句都要放在CSS样式表中。CSS样式表又分为三类：内部样式表、外部样式表、行内样式表。

行内样式表：

　　顾名思义是写在标签里的样式，其语法为： <标签 style = "行内样式表"></标签>

内部样式表

　　内部样式表是放在 head 标签内的

　　<style type="text/css">        /* type="text/css"可以不写 */         

　　　　css语句

       </style>

外部样式表

　　单独创建一个后缀名为 .css 的文件。然后导入HTML文件中。

　　导入的方法：

　　　　一、使用link标签

　　　　　　<link rel="stylesheet" href="css的路径">

　　　　　　　　rel="stylesheet"  建立关联性

                     　　 href="url"        导入css样式表的路径

 

　　　　二、<style>

　　　　　　　　@import url("css的路径");

                    </style>

 

　　　　两种导入方式的区别：

　　　　　　  1.本质上的差异：link属于html标签；@import属于css提供的方法。

                　　2.加载顺序：link导入的 css 和 html结构 同时加载；@import 等待所有的结构加载完毕 再 加载css。

                　　3.兼容方面：link的兼容性比较好；@import比较差

               　　 4.js控制 dom 的差别：@import导入 css样式，js动态控制样式的时候，会失效。

 

三种样式表的权重：

        内联样式表权重最高；

        内部样式表和外部样式表的权重，后写的会覆盖前写的。

        覆盖的只是相同样式，不同样式会继续执行。