下载PDF文件 下载PDF文件

在超文本中可以使用 <font> 标签来改变文本的颜色,然而新版本HTML5不再支持这种方法。你需要改为使用CSS来自定义网页中各元素的文本颜色。这样将确保网页能与各种浏览器兼容。


方法 1
方法 1 的 2:

使用CSS

下载PDF文件
  1. 更改文本颜色的最佳方法是使用CSS。HTML5不支持旧版HTML的 <font> 属性。因此,最好是使用CSS来定义各元素的样式。
    • 这种方法同样适用于外部样式表(单独的CSS文件)。下面是一些使用内部样式表的HTML文件示例。
  2. 如果你使用的内部样式表,那就能在该标签中定义自己的样式。
  3. 当<style>标签在<head>标签中时,<style>标签内部的CSS将被应用于页面上任何适用的元素。当您完成时,HTML文件的开头部分看起来就像是下面这样: [1]
     <!DOCTYPE html> 
     < 
     html 
     > 
     < 
     head 
     > 
     < 
     style 
     > 
     </ 
     style 
     > 
     </ 
     head 
     > 
    
  4. 您会使用<style>部分来定义页面上不同元素的外观。比如说,要更改页面所有正文的样式,则输入以下内容:
     <!DOCTYPE html> 
     < 
     html 
     > 
     < 
     head 
     > 
     < 
     style 
     > 
     body 
     { 
     } 
     </ 
     style 
     > 
     </ 
     head 
     > 
    
  5. color: 属性将告诉页面对该元素使用哪种文本颜色。在本例中,它将更改所有正文文本的颜色,而这些文本也是页面上所有文本的默认元素:
     <!DOCTYPE html> 
     < 
     html 
     > 
     < 
     head 
     > 
     < 
     style 
     > 
     body 
     { 
     color 
     : 
     } 
     </ 
     style 
     > 
     </ 
     head 
     > 
    
  6. 输入颜色的方法分为三种:名称、十六进制值或RGB值。例如,要设为蓝色,则可以输入 blue rgb(0, 0, 255) #0000FF
     <!DOCTYPE html> 
     < 
     html 
     > 
     < 
     head 
     > 
     < 
     style 
     > 
     body 
     { 
     color 
     : 
     red 
     ; 
     } 
     </ 
     style 
     > 
     </ 
     head 
     > 
    
  7. 你可以使用不同的选择器来更改页面不同部分的文本颜色:
     <!DOCTYPE html> 
     < 
     html 
     > 
     < 
     head 
     > 
     < 
     style 
     > 
     body 
     { 
     color 
     : 
     red 
     ; 
     } 
     h1 
     { 
     color 
     : 
     #00FF00 
     ; 
     } 
     p 
     { 
     color 
     : 
     rgb 
     ( 
     0 
     , 
     0 
     , 
     255 
     ) 
     } 
     </ 
     style 
     > 
     </ 
     head 
     > 
     < 
     body 
     > 
     < 
     h1 
     > 
    This header will be green. </ 
     h1 
     > 
     < 
     p 
     > 
    This paragraph will be blue. </ 
     p 
     > 
    This body text will be red. </ 
     body 
     > 
     </ 
     html 
     > 
    
  8. 你可以定义一个类,然后将其应用于整个页面上的任何元素,从而马上添加这种类样式。例如,在以下文件中,".redtext"类会让应用于的所有元素都使用红色文本:
     <!DOCTYPE html> 
     < 
     html 
     > 
     < 
     head 
     > 
     < 
     style 
     > 
     . 
     redtext 
     { 
     color 
     : 
     red 
     ; 
     } 
     </ 
     style 
     > 
     </ 
     head 
     > 
     < 
     body 
     > 
     < 
     h1 
     class 
     = 
     "redtext" 
     > 
    This heading will be red </ 
     h1 
     > 
     < 
     p 
     > 
    This paragraph will be normal. </ 
     p 
     > 
     < 
     p 
     class 
     = 
     "redtext" 
     > 
    This paragraph will be red </ 
     p 
     > 
     </ 
     body 
     > 
     </ 
     html 
     > 
    
    广告
方法 2
方法 2 的 2:

使用级联样式属性

下载PDF文件
  1. 你可以使用级联样式属性来更改页面中某个元素的样式。这种方法对快速更改一两处样式很有用,但不建议用于大范围更改。如果是全面的样式更改,还是要用上一种方法。 [2]
  2. 你可以使用级联样式属性来更改任何元素的文本颜色。例如,你想更改特定标题的文本颜色,则要在文件中找到它:
     <!DOCTYPE html> 
     < 
     html 
     > 
     < 
     body 
     > 
     < 
     h1 
     > 
    This is the header you want to change </ 
     h1 
     > 
     </ 
     body 
     > 
     </ 
     html 
     > 
    
  3. 在要更改的元素的开始标记内输入 style=""
     <!DOCTYPE html> 
     < 
     html 
     > 
     < 
     body 
     > 
     < 
     h1 
     style 
     = 
     "" 
     > 
    This is the header you want to change </ 
     h1 
     > 
     </ 
     body 
     > 
     </ 
     html 
     > 
    
  4. 例如:
     <!DOCTYPE html> 
     < 
     html 
     > 
     < 
     body 
     > 
     < 
     h1 
     style 
     = 
     "color:" 
     > 
    This is the header you want to change </ 
     h1 
     > 
     </ 
     body 
     > 
     </ 
     html 
     > 
    
  5. 表示颜色的方法有三种。你可以输入颜色的名称、RGB值或者十六进制值。例如,要把颜色更改为黄色,你可以输入 yellow; rgb(255,255,0); #FFFF00;
     <!DOCTYPE html> 
     < 
     html 
     > 
     < 
     body 
     > 
     < 
     h1 
     style 
     = 
     "color:#FFFF00;" 
     > 
    This header is now yellow </ 
     h1 
     > 
     </ 
     body 
     > 
     </ 
     html 
     > 
    
    广告

小提示

  • 你可以通过以下链接来查看支持的颜色名称及其十六进制值的列表: http://www.w3schools.com/colors/colors_names.asp
广告

关于本wikiHow

本页面已经被访问过10,073次。

这篇文章对你有帮助吗?

广告