选择一个网页的外观和感觉没有重新加载，与一个CSS

Selecting a web page look and feel without reloading, with one CSS

本文关键字：一个新加载加载 CSS 网页外观选择感觉更新时间：2023-09-26

问题

我需要重新设计现有的web应用程序的CSS结构。它支持"品牌化"。-它有5种不同的外观和感觉。每个用户都有一个指定的品牌，基于他们为之工作的公司。

目前我们有一堆复杂的CSS文件，这些文件早就失控了。一个典型的网页包含4个样式表，模板系统决定哪一个。这意味着需要重新加载页面来切换品牌。

一个新的CSS系统应该:

基于CSS脚本，最好是LESS或SaSS。
在目标环境中只使用一个样式表
允许在不重新加载页面的情况下切换品牌

我的想法

在CSS脚本的帮助下，定义通用规则和基于品牌的规则:

p {
    /* general settings */
}
#brand1 p {
    /* include/redefine general settings, add some for brand1 */
}
#brand2 p {
    /* include/redefine general settings, add some for brand2 */
}

为整个车身创建一个外部<div>，并使用JavaScript将其id切换为brand1, brand2等。这样，我就不需要以任何方式编写CSS脚本，只需要切换"上下文"即可。

我是一个CSS初学者，所以我想避免做一些完全错误的事情。请发表评论。

我是这样做的:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>Themed Website</title>            
    </head>
    <body>
        <div class="wrap">
            <div class="side">
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#" class="active">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                </ul>
            </div>
            <div class="main">
                <h1>Welcome</h1>
                <h2>A Paragraph</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
                </p>
                <h2>A List</h2>
                <ul>
                    <li>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </li>
                    <li>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                    </li>
                    <li>
                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

CSS

body {font-family: segoe ui; background: #fff;}
body .wrap {width: 90%; margin: auto; overflow: hidden;}
body .wrap .side {width: 25%; float: left;}
body .wrap .side ul {margin: 0; padding: 0; list-style: none;}
body .wrap .side ul li {margin: 0; padding: 0; list-style: none;}
body .wrap .side ul li a {text-decoration: none; padding: 5px; display: block;}
body .wrap .side ul li a:hover {background: #ccc; color: #0ff;}
body .wrap .side ul li a.active {background: #0fc; color: #000;}
body .wrap .main {width: 75%; float: right; background: #0fc;}
body .wrap .main h1 {margin: 0; padding: 0 10px 10px;}
body .wrap .main h2 {margin: 0; padding: 10px;}
body .wrap .main p {margin: 0 10px 5px; text-align: justify;}
body .wrap .main ul {margin: 0 10px 10px;}

主题

现在我们的工作是识别可主题组件。在这里，使用基本布局，我们只能为无序列表的颜色和列表样式设置主题。我们先把这些款式单独拿出来。作为初学者的教程，让我们只关注前景和背景颜色，而不是布局。

让我们将第一个类命名为.light，同样的CSS将是:

.light {color: #333; background: #f5f5f5;}
.light .wrap .side ul li a {color: #666; background: #eee;}
.light .wrap .side ul li a:hover {color: #333; background: #ddd;}
.light .wrap .side ul li a.active {color: #333; background: #0ff;}
.light .wrap .main {background: #0ff;}
.light .wrap .main h1 {color: #333;}
.light .wrap .main h2 {color: #666; background: #0fc;}
.light .wrap .main p {color: #093;}
.light .wrap .main ul li p {color: #09c;}

JavaScript

现在要更改代码，我们需要添加三个链接或按钮，它们处理主题更改。因此，在HTML中，让我们添加这三个链接:

HTML

<div class="wrap themelinks">
    <h4>Change Themes:</h4>
    <a href="" class="theme">No Theme</a>
    <a href="light" class="theme">Light</a>
    <a href="grayscale" class="theme">Grayscale</a>
</div>

CSS

.wrap.themelinks {background: #fff; border-radius: 10px; clear: both; overflow: hidden; margin-top: 25px;}
.wrap.themelinks h4 {margin: 0; padding: 10px;}
.wrap.themelinks .theme {margin: 0 10px 10px; padding: 3px 5px; display: inline-block; background: #eee; border-radius: 5px; text-decoration: none; color: #f90}
.wrap.themelinks .theme:hover {background: #f90; color: #fff;}

jQuery

$(document).ready(function(){
    $(".theme").click(function(){
        var theClass = $(this).attr("href");
        $("body").removeAttr("class").addClass(theClass);
        return false;
    });
});

演示

您可以在jsBin中查看工作演示

创建一个单一的，无品牌的样式表，定义页面的总体布局，然后定义特定于品牌的规则，这些规则取决于<body>元素的class，例如:

/* Layout area */
#header {
    height: 50px;
    margin: 0.2em; }
etc...
/* Brand A rules */
.brandA #header {
    background-image: url("brandALogo.png"); }
.brandA #footer {
    background-color: purple; }
/* Brand B rules */
.brandB #header {
    background-image: url("brandBLogo.png"); }
.brandB #footer {
    background-color: orange; }

…所以你不需要重新定义任何东西。

然后用一个简单的脚本客户端将<body>的class属性更改为" brandA "或" brandB "。

我建议不要使用id属性，因为作为标识属性，它应该在文档中是静态和不变的。

对于一个元素，我将这样做:

div {
    /* general settings */
}
div.band1 {
    /* include general settings, add some for brand1 */
    /* redefine general settings, add some for brand1 */
    font-weight: bold !important;
}
div.band2 {
    /* ... */
}

for more elements (demo):

h1{
  font-weight: bold;
  color:green;
}
.band1 h1{
  background-color:red;
  color: white;
}
.band2 h1{
 background-color:yellow;
}
.band1 .head2{
  background-color:red;
}
.band2 .head2{
 background-color:yellow;
}
.band1 #text{
  background-color:red;
}
.band2 #text{
 background-color:yellow;
}

独立定义布局，然后定义所有具有相同的东西，比如形状和整体用户体验…最后使用更深的选择器，像这样:

每个品牌的页面样式应该有一个外部选择器，例如id连接到页面的外层包装，所以对于开始的东西外层包装(或主体，虽然我不建议这样做)应该是id="default"…Default应该在CSS中没有任何引用，然后每个其他品牌应该在CSS中选择body id="brand1"或"brand2"等。

对于改变品牌的交互，你只需这样做:

$(wrapper selector).attr('id', 'brandX');

所发生的是- css渲染的页面容纳其他选择器更深，因为添加了一个外部DOM容器，因此更重要的比默认的。

以这种方式更改选择器使您能够根据自己的喜好对页面进行微调，假设css3和任何DOM操作js引擎都是您的专业知识:D

您也可以动态加载CSS(例如，如果您想基于某些参数生成它)。使用这行代码:

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

另一个优点是用户不需要下载他不想要的所有品牌的所有样式表