css中颜色的设置
2016-03-28 17:04
483 查看
<!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>
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css样式
- Response输出excel设置文本样式
- HTML，CSS，font-family：中文字体的英文名称 （宋体 微软雅黑）
- CSS居中解决方案
- CSS：static/relative/absolute
- css中字体的设置
- css动画
- overflow失效的一种情况
- 同一个div中图标与块元素没对齐
- css中的溢出文本和文本对齐
- CSS 同时具备两个class的样式
- 实用CSS3属性之 :target伪类实现Tab切换效果
- CSS样式给按钮加阴影
- 博客样式
- 动态dynamically变更母版_Layout页body标签css的class
- 基于单个 div 的 CSS 画图
- css中的多样化文本阴影：text-shadow
- css中的选择器
- 下拉列表<form>和<select>的css样式
- css伪类