css中美化網(wǎng)頁(yè)的元素有哪些
小編給大家分享一下css中美化網(wǎng)頁(yè)的元素有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)建站專(zhuān)注于企業(yè)全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站重做改版、漢中網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、購(gòu)物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為漢中等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。
本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于css中美化網(wǎng)頁(yè)的元素有哪些？css中可以美化網(wǎng)頁(yè)的元素總結(jié)，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。
1.本章目標(biāo)
會(huì)使用CSS設(shè)置字體樣式和文本樣式
會(huì)使用CSS設(shè)置超鏈接樣式
會(huì)使用CSS設(shè)置列表樣式
會(huì)使用CSS設(shè)置背景樣式
會(huì)使用CSS設(shè)置漸變效果
2.<span>標(biāo)簽
<span>標(biāo)簽 的作用
能讓某幾個(gè)文字或者某個(gè)詞語(yǔ)凸顯出來(lái)
示例：
<p>享受<span class="show">“北大式”</span>教育服務(wù)</p> <p>在創(chuàng)新互聯(lián)，有一群人默默支持你成就 <span id="dream">夢(mèng)想</span></p> <p class="bird">選擇<span>創(chuàng)新互聯(lián)</span>，成就你的夢(mèng)想</p>
3.字體樣式
4.字體類(lèi)型
font-family屬性
p{font-family:Verdana,"楷體";}
body{font-family: Times,"Times New Roman", "楷體";}5.字體大小
font-size屬性
單位： px（像素）、em、rem、cm、mm、pt、pc
6.字體風(fēng)格
font-style屬性
normal、italic(庫(kù)里自帶的)和oblique(自動(dòng)將字體變斜體)
示例：
7.字體的粗細(xì)
font-weight屬性
8.字體屬性
font屬性familyweightsizestyle
字體屬性的順序：字體風(fēng)格→字體粗細(xì)→字體大小→字體類(lèi)型
p span {font:oblique bold 12px "楷體";}
9.文本樣式
文本屬性
10.文本顏色
color屬性
RGB
十六進(jìn)制方法表示顏色：前兩位表示紅色分量，中間兩位表示綠色分量，最后 兩位表示藍(lán)色分量
rgb(r,g,b) : 正整數(shù)的取值為0～255
RGBA
在RGB基礎(chǔ)上增加了控制alpha透明度的參數(shù)，其中這個(gè)透明通道值為0～1
示例：
color:#A983D8; color:#EEFF66; color:rgb(0,255,255);--------------最深的顏色 color:rgba(0,0,255,0.5);-----------透明度
11.排版文本段落
12.文本修飾和垂直對(duì)齊
文本裝飾
text-decoration屬性
垂直對(duì)齊方式
vertical-align屬性：middle、top、bottom
13.文本陰影
瀏覽器兼容性
14.超鏈接偽類(lèi)
15.使用CSS設(shè)置超鏈接
16.列表樣式2-1
list-style-type
list-style-image
17.列表樣式2-2
list-style:
li {
list-style:none;
}
1、網(wǎng)頁(yè)背景
R紅--G綠--B藍(lán)
背景顏色
background-color
背景圖像
background-image
19.設(shè)置背景圖像2-1
背景圖像
background-image屬性
background-image:url(圖片路徑);
背景重復(fù)方式
background-repeat屬性
repeat：沿水平和垂直兩個(gè)方向平鋪
no-repeat：不平鋪，即只顯示一次
repeat-x：只沿水平方向平鋪
repeat-y：只沿垂直方向平鋪
20.設(shè)置背景圖像2-2
背景定位
background-position屬性
21.設(shè)置背景
背景屬性
background屬性
23.背景尺寸
背景尺寸 background-size
24.CSS3漸變
線性漸變
顏色沿著一條直線過(guò)渡：從左到右、從右到左、從上到下等
徑向漸變
圓形或橢圓形漸變，顏色不再沿著一條直線變化，而是從一個(gè)起點(diǎn)朝所有方向 混合
瀏覽器兼容性
25.CSS3漸變兼容
IE瀏覽器是Trident內(nèi)核，加前綴：-ms-
Chrome瀏覽器是Webkit內(nèi)核，加前綴：-webkit-
Safari瀏覽器是Webkit內(nèi)核，加前綴：-webkit-
Opera瀏覽器是Blink內(nèi)核，加前綴：-o-
Firefox瀏覽器是Mozilla內(nèi)核，加前綴：-moz-
26.線性漸變
左上向右下方向漸變：linear-gradient( left top ,red, blue)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */
background: linear-gradient(red,yellow,blue); /* 標(biāo)準(zhǔn)語(yǔ)法 (必須在最后) */
}
</style>
</head>
<body>
<h4>線性漸變 - 頭部到底部</h4>
<p>從頭部開(kāi)始的線性漸變，從紅色開(kāi)始，轉(zhuǎn)為黃色，再到藍(lán)色:</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及更早版本 IE 瀏覽器不支持漸變。</p>
</body>
</html>總結(jié)
以上是“css中美化網(wǎng)頁(yè)的元素有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)站名稱(chēng)：css中美化網(wǎng)頁(yè)的元素有哪些
標(biāo)題網(wǎng)址：http://m.rwnh.cn/article14/jcjige.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、微信小程序、定制開(kāi)發(fā)、動(dòng)態(tài)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、服務(wù)器托管
聲明：本網(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)
營(yíng)銷(xiāo)型網(wǎng)站建設(shè)知識(shí)
- 杭州網(wǎng)站建設(shè)-營(yíng)銷(xiāo)型網(wǎng)站建設(shè)注意事項(xiàng) 2021-11-26
- 創(chuàng)新互聯(lián)：在全網(wǎng)營(yíng)銷(xiāo)型網(wǎng)站建設(shè)中導(dǎo)航該如何設(shè)計(jì) 2022-11-15
- 營(yíng)銷(xiāo)型網(wǎng)站建設(shè)的關(guān)鍵是什么？ 2022-05-25
- 營(yíng)銷(xiāo)型網(wǎng)站建設(shè)八大評(píng)價(jià)標(biāo)準(zhǔn) 2013-06-01
- 創(chuàng)新互聯(lián)技術(shù)貼：營(yíng)銷(xiāo)型網(wǎng)站建設(shè)思路及整體規(guī)劃 2022-03-01
- 營(yíng)銷(xiāo)型網(wǎng)站建設(shè)的規(guī)劃問(wèn)題 2016-03-30
- 如何使?fàn)I銷(xiāo)型網(wǎng)站建設(shè)更加吸引用戶點(diǎn)擊 2021-02-21
- 營(yíng)銷(xiāo)型網(wǎng)站建設(shè)方案的好處 2021-04-14
- 營(yíng)銷(xiāo)型網(wǎng)站建設(shè)需要注意哪些環(huán)節(jié)？ 2022-06-28
- 營(yíng)銷(xiāo)型網(wǎng)站建設(shè)中出色的軟文是怎樣煉成的？ 2022-11-07
- 營(yíng)銷(xiāo)型網(wǎng)站建設(shè)需要注意事項(xiàng) 2021-06-14
- 你不懂這些，你就不懂營(yíng)銷(xiāo)型網(wǎng)站建設(shè) 2022-08-07