css顏色值設(shè)置方式有哪些

在制作頁(yè)面的時(shí)候我們經(jīng)常需要設(shè)置字體顏色或者背景顏色，豐富多彩的顏色能夠讓頁(yè)面呈現(xiàn)更好的效果，在網(wǎng)站中用到顏色的地方也很多，文字顏色，背景顏色，邊框顏色等都需要用到。

創(chuàng)新互聯(lián)客戶idc服務(wù)中心，提供BGP機(jī)房服務(wù)器托管、成都服務(wù)器、成都主機(jī)托管、成都雙線服務(wù)器等業(yè)務(wù)的一站式服務(wù)。通過(guò)各地的服務(wù)中心，我們向成都用戶提供優(yōu)質(zhì)廉價(jià)的產(chǎn)品以及開(kāi)放、透明、穩(wěn)定、高性價(jià)比的服務(wù)，資深網(wǎng)絡(luò)工程師在機(jī)房提供7*24小時(shí)標(biāo)準(zhǔn)級(jí)技術(shù)保障。

在css中表示顏色的方法主要有以下幾種。

1. 關(guān)鍵字顏色

屬性值是顏色的名稱。

例如：

div{

color:red;

}

2. 十六進(jìn)制

十六進(jìn)制表示顏色的原理是利用光的三原色：紅色，綠色，藍(lán)色。利用這三種顏色就能組合出很多顏色，比如紅色光和綠色光就可以組合成黃色，三種顏色的光可以組成白色，沒(méi)有光的時(shí)候就是黑色。

下圖為光色三原色：

請(qǐng)點(diǎn)擊輸入圖片描述

十六進(jìn)制顏色是由#加六位的十六進(jìn)制表示的，范圍是00到ff，前兩位表示紅色，中間兩位表示綠色，最后兩位表示藍(lán)色。

例如：

#ff0000表示紅色，這個(gè)色值包含最大數(shù)量的紅色，但是沒(méi)有綠色和藍(lán)色，所以是紅色。

#00ff00表示綠色，這個(gè)色值包含最大數(shù)量的綠色，但是沒(méi)有紅色和藍(lán)色，所以是綠色。

#0000ff表示藍(lán)色，這個(gè)色值包含最大數(shù)量的藍(lán)色，但是沒(méi)有紅色和藍(lán)色，所以是藍(lán)色。

#000000表示黑色，這個(gè)色值沒(méi)有顏色，表示沒(méi)有光，所以是黑色。

#ffffff表示白色，這個(gè)色值包含最大數(shù)量的紅色綠色和藍(lán)色，組合到一起是白色。

十六進(jìn)制的00到ff，是十進(jìn)制的0到255，因此每種顏色都有256種取值，能夠組合出來(lái)的顏色就是：256*256*256=16777216，這么多種色值足夠可以讓我們的頁(yè)面變的豐富多彩。

這里的三原色為什么是紅色、綠色、藍(lán)色，而和我們學(xué)美術(shù)的時(shí)候的紅色、黃色、藍(lán)色不一樣呢?因?yàn)閷W(xué)美術(shù)的時(shí)候用的是顏料的三原色，顏料的三原色利用的是光的反射原理。

3. RGB

RGB表示顏色的方式原理和十六進(jìn)制是一樣的，是利用光的三原色：紅色，綠色，藍(lán)色。

R表示red，紅色。

G表示green，綠色。

B表示blue，藍(lán)色。

取值從0到255，也可以是百分?jǐn)?shù)。

rgb(red, green, blue)

例如：

rgb(255,0,0)或者rgb(100%,0,0)表示紅色，

rgb(0,255,0)或者rgb(0,100%,0)表示綠色，

rgb(0,0,255)或者rgb(0,0,100%)表示藍(lán)色，

rgb(0,0,0)或者rgb(0,,0,0)表示黑色，

rgb(255,255,255)或者rgb(100%100%,100%)表示白色，

4. HSL

HSL表示顏色的方法是通過(guò)色相，飽和度和亮度表示的。其中H是Hue色相，S是Saturation飽和度，L是Lightness亮度。

下圖為HSL顏色模式：

請(qǐng)點(diǎn)擊輸入圖片描述

H：色相。就是顏色名稱。取值為是0到360。

S：飽和度。是色彩的純度，取值是0%到100%。

L：亮度。取值為是0%到100%。

hsl(hue, saturation, lightness)

例如：

div{

width:?100px;

height:?100px;

background:?hsl(100,?80%,?50%);

}

5. RGBA

RGBA顏色表示形式只是比RGB多了一個(gè)A。A表示Alpha透明度。取值是0到1.

rgba(red, green, blue, alpha)

例如：

div{

width:?100px;

height:?100px;

background:?rgba(255,?0,?0,?0.5);

}

效果圖：

6. HSLA

HSLA顏色表示形式只是比HSL多了一個(gè)A。A表示Alpha透明度。取值是0到1.

hsla(hue, saturation, lightness, alpha)

例如：

div{

width:?100px;

height:?100px;

background:hsla(100,?80%,?50%,0.8);

}

css中em和顏色設(shè)置

2018.7.16

