个性化阅读
专注于IT技术分析

html颜色和字体 – HTML教程

上一章HTML教程请查看:html背景颜色

Html颜色

颜色是非常重要的,给一个良好的外观和感觉你的网站。可以使用<body>标记在页面级别指定颜色,也可以使用bgcolor属性为单个标记设置颜色。

<body>标签有以下属性,可以用来设置不同的颜色

  • bgcolor——设置页面的背景颜色。
  • text文本-设置正文的颜色。
  • alink链接—为活动链接或选定链接设置颜色。
  • link链接——设置链接文本的颜色。
  • vlink—为已访问链接设置颜色,即为已链接的文本设置颜色。

HTML颜色编码方法

有以下三种不同的方法来设置网页的颜色

  • 颜色名称——你可以直接指定颜色名称,如绿色、蓝色或红色。
  • 十六进制编码——六位数字编码,代表组成颜色的红色、绿色和蓝色的数量。
  • 颜色十进制或百分数,这个值是使用rgb()属性指定的。

现在我们将一个接一个地看到这些配色方案。

HTML颜色-颜色名称

你可以指定直接的颜色名称来设置文本或背景颜色。W3C列出了16个用HTML验证器验证的基本颜色名,但是主流浏览器支持200多个不同的颜色名。

注意——检查HTML颜色名称的完整列表。

例子

下面是一些通过颜色名称设置HTML标记背景的例子

<!DOCTYPE html>
<html>

   <head>
      <title>HTML颜色</title>
   </head>
    
   <body text = "blue" bgcolor = "green">
      <p>为主体和表使用不同的颜色名称,并查看结果。</p>
      
      <table bgcolor = "black">
         <tr>
            <td>
               <font color = "white">这篇文章将在黑色背景上显示白色。</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

Html字体

字体在使网站更加用户友好和增加内容可读性方面起着非常重要的作用。字体的大小和颜色完全取决于用来查看页面的计算机和浏览器,但是你可以使用HTML < Font >标记来为你的网站文本添加样式、大小和颜色。可以使用<basefont>标记将所有文本设置为相同的大小、字体和颜色。

字体标签有三个属性,分别是大小、颜色和字体来定制字体。要在网页内随时更改任何字体属性,只需使用<font>标记。下面的文本将保持更改,直到你使用</font>标记结束。你可以在一个<font>标记中更改一个或所有的字体属性。

注意,字体和basefont标签是不赞成的,它应该被删除在未来的HTML版本。所以不应该使用它们,而是建议使用CSS样式来操作字体。但仍然出于学习目的,本章将详细解释字体和basefont标记。

设置字体大小

可以使用size属性设置内容字体大小。接受值的范围从1(最小)到7(最大)。字体的默认大小是3。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Size</title>
   </head>

   <body>
      <font size = "1">Font size = "1"</font><br />
      <font size = "2">Font size = "2"</font><br />
      <font size = "3">Font size = "3"</font><br />
      <font size = "4">Font size = "4"</font><br />
      <font size = "5">Font size = "5"</font><br />
      <font size = "6">Font size = "6"</font><br />
      <font size = "7">Font size = "7"</font>
   </body>

</html>

相对的字体大小

你可以指定比预设字体大小大多少或小多少,可以指定它为<font size = “+n”>或<font size = ” – n”>。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>Relative Font Size</title>
   </head>

   <body>
      <font size = "-1">Font size = "-1"</font><br />
      <font size = "+1">Font size = "+1"</font><br />
      <font size = "+2">Font size = "+2"</font><br />
      <font size = "+3">Font size = "+3"</font><br />
      <font size = "+4">Font size = "+4"</font>
   </body>

</html>

设置字体

你可以使用face属性设置字体,但是要注意,如果查看页面的用户没有安装字体,他们将无法看到它。相反,用户将看到默认字体的脸适用于用户的计算机。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>Font Face</title>
   </head>

   <body>
      <font face = "Times New Roman" size = "5">Times New Roman</font><br />
      <font face = "Verdana" size = "5">Verdana</font><br />
      <font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
      <font face = "WildWest" size = "5">WildWest</font><br />
      <font face = "Bedrock" size = "5">Bedrock</font><br />
   </body>

</html>

指定替代字体

访客只有在电脑上安装了你的字体后才能看到你的字体。因此,可以通过列出用逗号分隔的字体外观名称来指定两个或多个字体外观替代。

<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console"></font>

当你的页面被加载,他们的浏览器将显示第一个字体面可用。如果没有安装任何给定的字体,那么它将显示默认字体face Times New Roman。

注意——检查HTML标准字体的完整列表。

设置字体颜色

你可以使用color属性设置任何你喜欢的字体颜色。可以通过颜色名称或该颜色的十六进制代码指定所需的颜色。

注意:你可以用代码检查一个完整的HTML颜色名称列表。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Color</title>
   </head>
    
   <body>
      <font color = "#FF00FF">This text is in pink</font><br />
      <font color = "red">This text is red</font>
   </body>
    
</html>

<basefont>元素

<basefont>元素应该为文档中不包含在<font>标记中的任何部分设置默认的字体大小、颜色和字体。你可以使用<font>元素来覆盖<basefont>设置。

<basefont>标签还接受颜色、大小和字体属性,它将支持相对字体设置,为大尺寸的字体提供+1值,为小尺寸的字体提供- 2值。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>设置Basefont颜色</title>
   </head>
    
   <body>
      <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
      <p>这是页面的默认字体。</p>
      <h2><basefont>的例子元素</h2>
      
      <p><font size = "+2" color = "darkgray">
      这是两个大尺寸的深灰色文本
         </font>
      </p>

      <p><font face = "courier" size = "-1" color = "#000000">
      它是一种快递字体,大小更小,颜色是黑色。
         </font>
      </p>
   </body>
    
</html>
赞(0)
未经允许不得转载:srcmini » html颜色和字体 – HTML教程

评论 抢沙发

评论前必须登录!