溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css中美化網(wǎng)頁的元素是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
2.<span>標(biāo)簽
<span>標(biāo)簽的作用
能讓某幾個文字或者某個詞語凸顯出來
示例：
<p>享受<spanclass="show">“北大式”</span>教育服務(wù)</p>
<p>在php中文網(wǎng)，有一群人默默支持你成就
<spanid="dream">夢想</span></p>
<pclass="bird">選擇<span>php中文網(wǎng)</span>，成就你的夢想</p>
3.字體樣式
4.字體類型
font-family屬性
p{font-family:Verdana,"楷體";}
body{font-family:Times,"TimesNewRoman","楷體";}
5.字體大小
font-size屬性
單位：px（像素）、em、rem、cm、mm、pt、pc
6.字體風(fēng)格
font-style屬性
normal、italic(庫里自帶的)和oblique(自動將字體變斜體)
示例：
7.字體的粗細(xì)
font-weight屬性
8.字體屬性
font屬性familyweightsizestyle
字體屬性的順序：字體風(fēng)格→字體粗細(xì)→字體大小→字體類型
pspan{font:obliquebold12px"楷體";}
9.文本樣式
文本屬性
10.文本顏色
color屬性
RGB
十六進(jìn)制方法表示顏色：前兩位表示紅色分量，中間兩位表示綠色分量，最后兩位表示藍(lán)色分量
rgb(r,g,b):正整數(shù)的取值為0～255
RGBA
在RGB基礎(chǔ)上增加了控制alpha透明度的參數(shù)，其中這個透明通道值為0～1
示例：
color:#A983D8;
color:#EEFF66;
color:rgb(0,255,255);--------------最深的顏色
color:rgba(0,0,255,0.5);-----------透明度
11.排版文本段落
12.文本修飾和垂直對齊
文本裝飾
text-decoration屬性
垂直對齊方式
vertical-align屬性：middle、top、bottom
13.文本陰影
瀏覽器兼容性
14.超鏈接偽類
15.使用CSS設(shè)置超鏈接
16.列表樣式2-1
list-style-type
list-style-image
17.列表樣式2-2
list-style:
li{
list-style:none;
}
1、網(wǎng)頁背景
R紅--G綠--B藍(lán)
背景顏色
background-color
背景圖像
background-image
19.設(shè)置背景圖像2-1
背景圖像
background-image屬性
background-image:url(圖片路徑);
背景重復(fù)方式
background-repeat屬性
repeat：沿水平和垂直兩個方向平鋪
no-repeat：不平鋪，即只顯示一次
repeat-x：只沿水平方向平鋪
repeat-y：只沿垂直方向平鋪
20.設(shè)置背景圖像2-2
背景定位
background-position屬性
21.設(shè)置背景
背景屬性
background屬性
23.背景尺寸
背景尺寸background-size
24.CSS3漸變
線性漸變
顏色沿著一條直線過渡：從左到右、從右到左、從上到下等
徑向漸變
圓形或橢圓形漸變，顏色不再沿著一條直線變化，而是從一個起點朝所有方向混合
瀏覽器兼容性
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(lefttop,red,blue)
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
#grad1{
height:200px;
background:-webkit-linear-gradient(red,yellow,blue);/*Safari5.1to6.0*/
background:-o-linear-gradient(red,yellow,blue);/*Opera11.1to12.0*/
background:-moz-linear-gradient(red,yellow,blue);/*Firefox3.6to15*/
background:linear-gradient(red,yellow,blue);/*標(biāo)準(zhǔn)語法(必須在最后)*/
}
</style>
</head>
<body>
<h4>線性漸變-頭部到底部</h4>
<p>從頭部開始的線性漸變，從紅色開始，轉(zhuǎn)為黃色，再到藍(lán)色:</p>
<divid="grad1"></div>
<p><strong>注意：</strong>InternetExplorer9及更早版本IE瀏覽器不支持漸變。</p>
</body>
</html>
以上是“css中美化網(wǎng)頁的元素是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
