HTML教程:如何設置字體顏色

2021-01-10 php中文網

在網頁開發的過程中,有時為了網頁的美觀,需要給網頁中的字體設置不同的顏色,那麼,怎麼來設置字體顏色呢?本篇文章就來給大家來介紹html設置字體顏色的三種方法。

話不多說,我們來直接看正文。

html字體顏色設置的方法一:html font設置字體顏色

語法:

<font color="red"> </font>

font是一對常規標籤,將字體文本內容放入標籤內,font標籤內設置color顏色+對應顏色值即可設置font標籤對象內字體顏色。

我們直接來看html font設置字體顏色的代碼實例:

<html><body><p><font size="10" color="red">php中文網</font></p></body></html>

說明:<font size="10">是設置字體大小,html font設置字體顏色的效果如下:

html字體顏色設置的方法二:標籤內設置CSS字體顏色樣式

語法:

<p style="color:red"></p>

標籤內設置CSS字體顏色的代碼實例:

<!DOCTYPE html><html><head><meta charset="utf-8" /></head><body><div style="color:red;font-size:50px">php中文網</div></body></html>

說明:font-size:50px為字體大小。標籤內設置CSS字體顏色的效果如下:

html字體顏色設置的方法三:外部CSS設置html文字字體的顏色

使用id或class引入外部CSS字體顏色樣式,從而設置html 字體顏色。

外部CSS設置html文字字體的顏色的代碼示例:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .ex{ color:pink;font-size:50px} </style> </head> <body> <div>php中文網</div> </body> </html>

外部CSS設置html文字字體的顏色效果如下:

最後,注意:html font設置字體顏色color使用等號設置顏色值,而CSS設置字體顏色使用color設置字體顏色值使用冒號。

