定义CSS变量

在css文件顶部定义css变量,注意必须以--开头,使用:root包括这几个变量

:root {
--main-bg-color: #ff7675;
--color1: #fbfee9;
--color2: #5a4446;
--color3: #8baca1;
--color4: #ffeec4;
}

使用

在需要的地方使用,使用var()包裹css变量

#secondsLong {
position: fixed;
color: var(--color1);
width: 100%;
height: 40px;
font-size: 1.2em;
bottom: 0;
background-color: var(--main-bg-color);
}

原生CSS设置网站主题色—CSS变量赋值的更多相关文章

  1. 小技巧!CSS 提取图片主题色功能探索

    本文将介绍一种利用 CSS 获取图片主题色的小技巧.一起看看~ 背景 起因是微信技术群里有个同学发问,有什么方法能够获取图片的主色呢?有一张图片,获取他的主色调: 利用获取到的这个颜色值,来实现类似这 ...

  2. HTML和CSS设置动态导航以及CSS中伪元素的简单说明

    HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...

  3. Jquery 设置class 和 div CSS

    Jquery 设置class 和 div CSS 1 Jquery 根据标签内容获取标签div,从而修改该div CLASS //追加 $('label:contains("labelcon ...

  4. Swift主题色顶级解决方案

    一.常规主题色使用点 应用在发布前都会对主题色进行设置,以统一应用的风格(可能有多套主题).在主题色设置上有几个方面,如下: 1. TabBar部分,设置图片高亮.文本高度颜色2. Navigatio ...

  5. Swift主题色顶级解决方案一

    一.常规主题色使用点 应用在发布前都会对其主题色进行设置,以统一应用的风格(可能有多套主题).在主题色设置上有几个方面,如下: 1.TabBar部分,设置图片高亮.文本高度颜色 2.Navigatio ...

  6. 使用 css/less 动态更换主题色(换肤功能)

    前言 说起换肤功能,前端肯定不陌生,其实就是颜色值的更换,实现方式有很多,也各有优缺点 一.看需求是什么 一般来说换肤的需求分为两种: 1. 一种是几种可供选择的颜色/主题样式,进行选择切换,这种可供 ...

  7. 044. asp.net主题之二为主题添加CSS样式和动态加载主题

    1. 新建任意一个网站, 默认主页为Default.aspx, 增加一个App_Themes目录, 用于存储主题, 添加一个MyTheme的主题, 在MyTheme主题下添加一个样式表文件, 默认名称 ...

  8. css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

  9. PHP.5-DIV+CSS布局网站首页实例

    DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS ...

随机推荐

  1. Spring Cloud Eureka简介及原理

    Eureka是Netflix开发的服务发现组件,本身是一个基于REST的服务.Spring Cloud将它集成在其子项目spring-cloud-netflix中,以实现Spring Cloud的服务 ...

  2. 目标检测算法之YOLOv3

    参考地址:https://blog.csdn.net/leviopku/article/details/82660381 YOLO v3结构图 DBL:卷积+BN+leaky relu,是v3的最小组 ...

  3. Python深度学习案例1--电影评论分类(二分类问题)

    我觉得把课本上的案例先自己抄一遍,然后将书看一遍.最后再写一篇博客记录自己所学过程的感悟.虽然与课本有很多相似之处.但自己写一遍感悟会更深 电影评论分类(二分类问题) 本节使用的是IMDB数据集,使用 ...

  4. Memcached 快速入门

    Memcached简介 Memcached是一个专门用来做缓存的服务器,而且缓存的数据都在内存中.Memcached就相当于一个Dictionary键值对集合,保存的是键值对,然后根据key取valu ...

  5. VMware搭建虚拟机服务器

    一.需求点描述: 1.在有路由器的情况下,能够通过固定的外网IP访问路由器中某台实体机中运行的虚拟机. 2.能够通过外网IP访问该虚拟机中的ftp.远程连接.iis.tomcat等. 二.原理分析: ...

  6. python---使用字典来实现链接表图

    最后一章,坚持!!! # coding = utf-8 class Vertex: def __init__(self, key): self.id = key self.connected_to = ...

  7. WPF多屏最大化

    如果计算机存在多个显示器,这时设置wpf窗口为最大化,窗口只能在主显示器中实现最大化,如果想要实现窗口拉伸至多屏,需要获取所有显示器分辨率之和.这时用到了System.Windows.SystemPa ...

  8. h5网页在微信里打开 右上角分享到微信好友或者朋友圈

    首先你需要一个分享接口地址,然后在自定义图片 标题 描述 如下: <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js& ...

  9. EF连接MySql数据库

    Windows要想EF连接MySql,首先要安装两个应用程序 mysql-connector-net-6.8.8.msimysql-for-visualstudio-1.2.7.msi 项目还需要两个 ...

  10. Android 开发随笔

    1 获取屏幕尺寸 WindowManager wm = this.getWindowManager();viewWidth = wm.getDefaultDisplay().getWidth();vi ...