css中颜色的设置

最新推荐文章于 2022-09-03 16:09:46 发布
最新推荐文章于 2022-09-03 16:09:46 发布
阅读量709 收藏 2
点赞数
分类专栏： CSS-基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/june_ruikang/article/details/50999375
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
/*HSL色彩模式：hsl(length,percentage,percentage)：色调、饱和度、明亮度*/
/*HSL的优势：可以在同一色系中选择颜色，使得搭配不会太离谱*/
.hs1{
height: 20px;
border: 1px solid #f00;
padding: :10px;
height: 170px;;
background-color: hsl(0,0%,90%);
color: hsl(0,100%,50%);
font-size: 12px
text-align:center;
line-height: 25px;
width: 320px;
}
ul{
width: :320px;
margin:0;
padding: 10px 0;
border-top: 1px solid #ccc;
}
li{
float: left;
margin: 1px 0 0 1px;
width: 50px;
height: 15px;
list-style: none;
font-size:12px ;
line-height: 15px;
}
/*第一行*/
li:nth-child(8){
background-color: hsl(0,100%,100%);
}
li:nth-child(9){
background-color: hsl(0,75%,100%);
}
li:nth-child(10){
background-color: hsl(0,50%,100%);
}
li:nth-child(11){
background-color: hsl(0,25%,100%);
}
li:nth-child(12){
background-color: hsl(0,0%,100%);
}
/*第二行*/
li:nth-child(14){
background-color: hsl(0,100%,75%);
}
li:nth-child(15){
background-color: hsl(0,75%,75%);
}
li:nth-child(16){
background-color: hsl(0,50%,75%);
}
li:nth-child(17){
background-color: hsl(0,25%,75%);
}
li:nth-child(18){
background-color: hsl(0,0%,75%);
}
/*第三行*/
li:nth-child(20){
background-color: hsl(0,100%,50%);
}
li:nth-child(21){
background-color: hsl(0,75%,50%);
}
li:nth-child(22){
background-color: hsl(0,50%,50%);
}
li:nth-child(23){
background-color: hsl(0,25%,50%);
}
li:nth-child(24){
background-color: hsl(0,0%,50%);
}
/*第四行*/
li:nth-child(26){
background-color: hsl(0,100%,25%);
}
li:nth-child(27){
background-color: hsl(0,75%,25%);
}
li:nth-child(28){
background-color: hsl(0,50%,25%);
}
li:nth-child(29){
background-color: hsl(0,25%,25%);
}
li:nth-child(30){
background-color: hsl(0,0%,25%);
}
/*第五行*/
li:nth-child(32){
background-color: hsl(0,100%,0%);
}
li:nth-child(33){
background-color: hsl(0,75%,0%);
}
li:nth-child(34){
background-color: hsl(0,50%,0%);
}
li:nth-child(35){
background-color: hsl(0,25%,0%);
}
li:nth-child(36){
background-color: hsl(0,0%,0%);
}
.hs2{
height: 20px;
border: 1px solid #FFFF00;
padding: :10px;
height: 30px;;
background-image: url(img/1.png);
color: hsl(0,100%,0%); /*字体颜色*/
font-size: 12px
text-align:center;
line-height: 25px; /*字体高度*/
width: 520px;
}
/*HSLA色彩模式：在HSL基础上增加了不透明度的概念，可以设置出透明效果*/
/*HSLA(length、percentage,percantage,alpha)*/
/*alpha的值越小越透明，为了衬托透明度，背景图片选择了带字的一张图*/
ul[lang="b"] li:nth-child(1){
background: hsla(40,50%,50%,0.1);
}
ul[lang="b"] li:nth-child(2){
background: hsla(40,50%,50%,0.2);
}
ul[lang="b"] li:nth-child(3){
background: hsla(40,50%,50%,0.3);
}
ul[lang="b"] li:nth-child(4){
background: hsla(40,50%,50%,0.4);
}
ul[lang="b"] li:nth-child(5){
background: hsla(40,50%,50%,0.5);
}
ul[lang="b"] li:nth-child(6){
background: hsla(40,50%,50%,0.6);
}
/*同理RGBA也可以设置也可以设置半透明效果，这里不再举例*/
/*rgba(red,green,blue,alpha)*/

