专业汉语词典知识平台,分享汉字词语知识、历史文学知识解答!

励北网
励北网

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种方法


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


百科问答
小编:小易整编
相关文章相关阅读
  • 如何给电脑设置安装字体

    如何给电脑设置安装字体

    我们在使用电脑的时候,想要安装自己习惯使用的字体,该怎么操作呢?今天就跟大家介绍一下如何给电脑设置安装字体的具体操作步骤。1.首先我们打开电脑,找到下载解压好的【字体】2.然后点击左下角的【开始】图标3.在打开的菜单中,选择【控制面板...

  • 怎样为iPad增加新的字体

    怎样为iPad增加新的字体

    随着iPad被破解,访问/System/Library/Fonts目录成为了可能,就此,我们可以踏上为iPad增加新字体的旅程了。以下就教给大家如何为iPad增加新的字体,并用在iWork系列等可自定义字体的软件上。了解/System/L...

  • word怎么样添加字体

    word怎么样添加字体

    说明:word中字体库是读取我们系统里面的字体,所以,我们添加字体只需要在系统里面添加字体即可。word怎么样添加字体的具体操作步骤:1、首先,在网上找到我们想要的字体(去百度搜索字体下载),然后下载到本地文件夹,解压到当前文件夹。2、然后...

  • AUTOCAD快速替换字体的方法。

    AUTOCAD快速替换字体的方法。

    我们打开的CAD文件时候,常常会出现字体替换怎么办呢?操作方法01有的时候我们在打开DWG文件时候,常常会出现如图的“指定字体给样式”对话框。02打开图自己的电...

  • HTML列表标签有哪些

    HTML列表标签有哪些

    HTML的列表标签分为3种,无序列表,使用ul标签定义;有序列表,使用ol标签定义;自定义列表,使用dl标签定义。超文本标记语言,简称:HTML,标记标签通常被称为HTML标签,HTML标签是HTML语言中最基本的单位,HTML...

  • 什么软件可以免费换字体2022 有没有能免费换字体的软件

    什么软件可以免费换字体2022 有没有能免费换字体的软件

    大家有没有觉得自己的手机字体太过枯燥?想让自己多些花样,有没有什么软件可以免费换字体2022?小编为大家找到了以下可以换字体的软件,提供给想换字体的小伙伴参考。1、《免费字体下载》承诺字体可免费下载使用,字体类型多样,囊括书法字体、可爱字体...

  • 字体编辑软件有哪些2022 好用的字体编辑软件大全

    字体编辑软件有哪些2022 好用的字体编辑软件大全

    很多用户在与朋友聊天的时候经常会看到一些搞怪的字体,并且在视频剪辑字幕上也有这些好看的字体。那么字体编辑软件有哪些2022年,哪些软件可以让各位用户设计一款拥有着自己个性的独立字体,下面大家一起来看一下吧。1、《简拼》简拼这款应用可以实现文...

  • 字体带拼音的软件哪个好用2022 可以查看拼音的字体查询软件推荐

    字体带拼音的软件哪个好用2022 可以查看拼音的字体查询软件推荐

    对于字体带拼音的软件哪个好用2022一直都困扰了很多的小伙伴,今天小编就给大家带来字体带拼音的软件哪个好用的介绍,这几款软件不但可以让大家快速的了解字体,还可以查看字体的拼音和释义,帮助你掌握字体的各种信息,接下来就让小编带大家一起来看看究...

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

精彩推荐