使用CSS—教你轻松学习网站界面制作（1）

使用CSS—教你轻松学习网站界面制作（1） - htm

来源：自学PHP网时间：2015-04-14 14:50 作者：阅读:次

[导读] 这些天为了做一个网站，所以顺便学习了一下CSS，不能算是很专业的学习CSS，主要是为了更好的完善这些个界面而学习，写这篇博客是为了让大家和我一起来学习做网站，体会做网站的...

这些天为了做一个网站，所以顺便学习了一下CSS，不能算是很专业的学习CSS，主要是为了更好的完善这些个界面而学习，写这篇博客是为了让大家和我一起来学习做网站，体会做网站的乐趣，达到轻松学习的目的。
CSS特点：实现一个网页内容与样式的分离。这是CSS非常有优势的一个特点，省去了我们很多的麻烦。我们来做一个简单的例子来看一下这个效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.2cto.com
<html xmlns="www.2cto.com">
<head>
 <title>CSS测试</title>
</head>
<body>
 栏目一
 栏目二
 栏目三
</body>
</html>
没有CSS之前，我们是这样要是把这个颜色改为别的颜色，那么只能一个个颜色值的改，这个工作量很恐怖的。
之后我们使用CSS来进行优化，我们先来使用CSS选择器：
类选择器：这就是我们在HTML中查找类所设置的一个值。
我们使用span标签+类标志，我们把body里边的内容改成这样：
<body>
 栏目一
 栏目二
 栏目三
</body>

然后我们来创建我们的样式文件：
.menu{ /* 栏目样式*/
color:#f00; /* 文字颜色 */
}

就这么一句话我们就搞定了之前的颜色设置，想改颜色只要打开这个样式文件，然后进行更改就行了。避免了很多的麻烦，然后我们再进行样式文件与这个内容的关联，很简单，我们只要拉进来就ok了，拉到这个地方：
<head>
<title>CSS测试文件</title>
<link href="css/StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>

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

作者：jlins_you

SASS用法指南 - html/css语言栏目：html.css - 自学ph

使用CSS—教你轻松学习网站界面制作（2） - htm

子栏目

使用CSS—教你轻松学习网站界面制作（1） - htm

最新评论

添加评论

更多文章推荐

添加评论