CSS基础知识及介绍——CSS里的单位和值

最新推荐文章于 2023-09-07 11:17:54 发布

混吃混喝的废物

最新推荐文章于 2023-09-07 11:17:54 发布

阅读量146

点赞数

分类专栏： DIV+CSS 文章标签： CSS 3 CSS单位 RGB URL opacity

本文链接：https://blog.csdn.net/qq_37196494/article/details/95981868

版权

DIV+CSS 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

1.颜色：命名颜色、RGB颜色、十六进制颜色、网络安全色
命名颜色：英文单词命名与之相应的颜色
RGB颜色：以红、绿、蓝三种颜色为基本色

example：
color：rgb(255,0,0);红色
color：rgb(0,255,0)绿色
color：rgb(100%,0,0)红色
取值范围为0-255（可采用数值和百分比进行设置）

十六进制颜色：在Dreamweaver可通过色板来定义颜色
网络安全色：由216种颜色组成，是被认为在任何操作系统和浏览器中都是相对稳定的。重点*（CSS配色首选）

2.CSS 3 中新增的颜色

RGBA：对RGB色彩模式的扩展

rgba(r,g,b,alpha)
alpha参数是一个介于0.0（完全透明）和1.0(完全不透明)之间的数字

HSL和HSLA：代表色调（Hue）、饱和度（Saturation）、亮度（Light-ness）

语法如下：
hsl(length.percentage,percentage)
length:任意数值：0或360代表红色、60表示黄色、120表示绿色
percentage：0%-100% 0%表示灰度，即没有采用该颜色
percentage：0%-100% 0%最暗。显示为黑色 100%最亮，显示为白色

HSLA增加了不透明度参数

hls(length,percentage,percentage,opacity)

参考代码：
<!DOCTYPE html>
<html>
<head>
	<title>CSS选择器</title>
	<style type="text/css">
	.log div{height: 20px;}
	.log div:nth-child(7){background-color: hsla(355,50%,50%,0.1);}
	.log div:nth-child(6){background-color: hsla(355,50%,50%,0.2);}
	.log div:nth-child(5){background-color: hsla(355,50%,50%,0.3);}
	.log div:nth-child(4){background-color: hsla(355,50%,50%,0.4);}
	.log div:nth-child(3){background-color: hsla(355,50%,50%,0.5);}
	.log div:nth-child(2){background-color: hsla(355,50%,50%,0.6);}
	.log div:nth-child(1){background-color: hsla(355,50%,50%,0.7);}
	</style>
</head>
<body>
   <h3>短歌行</h3>
   <hr>
   <div class="log">
   <div>对酒当歌</div>   <div>人生几何</div>
   <div>去日苦多</div>   <div>譬如朝露</div>
   <div>概当以慷</div>   <div>忧思难忘</div>
   <div>何以解忧</div>   <div>唯有杜康</div>
   </div>
</body>
</html>

opacity属性

opacity：alphavalue
alphavalue参数是由浮点型和单位标识符组成的长度值
取值为1，则元素是完全不透明
取值为0，则元素是完全透明的

3. 长度单位

在CSS属性的长度单位分为两类：绝对单位和相对单位

绝对单位分为五种：英寸( in )、厘米（cm）、毫米（mm）、磅（pt）、pica（pc）

相对单位主要分为三种：

1）em：1em其实是当前字体的font-size，em的值是不固定的，随着当前字体大小的变化而变化

2）ex：ex是以给定字体的小写字母“x”高度作为基准

3）px：也叫像素，1像素是屏幕上的一个小方格

4.通过URL引入外部资源

URL可以用两种形式引入外部资源：绝对URL和相对URL

绝对URL的格式：url(http://server/pathname)

相对URL的格式：url(pathname)

相对URL路径的使用一般都是用于指定在同一个目录下的文件位置

混吃混喝的废物

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识及介绍——CSS里的单位和值

1.颜色：命名颜色、RGB颜色、十六进制颜色、网络安全色命名颜色：英文单词命名与之相应的颜色 RGB颜色：以红、绿、蓝三种颜色为基本色example：color：rgb(255,0,0);红色color：rgb(0,255,0)绿色color：rgb(100%,0,0)红色取值范围为0-255（可采用数值和百分比进行设置）十六进制颜色：在Dreamweaver可通...
复制链接

扫一扫