div+css的使用

html-css014

div+css的使用,第1张

第一步:

先建立index.html和css.css两个文件。放在同一目录里

[建议编辑工具用Dreamweaver以后简称DW]

第二步:

在index.html里的<head></head>之间放入

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

这段代码是外部CSS调用,注意:href="css.css"这是路径

因为index.html和css.css在同一目录。

第三步:

在css.css文件里编定样式。可以用DW

用DW打开你的css.css → 窗口 → CSS样式 → 一般在你的右边出现CSS样式 → 点全部,下面会出现一个css.css → 点右键选择转到代码,这样在左边出现一个空白的板面这是因为你还没在里面编辑

第四步:

开始编定你要的样式了:

样式分两种

一种是点 . 一种是#号

先说. 如

.abc {}

点开头后面的abc是你自己定义的,为了直观大括号里我没有什么东西是因为只定义了样式名称,内容如高,宽没有定义,这样又回到右边的CSS样式编辑器里

这时在css.css下面出现了一个.abc的名字,你可以双击或右键选择编辑,这样会出现一个对话框。

下面说说对话框里的一些功能

分类:第一个类型是定义字体,大小,一些相关东西,一看就知道了,

第二个是背景不用说了,你一就明白了,

第三个是区块,这个自己研究一下,

第四个是方框,这个就是定义宽和高了,浮动选择一般为左对齐,下面的就是相当于,用table的,填充和间距和

第五个边框,边框,就是定义这个框的边线,大少颜色之类的,自己研究,

其它的,有少复杂,自己用多了就会知道了,

说了这么多,来个例子吧:

从出来对话框说起,

选择第二个,背景为红色[#FF0000]

选择第四个,定义宽为500px,高为300px,浮动为左对齐,点确定。样式如下

.abc {

background-color: #FF0000

width: 500px

height: 300px

float: left

}

样式出来了,接下来就是DIV的调用了,下面是index.html里面:

<html>

<head>

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

</head>

<body>

<div class="abc">

</div>

</body>

</html>

上面就可以浏览看出页面有一个500X300的红色块了

class="abc"现在说明一下.和#号了

用.abc就用class="abc"

用#abc就用id="abc"

他们区别就是级别不一样,#号比点要级高,而且#号是唯一的,

先说级别:

如果DIV用#号,定义了字为12号,黑色(ID="abc">)

<div ID="abc">我是真灵无限

</div>

上面的六个字,为12黑色的字,

但是我想要真灵无限四个字为14号,红色(class="123")

这样定成

<div ID="abc">我是<div class="123">真灵无限</div>

</div>

这样是没有用的,因为高级的#已经定义了,字的大小和颜色,所以要反过来,

<div class="abc">我是<div ID="123">真灵无限</div>

</div>

这样才能有效果

再说说#号的唯一性,如果定义了#abc和.123这两个样式

那么ID="abc"在一个页面只能出现一次,

而class="123"可以在多个div里面调用,

这就是id和class的区别!

打了这么多,相信基本的样式可以应用了。

《精通css》

《CSS禅意花园》

《CSS权威指南》

《CSS网站布局实录》

《别具光芒》——CSS属性、浏览器兼容与网页布局

《CSS商业网站布局之道》

《CSS与HTML Web设计实践指南》

《CSS Web设计高级教程(第2版)》

《CSS设计彻底研究(部分彩印)》

《HTML+CSS网页设计与布局从入门到精通》

《CSS基础教程》

《CSS网页布局学习笔记》

《css入门经典》

《CSS完全自学手册》

这些都是比较经典书籍

希望能帮助到你

DIV CSS网站布局的八个小技巧:

1.若有疑问立即检测。

在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用。请注重,在文件开头的错误,可能因为不当的结构等因素造成更多错误;我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减。

2.使用浮动功能时记得适当清除指令。

浮动是个危险的功能,未必会产生所期望的结果。假如碰到浮动元素延伸到外围容器的边框或者其他不正常情况,先确定的做法是正确的。

3.边界重合时利用padding或border来避免。

可能会为了一点不应该出现的空间而焦头烂额,或者需要一点点空间时,怎样都挤不出来。假如有用到margin,那么很轻易产生边界的重合。

4.DIV CSS网站布局时尝试避免同时对元素指定padding/border以及高度或宽度。

Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题,但假如母元素需要指定高度与宽度时,最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时,在母元素套用padding以达效果。

5.DIV CSS网站布局时不要依靠min-width/min-height。

Windows版IE并不支援两种语法。但是在某种程度下,windows版IE可以达到相当于min-width/min-height的效果,所以只要对IE做点过滤功能,即可达到想要的结果。

6.若有疑问,先减少百分比。

有时候某些错误会使50%50%成为100.1%,使网页出现问题。这时请尝试将这些值改为49%,甚至49.9%。

7.记住“TRBL”写法。

DIV CSS网站布局中border,margin与padding的简写语法有特定顺序,从上方开始顺时针方向转动:top,right,bottom,left.所以margin:01px3px5px的结果是上方无边界,右边1像素,以此类推。记住“TRBL”,就不会弄错次序了。

8.只要不是零的值,都要指定单位。

CSS需要对每个font,margin等各种值指定单位。