這篇文章主要介紹“CSS屬性組成及作用是什么”，在日常操作中，相信很多人在CSS屬性組成及作用是什么問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS屬性組成及作用是什么”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

在成都網(wǎng)站建設(shè)、成都做網(wǎng)站過程中，需要針對(duì)客戶的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場(chǎng)情況進(jìn)行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計(jì)方向。成都創(chuàng)新互聯(lián)還需要根據(jù)客戶的需求進(jìn)行功能模塊的開發(fā)和設(shè)計(jì)，包括內(nèi)容管理、前臺(tái)展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)和安全保護(hù)等功能。

CSS屬性組成及作用

學(xué)習(xí)目標(biāo)

• 1、css屬性和屬性值的定義

• 2、css文本屬性

• 3、css列表屬性

• 4、css背景屬性

• 5、css邊框?qū)傩?/p>

• 6、css浮動(dòng)屬性

一、css屬性和屬性值的定義

屬性：屬性是指定選擇符所具有的屬性，它是css的核心，css2共有150多個(gè)屬性

屬性值：屬性值包括法定屬性值及常見的數(shù)值加單位，如25px，或顏色值等。

二、CSS文本屬性

1、文本大?。簕font-size:12px;}單位還可以是em，是父級(jí)元素的font-size的倍數(shù)；/系統(tǒng)默認(rèn)的字號(hào)大小為16px

說明：

1） 屬性值為數(shù)值型時(shí)，必須給屬性值加單位，屬性值為0時(shí)除外。

2）單位還可以是pt，9pt=12px;

3）為了減小系統(tǒng)間的字體顯示差異，IE Netscape Mozilla的瀏覽器制作商于1999年召開會(huì)議，共同確定16px/ppi為標(biāo)準(zhǔn)字體大小默認(rèn)值,即1em.默認(rèn)情況下，1em=16px,0.75em=12px; rem

2、文本字體：{font-family:字體1，字體2，字體3；}

說明：

瀏覽器首先會(huì)尋找字體1、如存在就使用改字體來(lái)顯示內(nèi)容，如在字體1不存在的情況下，則會(huì)尋找字體2，如字體2也不存在，按字體3顯示內(nèi)容，如果字體3 也不存在；則按系統(tǒng)默認(rèn)字體顯示； 
當(dāng)字體是中文字體時(shí)，需加雙引號(hào)；
當(dāng)英文字體由多個(gè)單詞組成時(shí)，需加雙引號(hào)如（“Times New Roman”）
當(dāng)英文字體只有一個(gè)單詞組成是不加雙引號(hào)；如：（Arial）；
Windows中文版本操作系統(tǒng)下，中文默認(rèn)字體為宋體或者新宋體，英文字體默認(rèn)為Arial.

3、文本顏色：{color:顏色值;}red/#f00/rgb(255,0,0)

說明：

用十六進(jìn)制(是計(jì)算機(jī)中數(shù)據(jù)的一種表示方法)表示顏色值：
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9 A B C D E F
顏色模式：光色模式
R G B
FF 00 00
顏色值的縮寫：
當(dāng)表示三原色的三組數(shù)字同時(shí)相同時(shí)，可以縮寫為三位;
當(dāng)用十六進(jìn)制表示顏色值時(shí)，需要在顏色值前加“#”
# fa 00 00

RGB表示方式：color:rgb(255,0,0);

4、文字加粗font-weight:bolder(更粗的)/bold（加粗）/normal（常規(guī)）/100—900;

說明：

在css規(guī)范中，把字體的粗細(xì)分為9個(gè)等級(jí)，分別為100——900，其中100對(duì)應(yīng)最輕的字體變形，而900對(duì)應(yīng)最重的字體變形，

5、文本傾斜：font-style：italic/oblique/normal（取消傾斜，常規(guī)顯示）;

說明：

italic和oblique都是傾斜的文字, 但區(qū)別在于Italic是指斜體字，而Oblique是傾斜的文字，對(duì)于沒有斜體的字體應(yīng)該使用Oblique屬性值來(lái)實(shí)現(xiàn)傾斜的文字效果.

6、水平對(duì)齊方式{text-align:left左/right右/center居中/justify兩端對(duì)齊(在部分瀏覽器中，對(duì)于中文不起作用);} 只針對(duì)文本或圖片

7、垂直對(duì)齊方式 {vertical-align:top上/bottom下/middle居中/baseline基線（某些特定的元素類型起作用）;}

8、文字行高 {line-height:normal/value;}line-height:20px; line-height:2em; (當(dāng)行高的單位省略時(shí)，默認(rèn)為em)

說明：

當(dāng)單行文本的行高等于容器高時(shí)，可實(shí)現(xiàn)單行文本在容器中垂直方向居中對(duì)齊；
當(dāng)單行文本的行高小于容器高時(shí)，可實(shí)現(xiàn)單行文本在容器中垂直中齊以上；
當(dāng)單行文本的行高大于容器高時(shí)，可實(shí)現(xiàn)單行文本在容器中垂直中齊以下（IE6及以下版本存在瀏覽器兼容問題） 

• 9、文本修飾 text-decoration:none/underline/overline/line-through

說明：

none:沒有修飾
underline:添加下劃線
overline:添加上劃線
line-through:添加刪除線

• 10、首行縮進(jìn)：{text-indent:value;}

說明：

1）text-indent可以取負(fù)值；

2）text-indent屬性只對(duì)第一行起作用。

• 11、檢索英文字母大小寫{text-transform:none無(wú)轉(zhuǎn)換/capitalize首字母大寫/uppercase全都大寫/lowercase全都小寫;}。

• 12、字間距{letter-spacing:value;}控制英文字母或漢字的字距。

