日期:2014-05-17  浏览次数:20706 次

使用CSS—轻松学习网站界面制作(一)

这些天为了做一个网站,所以顺便学习了一下CSS,不能算是很专业的学习CSS,主要是为了更好的完善这些个界面而学习,写这篇博客是为了让大家和我一起来学习做网站,体会做网站的乐趣,达到轻松学习的目的。

CSS特点:实现一个网页内容与样式的分离。这是CSS非常有优势的一个特点,省去了我们很多的麻烦。我们来做一个简单的例子来看一下这个效果:

没有CSS之前,我们是这样要是把这个颜色改为别的颜色,那么只能一个个颜色值的改,这个工作量很恐怖的。

之后我们使用CSS来进行优化,我们先来使用CSS选择器:

类选择器:这就是我们在HTML中查找类所设置的一个值。

我们使用span标签+类标志,我们把body里边的内容改成这样:

然后我们来创建我们的样式文件:

就这么一句话我们就搞定了之前的颜色设置,想改颜色只要打开这个样式文件,然后进行更改就行了。避免了很多的麻烦,然后我们再进行样式文件与这个内容的关联,很简单,我们只要拉进来就ok了,拉到这个地方:

这就产生了一个关联。样式里边就一个属性,一个冒号,一个属性值构成的。当我们不知道有什么属性值的时候,我们按一下空格,VS就会罗列出所有的属性值,这样我们就能选择我们需要的属性值了。

ID选择器:

id一般来说都是唯一的,我们来看一下操作:

然后我们在样式文件中,我们这样:

我们得到了两种效果的混合了。看看效果: