2012-05-10 1 views
0

誰もが分かると思っていました。 私は私のウェブサイトにCSSを持っています。私は、各ページのページの上部に同じプロパティ(クラス)を使いたいと思います。残りのページでは別のクラスを使用します。 たとえば、Page1、Page2、Page3があるとします。 「自分のサイトへようこそ」ラベルではすべて同じCSSクラスを使用しますが、ラベル以外の各ページでは異なるデータが表示され、異なるクラスが使用されます。 ページ1からページ3に移動するたびに、私は同じCSSを呼び出し続けます。各ページに再びCSSが動作する方法

1.Call同じクラス:

私の質問は、両方の効率的かつ純粋主義-LY、行うことが最善であるもの、です。

2.毎回CSSを呼び出さないように、ページの先頭のスタイルを設定します。

3.残りのページについては、Iframeを使用してください。

4.私が言及しなかった他の方法。

--after Edit--

最高、デビッド

+0

あなたは、他の言葉でこれを説明してみていただけますか?あなたが望むものを理解するのは難しいです。さて、これはあなたのためのソリューションがある - –

+0

はDefinetely 1、CSSクラスは、私は私の質問 – Gatekeeper

答えて

4

私はそれはあなたがしたいことが何であるかわからないんだけど、あなたがあなたのページにまたがって、いくつかの一般的なCSSをしたい場合はどこCSSへのリンク、そして、それはです便利になる:

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

あなたが(彼らは<head>に行かなければならない)ページに好きなようにこれらの多くを持つことができますので、あなたが好きなようにあなたができるだけ多くのファイルにあなたのCSSを分割することができます。また、これにより、視聴者はCSSファイルをキャッシュできるので、毎回ダウンロードする必要はありません。

例:

SuperLabel.css

.superLabel 
{ 
    color: red; 
    font-weight: bold; 
    margin: 50px; 
} 

Page1.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Page 1</title> 
     <link rel="stylesheet" type="text/css" href="SuperLabel.css"/> 
     <link rel="stylesheet" type="text/css" href="page1.css"/> 
    </head> 
    <body> 
     <div class="superLabel">I'm FABULOUS!</div> 
     ... the rest of content ... 
    </body> 
</html> 

Page2.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Page 1</title> 
     <link rel="stylesheet" type="text/css" href="SuperLabel.css"/> 
     <link rel="stylesheet" type="text/css" href="page2.css"/> 
    </head> 
    <body> 
     <div class="superLabel">I'm fabulous AGAIN!</div> 
     ... the rest of content ... 
    </body> 
</html> 
+0

おかげで:-)のためのもの厥。関連するCSSを独自のファイルに移動して参照します。私はすぐに例を挙げます。 –

+0

@DavidRasuliを編集したコメントについて –

+0

多くの感謝のVilx! –

1

私はあなたの質問を理解しているかどうかは完全にはわかりませんが、ロードタイムを改善するためにヘッダCSSを他のボディから分離することは意味しますか?あなたの質問があれば、私はそれが必要だとは思わない。それは重くはないし、ユーザーのブラウザは通常、それをキャッシュし、あなたの最後の訪問以後に変更されたかどうかをチェックする。

+0

私は私の質問を編集しました。 –

0

iframeを使用する必要はありません。 bodyタグもクラスを持つことができます。

私はPage1のクラスのSTYLE1 "の体を与え、ページ2クラスのボディを与えると 'スタイル2'

<span class="welcome">Welcome to my site</span> 

とCSSが

.style1 .welcome { color:red; } 
.style2 .welcome { color:blue; } 

のPage1の 'ウェルカムメッセージ' ですテキストの色は、 赤くなり、ページ2の「ウェルカムメッセージ」テキストの色が青になります。

これは、あなたがしたいということでしょう。

関連する問題