• 13、詞間距{word-spacing:value;}控制英文單詞詞距。

• 擴(kuò)展：14、文本流控制{layout-flow:horizontal/vertical-ideographic;}

說明：

1）horizontal:自左向右

2）vertical-ideographic:自上而下

• 15、文字屬性簡(jiǎn)寫：font:bolder italic 12px/1.5em "宋體";     簡(jiǎn)寫時(shí)，字體和字號(hào)是必備font屬性的簡(jiǎn)寫：字號(hào)，行高，字體 說明:font的屬性值應(yīng)按以下次序書寫(各個(gè)屬性之間用空格隔開) 順序: font-style font-weight font-size / line-height font-family

• (1)簡(jiǎn)寫時(shí) , font-size和line-height只能通過斜杠/組成一個(gè)值，不能分開寫。

• (2) 這種簡(jiǎn)寫法只有在同時(shí)指定font-size和font-family屬性時(shí)才一起作用,如果你沒有設(shè)定font-weight , font-style , 他們會(huì)使用缺省值。

三、CSS列表屬性

• 1、定義列表符號(hào)樣式

list-style-type：disc(實(shí)心圓)/circle(空心圓)/square(實(shí)心方塊)/none(去掉列表符號(hào))；

• 2、使用圖片作為列表符號(hào)

list-style-image：url(所使用圖片的路徑及全稱)；

• 3、定義列表符號(hào)的位置

list-style-position:outside(外邊)/inside(里邊)；

list-style:none;去掉列表符號(hào)

四、邊框的屬性和屬性值

border:邊框?qū)挾?邊框風(fēng)格 邊框顏色;

例如：border:5px solid #ff0000

邊框?qū)挾龋篵order-width:

邊框顏色：border-color:

邊框樣式：border-style:solid(實(shí)線)/dashed(虛線)dotted(點(diǎn)劃線)double(雙線)none(去掉邊框);

可單獨(dú)設(shè)置一方向邊框，

border-bottom:邊框?qū)挾?邊框風(fēng)格 邊框顏色;      底邊框

border-left:邊框?qū)挾?邊框風(fēng)格 邊框顏色;             左邊框

border-right:邊框?qū)挾?邊框風(fēng)格 邊框顏色;          右邊框

border-top:邊框?qū)挾?邊框風(fēng)格 邊框顏色;           上邊框

五、CSS背景屬性

1、背景顏色 {background-color:顏色值;}

2、背景圖片的設(shè)置 background-image：url(背景圖片的路徑及全稱）；

3、背景圖片平鋪屬{background-repeat:no-repeat不平鋪/repeat平鋪/repeat-x  X軸平鋪/repeat-y   Y軸平鋪 }

4、背景圖的位置{background-position:left/center/right/數(shù)值      top/center/bottom/數(shù)值;}

水平方向上的對(duì)齊方式（left/center/right）或值 
垂直方向上的對(duì)齊方式(top/center/bottom)或值 
background-position:值1 值2; 
兩個(gè)值 ：第一個(gè)值表示水平位置的值，第二個(gè)值：表示垂直的位置。 
當(dāng)兩個(gè)值都是center的時(shí)候?qū)懸粋€(gè)值就可以代表的是水平位置和垂直位置 ；

當(dāng)元素小背景圖大的時(shí)候，想顯示右下方的背景圖，通過負(fù)值來(lái)調(diào)整背景圖的位置；

5、背景圖的固定{background-attachment:fixed固定/scroll滾動(dòng);}

fixed 固定，不隨內(nèi)容一塊滾動(dòng)，根據(jù)可視窗口固定位置；
scroll:隨內(nèi)容一塊滾動(dòng)。
網(wǎng)頁(yè)上常用的圖片格式
1）jpg :有損壓縮格式，靠損失圖片本身的質(zhì)量來(lái)減小圖片的體積，適用于顏色豐富的圖像;(像素點(diǎn)組成的，像素點(diǎn)越多會(huì)越清晰 )
2）gif：無(wú)損壓縮格式，支持透明，支持動(dòng)畫，適用于顏色數(shù)量較少的圖像;
3）png:無(wú)損壓縮格式，支持透明，不支持動(dòng)畫，(是fireworks的 源文件格式)，適用于顏色數(shù)量較少的圖像; 

六、CSS浮動(dòng)屬性

語(yǔ)法：float:none/left/right;
浮動(dòng)的目的：就是讓豎著的元素橫著顯示

一個(gè)元素設(shè)置float：left/right;時(shí)，元素會(huì)脫離文檔流（半脫離），不占空間；
有三個(gè)取值：
left:元素向左浮動(dòng)
right:元素向右浮動(dòng)
none:默認(rèn)值，不浮動(dòng)。

清除浮動(dòng)可以理解為打破橫向排列。

清除浮動(dòng)的屬性是clear，語(yǔ)法：

clear : none | left | right | both

none：默認(rèn)值。允許兩邊都可以有浮動(dòng)對(duì)象

left：清除左浮動(dòng)/不允許左邊有浮動(dòng)對(duì)象

right  :  清除右浮動(dòng)/不允許右邊有浮動(dòng)對(duì)象

both  :  清除兩端浮動(dòng)/不允許有浮動(dòng)對(duì)象

有一點(diǎn)是要記住的那就是

對(duì)于CSS的清除浮動(dòng)(clear)，一定要牢記：這個(gè)規(guī)則只能影響使用清除的元素本身，不能影響其他元素

到此，關(guān)于“CSS屬性組成及作用是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

網(wǎng)站欄目：CSS屬性組成及作用是什么
文章起源：http://jinyejixie.com/article24/pshgce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、動(dòng)態(tài)網(wǎng)站、企業(yè)建站、面包屑導(dǎo)航、域名注冊(cè)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(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)