第一步：
先建立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的区别！
打了这么多，相信基本的样式可以应用了。
原文地址：https://www.weidianyuedu.com/content/1720707687230.html
2152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
