css字体颜色四种常规表示
-
使用颜色名作为属性值来表示颜色:
例如: color: red; // color为颜色属性 red为属性值 -
使用16进制颜色值来表示颜色
例如: color: #ac8049; // color为颜色属性 #ac8049为属性值 -
使用rgb颜色值来表示颜色;
例如: color: rgb(122,89,233); // color为颜色属性 rgb(122,89,233) :为属性值 -
使用rgba颜色值 来表示颜色
例如:color: rgba(122,89,233,.3); // a 表示透明度,可取值0~1之间,0表示完全透明,1表示完全不透明,0.3可以简写成.3,较例3rgb在颜色基础上又加了第四个值透明度.**重点:需要注意的是在实际开发中,
颜色名可能不被一些浏览器接受。
因此使用16进制,或RGB颜色值能被所有浏览器识别正常显示 **代码体验:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 1.使用颜色名表示 */
/* color: red; */
div:first-child {
color: red;
}
/* 2.使用16进制颜色值 */
/* color: #ac8049; */
div:nth-child(2) {
color: #ac8049;
}
/* 3.使用rgb颜色值 */
/* color: rgb(122,89,233) */
div:nth-child(3) {
color: rgb(122, 89, 233);
}
/* 4.使用rgba颜色值 */
/* a 表示透明度 */
/* color: rgba(122,89,233,.3); */
div:last-of-type {
color: rgba(122, 89, 233, .1);
}
</style>
</head>
<body>
<div>hello everyone and welcome! 1</div>
<div>hello everyone and welcome! 2</div>
<div>hello everyone and welcome! 3</div>
<div>hello everyone and welcome! 4</div>
</body>
</html>