複数のページに独自のCSSを含むヘッダーを含めること

私は自分のウェブサイトのさまざまな部分にヘッダーを作成しました。これらはすべて、別のソフトウェア（mediawiki、phpbb、regular htmlなど）で動作します。私はそれをすべてのページの絶対的なトップにしたい。複数のページに独自のCSSを含むヘッダーを含めること

どのページにも含める最も簡単な方法と、同じ種類の他の要素と矛盾することなくCSS属性を含めるにはどうすればよいですか？私はクラスとIDの両方を無駄にしようとしました。たとえば、これらのulおよびli CSS属性を、指定されたページに既に存在するulおよびli要素と競合することなく保持します。

は、ここでのコードだ、CSSが含まれる：あなたがすべてのことだけでなく、実装を計画していないから少し泥沼を持っているようだ

<head> 
<style> 
* { 
    padding: 0; 
    margin: 0; 
} 
body { 
    font-family: Tahoma; 
} 
a { 
    text-decoration: none; 
    color: #ffffff; 
    font-size: 20px; 
    font-family: Tahoma; 
} 
ul { 
    display: inline; 
    margin: 0 auto; 
} 
ul li { 
    list-style: none; 
    display: inline; 
    margin-left: 6px; 
    margin-right: 6px; 
    padding-left: 3px; 
    padding-right: 3px; 
    padding-top: 3px; 
    border-bottom: 3px solid #34549F; 
} 
ul li:hover { 
    background-color: #7FBCF9; 
    border-bottom: #ffffff; 
    color: #000000; 
    border-bottom: 3px solid #ffffff; 
    color: black; 
} 
#fullNav { 
    text-align: center; 
    width: 100%; 
    border-bottom: 2px solid; 
    background-color: #34549F; 
} 
</style> 
</head> 
<body> 
<div id="fullNav"> 
<ul> 
    <li><a href="foo">foo</a></li> 
    <li><a href="foo2">foo2</a></li> 
    <li><a href="foo3">foo3</a></li> 
    <li><a href="foo4">foo4</a></li> 
</ul> 
</div> 
</body>

出典

2011-01-13 AKor

ですこれをすべてに含めるには？または何？明確にしてください... – Jakub

私が欲しいものに含める最も簡単な方法と、CSSの属性をそれが含まれているメインページとは別に保つ方法です。 – AKor

。私はphpBBを実行しているので、あなたのサーバにPHPがあると仮定します。

私は、コードを含める最も簡単な方法は、それぞれ異なるソフトウェアのテンプレートを編集することと、include("example.php")またはrequire("example.php")というテンプレートをすべて同じ場所から編集することだと思います。あなたのPHPファイルでは、ヘッダー

<? function makeHeader(){ 
    /* header html which only includes <div>, etc and 
     not the full html required to generate a page layout. */ 
     <div id="fullNav"> 
<ul > 
    <li ><a href="foo">foo</a></li> 
    <li ><a href="foo2">foo2</a></li> 
    <li ><a href="foo3">foo3</a></li> 
    <li ><a href="foo4">foo4</a></li> 
</ul> 
</div> 
    } 
    ?>

そして、あなたの様々なHTMLテンプレート内のテンプレートを作成することができます

、あなたのHTMLにもたらす<? makeHeader() ?>を使用して、それを呼び出すことができます。

あなたのヘッダのCSSがすべて一緒にバンドルする必要があり、その後も使用してサイト全体のために1つの場所から参照することができます。 <link rel="stylesheet" type="text/css" href="example.css" />

をCSSの名前の衝突を避けるために、固有のIDの名前とクラスを使用しますヘッダー。したがって、#headerの代わりに、#AndreisGlobalHeaderのようなものを使用できます。それは絶対確実ではありませんが、衝突を探す既存のCSSを通過する時間を節約するはずです。また、あなたのCSSのリンクにclassとidを使用すると、問題を取り除くのに役立ちます。

出典

2011-01-13 01:56:26 KyleWpppd

複数のページに独自のCSSを含むヘッダーを含めること

答えて

関連する問題