CSS background屬性

ackground屬性

屬性解釋

background屬性是css中應(yīng)用比較多，且比較重要的一個(gè)屬性，它是負(fù)責(zé)給盒子設(shè)置背景圖片和背景顏色的，background是一個(gè)復(fù)合屬性，它可以分解成如下幾個(gè)設(shè)置項(xiàng)：

background-color 設(shè)置背景顏色

background-image 設(shè)置背景圖片地址

background-repeat 設(shè)置背景圖片如何重復(fù)平鋪

background-position 設(shè)置背景圖片的位置

background-attachment 設(shè)置背景圖片是固定還是隨著頁(yè)面滾動(dòng)條滾動(dòng)

實(shí)際應(yīng)用中，我們可以用background屬性將上面所有的設(shè)置項(xiàng)放在一起，而且也建議這么做，這樣做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，這里面的“#00ff00”是設(shè)置background-color；“url(bgimage.gif)”是設(shè)置background-image；“no-repeat”是設(shè)置background-repeat；“l(fā)eft center”是設(shè)置background-position；“fixed”是設(shè)置background-attachment，各個(gè)設(shè)置項(xiàng)用空格隔開(kāi)，有的設(shè)置項(xiàng)不寫(xiě)也是可以的，它會(huì)使用默認(rèn)值。

舉例：

下面這些例子使用下面這張圖片做為背景圖：

1、“background:url(bg.jpg)”，默認(rèn)設(shè)置一個(gè)圖片地址，圖片會(huì)從盒子的左上角開(kāi)始將盒子鋪滿。

2、“background:cyan url(bg.jpg) repeat-x”，橫向平鋪盒子，盒子其他部分顯示背景顏色“cyan”。

3、“background:cyan url(bg.jpg) repeat-y”，縱向平鋪盒子，盒子其他部分顯示背景顏色“cyan”。

4、“background:cyan url(bg.jpg) no-repeat”，背景不重復(fù)，背景和盒子左上角對(duì)齊，盒子其他部分顯示背景顏色“cyan”。

5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重復(fù)，背景和盒子左中對(duì)齊，盒子其他部分顯示背景顏色“cyan”。

6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重復(fù)，背景和盒子右中對(duì)齊，也就是背景圖片的右邊對(duì)齊盒子的右邊，盒子其他部分顯示背景顏色“cyan”。

相關(guān)代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>test background</title>
 <style type="text/css">
 .backshow{
 width:320px;
 height:160px;
 border:3px solid #333;
 float:left;
 margin:10px; 
 }
 .bg1{background:cyan url(bg.jpg);}
 .bg2{background:cyan url(bg.jpg) repeat-x;}
 .bg3{background:cyan url(bg.jpg) repeat-y;}
 .bg4{background:cyan url(bg.jpg) no-repeat;}
 .bg5{background:cyan url(bg.jpg) no-repeat left center;}
 .bg6{background:cyan url(bg.jpg) no-repeat right center;}
 </style>
</head>
<body>
 <div class="backshow bg1"></div>
 <div class="backshow bg2"></div>
 <div class="backshow bg3"></div>
 <div class="backshow bg4"></div>
 <div class="backshow bg5"></div>
 <div class="backshow bg6"></div>
</body>
</html>

例子說(shuō)明：

background-position的設(shè)置，可以在水平方向設(shè)置“l(fā)eft”、“center”、“right”，在垂直方向設(shè)置“top”、“center”、“bottom”，除了設(shè)置這些方位詞之外，還可以設(shè)置具體的數(shù)值。

比如說(shuō)，我們想把下邊的盒子用右邊的圖片作為背景，并且讓背景顯示圖片中靠近底部的那朵花：

用上面中間那張圖片作為左邊那個(gè)比它尺寸小的盒子的背景，上面右邊的實(shí)現(xiàn)效果設(shè)置為：“background:url(location_bg.jpg) -110px -150px”，第一個(gè)數(shù)值表示背景圖相對(duì)于自己的左上角向左偏移110px，負(fù)值向左，正值向右，第二個(gè)數(shù)值表示背景圖相對(duì)于自己的左上角向上偏移150px，負(fù)值向上，正值向下。

實(shí)現(xiàn)原理示意圖：

對(duì)應(yīng)代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>test background</title>
 <style type="text/css">
 .backshow{
 width:320px;
 height:160px;
 border:3px solid #333;
 float:left;
 margin:10px; 
 } 
 .bg{width:94px;
 height:94px;
 border:3px solid #666;
 background:url(location_bg.jpg) -110px -150px;
 }
 </style>
</head>
<body>
 <div class="bg"></div>
</body>
</html>

理解練習(xí)：

通過(guò)雪碧圖制作如下布局：

TML的作用

