从0到1开启web前端学习之旅四

老渡司机回来了，前几天因为一些私事耽搁了一阵，今天重启我们的学习之旅，经过前一阵子的学习想必大家都已经熟练掌握html常用标签的用法了，也就是说网页的结构我们已经会搭建了， 剩下的事情就是要给网页加样式了，没错今天我们来说一说CSS语言，全称层叠样式表，算不上是一个正经的编程语言，学习起来很容易，上手极其快速，但是如果想在项目中写出高效的Css代码，也是需要积累长期的项目经验才能完成的。

 

首先我们需要创建一个.css文件 并且通过link标签把该文件引入到html页面中，只有这样做才能使css样式语言对html中的标签起作用。

 

讲CSS 我们首先从选择器开始，因为Css的目的就是要给各种标签添加不一样的样式，所以我们从选择器开始说起。

 

什么叫选择器呢？顾名思义就是选择html标签的工具，一个标签有他自己的标签名称，标签身上还可以有自身的属性。那集这么多特质的html标签一定会有多种方式被选择到。没错css提供了我们多种选择器来选中某个，某种或某类标签。

选择器种类：标签选择器，类名选择器，id选择器，属性选择器。

那如何通过这些选择器去选中一个标签呢。

Html：代码

 

Css代码：

 

效果图：

 

可以看出通过选择器确实选中了这四个标签，并且把样式作用在它们的身上了。

 

当然如果想赋予标签样式不仅仅限于选择器，你可以使用行间样式直接把css代码写在标签上如:

这种方式固然可以，但是我们在编程中需要遵循规范结构、样式、行为相分离。所以你把css代码直接写在了html中其实我们是不建议这么书写的。

 

当然CSS虽然简单但毕竟是一个大项，用只言片语想要把选择器解释清楚都很难，这里我还是以视频的方式传授细致的知识点。

 

视频链接：

http://v.youku.com/v_show/id_XMTYzMDIwODIwNA==.html?from=s1.8-1-1.2

http://v.youku.com/v_show/id_XMTYzMDIxMzc3Mg==.html?from=s1.8-1-1.2

http://v.youku.com/v_show/id_XMTYzMDIxNDAxNg==.html?from=s1.8-1-1.2