专业IT网络知识平台,分享IT百科知识、生活百科知识解答!

易企推科技
易企推科技

html字体颜色怎么设置,html设置字体颜色的3种方法

来源:小易整编  作者:小易  发布时间:2023-01-03 02:39
摘要:html字体颜色怎么设置,html设置字体颜色的3种方法。在HTML中,我们可以使用以下三种方式更改文本颜色:使用HTML标签使用内联样式属性使用内部CSS使用HTML标签使用Html标签更改网页上的文本颜色,按照以下步骤,我们可以轻松完成...

html字体颜色怎么设置,html设置字体颜色的3种方法。在HTML中,我们可以使用以下三种方式更改文本颜色:

  1. 使用HTML标签

  2. 使用内联样式属性

  3. 使用内部CSS

使用HTML标签

使用Html标签更改网页上的文本颜色,按照以下步骤,我们可以轻松完成。

步骤1:首先,我们在文本编辑器中键入Html代码,或者在本编辑器中打开现有的Html文件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>奔月教程(runoon.com)</title>
    </head>
    <body>
        <h3>《浪淘沙·帘外雨潺潺》</h3>
        <p>帘外雨潺潺,春意阑珊。</p>
        <p>罗衾不耐五更寒。</p>
        <p>梦里不知身是客,一晌贪欢。</p>
        <p>独自莫凭栏,无限江山,别时容易见时难。</p>
        <p>流水落花春去也,天上人间。</p>
    </body>
</html>

步骤2:将光标移动到要更改颜色的文本的开头,在该位置键入<font>标签,文本结尾处关闭标签。

< font > 单行文本和语句 </ font >

步骤3:在<font>标签内添加名称为“ color ”的字体属性,在color属性中键入颜色名称或颜色值。

<h3>《浪淘沙·帘外雨潺潺》</h3>
<p><font color="red">帘外雨潺潺,春意阑珊。</font></p>
<p><font color="green">罗衾不耐五更寒。</font></p>
<p><font color="yellow">梦里不知身是客,一晌贪欢。</font></p>
<p><font color="pink">独自莫凭栏,无限江山,别时容易见时难。</font></p>
<p><font color="purple">流水落花春去也,天上人间。</font></p>

步骤4:最后将HTML代码保存在文本编辑器中并运行代码。执行后,我们将在浏览器中看到输出。

效果展示:

《浪淘沙·帘外雨潺潺》

帘外雨潺潺,春意阑珊。

罗衾不耐五更寒。

梦里不知身是客,一晌贪欢。

独自莫凭栏,无限江山,别时容易见时难。

流水落花春去也,天上人间。

注意:HTML 5不支持字体的color属性,因此我们必须使用内联样式属性和内部CSS选项来更改文本的颜色。

使用内联样式属性

如果想用内联样式属性来更改文本的颜色,按照以下步骤,可以轻松实现。

步骤1:在文本编辑器中键入HTML代码或打开现有HTML文件。

步骤2:将光标移动到我们要更改颜色的文本的开头,在元素中键入内联样式属性,在文本结尾处关闭元素。在这里我们使用了<p>(段落)标签:

< p style = “ color:red;” > 任何文本 </ p >   

步骤3:在这一步,我们需要提供颜色名称或颜色值作为参数。我们可以使用三种形式的颜色:

  1. 我们可以输入颜色的名称

  2. 我们还可以输入颜色的RGB值

  3. 我们还可以输入颜色的十六进制值。

<h3>《浪淘沙·帘外雨潺潺》</h3>
<p style="color:red;">帘外雨潺潺,春意阑珊。</font></p>
<p style="color:green;">罗衾不耐五更寒。</font></p>
<p style="color:rgb(100,100,100);">梦里不知身是客,一晌贪欢。</font></p>
<p style="color:#C3B2A1;">独自莫凭栏,无限江山,别时容易见时难。</font></p>
<p style="color:rgb(150,150,150);">流水落花春去也,天上人间。</font></p>

步骤4:最后,保存HTML代码,执行代码可以得到以下内容输出。

效果展示:

