- 背景
- 文本
- 字體
- 鏈接
- 列表
- 表格
- 輪廓
1. 背景
說明:css允許應(yīng)用純色
作為背景宣脉,也允許使用背景圖片
創(chuàng)建相當(dāng)復(fù)雜的效果霜第。主要的背景屬性如下
屬性 | 描述 |
---|---|
background-attachment | 背景圖片是否固定或者隨著頁面的其它部分滾動(dòng) |
background-color | 設(shè)置元素的背景顏色 |
background-image | 把圖片設(shè)置為背景 |
background-position | 設(shè)置圖片背景的起始位置 |
background-repeat | 設(shè)置背景是否以及如何重復(fù) |
background-size | 規(guī)定背景圖片的尺寸 |
background-origin | 規(guī)定背景圖片的定位區(qū)域 |
background-clip | 規(guī)定背景的繪制區(qū)域 |
(1) background
body{
background: darkgray;
}
p{
background: greenyellow;
width: 200px;
padding: 10px;
}
<body>
<p>當(dāng)元素未指定背景顏色時(shí)侈贷,背景顏色不可被繼承;當(dāng)指定時(shí)葫隙,采用自身定義的背景顏色</p>
</body>
拓展:小程序中背景顏色可以被繼承且p便簽的寬度默認(rèn)會(huì)包裹自身统屈,p標(biāo)簽設(shè)置寬度不起作用;html中背景顏色不可被繼承且p便簽的寬度默認(rèn)會(huì)超出自身需自定義寬度撑毛。
(2) background-image
body{
background-image: url("icon_nav_study.png");
}
或
p{
background-image: url("icon_nav_study.png");
width: 200px;
}
<body>
<p>當(dāng)元素未指定背景顏色時(shí)书聚,背景圖片不可被繼承</p>
</body>
拓展:小程序的本地資源無法通過 WXSS 獲取。background-image可以使用網(wǎng)絡(luò)圖片,或者 base64雌续,或者使用<image/>標(biāo)簽
(3) background-repeat
說明:默認(rèn)允許重復(fù)鋪滿全屏斩个。可設(shè)置為不允許重復(fù)驯杜;允許重復(fù)且鋪滿全屏萨驶;允許在X軸重復(fù)鋪滿;允許在Y軸重復(fù)鋪滿艇肴。
(4) background-position
eg1:
body{
background-image: url("icon_nav_study.png");
background-repeat: no-repeat;
background-position: right;
}
等同于
body{
background-image: url("icon_nav_study.png");
background-repeat: no-repeat;
background-position: right center;
}
說明:第一個(gè)參數(shù)代表圖片在視圖的右邊腔呜,第二個(gè)參數(shù)代表圖片從自身中間(默認(rèn))顯示。
eg2:數(shù)值
body{
background-image: url("icon_nav_study.png");
background-repeat: no-repeat;
background-position: 0px 0px;
}
說明:圖片在視圖左上角位置再悼。
body{
background-image: url("icon_nav_study.png");
background-repeat: no-repeat;
background-position: 100px 100px;
}
說明:圖片左邊距視圖100px的距離核畴,上邊距視圖100px的距離。
eg2:百分比
body{
background-image: url("icon_nav_study.png");
background-repeat: no-repeat;
background-position: 30% 50%;
}
說明:圖片左邊距視圖寬30%的距離冲九,上邊距視圖高50%的距離谤草。
(5) background-attachment
body{
background-image: url("icon_nav_study.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
<body>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
<p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
</body>
說明:默認(rèn)圖片背景隨內(nèi)容滾動(dòng)。
(6) background-size
body{
background-image: url("icon_nav_study.png");
background-repeat: no-repeat;
background-size: 500px 500px;
}
說明:設(shè)置背景圖片大小為500px * 500px莺奸。
(7) background-clip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景相關(guān)屬性</title>
<style>
div{
background-color: #FF8C00;
border: dashed 10px green;
padding: 10px;
}
.div1{
background-clip: content-box;/*背景只覆蓋內(nèi)容區(qū)域*/
}
.div2{
margin-top: 40px;
background-clip: padding-box; /*背景覆蓋內(nèi)容區(qū)域和內(nèi)邊距*/
}
.div3{
margin-top: 40px;
background-clip: border-box;/*背景覆蓋內(nèi)容區(qū)域丑孩、內(nèi)邊距和邊框*/
}
</style>
</head>
<body>
<div class="div1">示例1</div>
<div class="div2">示例2</div>
<div class="div3">示例3</div>
</body>
</html>
(8) background-origin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景相關(guān)屬性</title>
<style>
div{
background-color: #FF8C00;
border: dashed 10px green;
padding: 10px;
background-image: url("jokul.jpg");
background-repeat: no-repeat;
}
.div1{
background-clip: content-box;/*背景只覆蓋內(nèi)容區(qū)域*/
background-origin: content-box;/*背景圖片從內(nèi)容區(qū)域左上角開始*/
}
.div2{
margin-top: 40px;
background-clip: padding-box; /*背景覆蓋內(nèi)容區(qū)域和內(nèi)邊距*/
background-origin: padding-box;/*背景圖片從內(nèi)邊距左上角開始*/
}
.div3{
margin-top: 40px;
background-clip: border-box;/*背景覆蓋內(nèi)容區(qū)域、內(nèi)邊距和邊框*/
background-origin: border-box;/*背景圖片從邊框左上角開始*/
}
</style>
</head>
<body>
<div class="div1">示例1</div>
<div class="div2">示例2</div>
<div class="div3">示例3</div>
</body>
</html>
示例
:在一個(gè)元素中顯示多個(gè)背景圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在一個(gè)元素中顯示多個(gè)背景圖片</title>
<style>
div{
width: 350px;
height: 200px;
background-image: url("../img/11.png"),url("../img/crab.png");/*設(shè)置多個(gè)背景圖片*/
background-repeat: repeat-x,no-repeat;/*第一張?jiān)趚軸重復(fù)灭贷,第二張不重復(fù)*/
background-position: 100%,100%,center,center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2. 文本
說明:css文本屬性定義文本外觀温学,可改變文本的顏色、字符間距甚疟、對齊文本仗岖、裝飾文本、對文本縮進(jìn)等览妖。常用的屬性有文本的顏色轧拄、對齊方式、對文本縮進(jìn)讽膏。
屬性 | 描述 |
---|---|
color | 設(shè)置文本顏色 |
direction | 設(shè)置文本方向 |
line-height | 設(shè)置行高 |
text-align | 設(shè)置元素中文本的水平對齊方式 |
text-decoration | 規(guī)定添加到文本的修飾 |
text-indent | 設(shè)置文本首行縮進(jìn) |
text-transform | 設(shè)置文本的大小寫 |
unicode-bidi | 設(shè)置文本方向 |
white-space | 設(shè)置元素中空白的處理方式 |
letter-spacing | 設(shè)置字符間距 |
word-spacing | 設(shè)置字間距 |
word-wrap | 規(guī)定文本的換行規(guī)則 |
text-shadow | 向文本添加陰影 |
(1) color
body{
color: red;
}
h1{
color: blue;
}
<body>
<p>顏色可被繼承</p>
<h1>采用元素指定顏色</h1>
</body>
(2) text-aligen : 左中右
p{
color: red;
text-align: center;
}
<body>
<p>對齊方式</p>
</body>
說明:小程序中p標(biāo)簽設(shè)置對齊方式未起作用檩电。
(3) text-indent
eg1:數(shù)值
h1{
text-indent: -2em;
padding-left: 2em
}
p{
padding-left: 2em
}
<body>
<div>
<h1>標(biāo)題</h1>
<p>文本</p>
<p>文本</p>
<p>文本</p>
<p>文本</p>
</div>
</body>
eg2:百分比
h1{
text-indent: 10%;
}
(4) text-transform:元素中字母的處理
#p1{
text-transform: capitalize;
}
#p2{
text-transform: lowercase;
}
#p3{
text-transform: uppercase;
}
<body>
<p id="p1">tHis iS my pagE</p>
<p id="p2">thIs Is mY pAGe</p>
<p id="p3">this Is mY pAGe</p>
</body>
說明:capitalize表示首字母大寫。
(5) text-shadow:為文本添加陰影
eg1:基本使用
p{
text-shadow: 20px,20px,2px,#FF0000;
color: black;
font-size: 40px;
font-weight: bold;
font-family: 宋體;
}
<body>
<p>陰影效果</p>
</body>
說明:text-shadow: length,length,length,color;
第一個(gè)參數(shù)為陰影距當(dāng)前文本左邊
的距離(陰影離開文字橫向的距離)府树,第二個(gè)參數(shù)為陰影距當(dāng)前文本上邊
的距離(陰影離開文字縱向的距離)俐末,第三個(gè)參數(shù)為浮雕效果的清晰度
(陰影模糊程度),第四個(gè)參數(shù)為陰影顏色
挺尾。
eg2:可設(shè)置多重陰影效果
text{
text-shadow: -10px -10px 1px red,
10px 10px 3px green,
25px 25px 1px blue,
45px 45px 5px yellow;
color: black;
font-size: 40px;
font-weight: bold;
font-family: 宋體;
}
<view>
<text>為文字添加陰影</text>
</view>
(6) 文本換行
- word-wrap:規(guī)定文本的換行規(guī)則
p{
width: 50px;
word-wrap: normal;
}
<body>
<p>這是測試換行這是測試換行這是測試換行這是測試換行這是測試換行</p>
<p>This is a test This is a test This is a test This is a test This is a test</p>
</body>
說明:英文單詞換行時(shí)不會(huì)被拆分鹅搪,能夠保證單詞的完整性。
- word-break:文本自動(dòng)換行
normal
:使用瀏覽器的自動(dòng)換行規(guī)則
keep-all
:只能在半角遭铺、空格和連字符處進(jìn)行換行
break-all
:強(qiáng)制換行丽柿,英文將被拆分
3. 字體
說明:css字體屬性定義文本的字體系列恢准、字體、大小甫题、加粗馁筐、風(fēng)格和變形。
屬性 | 描述 |
---|---|
font-family | 設(shè)置字體系列 |
font-size | 設(shè)置字體尺寸 |
font-style | 設(shè)置字體風(fēng)格 |
font-variant | 以小型大寫字體或正常字體顯示文字 |
font-weight | 設(shè)置字體粗細(xì) |
p{
font-family: fantasy;
font-size: 40px;
}
<body>
<p>字體屬性設(shè)置</p>
</body>
注意
:雖然css3已經(jīng)突破了安全字體的限制(通過@font-face的方式來引入一個(gè)字體)坠非,但是在實(shí)際開發(fā)的過程中還是會(huì)出現(xiàn)各種各樣的問題敏沉,所有盡量仍使用計(jì)算機(jī)系統(tǒng)自帶的十幾種安全字體,其他字體需慎重使用炎码。
(1) 引入一個(gè)字體并調(diào)用(如使用服務(wù)器端字體)
@font-face{
font-family: myfont;
src: url("服務(wù)器端的字體地址")format("truetype");
}
text{
font-family: myfont;
}
說明:url("")括號(hào)內(nèi)為服務(wù)器端的字體地址(字體上傳到服務(wù)器上盟迟,用戶在使用時(shí)會(huì)自動(dòng)下載下來)。
備注:字體文件拓展名為ttf
則src: url()format("truetype");
潦闲;字體文件拓展名為otf
則src: url()format("opentype");
攒菠。
優(yōu)化:客戶端有Arial字體則直接加載客戶端Arial字體,沒有則從服務(wù)器加載并使用服務(wù)器端字體歉闰。
@font-face{
font-family: myfont;
src: local("Arial"),
url("服務(wù)器端的字體地址");
}
text{
font-family: myfont;
}
(2) 修改文字種類而保持字體尺寸不變
說明:文字的樣式不同字體的大小將會(huì)發(fā)生變化辖众,可使用 font-size-adjust
屬性來使字體尺寸不變。
<view>
<text id='text1'>字體樣式1</text>
</view>
<view>
<text id='text2'>字體樣式2</text>
</view>
<view>
<text id='text3'>字體樣式3</text>
</view>
#text1{
font-family: monospace;
font-size: 16px;
font-size-adjust: 0.58;
}
#text2{
font-family: cursive;
font-size: 16px;
font-size-adjust: 0.6;
}
#text3{
font-family: fantasy;
font-size: 16px;
font-size-adjust: 0.78;
}
備注:可通過不斷嘗試調(diào)節(jié)font-size-adjust: aspect;
中aspect
的數(shù)值來使各種樣式的字體尺寸操持一致和敬;更為精細(xì)的aspect
數(shù)值的獲取可通過高度
和尺寸
計(jì)算得出凹炸,如:x-height:58 font-size:100px aspect=0.58
。瀏覽器中的計(jì)算公式為:c=(a/b)*s昼弟,a為實(shí)際使用的字體的aspect值啤它,b為修改前字體的aspect值,s為當(dāng)前字體的尺寸私杜,c為瀏覽器實(shí)際顯示的字體尺寸蚕键。
4. 鏈接
<body>
<a >百度</a>
</body>
說明:小程序不起作用救欧,需改成對應(yīng)的標(biāo)簽衰粹、屬性和語法。
(1) css鏈接的四種狀態(tài):通過如下的4種屬性來設(shè)置對應(yīng)的4種狀態(tài)
- a:link :普通的笆怠、未被訪問的鏈接狀態(tài)
- a:hover :鼠標(biāo)指針位于鏈接上方的狀態(tài)
- a:active :鏈接被點(diǎn)擊時(shí)的狀態(tài)
- a:visited :用戶已訪問過的鏈接狀態(tài)
a:link{
color: red;
}
a:hover{
color: yellow;
}
a:active{
color: blue;
}
a:visited{
color: green;
}
<body>
<a >百度</a>
</body>
(2) 常見的鏈接方式: text-decoration屬性常用于去除鏈接下劃線
a:link{
color: red;
text-decoration: none;
}
(3) 背景顏色:background-color
a:link{
color: red;
text-decoration: none;
background-color: blueviolet
}
5. 列表
說明:css列表屬性運(yùn)行放置铝耻、改變列表(ul)標(biāo)志,或者將圖像作為列表項(xiàng)(li)標(biāo)志蹬刷。默認(rèn)列表項(xiàng)標(biāo)志是一個(gè)原點(diǎn)瓢捉。
<body>
<ul>
<li>酸</li>
<li>甜</li>
<li>苦</li>
<li>辣</li>
<li>咸</li>
</ul>
</body>
屬性 | 描述 |
---|---|
list-style | 簡寫列表項(xiàng) |
list-style-image | 列表項(xiàng)圖像 |
list-style-position | 列表標(biāo)志位置 |
list-style-type | 列表類型 |
(1) list-style-type:修改列表項(xiàng)標(biāo)志為空心圓
ul li{
list-style-type: circle;
}
(2) list-style-image:修改列表項(xiàng)標(biāo)志為本地圖片
ul li{
list-style-image: url("vcode.gif");
}
(3) list-style-position
.ul1{
list-style-position: inside;
}
.ul2{
list-style-position: outside;
}
ul li{
list-style-type: circle;
}
<body>
<p>列表1效果</p>
<ul class="ul1">
<li>酸</li>
<li>甜</li>
<li>苦</li>
<li>辣</li>
<li>咸</li>
</ul>
<p>列表2效果</p>
<ul class="ul2">
<li>酸</li>
<li>甜</li>
<li>苦</li>
<li>辣</li>
<li>咸</li>
</ul>
</body>
6. 表格
說明:css表格屬性幫助改善表格的外觀。主要屬性有
- 表格邊框:border
- 折疊邊框: border-collapse
- 表格寬高:width & height
- 表格文本對齊: text-align
- 表格內(nèi)邊距:padding
- 表格顏色:color & background-color
說明:color
為字體顏色办成,background-color
為背景顏色泡态。
#tb,tr,th,td{
border: 1px solid blue;
text-align: center;
padding: 5px;
color: white;
background-color: greenyellow;
}
#tb{
border-collapse: collapse;
width: 400px;
height: 400px;
}
<body>
<table id="tb">
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>小李</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>小李</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>小李</td>
<td>男</td>
<td>20</td>
</tr>
</table>
</body>
優(yōu)化:
#tb{
border-collapse: collapse;
width: 500px;
}
#tb th,#tb td{
border: 1px solid bisque;
padding: 5px;
}
#tb th{
text-align: center;
color: white;
background-color: aqua;
}
#tb tr.alt td{
color: black;
background-color: aquamarine;
}
<body>
<table id="tb">
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>小李</td>
<td>男</td>
<td>20</td>
</tr>
<tr class="alt">
<td>小李</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>小李</td>
<td>男</td>
<td>20</td>
</tr>
</table>
</body>
7. 輪廓
說明:css的輪廓屬性主要用于突出元素的作用。加粗和斜體也有突出元素效果的作用迂卢。
屬性 | 描述 |
---|---|
outline | 設(shè)置輪廓屬性 |
outline-color | 設(shè)置輪廓顏色 |
outline-style | 設(shè)置輪廓樣式 |
outline-width | 設(shè)置輪廓寬度 |
p{
outline-color: greenyellow;
outline-style: dotted;
outline-width: 1px;
}
<body>
<p>文本突出效果</p>
</body>