相關焦點

  • 如何用ps製作銀色金屬字體
    ps的字體製作功能很強大,這裡呢主要講一下銀色金屬字的做法,這類字體在一些金屬題材的設計中有廣泛的應用,那麼如何用ps製作銀色金屬字呢,接下來看教程!工具/原料ps任意版本電腦一臺方法/步驟首先,打開ps,新建,這裡用的是像素是1280X720,解析度是300,當然大家可以隨意的,然後確定,這樣背景圖層就建好了,背景顏色默認是白色,進去之後我們再更改,如圖:然後我們選擇漸變工具,新建一個漸變方案,建好之後選擇徑向漸變,在圖層上滑動,這樣就填充好一個漸變背景色,如圖所示:接著我們選擇文字工具
  • word2016書法字帖製作教程 輕鬆繪製毛筆字體
    word2016書法字帖製作教程 輕鬆繪製毛筆字體時間:2017-05-12 12:07   來源:系統天堂   責任編輯:沫朵 川北在線核心提示:原標題:word2016書法字帖製作教程 輕鬆繪製毛筆字體 word2016書法字帖怎麼製作?
  • 利用VBA代碼,對Excel表格進行字體設置
    No.1字體設置是Excel或Word辦公軟體最簡單的操作,下面把所有字體對象的屬性羅列一遍,介紹一下,如何使用vba代碼進行相應的字體設置。下圖為字體對象Font的所有屬性。一共18個。No.2下圖以一個例子,對所有Font對象的設置進行一個可視化操作,可以在左邊值的列中選擇相應的值,單擊按鈕即可看到字體效果。十分簡單。下面重點看一下代碼,如何來實現。
  • 明日之後:設置彩色外顯字體方法公布,玩家:顏色稱號逼格滿滿!
    今天要說的是,設置彩色外顯字體方法公布,玩家:有顏色的稱號逼格滿滿。遊戲中各種稱號,這個想必大家都是習以為常了,但是最近很多玩家發現,有些人的稱號與眾不同,是彩色的,還有的箱子名字可以外顯,而且也是彩色的。那這些究竟是如何做到的呢?下面就一起來看看吧。
  • office操作技巧:word中如何更改字體的顏色?
    小朋友的話讓我想起了一個學員在課間休息問我:老師這個系統的字體顏色就這麼幾種嗎?每天都看同樣的字體、顏色,看的我視覺都疲勞了。其實我想告訴大家:word裡面的字體顏色可以和我們的飯菜或者我們穿的衣服,每天可以變著花樣展示在你面前。
  • Word裡面怎麼打鉤與如何在方框中打鉤,並設置字號和顏色
    製作試題方面的文檔,可能需要輸入打鉤與在方框中打鉤這樣的符號,無論是Word裡面怎麼打鉤還是如何在方框中打鉤,都有兩種方法,但兩種方法不完全相同,只有一種方法相同,即插入法;另外一種是什麼方法,看下文的具體介紹。另外,插入的「打鉤」和「方框 + 打鉤」還可以設置字號和顏色,但不一定能設置字體。
  • 如何設置區域網圖文教程
    對於新手,您需要學習如何設置區域網。以下小編已整理了在Win10系統中設置區域網的圖文步驟。(1)在任務欄中找到下面的圖標,然後彈出界面,選擇網絡和Internet設置。(2)然後跳出頁面,選擇共享選項。(3)選擇高級共享設置,然後單擊以啟用文件和印表機共享。
  • 王者榮耀花藤字體怎麼設置 最好看的花藤符號名字大全
    王者榮耀花藤字體怎麼設置?王者榮耀最好看的花藤符號名字都有什麼?一起來看看吧!
  • CorelDraw教程 自製精美個性藝術字體
    作者:劉菲菲我們經常在網上看到各種精美、富有個性的藝術字體,哪怕一張圖上只有幾個字,但只要字體運用得當,就能為圖片增色不少。其實,這樣的藝術字體我們 利用CorelDraw的導出字體功能就可以製作出來,而且過程並不難。
  • P S 教程 :自生飯香的米粒字體,你一定想嘗嘗鮮
    鍋已揭開可別把屏幕啃掉咯請看教程找不到素材或不想畫米的朋友,也可直接用圓形練練豆子字體。]-01- 設置「米粒」畫筆打開素材,解鎖圖層,用魔棒工具將米粒摳圖→選擇背景,點擊【選擇-修改-平滑】數值設為3px,再按Delete鍵刪除,大米即摳出。
  • 課程丨WPS 文字的文字設置詳解三:文字顏色的設置技巧
    小編前文對WPS文字的「字體」、「字號」的設置分別進行了詳細的講解,本文將對其文字顏色的設置的進行詳細的解說,希望對大家使用WPS 文字時有所幫助。文字顏色的三個圖標下面小編分別對這三個圖標進行解說:字體顏色A. 什麼是字體顏色?
  • 王者榮耀單字id怎麼設置 一個字的名字代碼設置教程
    ­  王者榮耀單字id怎麼設置,一個字的名字怎麼打,王者榮耀對於玩家名字有字符限制,不過玩家可以使用代碼或者字符使得王者榮耀單字id出現,一個字的名字id看起來很酷炫,別具一格,那麼王者榮耀單字id怎麼設置,小編帶來一個字的名字代碼設置教程。
  • With語句的使用方法以及通過VBA代碼設置EXCEL表格邊框和字體
    如下面示例中,在With語句中使用range("A2").Borders(xlDiagonalUp).LineStyle = True來設置With指定的對象以外的對象Sub 設置邊框和字體()With Range("A2:G8")'註:下面的xlNone
  • 抖音網紅時鐘軟體 抖音最火漢字時鐘屏保如何設置
    抖音網紅時鐘軟體 抖音最火漢字時鐘屏保如何設置時間:2019-04-15 12:53   來源:今日頭條   責任編輯:毛青青 川北在線核心提示:原標題:抖音網紅時鐘軟體 抖音最火漢字時鐘屏保如何設置 最近抖音有一款非常火爆的屏保程序,很多小夥伴們苦於不會設置,小編給大家帶來教程叫你如何設置屏保。
  • word字體效果:如何快速去除字體的陰影
    或者有時候,需要編輯的Word頁面會帶有顏色陰影,看著很累,還十分讓人討厭和無奈。當遇到這些「陰影」難題時,我們應該如何快速解決呢?下面就教給大家幾個方法來去掉文字陰影、段落陰影和頁面背景陰影,希望能幫助到大家。
  • 保護眼睛的顏色設置 從這裡做起 - 房天下
    現在的人無論居家、辦公都已經離不開電腦了,但是相信每個人都有過這樣的感覺:在電腦前座久了,就會眼睛乾澀酸痛,非常難受,這是電腦屏幕對眼睛的一種傷害,我們可以通過設置保護眼睛的顏色來緩解這種疼痛,降低傷害,那麼電腦保護眼睛的顏色設置方法有哪些呢。
  • 愛奇藝TV版在智能電視上怎麼拉出菜單欄設置?圖文教程詳解
    但是在用法上和電腦上卻有了差別,很多不習慣的小夥伴們並不知道如何拉出菜單欄設置,筆者在這裡做了一個小的圖文教程,希望能夠對廣大用戶有所幫助。   打開愛奇藝TV版首頁,點開遙控器的【菜單欄】按鍵,就會在首頁下方出現設置菜單頁面。設置菜單一共分成【搜索】【記錄】【設置】【我的】【客服反饋】【桌面管理】六大功能。
  • Premiere怎麼安裝字體?
    做視頻剪輯的人都知道,大量作品中的字幕需要各種各樣的字體來裝飾,炫酷的文字效果能為作品錦上添花。下面的文章,以win10 64位系統為例,簡單講述PR安裝字體文件的教程,大家看著來一步一步操作吧。    二、安裝字體不佔c盤空間  1、點擊電腦左下角「設置」,在查找設置裡輸入「控制面板
  • photoshop教程|UI教程|素材 紅包 小圖標
    UI圖標初期教程紅包小圖標|photoshop教程|(以下界面演示以Photoshop CC2017為演示工具)【圖形設計師 ID:tuxdesign】先看看效果有興趣的小盆友可以著手練習練習畢竟光看是看不會的你說捏第一步:新建文件,給背景填充你喜歡的顏色(如圖)第二步:選擇圓角矩形工具,建立一個圓角矩形,命名為【紅包】(如圖)第三步:選擇【紅包】圖層,Ctrl+J複製一層,縮小,命名為【紅包1】(如圖)顏色不變,我這裡是為了區分方便大家看到效果第四步:選擇【紅包1】圖層,調整下面的圓角大小(
  • 瀏覽器字體如何恢復大小?瀏覽器字體恢復大小方法
    大家在瀏覽網頁時有沒有將瀏覽的網頁放大來觀看的經歷,當我們將網頁放大後它的字體也會放大,如果長時間這樣大家會很不習慣,如何將瀏覽器的字體恢復成默認大小呢?這個問題很多朋友可能不知道,下面我們一起來看看吧。