如果網(wǎng)頁只有一種顏色,那是非??膳碌模伾脑O(shè)置豐富了網(wǎng)頁,就如同多彩繽紛的世界。
在了解css顏色之前,我們回顧下計(jì)算機(jī)是如何顯示顏色的?計(jì)算機(jī)根據(jù)色光三原色的原理通過各種算法來顯示顏色。
網(wǎng)頁中使用顏色關(guān)鍵字、16進(jìn)制字符、rgb、rgba等表示紅,綠,藍(lán)三種顏色混合色,如下示例,幾種寫法都是指同一個(gè)顏色(紅色):
color:red;
color: #ff0000;
color: rgb(255,0,0)
color: rgba(255,0,0,1)
對(duì)于16進(jìn)制形式,每2位表示一個(gè)顏色,從左到右分別是紅、綠、藍(lán),每種顏色取值從00 到 FF。
如下示例:
color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*紅色*/
color: #00ff00; /*綠色*/
color: #0000ff; /*藍(lán)色*/
對(duì)于rgb的表示法,由三個(gè)參數(shù)組成,分別是紅、綠、藍(lán),每種顏色取值從0 到 255。
如下示例:
color: rgb(0,0,0); /*黑色*/
color: rgb(255,255,255); /*白色*/
color: rgb(255,0,0); /*紅色*/
color: rgb(0,255,0); /*綠色*/
color: rgb(0,0,255); /*藍(lán)色*/
紅,綠,藍(lán)值從0到255的結(jié)合,給出了總額超過1600多萬不同的顏色(256 × 256 ×256)。
但是現(xiàn)代大多數(shù)顯示器能夠顯示至少16384種顏色。所以在使用顏色時(shí)要格外注意,避免設(shè)置不能夠顯示的顏色,可以參考網(wǎng)頁安全色:https://www.w3school.com.cn/cssref/css_colors.asp。
顏色除了有三原色紅綠藍(lán)組成,還有亮度層級(jí),如下圖:
rgba 中的a是指透明度,這個(gè)是css3新增加的屬性,通過rgba可以設(shè)置更加漂亮的顏色。
通過background屬性可以設(shè)置元素的背景色、背景圖片,語法如下:
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
background 在一個(gè)聲明中設(shè)置所有的背景屬性,可以在這里設(shè)置如下屬性:
各值之間用空格分隔,不分先后順序。可以只有其中的某些值,例如 background:#FF0000 url(img.png)是允許的,但至少有一個(gè)值。
建議使用background 簡(jiǎn)寫屬性,這樣可以更好地兼容較老的瀏覽器,少寫很多代碼,當(dāng)然你也可以分開使用,比如:
background-color: #ff0000;
background-image: url(img.png);
background-repeat: no-repeat;
background-size: 100% auto;
1、背景顏色 —— background-color
background-color 和之前講的的color 一樣,可以使用16進(jìn)制、rgb、rgba等設(shè)置顏色。如下實(shí)例:
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<h1>背景色1</h1>
<h2>背景色2</h2>
<p>背景色3</p>
<p class="no2">背景色4</p>
</body>
</html>
如下圖顯示:
注意:background-color: transparent; 指透明色,不顯示任何顏色。
2、背景圖片的使用——background-image
給html元素添加背景圖片,在早期網(wǎng)頁制作中被廣泛應(yīng)用,如今已不建議大量使用。如下實(shí)例:
body {background-image:url(/static/bg.gif);}
這里使用了一個(gè)125*125大小的圖片,如下:
但是你會(huì)發(fā)現(xiàn),整個(gè)網(wǎng)頁鋪滿了圖片,上面的代碼默認(rèn)會(huì)鋪滿整個(gè)頁面從左到右,從上到下 。如果不想被平鋪,可以使用background-repeat 設(shè)置。
背景圖片同時(shí)可以設(shè)置多個(gè)背景圖片,如下:
background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);
多個(gè)圖像以逗號(hào)隔開,在頁面中多個(gè)圖片會(huì)疊加顯示,第一張圖片顯示在最頂端。
如下效果:
3、背景重復(fù)方式 —— background-repeat
它有如下幾個(gè)屬性:
repeat | 默認(rèn)。背景圖像將在垂直方向和水平方向重復(fù)。 |
repeat-x | 背景圖像將在水平方向重復(fù)。 |
repeat-y | 背景圖像將在垂直方向重復(fù)。 |
no-repeat | 背景圖像不重復(fù)。 |
inherit | 從父元素繼承 background-repeat 屬性的設(shè)置。 |
實(shí)例如下:
4、背景圖的位置 —— background-position
背景圖片默認(rèn)顯示在左上角,語法如下:
background-position: x y; // x 距離左邊距離,y距離頂部距離
如果要改變它的位置,可以使用關(guān)鍵字:top、bottom、left、right 和 center;或者使用長(zhǎng)度值,如 100px 或 5cm;也可以使用百分?jǐn)?shù)值。
x 可以取值 百分比| 數(shù)值| left | center | right。
y 可以取值 百分比| 數(shù)值| top| center | bottom。
當(dāng)只設(shè)置一個(gè)值的時(shí)候,另一個(gè)會(huì)缺省為 center。
使用關(guān)鍵字,將背景圖片水平居中,垂直居中:
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
使用百分比%:
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%;
50% 50% 等同于 center center,顯示效果和上圖一樣。
還可以使用具體數(shù)值,比如 px、em、cm等。
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50px 50px;
顯示效果如下:
5、背景圖相對(duì)于容器的基準(zhǔn)點(diǎn) —— background-origin
就是設(shè)置背景圖片相對(duì)于html元素什么位置作為初始坐標(biāo)點(diǎn),語法:
background-origin: padding-box|border-box|content-box;
幾種值得含義:
padding-box | 背景圖像相對(duì)填充框的位置 |
border-box | 背景圖像相對(duì)邊界框的位置 |
content-box | 背景圖像相對(duì)內(nèi)容框的位置 |
如下實(shí)例:
6、背景圖片大小 —— background-size
默認(rèn)會(huì)顯示背景圖原始尺寸,可以通過此屬性設(shè)置背景圖片在元素上的大小,語法:
background-size: width height;
寬度和高度可以使用 數(shù)值、百分比%、cover 及 contain ;
數(shù)值:可以使用任何單位的數(shù)字,比如 px、em、cm等。如果設(shè)置一個(gè)值,第二個(gè)為"auto(自動(dòng))"。
百分比%:相對(duì)于其所在html原始寬度和高度,如果設(shè)置一個(gè)值,第二個(gè)為"auto(自動(dòng))"。
cover:把背景圖像擴(kuò)展至足夠大,以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。
contain:把背景圖像擴(kuò)展至最大尺寸,以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。
如下示例:
7、背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)
background-attachment 屬性有以下幾個(gè)值:
scroll | 背景圖片隨頁面的其余部分滾動(dòng)。這是默認(rèn) |
fixed | 背景圖像是固定的 |
inherit | 指定background-attachment的設(shè)置應(yīng)該從父元素繼承 |
local | 背景圖片隨滾動(dòng)元素滾動(dòng) |
如設(shè)置一個(gè)固定的背景圖片,不跟隨頁面滾動(dòng):
background-attachment:fixed;
滾動(dòng)滾動(dòng)條,會(huì)發(fā)下背景圖片始終固定在屏幕那個(gè)位置。
8、背景繪制區(qū)域 —— background-clip
語法如下:
background-clip: border-box|padding-box|content-box;
border-box | 默認(rèn)值。背景繪制在邊框方框內(nèi)(剪切成邊框方框)。 |
padding-box | 背景繪制在襯距方框內(nèi)(剪切成襯距方框)。 |
content-box | 背景繪制在內(nèi)容方框內(nèi)(剪切成內(nèi)容方框)。 |
這個(gè)屬性類似于 background-origin ,只不過它會(huì)裁剪背景圖片,如下示例:
9、背景層的混合模式 —— background-blend-mode
所謂混合模式就是將圖片與顏色或圖片與圖片進(jìn)行混合,語法:
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
屬性值:
示例如下:
正常模式
luminosity 亮度模式
color 顏色模式
其它模式可以自己試試,看下有什么區(qū)別。
到此,我們了解了顏色和背景的使用方法,尤其是背景的使用,由于它的屬性很多,可以簡(jiǎn)寫也可以分開寫,要想完全掌握,還得多練習(xí),每種屬性進(jìn)行組合使用看看其效果。
一般建議使用 background 簡(jiǎn)寫方式,主要是可以少寫很多代碼。以上介紹難免有誤,或不齊全,歡迎指出錯(cuò)誤,并補(bǔ)充。
上篇:前端入門——css鏈接樣式
景樣式
1.背景屬性縮寫
Background: 背景色 背景圖片 背景平鋪方式 背景定位
例:body {
background-color:# EDEDED;
background-image:url(images/bg.png);
background-repeat:no-repeat;
background-position:50% 30px;
}
縮寫后:
body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}
尺寸樣式
1.寬度
width : auto | length
例:
p { width:300px;} div { width:50%;}
2.高度
height : auto | length
例:
img { height:200px;}
div { height:100px;}
邊框樣式
1.邊框線
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
例:div { width:300px; height:100px; border-style:solid; }
border-top-style 設(shè)置上邊框線
border-bottom-style 設(shè)置下邊框線
border-left-style 設(shè)置左邊框線
border-right-style 設(shè)置右邊框線
2.邊框?qū)挾?/p>
border-width : medium | thin | thick | length
例:
div { width:300px; height:100px; border-style:solid; border-width:1px; }
border-top-width 設(shè)置上邊框?qū)挾?/p>
border-bottom-width 設(shè)置下邊框?qū)挾?/p>
border-left-width 設(shè)置左邊框?qū)挾?/p>
border-right-width 設(shè)置右邊框?qū)挾?/p>
3.邊框顏色
border-color : color
例:div {
width:300px;
height:100px;
border-style:solid;
border-width:1px;
border-color:#FF0000;
}
border-top-color 設(shè)置上邊框顏色
border-bottom-color 設(shè)置下邊框顏色
border-left-color 設(shè)置左邊框顏色
border-right-color 設(shè)置右邊框顏色
4.邊框樣式縮寫
border : border-width || border-style || border-color
例:div {
width:300px;
height:100px;
border-style:solid;
border-width:1px;
border-color:#FF0000;
}
縮寫后:div {
width:300px;
height:100px;
border:1px solid #FF0000;
}
外邊距
margin : auto | length
例:div { width:300px; height:100px; margin:10px;}
div { width:300px; height:100px; margin:0 auto;}
margin-top 設(shè)置上邊的外邊距
margin-bottom 設(shè)置下邊的外邊距
margin-left設(shè)置左邊的外邊距
margin-right設(shè)置右邊的外邊距
縮寫型式:
margin: 上邊距 右邊距 下邊距 左邊距
margin: 上下邊距左右邊距
margin: 上邊距 左右邊距 下邊距
內(nèi)邊距
padding : length
例:
div { width:300px; height:100px; padding:10px;}
padding-top 設(shè)置上邊的內(nèi)邊距
padding-bottom 設(shè)置下邊的內(nèi)邊距
padding-left設(shè)置左邊的內(nèi)邊距
padding-right設(shè)置右邊的內(nèi)邊距
縮寫型式:
padding: 上邊距 右邊距 下邊距 左邊距
padding : 上下邊距左右邊距
padding : 上邊距 左右邊距 下邊距
列表樣式
1.項(xiàng)目符號(hào)
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha |
katakana | katakana-iroha | lower-latin | upper-latin
例:
ul { list-style-type:disc;}/*實(shí)心圓*/
ul { list-style-type:circle;}/*空心圓*/
ul { list-style-type:square;}/*實(shí)心方塊*/
ul { list-style-type:none;}/*不顯示項(xiàng)目符號(hào)*/
ol { list-style-type:decimal;}/*阿拉伯?dāng)?shù)字*/
ol { list-style-type:lower-roman;}/*小寫羅馬數(shù)字*/
ol { list-style-type:upper-alpha;}/*大寫英文字母*/
2.自定義項(xiàng)目符號(hào)
list-style-image : none | url ( url )
例:
ul {list-style-image:url(images/arrow.gif)}
鏈接樣式
1.鏈接沒有被訪問時(shí)的樣式
a:link
例: a:link { color:#ff0000; }
2.鏈接被訪問后的樣式
a:visited
例: a:link { color:#0000ff; text-decoration:none; }
3.鼠標(biāo)懸停在鏈接上的樣式
a:hover
例: a:link { background-color:#ccc; }
4.鼠標(biāo)點(diǎn)擊鏈接時(shí)的樣式
a:active
例:a:active { background-color:#ff0000;}
ackground-clip 屬性
規(guī)定背景的繪制區(qū)域:
border-box 背景被裁剪到邊框盒。
padding-box 背景被裁剪到內(nèi)邊距框。
content-box 背景被裁剪到內(nèi)容框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
margin: 50px auto;
padding: 50px;
border: 50px solid rgba(255,0,0,0.5);
background-image: url(img/yangmi.jpg);
/*規(guī)定背景的繪制區(qū)域:*/
/*background-clip: border-box;*//*背景會(huì)填充到邊框*/
/*background-clip: padding-box;*/
background-clip: content-box;
}
</style>
</head>
<body>
<div>我是文字啊啊啊啊</div>
</body>
</html>
background-size 屬性
background-size: length|percentage|cover|contain;
length 設(shè)置背景圖像的高度和寬度。第一個(gè)值設(shè)置寬度,第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值,則第二個(gè)值會(huì)被設(shè)置為 "auto"。
percentage 以父元素的百分比來設(shè)置背景圖像的寬度和高度。第一個(gè)值設(shè)置寬度,第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值,則第二個(gè)值會(huì)被設(shè)置為 "auto"。
cover 把背景圖像擴(kuò)展至足夠大,以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。
contain 把圖像圖像擴(kuò)展至最大尺寸,以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。