首页 > 其他分享 >「测试开发全栈-HTML」(12)css字体颜色属性

「测试开发全栈-HTML」(12)css字体颜色属性

时间:2022-10-29 16:12:19浏览次数:46  
标签:blue 12 颜色 color rgb 全栈 HTML div 文本

CSS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

  用的最多的就是文本颜色,color属性用于定义文本的颜色。语法如下:

div {

    color:red;

}

颜色的表现形式有:

预定义的颜色值: red、green、pink等

十六进制: #FF0000、#FF6600、#29D794等

RGB代码: rgb(255,0,0)或rgb(100%,0%,0%)等


看下效果:

「测试开发全栈-HTML」(12)css字体颜色属性_十六进制

对应的代码为:

<!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进制颜色来表示,先看下效果:

「测试开发全栈-HTML」(12)css字体颜色属性_测试开发_02


对应代码为:

<!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>


最后使用第三种方法,看下效果:

「测试开发全栈-HTML」(12)css字体颜色属性_测试开发_03


对应的代码为:

<!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,也是今天才知道的。


今天就先到这里了,中午休息~

标签:blue,12,颜色,color,rgb,全栈,HTML,div,文本
From: https://blog.51cto.com/u_11894/5806194

相关文章

  • HTML4学习随笔
    HTMLhtml:超文本标记语言(HyperTextMarkupLanguage)(html结构)(css表现)(js行为)<!DOCTYPEhtml><!--声明文档类型让浏览器以html的格式解析--><htmllang="en"><head......
  • HTML5学习随笔
    HTML5含义:html5是超文本语言的第五次重大修改的版本,html5里面做了很多兼容处理,能够兼容多数浏览器。和之前相比:新增了很多内容: 1.语义化标签 2.增强型表单 3.......
  • 如何在html中引入DPlayer.js视频播放插件,以及任何使用DPlayer.js插件
    主要用到了实现了:视频播放 、监听开始、结束、暂停、播放时间、切换视频官方文档:http://dplayer.js.org github:https://github.com/whiskyma/gulp-demo截图如下:html......
  • LeetCode 1248. Count Number of Nice Subarrays
    原题链接在这里:https://leetcode.com/problems/count-number-of-nice-subarrays/题目:Givenanarrayofintegers nums andaninteger k.Acontinuoussubarrayis......
  • 浙江理工大学入队200题——12A
    问题A:零基础学C/C++126——回型矩阵题目描述输出n*m的回型矩阵输入多组测试数据每组输入2个整数n和m(不大于10,且不同时为10)输出输出n*m的回型矩阵,要求左上角元......
  • uva 1291
    游戏者必须按照这个序列一次用某一只脚踩相应的踏板。在任何时候,两只脚不能在同一个踏板上,但可以同时在中心位置0。每一个时刻,HH必须移动他的一只脚去踩相应的箭头,另一只脚......
  • 数据库启动时报警 ORA-03113 ORA-16014 ORA-00312
    系统:CentOS7.9数据库:oracle11.2.0.4问题描述:数据库启动时报警ORA-03113,如下所示:SQL>startupORACLEinstancestarted.TotalSystemGlobalArea2455228416bytesFixedS......
  • day02-HTML02
    4.HTML4.3HTML基本标签4.3.9表格(table)标签基本语法:<tableborder="边框宽度"cellspacing="空隙大小"cellpadding="填充大小"></table>说明:table是表格标......
  • 【CF1299D】Around the World(线性基)
    题意:给定一张\(n\)个点\(m\)条边的无向连通图,边带权,保证不存在一个长度\(>3\)的简单环经过了\(1\)号点。请求出有多少种方案删除若干条与\(1\)号点相连的边,使得......
  • 【CF1253F】Cheap Robot(最小生成树,最短路)
    首先发现所有询问点都是充电桩这个条件很有用。它能滋生出一种暴力到极端的想法:用Floyd对全局跑一遍最短路。然后新建一个图,图中两两充电桩连一条边,边权为它们之间的最......