JavaScript入门教程第二部：CSS基础讲解

接下来我们来一步一步的把程序给写出来。在这里，这是我们要做的东西。

·首先先这样子，先把请出坤拳还有标题搞出来。这个标题我相信大家应该都会了，是不是在head这里加个title？坤拳，保存，坤拳有了。

·接下来就是这样四个字：请出坤拳。怎么写？是不是这样子？把这个东西删掉，请出坤拳，保存。请出坤拳这几个字就这么出来了。但是这只是毛胚，这个才是精装。所以大家应该会想到什么东西能把毛坯房变成精装房？是不是CSS？所以我们得写CSS代码，把这个玩意包装成这个玩意。

所以问题来了，CSS代码应该写在哪？是写在head里面还是写在body里面？前面我也提到过，这个区域里面显示什么东西是跟body有关的？这个页面的一些设置、配置是跟head有关的。body里面的内容套上什么样的皮肤是不是跟设置有关？所以CSS的代码应该是写在head里面。

而且CSS也对应了一种元素叫style，这个就言简意赅了，风格。风格就是这个东西到底长什么样子？所以这里就是写CSS代码的地方。

·在写CSS代码之前先得明白一个概念，就是什么叫CSS选择器。其实这个概念还是挺好理解的，CSS的工作原理其实就是根据一些条件筛选出哪些元素需要装修，要装修成什么样子。

就比如现在请出坤拳属于哪个元素的？是不是属于body的？所以这里就可以这么写：body，这是元素的名字，然后一对花括号。这段的意思就是说：接下来要给body里面的东西去做装修了，至于装修成什么样是大括号里写的代码所决定的。这里的代码一般都是左边是属性的名字，一个冒号，右边是属性的值。

比如请出坤拳是黄色的，自然而然的应该是能想到属性叫color，所以color自动的补了个冒号，冒号左边是属性的名字，冒号的右边就是属性的值，比如yellow，黄色，已经保存了，切过来看是不是黄色，再改一下red红的，green绿的，怎么样？是不是言简意赅？

大括号外面这一坨表示要开始装修了，里面表示要把这个东西装修成什么样子，再改回来yellow，这个颜色就比较像了，缩回100%，缩放就是按住Ctrl键，鼠标滚轮滚来滚去就可以了。虽然已经变成黄色了，但是字还是太小了，所以肯定是要设置一下字的大小，这个也简单，font这里联想出来了size，这个就是字体的大小。

字体的大小的单位其实有很多种，有多少个像素，有多少英尺，有多少厘米等等，有很多五花八门的，是入门教程，所以以像素为例，像素是比较好理解的一个东西，比如来个50像素就是50PX，再来看一下，现在缩放是100%的，这个字是不是变大了？这个字是不是得居中？所以可以再加一个属性就是text-align，文本对齐，对齐这里有什么？有居中，有左边有右边，肯定选居中保存，是不是过来了？虽然现在居中了，但是跟这边还是有一些区别，比如这里面请出坤拳是偏下一点点的，这个是偏上的。其实改这个就可以顺势引出盒子模型了。盒子模型我准备是下面这一集视频再细聊，所以这个问题先放着不管。

·还有个问题就是背景色应该是黑的，但是这里是白的，怎么把背景色从白色改成黑色？其实很简单，按下F12把这个东西打开，打开之后这里有个小图标，点一下变成蓝色或者不是灰色的状态，就是表示激活了。

激活了之后把这个东西挪过来，挪过来之后会发现什么？当鼠标指向请出坤拳这段文本的之后，下面这里是不是显示了一个body？这个就说明整个浅蓝色区域都属于body。既然属于body，是不是可以这样子在这里去对body的背景颜色做个修改？所以来修改背景颜色，背景颜色就是background color，这里下面就直接有black，回车保存，是不是变黑了？