摘要：
　　这是艺灵带你轻松学会div+css的第七节课：css属性练习。这节主要讲css属性的分类及css属性语法格式，最后通过几个小案例进行练习巩固知识点。......

第七节：css属性练习

这节课是我们的练习课，我们主要练习下常用的一些属性。本节课不要求同学们一遍学会，但要求学习一段时间后能记得一些css属性及用用法，这个要求不算过分吧。

1、属性分类

在css2.0手册中，属性有：字体、文本、背景、定位、尺寸、布局、外补丁、轮廓、边框、内容、内补丁、列表、表格 滚动条、打印、声音、其它这16个大的分类。每一个大分类下面又有一些细的分支。

看起来数量级有点小庞大呀！但不要慌，如此多的属性并不需要完全会背，学会常用的一些满足工作需要就可以了。如果想提升自己，再去学那更全面的。（其实，很多做前端的，对一些常用的属性都不能保证精通，更何况是零基础的同学们呢？）

我们还是来做实例吧！接下来我们以非常常用的尺寸属性做下练习。

2、汉字转代码过程

说起尺寸，最容易想到的就是宽多少、高多少了。例如通常说的：宽990(像素)、宽1190(像素)。

那么代码我们要怎么写呢？

小诀窍：我们可以先用汉字将我们需要的写出来，然后再将汉字进行转换成我们的代码。这样做的好处是：既起到了加强记忆的效果(两遍哦)又能让零基础的同学打消畏惧代码的心理。

举个例子：宽度990像素。这个是我们通常口语化的说法，下面我们来进行稍微修改下。修改后：宽度=990像素。此时我们再来对比下，是不是发现后者更好理解些？此时我们只是单单多添加了一个=，就将我们的口语化说法转换成了小白都能理解的等式！当然了，针对不同的人群，可能会有自己的观点及看法，只要是您认为对您学习有帮助的，您都可以进行参考。

那么问题来了呀！我们刚写的宽度=990像素怎么让它生效呢？

我们此时就需要用到之前讲过的嵌入式样式表及选择符了。

此时可能会有同学们写出这样的代码，配图：　

显然，运行后是不会看到效果的！理由：出现了中文。怎么办呢？

既然我们已经转换成了汉字化的等式，同理，在css中，也会有类似的语法格式。

3、属性语法

语法：属性名:值;。

这个就是我们css属性的语法，我们来对比下之前的汉字化等式。配图：　

关于属性语法，希望同学们要牢记！因为所有的属性都是同一个语法，只有记住了这个语法，才能做出效果来。如果真的记不住语法，会查手册也行。手册中也会有语法格式，配图：　

好，现在我们将之前的错误代码进行修正过来。

3.1、宽度属性练习

<!--css-->
.w990{
　width:990px;/*宽度=990像素*/
}
<!--html-->
<div class="w990">这是一个div，宽度为990像素</div>

上面代码源码配图：　预览后的效果配图：　

此时我们看预览后的页面，并不能看到明显的区别，当我们借用审查元素功能后就可以看到我们的width生效了。配图：　

使用审查元素这个方法查看最终效果，显然不是很好的方法，那怎么办呢？

通常，在布局的时候，我们会给元素添加边框或背景属性，因为这两个可以让我们更直观的看到元素的占位空间。下面来说下这个边框属性。

3.2、边框属性

既然这也是一个属性，那自然遵循我们刚讲到的语法：属性:值;。

没错，但需要注意一点：边框是一个复合属性，值有多个。配图：　

我们还是先讲个小故事吧。

小时候我们都学过美术，画过线条、正方形、圆形等，当时用的是2b黑色铅笔。画完后，白纸上会留下一个我们画的不规则的框框。铅笔削的细的同学画的框就比较细，用力轻的同学画的就很淡，用力重的同学会断铅儿，然后纸上的细条就断一下......

上面的故事中，我们可以提炼出哪些有用的信息来呢？

答：1、形状；2、颜色（黑色）；3、粗细框；4、线条(痕迹)。

好，对于css中的边框属性和我们提炼出来的信息也是非常相似的。
粗细框对应着 border-width ，线条(痕迹)对应着 border-style ，颜色对应着 border-color 。配图：　

怎么样，是不是感觉一下子豁然开朗了很多？

说了这么多，来练习下吧。

3.3、边框属性练习

<!--css-->
.border{
　border:1px solid #f00;/*边框=宽度1像素，实线，红色*/
}
<!--html-->
<div class="border">这是一个div，添加了边框属性</div>

预览后的效果配图：红色框的区域则表示当前元素所占空间的尺寸。

关于复合属性，值与值要用英文空格进行隔开。如果对值的用法及取值有疑惑，可以通过手册进行排疑。配图：　

宽度属性讲了，边框属性讲了，我们来将二者结合下再做个实例吧！

3.4、宽度和边框属性练习

<!--css-->
.w990{
　width:990px;/*宽度=990像素*/
}
.border{
　border:1px solid #f00;/*边框=宽度1像素，实线，红色*/
}
<!--html-->
<div class="w990 border">这是一个div，宽度为990像素，添加了边框属性，前台页面可直观看到效果。</div>

上述代码效果配图：　此时，我们就不需要再用审查元素查看元素占位空间了，加上边框就可直观看出效果，是不是很方便？所以建议同学们在布局时，添加边框或背景来提高工作效率！

还有很多属性，这里就不再一一做案例了。同学们在下面要多做案例，加强巩固基础。

4、demo欣赏

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

5、录制视频

标题：艺灵带你轻松学会div+css07css属性练习

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

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

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

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

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