今天跟大家讲一下CSS 指层叠样式表 (Cascading Style Sheets)，用来定义如何显示 HTML 元素的。即之前在html中属性中的ui样式部分。嗯～，你在奇怪为什么可以在html编写的东西要搞个css出来，当然是因为这样更简单，编写与维护起来更方便了。因为css这种东西里面严格的来说不过就是对于网页中的各种布局UI显现的属性与值的集合，所以会直接跟大家讲解各种常用属性的使用。

如何关联css文件与html文件

不要以为这有多难，一句代码搞定。不过记的得这句代码要放在html中的body中尾部为佳，至于为什么放在这里？你可以试着放在html开头或其他部分，时间久了，你就懂了。

<link rel="stylesheet" type="text/css" href="mystyle.css">

其中，<link>标签是定义文档与外部资源的关系，最常见的用途就是链接样式表。rel属性是必需的，定义当前文档与被链接文档之间的关系（值有很多，记得stylesheet这个样式表的属性值就行）。type规定被链接文档的 MIME 类型。还有href="mystyle.css"，就是说明你的模式表的文件路径。

将css文件与html文件关联起来之后，你就算是完成了使用css文件编写的第一步。

如何使用css文件设置html中的各种元素UI属性值

嗯，我觉得一个白色的网页背景色不好看，来点黄图。所以上代码：

body {   
    background-color:yellow;
}

其实这东西就像是吃饺子一样。
看看代码，没错，就是这么简单而直接。因为是整体的网页背景色，所以直接获取body(记得之前跟大家讲过了网页中的可视内容基本都在body中编写。)，然后直接在它后面加个大括号。这样一来，饺子皮就准备好了。然后我们往里面放饺子馅background-color:yellow;最终我们得到了一个饺子，而css文件的本质就是一整碗能让你吃饱的饺子。
现在我们好好分析一下这碗饺子。既然饺子皮可以是标签body加{}，那可不可以是标签p加{}，可不可以是标签div加{}。嗯，当然是可以的。基本上所有的可视标签都可以。
在css中我们将饺子皮称之为选择器，刚才所讲的就是标签选择器。而光是标签选择器这种饺子皮够我们用吗？嗯，用了之后你就会发现，不够！根据回味的精细程度和饺子皮的厚薄程度，我们需要各种各样的饺子皮。而在css文件中这些饺子皮就是各类选择器。

通用选择器（）*
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器

这些选择器你不懂就先随便看看，这些东西你不用就不需要懂，而用了，emmm，你就懂了。注意，这些饺子皮是有优先级的。比如蛋饺的蛋液皮不是混了蔬菜汁的面皮能比的，更不是普通饺子皮或者说最糙的粗面饺子皮能比的。至于优先级高低，上述选择器从上至下，依次递增。
然而，你以为这就完了吗？不，我们还有放了幸运硬币的幸运饺子，碾压一切，它就是!important。至于什么是!important，自己查吧，不推荐用这东西，了解一下就行。

说了这么一堆，你对css有个整体的了解了吗？其实就是利用选择器锁定相应的元素控件，再在选择器后的{}内设置各种属性与相应的值而已。这就是一个饺子，而0到n个的饺子就成了一个完整的css文件。什么？你问饺子汤是什么代表什么？请不要问这种问题，因为我是一个只讲干货的人，从来不水文，所以饺子汤没有意义。

样式设置优先级

有了样式表css文件，并不代表，我们所有的样式都要在css文件内设置。我们还可以在html内部直接设置样式属性。格式为：

<style>
hr {color:red;}
body {background-color:yellow;}
</style>

这是内部样式表，优先级要高于外部样式表css文件。
更有内联样式表，格式为：

< body style="background-color:yellow;">

</body >

这是最优先考虑的。
总的来说：内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式。
今天说到这里吧，希望大家对。