第3天css核心屬性

Day3：CSS屬性組成和作用 學(xué)習(xí)目標(biāo) 1、css屬性和屬性值的定義 2、css文本屬性 3、css列表屬性 4、css背景屬性 5、css邊框?qū)傩?6、css浮動屬性 一、css屬性和屬性值的定義

屬性：屬性是指定選擇符所具有的屬性，它是css的核心，css2共有150多個屬性 屬性值：屬性值包括法定屬性值及常見的數(shù)值加單位，如25px，或顏色值等。 二、CSS文本屬性

1、文本大?。簕font-size:value;} 說明： 1） 屬性值為數(shù)值型時，必須給屬性值加單位，屬性值為0時除外。 2）單位還可以是pt，9pt=12px; 3）為了減小系統(tǒng)間的字體顯示差異，IE Netscape Mozilla的瀏覽器制作商于1999年召開會議，共同確定16px/ppi為標(biāo)準(zhǔn)字體大小默認(rèn)值,即1em.默認(rèn)情況下，1em=16px,0.75em=12px; rem 4）使用絕對大小關(guān)鍵字 xx-small =9px x-small =11px small =13px medium =16px large =19px x-large =23px xx-large =27px 2、文本顏色：{color:顏色值;} 說明： 用十六進(jìn)制(是計算機中數(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ù)字同時相同時，可以縮寫為三位; 當(dāng)用十六進(jìn)制表示顏色值時，需要在顏色值前加“#”

fa 00 00

3、文本字體：{font-family:字體1，字體2，字體3；} 說明： 瀏覽器首先會尋找字體1、如存在就使用改字體來顯示內(nèi)容，如在字體1不存在的情況下，則會尋找字體2，如字體2也不存在，按字體3顯示內(nèi)容，如果字體3 也不存在；則按系統(tǒng)默認(rèn)字體顯示； 當(dāng)字體是中文字體時，需加雙引號； 當(dāng)英文字體中有空格時，需加雙引號如（“Times New Roman”） 當(dāng)英文字體只有一個單詞組成是不加雙引號；如：（Arial）； Windows中文版本操作系統(tǒng)下，中文默認(rèn)字體為宋體或者新宋體，英文字體默認(rèn)為Arial. 4、文字加粗font-weight:bolder(更粗的)/bold（加粗）/normal（常規(guī)）/100—900; 說明： 在css規(guī)范中，把字體的粗細(xì)分為9個等級，分別為100——900，其中100對應(yīng)最輕的字體變形，而900對應(yīng)最重的字體變形， 100-400 一般 500常規(guī)字體 600-900加粗字體 5、font-style：italic/oblique/normal（取消傾斜，常規(guī)顯示）; 說明： italic和oblique都是向右傾斜的文字, 但區(qū)別在于Italic是指斜體字，而Oblique是傾斜的文字，對于沒有斜體的字體應(yīng)該使用Oblique屬性值來實現(xiàn)傾斜的文字效果. 6、水平對齊方式{text-align:left/right/center/justify（兩端對齊中文不起作用）;} 7、文字行高 {line-height:normal/value;} 說明： 當(dāng)單行文本的行高等于容器高時，可實現(xiàn)單行文本在容器中垂直方向居中對齊； 當(dāng)單行文本的行高小于容器高時，可實現(xiàn)單行文本在容器中垂直中齊以上； 當(dāng)單行文本的行高大于容器高時，可實現(xiàn)單行文本在容器中垂直中齊以下（IE6及以下版本存在瀏覽器兼容問題） *文字屬性簡寫：font:12px/24px "宋體"; font屬性的簡寫：字號，行高，字體 font-size:12px; line-height:24px; font-family:”宋體”； font屬性的簡寫： 說明:font的屬性值應(yīng)按以下次序書寫(各個屬性之間用空格隔開) 順序: font-style font-weight font-size / line-height font-family 注意： (1)簡寫時 , font-size和line-height只能通過斜杠/組成一個值，不能分開寫。 (2) 順序不能改變 ,這種簡寫法只有在同時指定font-size和font-family屬性時才起作用,而且,你沒有設(shè)定font-weight , font-style , 他們會使用缺省值（默認(rèn)值）。 6、水平對齊方式{text-align:left/right/center/justify（兩端對齊中文不起作用）;} 7、文本修飾 text-decoration:none/underline/overline/line-through 說明： none:沒有修飾 underline:添加下劃線 overline:添加上劃線 line-through:添加刪除線 8、首行縮進(jìn)：{text-indent:value;} 說明： 1）text-indent可以取負(fù)值； 2）text-indent屬性只對第一行起作用。 9、字間距{letter-spacing:value;}控制英文字母或漢字的字距。 10、詞間距{word-spacing:value;}控制英文單詞詞距。 11、文本流控制{layout-flow:horizontal/vertical-ideographic;} 說明： 1）horizontal:自左向右 2）vertical-ideographic:自上而下 三、CSS列表屬性

1、定義列表符號樣式 list-style-type：disc(實心圓)/circle(空心圓)/square(實心方塊)/none(去掉列表符號)；list-style-type:none===list-style:none; 2、使用圖片作為列表符號 list-style-image：url(所使用圖片的路徑及全稱)； 3、定義列表符號的位置 list-style-position:outside(外邊)/inside(里邊)； list-style:none;去掉列表符號 四、邊框的屬性和屬性值

border:邊框?qū)挾?邊框風(fēng)格 邊框顏色; 例如：border:5px solid #ff0000 邊框：border,網(wǎng)頁中很多修飾性線條都是由邊框來實現(xiàn)的。 邊框?qū)挾龋篵order-width: 邊框顏色：border-color: 邊框樣式：border-style:solid(實線)/dashed(虛線)dotted(點劃線)double(雙線)可單獨設(shè)置一方向邊框， 可單獨設(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(背景圖片的路徑及全稱)； 背景圖片的顯示原則 1）容器尺寸等于圖片尺寸，背景圖片正好顯示在容器中 2）容器尺寸大于圖片尺寸，背景圖片將默認(rèn)平鋪，直至鋪滿元素； 3）容器尺寸小于圖片尺寸，只顯示元素范圍以內(nèi)的背景圖。 網(wǎng)頁上有兩種圖片形式：插入圖片、背景圖； 插入圖片：屬于網(wǎng)頁內(nèi)容，也就是結(jié)構(gòu)。 背景圖：屬于網(wǎng)頁的表現(xiàn)，背景圖上可以顯示文字、插入圖片、表格等。 3、背景圖片平鋪屬性{background-repeat:no-repeat/repeat/repeat-x/repeat-y } 4、背景圖的固定 性{{background-attachment:scroll(滾動)/fixed(固定);} fixed 固定，不隨內(nèi)容一塊滾動； scroll:隨內(nèi)容一塊滾動。 5、背景圖的位置 性{background-position:left/center/right/數(shù)值 top/center/bottom/數(shù)值;} 水平方向上的對齊方式（left/center/right）或值 垂直方向上的對齊方式(top/center/bottom)或值 background-position:值1 值2; 兩個值 ：第一個值表示水平位置的值，第二個值：表示垂直的位置。 當(dāng)兩個值都是center的時候?qū)懸粋€值就可以代表的是水平位置和垂直位置 說明：向左方向，向上方向是負(fù)值 背景屬性的縮寫語法： background:屬性值1 屬性值2 屬性值3； 背景縮寫：background:url（背景圖片的路徑及全稱） no-repeat center top #f00； 網(wǎng)頁上常用的圖片格式（壓縮圖片） 1)jpg :有損壓縮格式，靠損失圖片本身的質(zhì)量來減小圖片的體積，適用于顏色豐富的圖像;(像素點組成的，像素點越多會越清晰 )如果網(wǎng)頁中 2）gif：有損壓縮格式，靠損失圖片的色彩數(shù)量來減小圖片的體積，支持透明，支持動畫，適用于顏色數(shù)量較少的圖像; 3)png:有損壓縮格式，損失圖片的色彩數(shù)量來減小圖片的體積，支持透明，不支持動畫，是fireworks的 源文件格式，適用于顏色數(shù)量較少的圖像; 六、CSS浮動屬性