em,px,都為長(zhǎng)度單位，CSS直接設(shè)置就可以。

%不是一個(gè)長(zhǎng)度單位，比如2%就是一個(gè)完整的值，是一個(gè)整體，比如0.02是一個(gè)值，沒(méi)錯(cuò)，2%也同樣是值（出處：《css世界》）

注：有一個(gè)特殊情況需要注意，如果，p為span的父元素（如下情況）

css里設(shè)置為

p{font-size:14px}

span{font-size:0.8em;}

自然就會(huì)繼承父元素，然后再進(jìn)行子元素的獨(dú)特性，即（14*0.8=11.2px）以父元素的px為單位。

簡(jiǎn)寫(xiě)：當(dāng)值為0px時(shí)，可以簡(jiǎn)寫(xiě)為0。(如下圖所示)

顏色設(shè)置有 三種方法

第一種就是直接用英文名字（p{color:red;}）;第二種就是根據(jù)R(red)G(green)B(blue)顏色的比例來(lái)配色,每一項(xiàng)地值在0-255之間，也可以用百分比;（p{color:rgb(133,45,200);}）;第三種就是常用的，原理也是rgb設(shè)置，但是將255變成了十六進(jìn)制（p{color:#336699;}）

補(bǔ)充：background-color屬性接受任意合法的CSS顏色值，如預(yù)定義顏色名、十六進(jìn)制數(shù)值、RGB值、RGB百分比、RGBA值、HSL值、HSLA值（這些都是顏色設(shè)置的）

tips:1.十六進(jìn)制的如果每?jī)蓚€(gè)之間數(shù)字相同可以簡(jiǎn)寫(xiě)成一個(gè)，如上面的p{color:#336699}為p{color:#369;}

2.RGB和我當(dāng)時(shí)學(xué)的美術(shù)的三原色相類似，美術(shù)三原色為紅黃藍(lán)。（三間色可以直接用三原色調(diào)出，紅黃為橙，紅藍(lán)為紫，黃藍(lán)為綠）

之前一直分不太清楚，今天試了一下，然后懂了。（如下圖）

margin為邊界，又可以叫做外邊框；padding為內(nèi)邊框，也為“填充”。

流動(dòng)模型為網(wǎng)頁(yè)的默認(rèn)模型，流動(dòng)模型的塊元素是自上而下，行元素是從左到右顯示。

模型移動(dòng)（以層模型中的元素為例）

向右移動(dòng)和向下移動(dòng)不是我想的right:XX;bottom:XX;

而是距離左邊XX,距離上面XX，距離原來(lái)的0，動(dòng)了XX那么多，自然就是向那里移動(dòng)了XX。（默認(rèn)位置為左上角）

另外，層模型使得元素塊移動(dòng)后，它移動(dòng)前的仍然保留。

css中font字體顏色怎么設(shè)置

css中font字體的設(shè)置方法如下：

1.在css頁(yè)面中，設(shè)置字體的顏色通過(guò)下面的代碼：

2.字體的color值，一般都是使用#加16進(jìn)制的顏色值來(lái)表示。也有一些編譯器支持直接使用顏色的英文單詞來(lái)表示。如下圖：

3.color是顏色的意思，color用來(lái)設(shè)置一個(gè)標(biāo)簽的前景色，表現(xiàn)出來(lái)也就是元素文本的顏色。css還可以設(shè)置字體的其他屬性，如font-familay可以設(shè)置字體的類型，font-size可以設(shè)置字體的大小等。

擴(kuò)展資料：

CSS 能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。

參考資料：CSS-百度百科

14、CSS中顏色設(shè)置方法

在我們的顯示屏中，一個(gè)像素點(diǎn)由三原色構(gòu)成，分別為：紅、綠、藍(lán)。然而在計(jì)算機(jī)中使用0-255來(lái)表示某個(gè)原色的不同程度，在二進(jìn)制中，可以使用八位二進(jìn)制（00000000-11111111）進(jìn)行表示。在十六進(jìn)制中用（ 00-ff ）表示。那么紅色（0-255），綠色（0-255），藍(lán)色（0-255）三原色組成的顏色就有256*256*256種，組成了屏幕中五彩繽紛的畫(huà)面。

由此就可以衍生出顏色的表示方式：

加入透明度：

使用色相表示（hsl）：

這是一種將所有顏色對(duì)應(yīng)成一個(gè)圓，一個(gè)角度代表一種顏色，所以取值范圍為0-360，但是它還包括了飽和度和亮度。

h:0-360,色相

s:0-100%，飽和度

l:0-100%，亮度

例如：hsl(0, 50%, 50%);

css怎么定義全局樣式為藍(lán)色,楷體？

在樣式文件或style標(biāo)簽里設(shè)置全局樣式，具體的寫(xiě)法如下：

style

*{

color: blue;

font-family: '楷體';

}

/style

color表示字體顏色， font-family表示字體樣式

文章題目：設(shè)置css樣式顏色,設(shè)置css樣式顏色不一樣
鏈接地址：http://www.rwnh.cn/article24/dsigpce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站制作、網(wǎng)站內(nèi)鏈、微信公眾號(hào)、靜態(tài)網(wǎng)站、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)