HTML是用來(lái)開(kāi)發(fā)網(wǎng)頁(yè)的，它是開(kāi)發(fā)網(wǎng)頁(yè)的語(yǔ)言

HTML的定義

全稱HyperText Mark-up Language，超文本標(biāo)記語(yǔ)言

標(biāo)記就是標(biāo)簽

<標(biāo)簽名稱></標(biāo)簽名稱> 比如 <html></html> <h1></h1>等，標(biāo)簽大多數(shù)都是成對(duì)出現(xiàn)的。

超文本兩層含義：

因?yàn)榫W(wǎng)頁(yè)中還可以有圖片、視頻、音頻等內(nèi)容（超越文本限制）
它還可以在網(wǎng)頁(yè)中跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)，與世界各地主機(jī)的網(wǎng)頁(yè)鏈接（超鏈接文本）

HTML的基本結(jié)構(gòu)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>網(wǎng)頁(yè)標(biāo)題</title>
    </head>
    <body>
        網(wǎng)頁(yè)顯示內(nèi)容
    </body>
</html>

第一行<!DOCTYPE html>是文檔聲明
用來(lái)指定頁(yè)面所使用的html的版本, 這里聲明的是一個(gè)html5的文檔
<html>...</html>標(biāo)簽是開(kāi)發(fā)人員在告訴瀏覽器
整個(gè)網(wǎng)頁(yè)是從<html>這里開(kāi)始的，到</html>結(jié)束
也就是html文檔的開(kāi)始和結(jié)束標(biāo)簽
<head>...</head>標(biāo)簽用于定義文檔的頭部
是負(fù)責(zé)對(duì)網(wǎng)頁(yè)進(jìn)行設(shè)置標(biāo)題、編碼格式以及引入css和js文件的
<body>...</body>標(biāo)簽是編寫(xiě)網(wǎng)頁(yè)上顯示的內(nèi)容

網(wǎng)頁(yè)文件的后綴是.html, 一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開(kāi)顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開(kāi)，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁(yè)

VS Code 安裝

VS Code全拼是 Visual Studio Code 是由微軟研發(fā)的一款免費(fèi)、開(kāi)源的跨平臺(tái)代碼編輯器
目前是前端(網(wǎng)頁(yè))開(kāi)發(fā)使用最多的一款軟件開(kāi)發(fā)工具

下載網(wǎng)址: https://code.visualstudio.com/Download

選擇對(duì)應(yīng)的安裝包進(jìn)行下載:

安裝一切默認(rèn)

VS Code 的插件安裝

Chinese(Simplified) Language Pack for VS Code 中文漢化包
open in browser 右擊在瀏覽器打開(kāi)html

常用的HTML標(biāo)簽

1 標(biāo)簽不區(qū)分大小寫(xiě)，但是推薦使用小寫(xiě)
2 根據(jù)標(biāo)簽的書(shū)寫(xiě)形式，標(biāo)簽分為雙標(biāo)簽(閉合標(biāo)簽)和單標(biāo)簽(空標(biāo)簽) 2.1 雙標(biāo)簽是指由開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽組成的一對(duì)標(biāo)簽，這種標(biāo)簽允許嵌套和承載內(nèi)容，比如: div標(biāo)簽 2.2 單標(biāo)簽是一個(gè)標(biāo)簽組成，沒(méi)有標(biāo)簽內(nèi)容，比如: img標(biāo)簽

標(biāo)簽的使用形式

成對(duì)出現(xiàn)的標(biāo)簽
標(biāo)簽的嵌套
單個(gè)出現(xiàn)的標(biāo)簽
帶屬性的標(biāo)簽

列表標(biāo)簽

無(wú)序列表標(biāo)簽(ul標(biāo)簽)
有序列表標(biāo)簽(ol標(biāo)簽)

網(wǎng)頁(yè)效果

表格標(biāo)簽

<table>標(biāo)簽：表示一個(gè)表格
<tr>標(biāo)簽：表示表格中的一行
<td>標(biāo)簽：表示表格中的列
<th>標(biāo)簽：表示表格中的表頭

屬性設(shè)置
border: 1px solid black:設(shè)置邊框和顏色
border-collapse: collapse:設(shè)置邊框合并

網(wǎng)頁(yè)效果

表單標(biāo)簽

表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器

<form>標(biāo)簽表示表單標(biāo)簽，定義整體的表單區(qū)域

一個(gè)表單中有很多信息組成,比如姓名,愛(ài)好,地址等,這些內(nèi)容有很多其他標(biāo)簽來(lái)承載

這些標(biāo)簽稱為表單元素標(biāo)簽

網(wǎng)頁(yè)效果

表單提交

表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器

