小編給大家分享一下css中美化網(wǎng)頁的元素有哪些,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)建站專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、漢中網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、html5、購物商城網(wǎng)站建設、集團公司官網(wǎng)建設、成都外貿(mào)網(wǎng)站建設公司、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務,價格優(yōu)惠性價比高,為漢中等各大城市提供網(wǎng)站開發(fā)制作服務。
本篇文章給大家?guī)淼膬?nèi)容是關于css中美化網(wǎng)頁的元素有哪些?css中可以美化網(wǎng)頁的元素總結,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
1.本章目標
會使用CSS設置字體樣式和文本樣式
會使用CSS設置超鏈接樣式
會使用CSS設置列表樣式
會使用CSS設置背景樣式
會使用CSS設置漸變效果
2.<span>標簽
<span>標簽 的作用
能讓某幾個文字或者某個詞語凸顯出來
示例:
<p>享受<span class="show">“北大式”</span>教育服務</p> <p>在創(chuàng)新互聯(lián),有一群人默默支持你成就 <span id="dream">夢想</span></p> <p class="bird">選擇<span>創(chuàng)新互聯(lián)</span>,成就你的夢想</p>
3.字體樣式
4.字體類型
font-family屬性
p{font-family:Verdana,"楷體";} body{font-family: Times,"Times New Roman", "楷體";}
5.字體大小
font-size屬性
單位: px(像素)、em、rem、cm、mm、pt、pc
6.字體風格
font-style屬性
normal、italic(庫里自帶的)和oblique(自動將字體變斜體)
示例:
7.字體的粗細
font-weight屬性
8.字體屬性
font屬性familyweightsizestyle
字體屬性的順序:字體風格→字體粗細→字體大小→字體類型
p span {font:oblique bold 12px "楷體";}
9.文本樣式
文本屬性
10.文本顏色
color屬性
RGB
十六進制方法表示顏色:前兩位表示紅色分量,中間兩位表示綠色分量,最后 兩位表示藍色分量
rgb(r,g,b) : 正整數(shù)的取值為0~255
RGBA
在RGB基礎上增加了控制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設置超鏈接
16.列表樣式2-1
list-style-type
list-style-image
17.列表樣式2-2
list-style: li { list-style:none; }
1、網(wǎng)頁背景
R紅--G綠--B藍
背景顏色
background-color
背景圖像
background-image
19.設置背景圖像2-1
背景圖像
background-image屬性
background-image:url(圖片路徑);
背景重復方式
background-repeat屬性
repeat:沿水平和垂直兩個方向平鋪
no-repeat:不平鋪,即只顯示一次
repeat-x:只沿水平方向平鋪
repeat-y:只沿垂直方向平鋪
20.設置背景圖像2-2
背景定位
background-position屬性
21.設置背景
背景屬性
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( left top ,red, blue)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(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); /* 標準語法 (必須在最后) */ } </style> </head> <body> <h4>線性漸變 - 頭部到底部</h4> <p>從頭部開始的線性漸變,從紅色開始,轉為黃色,再到藍色:</p> <div id="grad1"></div> <p><strong>注意:</strong> Internet Explorer 9 及更早版本 IE 瀏覽器不支持漸變。</p> </body> </html>
總結
以上是“css中美化網(wǎng)頁的元素有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站名稱:css中美化網(wǎng)頁的元素有哪些
標題網(wǎng)址:http://muchs.cn/article14/jcjige.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、微信小程序、定制開發(fā)、動態(tài)網(wǎng)站、手機網(wǎng)站建設、服務器托管
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)