Question

如何解决老师的要求：“CSS独立文件，不能与HTML放置在一起” 与每一个网页不同的背景图片那，

我做的是动漫“海贼王”的主题，这其中有是一个主要角色，我想做不同内容的页面，所以每个页面的header图片都是不同，为了照顾一个css重复利用和html表现形式多样，这十一个页面中，有几个是通过在html中通过style type来单独设置的header，但这样就不满足作业要求了？
老师给出建议：对于每个页面，加入单独的css文件，设置header，然后在HTML页面中，先引入common.css，再引入该单独的css文件,即可达到要求。你可以查一下css的优先级！
但是我自己上网看那个css优先级又搞不懂，希望大家能帮我讲讲!!!!!!!!!!!!!!!!
急！！！！！

我现在想到的解决方法就是插入相同的header,但是我认为这样就失去了个体角色的特点。

对于每个页面，加入单独的css文件，设置header，然后在HTML页面中，先引入common.css，再引入该单独的css文件,即可达到要求。你可以查一下css的优先级！

Answer 1

一个CSS就可以了
然后弄个JS 不同页面返回不同的值 通过不同的值来使不同页面header的图片不一样。
大体给你做了一个JS
function C_img(num)
{
/*这里的num就是你传过来的值*/
var img
/*这里是图片的名字，起的有规律点*/
img = "<img src='images/img" + num + ".jpg' />"
/*image是层的ID，通过ID来确定图片的位置，用别的名字也可以的*/
document.getElementById("image").innerHTML = img;
}
调用的时候把注释去掉，在BODY里加一句 onload="C_img(数字)"

Answer 2

＝ －，你老师那样建议的啊……?
我说，为什么非要单独引入CSS，而不直接改动一下HTML的代码？代码也应该是你自己写的吧？
你可以把各个页指定不同的class不就可以解决问题了嘛，或用两个class，一个共享，一个独立，如：

CSS代码这样：
.header{width:1006px;height:250px;}
.hp1{background:url(img.jpg) no-repeat;}
.hp2{background:url(img2.jpg) no-repeat;}
.hp3{background:url(img3.jpg) no-repeat;}
……
.hp11{background:url(img11.jpg) no-repeat;}

第一个页面：
<div class=""header hp1"></div>
第二个页面：
<div class=""header hp2"></div>
第三个页面：
<div class=""header hp3"></div>

……
第十一个页面：
<div class=""header hp11"></div>

如果你header是用ID的话，那直接插入个CLASS就可以。
<div id=""header" class="hp1"></div>

还有，11张图那么多，建议把它们做成一张图，用background-position定位各部分，这样方便得多，而且只写一条背景的url连接就行，省代码：
.hp1,.hp2,.hp3,……,.hp11{background:url(img.jpg) no-repeat;}
.hp2{background-position:left -250px;}
.hp3{background-position:left -500px;}
……
－－－－－－
优先级？老师没教，就叫你查一下css的优先级？
其实优先级并不难，自己多多看看，理解一下就行，英语老师有教过你们英语中be变形的语法吧－－－“就近原则”
跟这个差不多。

以上……

Answer 3

简答的来说可以这样。
页面1 <link rel="stylesheet" type="text/css" href="/css/1.css" media="all">
在1.css中导入样式，如主体样式，外加你的特殊样式。
@import url("/common-new/css/base.css");
@import url("/common-new/css/teshu1.css");

页面2 <link rel="stylesheet" type="text/css" href="/css/2.css" media="all">
@import url("/common-new/css/base.css");
@import url("/common-new/css/teshu2.css");

一般这样来说就可以解决了！大型网站架构都是这样的。各个部分CSS是独立的。用到什么调什么。

Answer 4

我擦，楼上的回答这么仔细害我都没法补充了

Answer 5

动态的来作