网站首页 > 知识剖析 正文
CSS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
用的最多的就是文本颜色,color属性用于定义文本的颜色。语法如下:
div {
color:red;
}
颜色的表现形式有:
预定义的颜色值: red、green、pink等
十六进制: #FF0000、#FF6600、#29D794等
RGB代码: rgb(255,0,0)或rgb(100%,0%,0%)等
看下效果:
对应的代码为:
<!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>
div {
color: blue;
}
</style>
</head>
<body>
<div>人保说的是还有7次洗车,5次还是3次道路救援啥的</div>
</body>
</html>
所有div对应的都为蓝色。
使用第二种方法,16进制颜色来表示,先看下效果:
对应代码为:
<!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>
/* div {
color: blue;
} */
div {
color: #FF0000;
}
</style>
</head>
<body>
<div>人保说的是还有7次洗车,5次还是3次道路救援啥的</div>
</body>
</html>
最后使用第三种方法,看下效果:
对应的代码为:
<!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>
/* div {
color: blue;
} */
/* div {
color: #FF0000;
} */
div {
color: rgb(255, 193, 100);
}
</style>
</head>
<body>
<div>人保说的是还有7次洗车,5次还是3次道路救援啥的</div>
</body>
</html>
rgb竟然是red、green、blue,也是今天才知道的。
今天就先到这里了,中午休息~
- 上一篇: css背景色:控制页面设计新技巧
- 下一篇: 现代 CSS 解决方案:文字颜色自动适配背景色!
猜你喜欢
- 2024-11-20 CSS简写指南
- 2024-11-20 利用CSS filter的属性给img修改颜色
- 2024-11-20 CSS奇思妙想-使用background创造美妙背景(上篇)
- 2024-11-20 HTML5(七)——SVG基础入门
- 2024-11-20 CSS 四个不同大小和颜色的圆环加载动画 #前端开发工程师
- 2024-11-20 花了一整晚三个小时给大家整合的配色网站合集
- 2024-11-20 如何在设计软件中正确填充颜色的详细指南
- 2024-11-20 css 实现各种多边形图案
- 2024-11-20 渐变色不会调?这10个网站帮你快速搞定
- 2024-11-20 css3实现背景颜色渐变的方法
- 07-19如何解决#DIV/0! Excel 中的错误(excel div/0是什么意思)
- 07-19你知道"#VALUE!"、"#DIV/0!"等EXCEL错误值都是什么意思吗?
- 07-19Excel遇到#DIV/0、#VALUE!别慌!教你用优雅地屏蔽所有错误值!
- 07-19Excel中#DIV/0!错误详解,新手避坑指南
- 07-19Spring Boot集成OAuth2:实现安全认证与授权的详细指南
- 07-19【实用篇】收到全电发票,怎么查验真伪?
- 07-19微软Office Open XML中的数字签名漏洞
- 07-19开具红字增值税专用发票信息表出错,怎么办?
- 最近发表
-
- 如何解决#DIV/0! Excel 中的错误(excel div/0是什么意思)
- 你知道"#VALUE!"、"#DIV/0!"等EXCEL错误值都是什么意思吗?
- Excel遇到#DIV/0、#VALUE!别慌!教你用优雅地屏蔽所有错误值!
- Excel中#DIV/0!错误详解,新手避坑指南
- Spring Boot集成OAuth2:实现安全认证与授权的详细指南
- 【实用篇】收到全电发票,怎么查验真伪?
- 微软Office Open XML中的数字签名漏洞
- 开具红字增值税专用发票信息表出错,怎么办?
- SpringBoot数据校验与优雅处理详解
- 深入理解 JSR 303:数据校验在 Spring Boot 中的应用
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)