DIV+CSS基础DIV+CSS十日教程1:建立DIV+CSS的初步印象

DIV+CSS十日教程1:建立DIV+CSS的初步印象

看再多的教程,也不如自己实际操作收获的多,DIV+CSS,简单的说,就是将网页内容和样式分离,使用html标签展现内容,使用CSS来控制页面的展示效果,很多人都说DIV+CSS这种说法不准确,应该叫html+CSS,不管怎么都好,只是一种称呼罢了,学习起来很容易,下面开始建立自己的第一个DIV+CSS的网页:

1. 首先请在你的电脑上创建一个文件夹,名称随意,例如“myweb”;

2. 打开这个文件,建立两个txt文本文件,分别命名为index.htmlstyle.css

3. 用记事本打开index.html文件,输入下面的内容:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>我的第一个网页</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>我的第一个网页</h1>
<p>这里是一段测试文字</p>
<div id="text">从零开始学习制作网页模板
</div>
<div class="four">测试的文字内容</div>
</body>
</html>

4. 点击文件-另存为,选择UTF-8编码,保存为index.html覆盖原本的空文档(未来使用UTF-8编码是大趋势,兼容性强,所以用此编码);

5. 用记事本打开style.css文件,输入下面的内容:

body {font-size:16px;color:#000000;background:#f7f7f7;}
h1 {font-size:30px;color:#ff0000;}
#text {font-size:14px;color:blue;}
.four {font-size:16px;}

6. 点击文件-另存为,选择UFT-8编码,保存为style.css,覆盖之前的空文档;

7. 使用浏览器访问index.html网页(推荐使用Chrome,Opera或Firefox浏览器),观察本网页所展示的效果,您可以看到,整个网页的背景颜色是浅灰色,第一行文本为较大字体,呈现为红色,第二行文本为黑色较小字体,第三行文本为蓝色,第四行为黑色……为什么这几行文本呈现的样式不同呢,这正是CSS文件在起作用,下面来看看CSS具体怎么定义了网页的样式;

8. 打开style.css文件,我们看到第一行定义了整个body的样式,字体大小16像素,颜色黑色,背景颜色为十六进制表示的#f7f7f7,第二行定义了h1标签的样式,这对应html文件中的首行文本,如果试着把这里的30px改为50px和12px,保存后刷新浏览器窗口,会发现随着CSS的改变,html展示效果也随着改变了,同样的,修改一下CSS文件中的第二第三行之后,观察一下html效果有些什么变化……

到这里,你应该对DIV+CSS的概念有了一个简单的了解,我们可以用类似DIV、h1、P等html标签定义网页的内容结构,而在CSS中对这些标签分别定义样式之后,整个网页也就呈现出来了,注意在刚才建立的index.html文件代码中有这样一行:

<link href="style.css" rel="stylesheet" type="text/css" />

正是这句代码使html文件和CSS产生了关联,CSS文件的命名不一定是style.css,也可以是abc123.css,按照自己的习惯命名即可,同时上述link关联标签中相应与之对应就行了,如果你的CSS文件和html文件不在同一个路径,例如CSS保存在images文件夹内,则相应的关联标签应该写作:

<link href="/images/*.css" rel="stylesheet" type="text/css" />

在自己电脑上测试的时候写为:

<link href="images/*.css" rel="stylesheet" type="text/css" />

在网页结构布局中,可能通常使用最多的html标签就是div标签,如:

<div id="left">xxx</div>
<div class="foot">xxx</div>

可使用id和class对div进行定义,在CSS中如果定义id的样式,则使用#号加名称,如:

#left {font-size:16px;}

如果定义class的样式,则使用英文句号加名称,如

.foot {font-size:16px;}

id和class在展示效果上是没有区别的,最大的区别在于id具有唯一性,在同一个页面里不可重复使用,而class(中文意思为类)则可以重复使用,以展现具有相同样式的网页模块。一个div标签可以同时加上id和class,甚至可以同时定义多个类,如:

<div id="text" class="one right">xxx</div>

不过对于初学者,可以先试着一个div只定义一个类,便于学习和研究。下一节一起熟悉去一下设计网页模板使用最多的html标签和最常用的一些CSS语言……

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/div_css/2.html