牛腩学习---CSS基础了解

牛腩视频的17集以前的内容都是在编写这个WEB项目的后台代码！包括SQLHelper和存储过程的编写，让我明白了之所以有存储过程和视图等内容都是为了提高软件的运行速度，简化后台代码的编写！那么接下来我要介绍的这个CSS，就是主要针对的前台设计，只是一些简单的操作！

首先，我们要知道：Visual Studio 2013是一款极为出色的编辑器，能够打理各种Web文件，包括HTML、CSS、JavaScript、Markdown、LESS、Coffeescript、Handlebars、Angular、Ember、Knockdown等。所以我们要介绍的就是VS自带的CSS的一些基本操作！

其次，我们为什么要使用CSS？

如果我们不适用CSS来设计网页的内容和字体格式的话，应该是一下的代码：

 

​那么显示在窗体中的内容就是：

但是如果我们想要栏目四、五、六的样式改变（比如：颜色变为红色或者其他颜色），而“这是一条新闻标题”的样式没有变化，怎么办？我们只能一条一条的该每一句代码！所以为了避免这么繁杂的工作我们就引进了CSS！

1、其实CSS就是将网页的内容和样式进行分离！也就是网页的内容写在HTML页，而内容的样式则写在了样式文件（即.CSS文件）中！这样对应一个样式就可以由很多的内容了！好了不多说了，以例子来说明！

HTML页的内容：

如果只有这个内容，那么运行后显示的内容样式默认为黑白的！图中：Class是CSS的标签（类标记），代表内容的样式，比如此图中代表“栏目四的样式，（字体，颜色之类的）”span是容器，可以盛放内容和设置等。

2、然后在标签文件（.CSS文件）中写下各个“class”的内容：

3、最后再让HTML页和样式表页联系起来就可以了！方法为：将样式表直接拖到代码的后面，然后就自动生成了一句话：

那么运行后显示的内容为：

那么如果我们想要改变网页中那个内容的样式，只需要改变样式表中的对应类型的代码就可以了，而不用在HTML页中改变每一个网页内容的样式！

最后：

比如：在内容中设置的为：

<span class="menue">栏目四<span>

那么在样式表.CSS文件中对应的代码为：

.menu{   }

这样的形式就是类选择器，同时CSS选择器最常用的还有ID选择器，标签选择器等。这里以ID选择器为例：

在内容中写：

<span id="special" class="menue">栏目四<span>

那么在对应的样式文件中就为：

#special{   }

小结：

其实这个CSS的应用其实也体现了编程简化代码，便于后期维护的精髓，也体现了面向对象的思想，真是一举两得。接下来就开始更深的了解CSS的核心了，希望可以更好的应用CSS！