action屬性設(shè)置表單數(shù)據(jù)提交地址
method屬性設(shè)置表單提交的方式，一般有“GET”方式和“POST”方式, 不區(qū)分大小寫(xiě)

兩種方式的區(qū)別:

“GET”方式 : 沒(méi)有請(qǐng)求體
“POST”方式 : 有請(qǐng)求體

表單元素屬性設(shè)置

name: 表單元素的名稱，用于作為提交表單數(shù)據(jù)時(shí)的參數(shù)名
value: 表單元素的值，用于作為提交表單數(shù)據(jù)時(shí)參數(shù)名所對(duì)應(yīng)的值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<form action="http://192.168.1.106:8080" method="POST">
<label>姓名:</label>
<input type="text" name="username" >
<br>
<label>密碼:</label>
<input type="password" name="password">
<br>
<label>性別:</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
<label>愛(ài)好:</label>
<input type="checkbox" name="like" value="睡覺(jué)">睡覺(jué)
<input type="checkbox" name="like" value="吃飯">吃飯
<input type="checkbox" name="like" value="打豆豆">打豆豆
<br>
<label>照片:</label>
<input type="file" name="pic">
<br>
<label>個(gè)人描述:</label>
<textarea name="desc"></textarea>
<br>
<label>地址:</label>
<select name="addr">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</form>
</body>
</html>

點(diǎn)擊提交：

可以看到服務(wù)器收到了請(qǐng)求報(bào)文。

天講下HTML中，CSS樣式里的字體屬性。CSS Fonts(字體)屬性用于定義字體系列、大小、粗細(xì)和文字樣式(如斜體)。

字體系列:

CSS中使用font-family 屬性定義文本的字體系列。語(yǔ)法如下:

p {

font-family: "微軟雅黑";

}

我們來(lái)看個(gè)實(shí)例:

可以看到將標(biāo)題進(jìn)行了字體設(shè)置，來(lái)看下具體的代碼:

<!DOCTYPE html>

<head>

<title>CSS字體屬性之字體系列</title>

<style>

h2 {

font-family: "宋體";

}

</style>

</head>

<body>

<p>不知天上宮闕，今夕是何年</p>

<p>我欲乘風(fēng)歸去，又恐瓊樓玉宇</p>

<p>高處不勝寒，起舞弄清影，何似在人間。</p>

</body>

</html>

其中

<style>

h2 {

font-family: "宋體";

}

</style>

就是設(shè)置字體的地方

嘗試修改為另外一種字體，如微軟雅黑，讓我們看看效果

具體對(duì)應(yīng)的代碼為:

<style>

h2 {

font-family: "微軟雅黑";

}

</style>

還可以用兩個(gè)字體，效果如下:

對(duì)應(yīng)的代碼為:

<!DOCTYPE html>

<head>

<title>CSS字體屬性之字體系列</title>

<style>

h2 {

font-family: "微軟雅黑";

}

p {

font-family: "宋體";

}

</style>

</head>

<body>

<p>不知天上宮闕，今夕是何年</p>

<p>我欲乘風(fēng)歸去，又恐瓊樓玉宇</p>

<p>高處不勝寒，起舞弄清影，何似在人間。</p>

</body>

</html>

建議不要直接使用中文，最好使用英文，微軟雅黑對(duì)應(yīng)的是 Microsoft YaHei

我們替換后試下:

字體沒(méi)變，還是一樣，但是代碼變了

<style>

h2 {

font-family: "Microsoft YaHei";

}

p {

font-family: "宋體";

}

</style>

不僅可以寫(xiě)一個(gè)字體，還可以寫(xiě)多個(gè)字體，之間用空格隔開(kāi)。各種字體之間必須使用英文的逗號(hào)符號(hào)。一般情況下，如果有空格隔開(kāi)的多個(gè)單詞組成的字體，需要加引號(hào)。盡量使用系統(tǒng)自帶的默認(rèn)字體，保證在任何用戶的瀏覽器中能夠正常顯示。

寫(xiě)多個(gè)字體的好處就是:

當(dāng)瀏覽器運(yùn)行并調(diào)用字體代碼時(shí)，會(huì)按照順序先查看第一個(gè)字體，如果系統(tǒng)中沒(méi)有，會(huì)自動(dòng)調(diào)用第二個(gè)字體，直到找到匹配的字體。

在線咨詢

上一篇：java CSS控制圖片和文字在同一行顯示且對(duì)齊的3種方法
下一篇：使用html寫(xiě)出網(wǎng)頁(yè)下面的版權(quán)信息

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

CSS background屬性

ackground屬性

TML的作用

HTML的定義

HTML的基本結(jié)構(gòu)

VS Code 安裝

VS Code 的插件安裝

常用的HTML標(biāo)簽

表單提交

您的項(xiàng)目需求