css怎麼設定a標籤顏色-css教學-PHP中文網

首頁

web前端

css教學

css怎麼設定a標籤顏色

青灯夜游

Apr 26, 2021 pm 06:12 PM

a標籤 css 顏色

方法：1、使用「a{color:顏色值;}」語句設定a標籤的文字顏色；2、使用「a{background-color:顏色值;}」語句設定a標籤的背景顏色。顏色值可以使用顏色名稱、十六進位數值、RGB或RGBA值、HSL或HSLA值來定義。

css怎麼設定a標籤顏色

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css設定a標籤顏色

#方法1：使用color屬性設定文字顏色

# Color屬性指定文字的顏色。

範例：

<a href="#">a标签元素</a>

登入後複製

預設文字顏色為：

css怎麼設定a標籤顏色

#使用Color屬性

a{color: red;}

登入後複製

效果圖：

css怎麼設定a標籤顏色

方法2：使用background-color屬性設定背景顏色

background-color屬性設定一個元素的背景顏色。元素的背景是元素的總大小，包括填充和邊界（但不包括邊距）。

範例：

a{background-color: peru;}

登入後複製

效果圖：

css怎麼設定a標籤顏色

#（學習影片分享：css影片教學）

css顏色值的寫法：

#1、使用顏色名稱

雖然目前已經命名的顏色約有184 種，但真正被各種瀏覽器支持，並且作為CSS 規範推薦的顏色名稱只有16 種，如下表所示。

表1：CSS 規格建議的顏色名稱

/*名 称	颜 色	名 称	颜 色	名 称	颜 色
black	纯黑	silver	浅灰	navy	深蓝
blue	浅蓝	green	深绿	lime	浅绿
teal	靛青	aqua	天蓝	maroon	深红
red	大红	purple	深紫	fuchsia	品红
olive	褐黄	yellow	明黄	gray	深灰
white	壳白*/

登入後複製

不建議在網頁中使用顏色名，特別是大規模的使用，避免有些顏色名稱不被瀏覽器解析，或不同瀏覽器對顏色的解釋差異。

2、十六進位顏色

十六進位符號 #RRGGBB 和 #RGB（例如 #ff0000）。 "#" 後面接著 6 位元或 3 位元十六進位字元（0-9, A-F）。

這是最常用的取色方法，例如：

#f03
#F03
#ff0033
#FF0033

登入後複製

3、RGB，紅-綠-藍（red-green-blue (RGB)）

規定顏色值為rgb 程式碼的顏色，函數格式為rgb(R,G,B)，取值可以是0-255 的整數或百分比。

rgb(255,0,51)
rgb(255, 0, 51)
rgb(100%,0%,20%)
rgb(100%, 0%, 20%)

登入後複製

擴充功能：RGBA，紅色-綠色-藍色-阿爾法（RGBa）

RGBA 擴展了 RGB 顏色模式，它包含了阿爾法通道，允許設定一個顏色的透明度。 a 表示透明度：0=透明；1=不透明。

rgba(255,0,0,0.1)    /* 10% 不透明 */  
rgba(255,0,0,0.4)    /* 40% 不透明 */  
rgba(255,0,0,0.7)    /* 70% 不透明 */  
rgba(255,0,0,  1)    /* 不透明，即红色 */

登入後複製

4、HSL，色相-飽和度-明度（Hue-saturation-lightness）

色相（Hue）表示色環（即代表彩虹的一個圓環）的一個角度。
飽和度和明度由百分數表示。
100% 是滿飽和度，而 0% 是一種灰度。
100% 明度是白色， 0% 明度是黑色，而 50% 明度是"一般的"。

hsl(120,100%,25%)    /* 深绿色 */  
hsl(120,100%,50%)    /* 绿色 */       
hsl(120,100%,75%)    /* 浅绿色 */

登入後複製

擴展：HSLA，色相-飽和度-明度-阿爾法（HSLa）

HSLa 擴展自 HSL 顏色模式，包含了阿爾法通道，可以規定一個顏色的透明度。 a 表示透明度：0=透明；1=不透明。

hsla(240,100%,50%,0.05)   /* 5% 不透明 */   
hsla(240,100%,50%, 0.4)   /* 40% 不透明 */  
hsla(240,100%,50%, 0.7)   /* 70% 不透明 */  
hsla(240,100%,50%,   1)   /* 完全不透明 */

登入後複製

5、transparent

特殊顏色值,表示透明色。可以直接當做顏色使用。

例如：color:transparent 設定字體顏色為透明

<style type="text/css">
    body{background:hsl(270,100%,50%)}
    p{
        font-size:50px;
        font-family:"黑体";
        /*浏览器私有属性*/
        -webkit-text-fill-color:transparent;/*设置文本透明*/
        /*使用rgba(0,0,0,0);也可以实现全透明模式*/
        -webkit-text-stroke:2px yellow;/*将文本设置透明，再设置个边框后就实现镂空字了*/
        /*W3C标准属性*/
        /*text-fill-color:transparent;*/
        /*text-stroke:2px yellow;*/
    
    }
</style>
<body>
    <p>2012年过去了，最忙的是元芳，你怎么看？</p>
</body>

登入後複製

更多程式相關知識，請造訪：程式設計入門！！

以上是css怎麼設定a標籤顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1666

CakePHP 教程

1425

Laravel 教程

1325

PHP教程

1272

C# 教程

1252

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。