摘要：
　　这是艺灵带你轻松学会div+css的第五节课：初步了解css样式表。这节主要讲解页面引入css的四种方式，然后针对每种方式进行写法练习，最后讲一下css的书写格式及css权重问题......

第五节：初步了解css样式表

上一节的课程中我们针对标签做了一些练习，如果同学们在学习这节课前仍记不起一个标签的话，艺灵建议先过关了标签再来此节课程的学习。

1.1、页面引入css样式的四种方式

1、外部样式表
2、嵌入式样式表
3、导入式样式表
4、行内样式

说专业术语的时候，很多同学就懵了，但如果记同学们看代码，那就会清醒很多。

1.2、外部样式表

特点：适用于项目中，css样式单独存放在以.css为后缀的文件中，在页面中进行调用，灵活性及可用性非常高！

1.2.1、格式

<link type="text/css" rel="stylesheet" href="css文件路径"/>

这个就是我们常说的外部样式表了，通常放到我们的head中间。配图：　注意黄色高亮的部分。type类型和rel中的值！如果在路径正确的情况下，外部样式没有生效，请检查刚提到的type和rel取值及标签写法是否无误。

1.3、嵌入式样式表

特点：适用于小型单个简单页面，css直接写到页面中，只有当前页面有效，不可复用于多个页面，效率低！

1.3.1、格式

<style type="text/css">
/*css样式*/
</style>

这个就是我们常说的嵌入式样式表了，通常也放到我们的head中间。配图：　注意type类型，虽然不写也能识别，但尽量写上，这样规范些。

1.4、导入式样式表

特点：这是前两个的结合体。

1.4.1、格式

<style type="text/css">
　<!--写法一-->
　@import url("css文件路径");
　<!--写法二-->
　@import "css文件路径";
</style>

这个就是导入式样式表了，还是放到我们的head中间。配图：　

1.5、行内样式

特点：直接写到标签中，灵活度非常低，功能也有限，但权重会高于一切，除!important外。

1.5.1、格式

<标签关键字 style="属性:值;"></关键字>

这个就再熟悉不过了吧！配图：　

上面讲到的权重我们等会再进行解释，先来说下css的写法格式。

1.6、css写法格式

这个跟我们上节课讲到的属性格式非常相似！css写法格式：属性:值;

怎么样，很相似吧。只不过这里将之前的=换成了:，然后值不需要""，每个值结束后需要带上一个;。举例：宽度为100像素。转换成我们的css后是这样的：width:100px;。还是来张截图吧：

对于css属性，同学们可以参照之前发放的css手册进行了解及做相关练习，后面的课程中也会讲很多关于css样式方面的内容，所以这一关同学们需要下点工夫了。

说过了css书写格式后我们再来说下css权重。

1.7、css权重

什么是css权重呢？通俗点：css样式覆盖，后面的样式会覆盖前面的，级别高的覆盖级别低的。id选择器高于class类选择器，行内样式高于一切，!important高于一切！虽然可能会越来越复杂，但通过以下实例及以后的多次练习，艺灵相信同学们会弄懂这个难点的。

1.7.1、css样式覆盖练习

<p style="width:100px;width:80px;">请问：我的宽度是多少？</p>

请问：这个p标签的最终长度是多少？

答：width:80px;即：宽80像素。

思路：符合我们刚讲的后面的样式会覆盖前面的这一条。

当然了，光凭口说，很难让同学们信服，截图为证：

关于这个css权重一事，待我们明天讲完了选择器的知识点后，我们再来做一个完整的练习。

2、demo欣赏

本节课程小窗欣赏：如果想看全屏效果,点此进入demo全屏界面

3、录制视频

标题：艺灵带你轻松学会div+css05初步了解css样式表

视频备用地址：
淘宝：http://cloud.video.taobao.com/play/u/759415648/e/1/t/1/p/1/38970071.swf
优酷：http://player.youku.com/player.php/sid/XMTU3ODAyODU2NA==/v.swf
土豆：http://www.tudou.com/v/ntnr9I5mKlg/v.swf
腾讯：http://static.video.qq.com/TPout.swf?vid=s0301a761ug&auto=0

如果看官想看更多视频，可在优酷、土豆、腾讯视频中搜索下：艺灵设计哦~

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2016-05-26/402.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。