語法：float:none/left/right; float:定義網(wǎng)頁中其它文本如何環(huán)繞該元素顯示 浮動的目的：就是讓豎著的東西橫著來 有三個取值： left:元素活動浮動在文本左面 right:元素浮動在右面 none:默認(rèn)值，不浮動。 清除浮動clear:left/right/both 首先要知道，div是塊級元素，在頁面中獨占一行，自上而下排列，也就是傳說中的流 div1 div2 div3 div4 無論多么復(fù)雜的布局，其基本出發(fā)點均是：“如何在一行顯示多個div元素”。 顯然標(biāo)準(zhǔn)流已經(jīng)無法滿足需求，這就要用到浮動。 浮動可以理解為讓某個div元素脫離標(biāo)準(zhǔn)流，漂浮在標(biāo)準(zhǔn)流之上，和標(biāo)準(zhǔn)流不是一個層次。 頁面浮動多個DIV的規(guī)律： 假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標(biāo)準(zhǔn)流中的元素，那么A的相對垂直位置不會改變，也 就是說A的頂部總是和上一個元素的底部對齊。 div的順序是HTML代碼中div的順序決定的。 靠近頁面邊緣的一端是前，遠(yuǎn)離頁面邊緣的一端是后。 經(jīng)過上邊的學(xué)習(xí)，可以看出：元素浮動之前，也就是在標(biāo)準(zhǔn)流中，是豎向排列的，而浮動之后可以理解為橫向排列 清除浮動可以理解為打破橫向排列。 清除浮動的關(guān)鍵字是clear，語法： clear : none | left | right | both none：默認(rèn)值。允許兩邊都可以有浮動對象 left：不允許左邊有浮動對象 right : 不允許右邊有浮動對象 both : 不允許有浮動對象 有一點是要記住的那就是 對于CSS的清除浮動(clear)，一定要牢記：這個規(guī)則只能影響使用清除的元素本身，不能影響其他元素