スタイルシートのメタタグの件でご教授下さい。

質問

ドリームウィバーで初めてＨＰを作成している初心者です。
スタイルシートを使っているのですがheadの中にタグが下記のように表示されています。
～省略
<link href="mystyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style12 {font-size: 12px}
body {
background-image: url();
}
body,td,th {
font-size: small;
}
h1 {
font-size: 12px;
}
h2 {
font-size: 10px;
}
.style14 {font-size: large}
.style15 {color: #FFFFFF}
a:link {
color: #FF0000;
}
a:hover {
color: #ff9966;
}
a:active {
color: #99cccc;
}
.style16 {color: #FF0000}
.style17 {color: #0000FF}
.style21 {color: #000000}
.style20 {color: #FF00FF}
.style21 {
color: #000000
}
.style11 { font-family: "Times New Roman", Times, serif;
font-size: 24px;
color: #FF00FF;
}
.style22 {color: #33FF00}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
他人様のＨＰを拝見したところタグがシンプルになっているのですが。
外部スタイルシートに指定しているはずなんですが、なってないのかなと思います。
ご教授下さい宜しくお願いします。

回答No.1

simeondun · ベストアンサー

<link href="mystyle.css" rel="stylesheet" type="text/css" />
の記述で外部CSSを呼び出していますが

<!--
.style12 {font-size: 12px}
・
（中略）
・
.style22 {color: #33FF00}
-->

で二重にCSSを設定してしまっています。ですので「mystyle.css」の中に
上記「style12～style22」を追加するとよろしいかと思います。
既に「mystyle.css」の中に記述されている場合は削除してください。

また
<script type="text/javascript">
<!--
・
（中略）
・
//-->
</script>
はJavaScriptですので「外部JavaScript」にするとソースがすっきりします。
メモ帳などにスクリプト部分だけを記述し、拡張子を「.js」にして保存。
【記述例】
<link href="mystyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>

参考［外部JavaScriptファイルを読み込む］
http://www.tagindex.com/html_tag/page/script_src.html

補足

simeondun様　大変ありがとうございます。
すごく助かりました。
スタイルシートの方は前頁修正しました。
JavaScriptなんですが、トップページは成功したのですが、２ページ以降同じ方法で試したのですが、作動しません。。。
ボタンのロールオーバーイメージを作業しているのですが、イメージナンバーを統一にしてみたり試しましたが、分かりません。
ひょっとして1ページに1個づつの【～省略.js】のファイルが必要なのでしょうか？

回答No.3

simeondun

No.1、2です。
> 起動しているページはすべて一番上のファイルで、フォルダに入れているファイルが起動しません。
ということは【～省略.js】の階層と2ページ目以降の階層が違いますよね？

index.html（一番上のファイルでJavaScriptが動作可のページ）
script.js（JavaScriptファイル）
　　 |
　　 +-- フォルダ/2page.html（JavaScriptが動作しないページ）
　　　　　 |　　　　　3page.html（同上）
　　　　　 |　　　　　4page.html（同上）

階層が違っていればタグ指定も変更しないと動作しませんよ。
2ページ目以降の外部JavaScriptファイル呼び出しタグを下記に変更してみてください。

<script type="text/javascript" src="../script.js"></script>

お礼

色々有難う御座いました。
解決いたしました。
勉強させていただきました。

回答No.2

simeondun

> ひょっとして1ページに1個づつの【～省略.js】のファイルが必要なのでしょうか？
全てのページにJavaScriptを記述されているのであれば
<script type="text/javascript" src="script.js"></script>
の記述は必要になってきます。（こういう意味でなければ申し訳ありません）

同じ要素で動かす場合ですと、1ページにつき1つ1つ新たにJavaScriptを
書く必要はありません。省略するための「外部JavaScript」ですので。
2ページ目以降のタグの記述が間違っていたりしませんか？

補足

＞全てのページにJavaScriptを記述されているのであれば
すべて同じavaScriptです。
＞<script type="text/javascript" src="script.js"></script>
コードはトップページ(起動したファイル)からコピペなので問題ははいです。

起動しているページはすべて一番上のファイルで、フォルダに入れているファイルが起動しません。

宣言や他のコードが間違っているのでしょうか？