《浪淘沙·帘外雨潺潺》

帘外雨潺潺,春意阑珊。

罗衾不耐五更寒。

梦里不知身是客,一晌贪欢。

独自莫凭栏,无限江山,别时容易见时难。

流水落花春去也,天上人间。

使用内部CSS

要使用内部级联样式表来更改文本的颜色,按以下步骤,可以轻松实现。

步骤1:在文本编辑器中键入HTML代码或打开现有HTML文件。

步骤2:光标放在Html文档的head标签中,在<style>标签中定义样式,然后将color属性输入到元素选择器中。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>奔月教程(runoon.com)</title>
        <style>  
            Body { color:orange;}  
            p{color:green;}  
        </style> 
    </head>
    <body>
        <h3>《浪淘沙·帘外雨潺潺》</h3>
        <p>帘外雨潺潺,春意阑珊。</p>
        <p>罗衾不耐五更寒。</p>
        <p>梦里不知身是客,一晌贪欢。</p>
        <p>独自莫凭栏,无限江山,别时容易见时难。</p>
        <p>流水落花春去也,天上人间。</p>
    </body>
</html>

步骤3:必须在要更改颜色的文本之前,定义元素选择器。

步骤4:保存并执行HTML代码,可以看到以下输出。

效果展示:

html字体颜色怎么设置,html设置字体颜色的3种方法


本文地址:IT问答频道 https://www.hkm168.com/itwenda/886563.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!


IT问答
小编:小易整编
相关文章相关阅读
  • html中浮动是什么

    html中浮动是什么

    在html中,浮动就是让元素可以向左或向右移动,直到它的外边距碰到其父级的内边距或者是上一个元素的外边距,只需要给元素设置“float:left|right|none|inherit”样式即可。本教程操作环境:windows7系统、CSS3...

  • html如何解析%%

    html如何解析%%

    html是一种用于创建网页结构的标记语言,它提供了一种方式来标记文本、图像、链接以及其他与网站相关的内容。html可以在网页中插入各种元素,包括表格、列表、图像、表格等等。本文将讨论html的解析过程以及如何编写有效的html代码。HTML...

  • html embed标签怎么用

    html embed标签怎么用

    HTMLembed标签使用方法和属性详解一、基本语法代码如下:embedsrc=url说明:embed可以用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等等,Netscape及新版的IE都支持。url为音频或...

  • HTML5中nav是什么意思

    HTML5中nav是什么意思

    在html5中,nav全称“navigation”,中文意思为“导航”,是一个导航标签,用于表示html页面中的导航;nav标签会定义一个含有导航链接的区域,语法“链接...”。本教程操作环境:windows7系统、HTML5版、Dell...

  • html中什么是伪类

    html中什么是伪类

    在html中,伪类是一种用于已有元素处于某种状态时(滑动、点击等)为其添加对应样式的选择器,且这个状态是根据用户行为而动态变化的。常用伪类有“:active”、“:hover”、“:link”、“:root”、“:valid”等等。本教程操...

  • HTML代码如何格式化

    HTML代码如何格式化

    HTML代码可以通过sublime中的内置命令Reindent对代码格式化,还可以安装HTML-CSS-JSPrettify插件对代码格式化有时候我们将别人的代码复制过来的时候发现代码排列的非常杂乱无章,无法去阅读代码,今天就将和大家介绍...

  • css设置网页字体

    css设置网页字体

    css是层叠样式表的缩写,是用于网站样式设计的语言。其中,设置网页字体是css中的一个重要方面。如何使用css设置网页字体,将为我们带来更好的视觉体验,提升页面的可读性和专业感。本文将主要介绍css中的字体相关设置,包括字体样式、字体大小以...

  • doctype html 什么意思

    doctype html 什么意思

    “doctypehtml”是指html5标准网页声明,即告诉浏览器当前html是用第五版本编写的,完整语法“”。doctype声明是一条指令,必须位于html5文档中的第一行,也就是位于“”标签之前。本教程操作环境:windows7系统、...

  • 周排行
  • 月排行
  • 年排行

精彩推荐