HTMLCSS學(xué)習(xí)筆記(四)-- CSS屬性
CSS屬性
屬性：屬性是指定選擇符所具有的屬性，它是css的核心，css2共有150多個(gè)屬性
屬性值：屬性值包括法定屬性值及常見的數(shù)值加單位，如25px，或顏色值等。
文本屬性
1:文本大小 font-size
說明：
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
4)使用絕對(duì)大小關(guān)鍵字
xx-small =9px
x-small =11px
small =13px
medium =16px
large =19px
x-large =23px
xx-large =27px
2:文本顏色 color
說明：
用十六進(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
3:文本類型 font-family:字體1，字體2，字體3......
說明：
瀏覽器首先會(huì)尋找字體1、如存在就使用改字體來顯示內(nèi)容，如在字體1不存在的情況下，則會(huì)尋找字體2，如字體2也不存在，按字體3顯示內(nèi)容，如果字體3 也不存在;則按系統(tǒng)默認(rèn)字體顯示;
當(dāng)字體是中文字體時(shí)，需加雙引號(hào);
當(dāng)英文字體中有空格時(shí)，需加雙引號(hào)如(“Times New Roman”)
當(dāng)英文字體只有一個(gè)單詞組成是不加雙引號(hào);如：(Arial);
Windows中文版本操作系統(tǒng)下，中文默認(rèn)字體為宋體或者新宋體，英文字體默認(rèn)為Arial.
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)最重的字體變形，
100-400 一般 500常規(guī)字體 600-900加粗字體
5:font-style：italic/oblique/normal(取消傾斜，常規(guī)顯示);
說明：
italic和oblique都是向右傾斜的文字, 但區(qū)別在于Italic是指斜體字，而Oblique是傾斜的文字，對(duì)于沒有斜體的字體應(yīng)該使用Oblique屬性值來實(shí)現(xiàn)傾斜的文字效果.
7:文字行高 {line-height:normal/value;}
說明：
當(dāng)單行文本的行高等于容器高時(shí)，可實(shí)現(xiàn)單行文本在容器中垂直方向居中對(duì)齊;
當(dāng)單行文本的行高小于容器高時(shí)，可實(shí)現(xiàn)單行文本在容器中垂直中齊以上;
當(dāng)單行文本的行高大于容器高時(shí)，可實(shí)現(xiàn)單行文本在容器中垂直中齊以下(IE6及以下版本存在瀏覽器兼容問題)
*文字屬性簡(jiǎn)寫：font:12px/24px "宋體";
font屬性的簡(jiǎn)寫：字號(hào)，行高，字體
font-size:12px; line-height:24px; font-family:”宋體”;
font屬性的簡(jiǎn)寫：
說明: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ì)使用缺省值(默認(rèn)值)。
8：水平對(duì)齊方式
text-align:left/right/center/justify(兩端對(duì)齊中文不起作用)
9:文本修飾text-decoration:
說明：
none:沒有修飾
underline:添加下劃線
overline:添加上劃線
line-through:添加刪除線
10:首行縮進(jìn)
1)text-indent可以取負(fù)值;
2)text-indent屬性只對(duì)第一行起作用。
11:字間距、詞間距
字間距{letter-spacing:value;}控制英文字母或漢字的字距。
詞間距{word-spacing:value;}控制英文單詞詞距。
列表屬性
1、定義列表符號(hào)樣式
list-style-type：disc(實(shí)心圓)/circle(空心圓)/square(實(shí)心方塊)/none(去掉列表符號(hào));
list-style-type:none===list-style:none;
2、使用圖片作為列表符號(hào)
list-style-image：url(所使用圖片的路徑及全稱);
3、定義列表符號(hào)的位置
list-style-position:outside(外邊)/inside(里邊);
list-style:none;去掉列表符號(hào)
邊框?qū)傩?/strong>
border:邊框?qū)挾?邊框風(fēng)格 邊框顏色;
例如：border:5px solid #ff0000
邊框：border,網(wǎng)頁中很多修飾性線條都是由邊框來實(shí)現(xiàn)的。
邊框?qū)挾龋篵order-width:
邊框顏色：border-color:
邊框樣式：border-style:solid(實(shí)線)/dashed(虛線)dotted(點(diǎn)劃線)double(雙線)可單獨(dú)設(shè)置一方向邊框，
可單獨(dú)設(shè)置一方向邊框，
border-bottom:邊框?qū)挾?邊框風(fēng)格 邊框顏色;底邊框
border-left:邊框?qū)挾?邊框風(fēng)格 邊框顏色;左邊框
border-right:邊框?qū)挾?邊框風(fēng)格 邊框顏色;右邊框
border-top:邊框?qū)挾?邊框風(fēng)格 邊框顏色;上邊框
背景屬性
· 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-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è)值就可以代表的是水平位置和垂直位置 說明：向左方向，向上方向是負(fù)值 背景屬性的縮寫語法： background:屬性值1 屬性值2 屬性值3; 背景縮寫：background:url(背景圖片的路徑及全稱) no-repeat center top #f00; 網(wǎng)頁上常用的圖片格式(壓縮圖片) 1)jpg :有損壓縮格式，靠損失圖片本身的質(zhì)量來減小圖片的體積，適用于顏色豐富的圖像;(像素點(diǎn)組成的，像素點(diǎn)越多會(huì)越清晰 )如果網(wǎng)頁中 2)gif：有損壓縮格式，靠損失圖片的色彩數(shù)量來減小圖片的體積，支持透明，支持動(dòng)畫，適用于顏色數(shù)量較少的圖像; 3)png:有損壓縮格式，損失圖片的色彩數(shù)量來減小圖片的體積，支持透明，不支持動(dòng)畫，是fireworks的 源文件格式，適用于顏色數(shù)量較少的圖像;
· 5、背景圖的固定 性{{background-attachment:scroll(滾動(dòng))/fixed(固定);}fixed 固定，不隨內(nèi)容一塊滾動(dòng); scroll:隨內(nèi)容一塊滾動(dòng)。
浮動(dòng)
css屬性繼承
不可繼承的：display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align
所有元素可繼承：visibility和cursor。
內(nèi)聯(lián)元素可繼承：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform。
塊狀元素可繼承：text-indent和text-align
列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可繼承：border-collapse。
京公網(wǎng)安備 11010802030320號(hào)