サイトを確認し、CSSスタイルを決定しますか？

Question

次のように上部に同様のバーを配置することを目指しています： http://www.keltainenporssi.fi/ 現在のサイトの色は赤で、他のサイトの色は黒です。

どのようにして私の目標を達成しますか？ おそらくphpによるものですか？

擬似コードの構文は次のようになります

if $site = A
    use-styleA
if $site = B
    use-styleB
else
    use-FinalStyle

Answer 1

非動的アプローチ：

次のように、各サイトにCSSルールを使用できます。

/* site-one.css */
#top-nav li.site-one a {
    color: red;
}

/* site-two.css */
#top-nav li.site-two a {
    color: red;
}

/* site-three.css */
#top-nav li.site-three a {
    color: red;
}

HTML：

<ul id="top-nav">
    <li class="page-one"><a href="pages/one">Page one</a></li>
    <li class="page-two"><a href="pages/two">Page two</a></li>
    <li class="page-three"><a href="pages/three">Page three</a></li>
</ul>

Answer 2

このようなことを行うには、PHPなどのサーバー側スクリプトを使用するのが一般的です。例：

<?PHP

echo '<ul id="top-nav">';

foreach($page as $pageId => $text) {
    echo '<li';
    if($curPage == $pageId)
        echo ' class="active"';
    echo '>';
    echo '<a href="pages/' . htmlspecialchars($pageId) . '">';
    echo htmlspecialchars($text);
    echo '</a>';
    echo '</li>';
}

echo '</ul>';

?>

これにより、次のような出力が生成されます。（読みやすい形式）

<ul id="top-nav">
    <li><a href="pages/home">Home</a></li>
    <li class="active"><a href="pages/one">Page one</a></li>
    <li><a href="pages/two">Page two</a></li>
</ul>

Answer 3

すべてのドメインが取得するバーに単一のCSSを使用できます。そのcssに！importantルールを追加して、ルールが他の何かによってオーバーライドされないようにしてください。それ以外の場合は、「ネームスペース」でバーをシールドします。リスト/ divまたはそれを実装するために使用するものにidを追加します。

Answer 4

はい、現在のサイトに基づいてアンカー要素のクラスを割り当てることができます。