/*opacity是专门设置不透明度的属性*/
/*opacity:alpha|inherit*/
/*inherit：表示继承父元素的不透明度*/
/*注意兼容性，并不是所有浏览器都兼容这些特性*/
ul[lang="b"] li:nth-child(7){
opacity:0.7;
}
ul[lang="b"] li:nth-child(8){
opacity:0.6;
}
</style>
<body>
<div class="hs1">
<div>色调： 0 红色</div>
<div>竖向： 亮度；横向： 饱和度</div>
<ul>
<li></li><li>100%</li><li>73%</li><li>50%</li><li>25%</li><li>0%</li>
<li>100%</li><li></li><li></li><li></li><li></li><li></li>
<li>75%</li><li></li><li></li><li></li><li></li><li></li>
<li>50%</li><li></li><li></li><li></li><li></li><li></li>
<li>25%</li><li></li><li></li><li></li><li></li><li></li>
<li>0%</li><li></li><li></li><li></li><li></li><li></li>
</ul>
</div>
<div class="hs2">
<ul lang="b">
<li ></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>

</html>


june_ruikang
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css零到一基础教程009：CSS HSL 颜色
kerryqpw的博客
03-18 794
HSL 值 在 CSS 中，可以使用色相、饱和度和明度（HSL）来指定颜色，格式如下： hsla(hue, saturation, lightness) 色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。 饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。 亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。 请通过混合以下 HSL 值来进行实验： 实例 &lt..
CSS学习（十六）-HSLA颜色模式
bwshqh的博客
03-16 1894
一、理论： 1.HSLA颜色模式 a.HSLA在HSL基础上增加了不透明度，值越大透明度越低 b.HSLA颜色模式的浏览器兼容性和HSL一样，只有较新版本的主流浏览器才支持 2.RGBA和HSLA颜色模式二者可以完全相互替换 3.RGBA/HSLA的IE兼容方案 a.在IE8以下版本，一般在前面设置一个非透明色，在其后紧跟一个RGBA/HSLA颜色模式 b.将透明的PNG图片平铺做为
CSS百分比应用的坑
luotouzi的博客
06-07 472
前言 CSS中以下属性常会应用到百分比，以下是对其的一些简单总结： width、height、border-radius、background-position、font-size、line-height、vertical-align、bottom、left、right、top、transform: translate 1. width和height 这个最常用也是最简单的了，它们的百分比计算是基于包裹它的父元素的宽和高来计算，比如: <div class="cube-container">
html如何去掉元素边距,如何摆脱HTML Canvas元素的边距？
weixin_42502736的博客
06-19 503
我正试图为我的下一个项目制作一个带有画布的电子电阻图像。 现在我给了它一个电阻形状，但我无法删除边距。如何摆脱HTML Canvas元素的边距？我试着将填充和边距设置为值0px。但似乎没有工作。我的HTML/CSS代码：.canvas-wire {border: 1px solid #a09898;background-color: #a09898;vertical-align: middle;m...
css 中hsl颜色的意义_hsl（）函数以及CSS中的示例
07-20 1098
css 中hsl颜色的意义Introduction: 介绍： It is no wonder that we can make use of various CSS functions to ease our coding and shorter our coding. Instead of writing long lethargic codes we can simply make use...
CSS 颜色
ivenqin的博客
09-09 455
本节我们来讲一下颜色，因为我们后面学习 CSS 样式时，会经常用到颜色，颜色也是网页中必不可少的一个元素。例如我们可以给某个字体设置颜色，给元素的边框设置颜色，设置元素的背景颜色等。要想一个网页好看，肯定是需要给它添加一些色彩的。 颜色值 颜色是通过对红、绿和蓝光的组合来显示的。我们一般会通过下面三种方式来规定 CSS 中的颜色： 颜色名称 十六进制颜色值 RGB 颜色 颜色名称 HTML 和 CSS 颜色规范中定义了 147 种颜色名，其中有 17 种标准颜色，加上 130 种其他颜色。 例如 red
CSS中的颜色介绍
天空之外
09-07 597
本节我们来讲一下颜色，因为我们后面学习 CSS 样式时，会经常用到颜色，颜色也是网页中必不可少的一个元素。例如我们可以给某个字体设置颜色，给元素的边框设置颜色，设置元素的背景颜色等。要想一个网页好看，肯定是需要给它添加一些色彩的。 颜色值 颜色是通过对红、绿和蓝光的组合来显示的。我们一般会通过下面三种方式来规定 CSS 中的颜色： 颜色名称 十六进制颜色值 RGB 颜色 颜色名称 HTML 和 CSS 颜色规范中定义了 147 种颜色名，其中有 17 种标准颜色，加上 130 种其他颜色。 例如 red
css教程之css设置字体颜色
09-25
在CSS（层叠样式表）中，控制字体的属性包括字体颜色、字体大小、字体样式、行高、字母和单词间距等。这些属性允许我们精确地定制文本的外观，以匹配网页设计的需求。 1. **字体颜色**： 通过`color`属性设置字体...
css控制背景示例(css设置背景图片、设置背景颜色)
09-25
【CSS背景控制】在网页设计中，CSS（Cascading Style Sheets）被广泛用来控制页面元素的样式，其中背景设置是重要的一部分。本篇主要探讨如何利用CSS来设置背景颜色和背景图片。 **一、设置背景颜色** 1. **十六...
CSS 2.0 中文手册.zip
04-22
- **背景**: CSS 2.0 允许设置元素的背景颜色、图像、重复方式、位置等。 - **边框**: 边框样式（solid、dashed、dotted等）、宽度和颜色可自定义，以及边框圆角的控制。 ### 9. 字体与文本 CSS 2.0 提供丰富的...
Dreamweaver中CSS面板该怎么设置?
09-24
Dreamweaver中CSS面板该怎么设置？Dreamweaver中新建的网页需要使用CSS面板设置摆弄狂，字体，背景颜色等等各种参数，该怎么设置呢？下面我们就来看看CSS面板的使用方法
文本背景列表的属性
weixin_46410823的博客
07-15 105
font-size字体大小font-size属性值:单位可以是px，pt，em等12pt=16px1em=16px浏览器默认是16px,设计图常用字号是12px 16px=12pt=1em默认大小为16px字体样式【微软雅黑】 color颜色属性值:颜色的英文/16进制【#FFFFFF】/rgb【255,255,255】 font-family字体样式属性值:楷体 font-weight加粗font-we...
background 背景属性详解
会敲代码的男老师的博客
02-03 3772
background 背景属性 我们知道元素有前景色color，与之对应的还有背景色，通过background我们可以为元素添加实色（background-color）和任意多个背景图片（background-image）。 css 背景常见属性 background-color background-position background-size background-repeat background-origin background-clip background-attachm
HSLA是一种表示颜色的模式，它由四个部分组成：色相（Hue）、饱和度（Saturation）、亮度（Lightness）和透明度（Alpha）
BLOG域名:programb.blog.csdn.net
06-30 939
HSLA是一种表示颜色的模式，它由四个部分组成：色相（Hue）、饱和度（Saturation）、亮度（Lightness）和透明度（Alpha）。在HTML5中，我们可以使用HSLA颜色值来创建半透明效果。在这个例子中，我们使用了HSLA颜色值。来创建一个半透明的红色背景。
颜色 表示方法 hsl_您今天应该在网站中使用HSL颜色的三种方法
cungui5726的博客
08-20 1102
颜色 表示方法 hslThere are some areas in which using hsl color in your CSS has so many advantages it’s surprising that more developers don't take advantage of it. 在某些领域中，在CSS中使用hsl颜色具有许多优势，令人惊讶的是，更多的开发人员没有利...
css中hsla代表_hsla（）函数以及CSS中的示例
cumt30111的博客
07-19 635
css中hsla代表Introduction: 介绍： The use of functions is very beneficial for web development and one must learn as many functions as they can, therefore keep learning functions for improving your knowled...
【css揭秘】- 47个不可不知的 css 技巧(上篇0-19)
web全栈开发的博客
09-03 511
css 揭秘》这本书以案例的形式，介绍了 47 个网页设计经典难题的解决方案，我在学习之余将其一一记录下来，方便回顾，本文介绍前 19个案例效果及代码。在线预览这两种方案都可以实现多重边框的效果，但是outline 只适用于双层边框的场景，如果需要更多层边框，可以用 box-shadow 来实现，另外这两种方案都有一个潜在的缺陷，采用时一定要在不同的浏览器中测试好最终效果。传统方案都是用 svg 或者图片来解决，这里直接使用 css 来创建条纹图案// 水平条纹效果// 垂直条纹效果。
CSS之背景设置background-
weixin_45512170的博客
08-19 464
1、background-color的六种表示方法： ⑴、background-color:rgb(0255,0255,0~255)：rgb表示 红 绿 蓝 ⑵、background-color:rgba（0255,0255,0255,01）:rgb表示 红 绿 蓝 ，最后一个表示透明度。 ⑶、background-color:#ABABAB：十六进制表示 ⑷、HSL(0360，0100%,0~1...
css background 背景知识详解
weixin_30583563的博客
06-22 142
background 背景属性 我们知道元素有前景色color，与之对应的还有背景色，通过background我们可以为元素添加实色（background-color）和任意多个背景图片（background-image）。 css 背景常见属性 background-color background-position background-size background-repe...
html中css设置字体颜色
最新发布
06-02
在HTML中，可以使用CSS样式设置字体颜色。具体方法如下： 1. 在HTML中，使用标签定义样式，或者在单独的CSS文件中定义样式。 2. 使用CSS属性color来设置字体颜色，属性值可以是颜色名称、十六进制颜色代码、RGB颜色...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值