tml代码里,表示颜色一般用两种方法,一种是直接写出颜色的英文,另一种是前面写个“#”后面再写6个数字字母。
先说第一种表示方法,这个很简单,如果要表示黑色直接就是black,红色就red,蓝色就blue。具体的我们看下面图1,图2
图1
图2
现在来说第二种,这也是我们这个文章要重点说的,因为这个也是最经常用的表示方法,很多人看到这个又是字数又是字母的就糊涂了,今天我们来详细的把它讲清楚。先用图片来说明一下,先看下面图3
图3
图3里的#000000表示的是黑色,#ff0000表示红色,#00ff00表示绿色,所以说这个效果是和图1一样的。那要怎么理解这种表示颜色的方法呢,我们再来列出几个颜色和它的表示法:
红色:#ff0000,绿色:#00ff00,蓝色:#0000ff, 大家仔细看一下就可发现,这个和我们平常说的RGB格式来表示颜色是一样的,相当于红绿蓝三个光,而f是十六进制中的0,1,2,.....e,f中的f了 。f是里面的最大值了,ff代表该颜色光的值达到最大,所以#ff0000是红色,#880000表示的也是红色,只是没有#ff0000这个那么红了。其他的也是同理。所以#000000代表三个颜色光的值都为0,没有任何光了,那就是黑色了,相反#ffffff代表三个颜色光的值都达到最大,混合在一起就成白色。我们也知道红光和蓝光混在一起是紫色的,所以#ff00ff表示的是紫色,同样#ffff00表示的是黄色。讲到这里相信大家应该都明白了怎样用这种方法表示颜色了吧,如果要表示一种颜色,只要把相应的值增加或减小或者添加另一个颜色,这样就可以得到千千万万种颜色了。
这两种表示颜色的方法都讲完了,尤其是第二种方法,大部分情况都是用这种方法来表示html里面的颜色的。如果大家有什么更好的更容易理解的想法,可以点击关注【点点有你】一起来讨论一下哦
最后,如果您觉得我写的这些文章对您有帮助的话,您可以根据您的情况随意给点赏金,我相信一分也是爱也是支持,下面两图是我的支付宝和微信收款码。当然写文章不是一定要让您给赏金的,有您的支持和赞助,我会有更多动力来写文章和大家分享的,再次感谢您的支持和理解!
内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!
大家好,我是大澈!
本文约 800+ 字,整篇阅读约需 1 分钟。
今天分享一段优质 CSS 代码片段,轻松实现一键切换主题颜色,在任何项目中都可用。
老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!
[data-theme='default'] {
--font-primary: #fff;
--background-main: #0678be;
}
[data-theme='black'] {
--font-primary: #fff;
--background-main: #393939;
}
<html lang="en" data-theme="default"></html>
body {
color: var(--font-primary);
background-color: var(--background-main);
}
分享原因
这段代码可以轻松实现网页主题的切换,且在各种项目中通用。
先定义不同主题的 CSS 变量,再通过 JavaScript 动态更改 data-theme 属性,从而实现页面样式的动态变化。
这种方法不仅简化了主题管理,还提高了代码的可读性和维护性,是我们项目中一般且常用的实现方式之一。
代码解析
1. 定义主题变量
CSS变量:声明自定义CSS属性,它包含的值可以在整个文档中重复使用。属性名需要以两个减号(--)开始,属性值则可以是任何有效的 CSS 值。
CSS属性选择器:匹配具有特定属性或属性值的元素。例如[data-theme='black'],将选择所有 data-theme 属性值为 'black' 的元素。
使用 [data-theme='default'] 和 [data-theme='black'] 选择器,根据 data-theme 属性的值定义不同的主题样式。
定义了两个 CSS 变量 --font-primary 和 --background-main,分别表示字体颜色和背景颜色。
2. 指定默认主题
在 <html> 元素上添加 data-theme="default",指定默认主题为 default 。
后面用 js 动态切换 data-theme 属性值,然后 CSS 属性选择器将自动选择对应的 CSS 变量。
3. 应用 CSS 变量
Var函数:用于使用 CSS 变量。第一个参数为 CSS 变量名称,第二个可选参数作为默认值。
使用 var(--font-primary) 和 var(--background-main) 来引用之前定义的 CSS 变量。
这里设置 body 元素的 color 和 background-color 属性,分别引用 --font-primary 和 --background-main 变量,在项目中按需设置对应的元素即可。
者:IT智云编程
链接:https://www.jianshu.com/p/4fa116fc4653
在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了。下面就介绍3中实现方式供大家参考!
基础样式:
.gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }
第一种方法,使用 background-cli、 text-fill-color:
.gradient-text-one{ background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
说明 :
background: -webkit-linear-gradient(...) 为文本元素提供渐变背景。
webkit-text-fill-color: transparent 使用透明颜色填充文本。
webkit-background-clip: text 用文本剪辑背景,用渐变背景作为颜色填充文本。
第二种方法,使用 mask-image:
.gradient-text-two{ color:red; } .gradient-text-two[data-content]::after{ content:attr(data-content); display: block; position:absolute; color:yellow; left:0; top:0; z-index:2; -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0))); }
说明:
mask-image 和 background-image 一样,不仅可以取值是 图片路径,也可以是渐变色。
第三种方法,使用 linearGradient、fill:
.gradient-text-three{ fill:url(#SVGID_1_); font-size:40px; font-weight:bolder; } <svg viewBoxs="0 0 500 300" class="svgBox"> <defs> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50"> <stop offset="0" style="stop-color:yellow"/> <stop offset="0.5" style="stop-color:#fd8403"/> <stop offset="1" style="stop-color:red"/> </linearGradient> </defs> <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text> </svg>
说明:
在SVG中,有两种主要的渐变类型:
线性渐变(linearGradient)
放射性渐变(radialGradient)
SVG中的渐变不仅可以用于填充图形元素,还可以填充文本元素
dom示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>CSS3渐变字体</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} body,html{width:100%;height:100%;} .wrapper{width:80%;margin:0 auto;margin-top:30px;} .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; } .gradient-text-one{ background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .gradient-text-two{ color:red; } .gradient-text-two[data-content]::after{ content:attr(data-content); display: block; position:absolute; color:yellow; left:0; top:0; z-index:2; -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0))); } .gradient-text-three{ fill:url(#SVGID_1_); font-size:40px; font-weight:bolder; } </style> </head> <body> <section class="wrapper"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">方法1. background-clip + text-fill-color</h3> </div> <div class="panel-body"> <h3 class="gradient-text gradient-text-one">花样年华</h3> </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">方法2. mask-image</h3> </div> <div class="panel-body"> <h3 class="gradient-text gradient-text-two" data-content="豆蔻年华">豆蔻年华</h3> </div> </div> <div class="panel panel-danger"> <div class="panel-heading"> <h3 class="panel-title">方法3. svg linearGradient</h3> </div> <div class="panel-body"> <svg viewBoxs="0 0 500 300" class="svgBox"> <defs> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50"> <stop offset="0" style="stop-color:yellow"/> <stop offset="0.5" style="stop-color:#fd8403"/> <stop offset="1" style="stop-color:red"/> </linearGradient> </defs> <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text> </svg> </div> </div> </section> </body> </html>
效果:
这里推荐一下我的前端技术分享群:731771211,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。
*请认真填写需求信息,我们会在24小时内与您取得联系。