CSS样式如何修改

发布网友发布时间：2022-04-06 11:56

我来回答

共8个回答

懂视网时间：2022-04-06 16:17

本篇文章给大家带来的内容是关于css-theme如何通过源码生成一份包含多套皮肤配置的样式文件，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

css-theme

通过单一css文件生成多套主题，并合并入一个css文件中

特性

只加载一个css，通过切换rootClass瞬间切换主题

体积压缩，将多套css合并，去除冗余代码，避免文件体积膨胀

低侵入性，不改变现有开发模式，一处修改，全局生效

安装

$ npm i css-theme --save-dev

使用

css编写

在css中需要根据主题变化的地方使用占位符，占位符可以是任何字符串。
你也可以通过预处理器变量的方式向css文件注入这些占位符。

@dark: #theme1;
@light: #theme2;

.container {
 .text1 {
 font-size: 16px;
 color: #theme1;
 line-height: normal;
 }
 .text2 {
 font-size: 14px;
 color: @dark;
 line-height: normal;
 }
 .text2 {
 font-size: 14px;
 color: @light;
 line-height: normal;
 }
}

gulp插件模式

在gulp任务中调用theme插件。详见 demo/gulp

var cssTheme = require('css-theme').gulp; // gulp-plugin
var themeConfig = require('./theme.config'); // configs

less({
 plugins:[new LessPluginTheme(themeConfig)]
})

less插件模式

在通过gulp/webpack等工具调用less时，插入theme中间件。详见 demo/less

var LessPluginTheme = require('css-theme').less; // less-plugin
var themeConfig = require('./theme.config'); // configs

gulp.task('default', function() {
 return gulp.src('./index.less')
 .pipe(less())
 .pipe(cssTheme(themeConfig))
 .pipe(gulp.dest('./dist'));
});

配置

placeholder: 占位符,描述每个变量在css文件中对应的占位符

list: 主题列表

list.targetMap: 该主题中每个变量对应的值

list.rootClass: 使用该主题时顶层添加的class

list.default: 是否将该主题作为默认主题，在未指定class时默认展示该主题

module.exports = {
 'placeholder': {
 'dark': '#theme1',
 'light': '#theme2'
 },
 'list': [
 {
 'default': false,
 'targetMap': {
 'dark': '#ff6a3a',
 'light': '#ffa284',
 },
 'rootClass': 'skin_orange'
 },
 {
 'default': false,
 'targetMap': {
 'dark': '#fdd000',
 'light': '#ffd71c',
 },
 'rootClass': 'skin_yellow'
 }
 ]
};

热心网友时间：2022-04-06 13:25

1、引jQuery，然后定义元素的style样式，根据自己的元素来定义，这里随性定义div的style样式。

2、接着我们看样式所带来的效果，接着开始设置点击按钮会产生变化颜色等交互效果。

3、首先，自然是指定好触发变化颜色的事件，可以是经过触发等，这里我就点击即可触发颜色变化。

4、用css()便可以覆盖原来元素的样式了哦。

5、如果是修改元素单个样式，要用逗号隔开，不可以使用冒号哦。

6、这样就可以得到交互效果了，但是这只是一个样式的效果发生了变化，

7、可以用大括号裹住多个样式，逗号分隔样式，然后样式值用冒号

8、最后样式交互就大功告成了，多个样式就会被修改了

热心网友时间：2022-04-06 14:43

之前在论坛上面看到论坛后台可以把所有页面的标题,内容，字体，背景，颜色等css属性都列出来了，并且可以随意重新设置，保存以后前台页面就可以根据设置动态的更新显示了，之前就有了一点想法，做了一个demo.jsp，然后在这个页面引入一个style.css样式文件，并且在这个样式文件中定义了一些属性，然后定义了一个java类来对应样式文件的属性

热心网友时间：2022-04-06 16:18

这个修改起来很麻烦的，你得找到那个页面的css文件，然后找到每一个需要修改的样式定义，查找到每一个元素在页面中的位置，然后根据该元素定义样式的id或者class名称在css文件中找到对应的名称，然后修改相关属性。需要查看页面源代码。用谷歌的浏览器，可以右键-审查元素，方便的查看页面的各种元素。希望我的回答对你有所帮助。

热心网友时间：2022-04-06 18:09

你现在有CSS的代码吗？没有的话，另存为一下，先把原来的CSS代码看懂，这样才能修改！

热心网友时间：2022-04-06 20:17

找到对应的css，然后修改其中的属性

热心网友时间：2022-04-06 22:42

CSS样式修改，首先要确定你css样式所写的位置，如html中文件，需要找到对应的id，class或者是标签名，然后需要想好你要改的样式，然后正确填写就行了，请看代码：
<html>
<head>
<style>
#sub{ //通过id实现
width:300px;
height:30px;
font-size:13px;//将id为sub的字体改为13px；
}

</head>
<body>
<div>
<div id=sub>测试文字，</div>
<span>我不会浮动的</span>
</div>
</body>
</html>

热心网友时间：2022-04-07 01:23

用搜索吧，取出想改地方的颜色，然后搜索，找到那个位置就改吧！你要是一点不会就完了，只能改个颜色了！