如何在HTML中设置字体颜色，你知道这几种方式吗…
2019-11-14 16:02:59来源：博客园 阅读 ()
如何在HTML中设置字体颜色，你知道这几种方式吗？
color设置字体颜色
- 在
color设置字体颜色之前，我们首先了解color在CSS中有几种取值方式，一共有4种方式，若有不全还请在评论区告知谢谢，4种方式如下： - 十六进制、十进制、 英文单词、十六进制的缩写。
- 现在让我们进入字体颜色实践，笔者以嵌入式的形式，将
class属性值为.box中的字体颜色设置为红色。 - 使用十六进制如下：
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置字体颜色</title>
<style>
.box{
color: #FF0000;
}
</style>
</head>
<body>
<h2 class="box">成功不是击败别人，而是改变自己</h2>
</body>
</html>结果图
- 使用十进制如下:
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置字体颜色</title>
<style>
.box{
color: rgb(250,0, 0)
}
</style>
</head>
<body>
<h2 class="box">成功不是击败别人，而是改变自己</h2>
</body>
</html>代码块
十进制表示颜色的方式在
CSS中没有浏览器兼容性问题。- 使用英文单词如下：
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置字体颜色</title>
<style>
.box{
color:red;
}
</style>
</head>
<body>
<h2 class="box">成功不是击败别人，而是改变自己</h2>
</body>
</html>结果图
- 使用十六定制的缩写
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置字体颜色</title>
<style>
.box{
color: #F00;
}
</style>
</head>
<body>
<h2 class="box">成功不是击败别人，而是改变自己</h2>
</body>
</html>结果图
- 如果大家对颜色的值不熟悉可以去W3 school 官方文档看看哈。
原文链接:https://www.cnblogs.com/lq0001/p/11863604.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：CSS定位
下一篇：CSS设置文本的水平对齐方向
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
