求助!!!在html中引用外部样式表问题!

Posted 2023-04-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了求助!!!在html中引用外部样式表问题!相关的知识，希望对你有一定的参考价值。

各位高手:因最近在自学html和CSS创建网页,现遇到问题被卡住了,还请高手们指点下,多谢了!
问题:在引用外部样式表时我按书上的说明操作为何老是引用不到,就是浏览器根本没反应的!或者说样式表根本没起作用!
简要的代码如下:(aaa.html)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>如何引用样式表说明</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="one">one
</div>
<div class="two">two</div>
<div clsss="three">three</div>
<div class="four">four</div>
</body>
</html>

样式表如下:(styles.css)
div ｛
position:relative;
width:250px;
height:100px;
border:10px single black;
color:black;
text-align:center;
｝
div.one｛
background-color:red;
｝
div.two｛
background-color:green;
｝
div.three｛
background-color:blue;
｝
div.four｛
background-color:yellow;
｝
现是确保样式表是和aaa.html在同一目录下的, 但现在打开aaa.html网页是只在IE 上看到如下屏幕:
one
two
three
four

根本不是我在样式表中设置的一样!哪位高手告诉一下哪里出了问题吗?为什么不显示我在样式表中所设置的呢?

utf-8。样式表文件要保存为这个格式。如果是dw做的。他生成的多办是gb2132。默认是这样。
另外书上很多东西不是正确的（垃圾书很多）,比如：

div.one｛
background-color:red;
｝这个就是个垃圾。问题在于两个细节。
一系统定义为所有div标签套接样式div(全局变量）另一方面又用 “."定义子类。这样会有冲突。最佳方法：
全局变量
bodycolor:字体色;font-size:字体大小什么的。
div这个没有必要
定义类：.one这里有个问题是padding和margin两个属性
如果你只用margin支持IE。但有时在其它浏览器显示不对。
那么说了这么多。总得给你解决问题吧。我把做好的加进去了。你调试。要是有问题。你拿刀砍我。
显示页代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="css.css">
<title>我的修改后的内容</title>
</head>

<body>
<div id="div">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
</div>
</body>
</body>
</html>

css代码//注意href="css.css为名

/*定义系统总变量*/
body text-align:center; font-size:12px; font-family:"宋体"; color:#FF3300;

/*div ｛ position:relative;width:250px; height:100px; border:10px single black;color:black;
text-align:center;
｝这个我不能说是垃圾，至少是很不好*/
#div width:250px; height:100px; margin:0px; border:#000000 solid 10px;/*定义边框为10的黑边高100*/
.onefloat:left; clear:left; width:60px; height:95px; background:#006666; color:#FFFFFF;
.twofloat:left; width:60px; height:95px; background:#CC3333; color:#00FF00;
.threefloat:left; width:60px; height:95px; background: #66CC00; color:#990000;
.fourfloat:right; width:45px; height:95px; background:#666600; color:#000033;
/*为了区别每一行我用不同的字体色*/
/* 四列并行注意最后一行。我留了一个与左边有点间距为5像素*/ 参考技术A 你的代码没有问题,样式表也没有问题,但我把你代码复制下来,发现你用的"｛"和"｝"号是全角而不是正规的半角英文符号""和""号,修改了就正常了.你可以改了试试.

另外如果你怕没引用到外部样式表的话,可以用个<style></style>把样式表放在内部试试. 参考技术B 就是上面那位仁兄所说的一样，
把div .one及其它的，前面的div去掉