文本屬性
(1)文本大小?
{font-size:12px/14px/16px;}
默認(rèn)16px,最小12px?
還有em單位 em單位是相對與父元素字體大小進(jìn)行取值 1em=父元素文字大小
單位還可以是pt,9pt=12px;
(2)字體類型
{font-family:字體1,字體2,;}
說明:
*當(dāng)字體是中文字體時需加引號;”宋體”
*當(dāng)英文字體中有空格時需加引號: 如“Times? New? Roman”;
Windows中文版本操作系統(tǒng)下,中文默認(rèn)字體為宋體或者新宋體,英文字體默認(rèn)為Arial.
(3)字體加粗
{font-weight:bolder/bold/normal}
說明:
bolder(更粗的)/bold(加粗)/normal(常規(guī))
1)在css規(guī)范中把字體的粗細(xì)分為9個等級,分別從100-900,其中100對應(yīng)最輕的字體變形,而900對應(yīng)最重的字體變形。 100-500常規(guī)字體 600-900加粗字體
(4)字體傾斜
{ font-style:italic/oblique/normal;}
說明:
取值為:italic/oblique/normal italic和oblique都表示傾斜,不過oblique的幅度要大一點(diǎn)。但一般瀏覽器對它們的區(qū)分不是很明顯
(5)文本行高
{line-height:normal/數(shù)值;}
說明:
當(dāng)單行文本的行高等于容器高時,可實(shí)現(xiàn)單行文本在容器中垂直方向居中對齊;
當(dāng)單行文本的行高小于容器高時,可實(shí)現(xiàn)單行文本在容器中垂直中齊以上任意位置的定位;
當(dāng)單行文本的行高大于容器高時,可實(shí)現(xiàn)單行文本在容器中垂直中齊以下任意位置的定位。
(IE6及以下版本存在瀏覽器兼容問題)盡量不要讓行高大于高度
(6)文本屬性的復(fù)合寫法
font:font-style? ?font-weight? ?font-size / line-height? ?font-family
說明:
按以上順序;size和family固定不可和其他屬性位置互換; *文字字體大小、行高、類型常用的屬性寫法
(7)文本
{color:顏色值;}
1、用十六進(jìn)制表示顏色值: 16進(jìn)制顏色代碼指定顏色的組成方式:前兩位表示紅色,中間兩位表示綠色,最后兩位表示藍(lán)色。把三個數(shù)值依次并列起來 ,以#開頭 0? 1? 2? 3? 4? 5? 6? 7? 8? 9? A? B? C? D? E? F 顏色模式:光色模式 FF 00 00(紅 綠 藍(lán));? ? ? ? 寫法:#faf7fc;
R? ? G? B
2、RGB 例如:color:#F00;
3、 color:rgba(0,255,255,0.6 ) 透明度? alpha
(8)文本對齊
水平對齊方式{text-align:left/right/center/justify;} 兩端對齊
垂直對齊方式{vertical-align:top/bottom/middle;} 上 中 下; inline-block;
(9)文本修飾
text-decoration:none/underline/overline/line-through/blink
說明:
none:沒有修飾
underline:添加下劃線
overline:添加上劃線
line-through:添加刪除線
(10)首行縮進(jìn)
{text-indent:value;}
說明: text-indent可以取負(fù)值; text-indent屬性只對第一行起作用
(11)字間距,詞間距
{letter-spacing:value;}
說明:控制英文字母或漢字的字距
word-spacing:value;
說明:控制英文單詞詞距
列表屬性
(1)定義列表符號
{list-style-type: }
說明:取值: disc(實(shí)心圓) circle(空心圓) square(實(shí)心方塊) none(去掉列表符號);
(2)使用圖片作為列表符號
{list-style-image:url(圖像路徑); }
說明:url(所使用圖片的路徑及全稱)
(3)定義列表符號的位置
{list-style-position: ;}
說明:取值: outside(外邊) inside(里邊);
(4)列表屬性簡寫
{list-style: ; }
說明:
可簡寫直接設(shè)置列表屬性值; 常用屬性: list-style:none;去掉列表樣式;
背景屬性
(1)背景顏色
語法:選擇符{background-color:顏色值;} 簡寫:background:color值;
(2)背景圖片設(shè)置
語法:background-image:url(背景圖片的路徑及全稱);
說明:
網(wǎng)頁上有兩種圖片形式:插入圖片、背景圖; 插入圖片:屬于網(wǎng)頁內(nèi)容,也就是結(jié)構(gòu)。
背景圖:屬于網(wǎng)頁的表現(xiàn),背景圖上可以顯示文字、插入圖片、表格等。
背景圖片的顯示原則? ? ?
1)容器尺寸等于圖片尺寸,背景圖片正好顯示在容器中;? ? ?
2)容器尺寸大于圖片尺寸,背景圖片將默認(rèn)平鋪,直至鋪滿元素;? ? ?
3)容器尺寸小于圖片尺寸,只顯示元素范圍以內(nèi)的背景圖。? ? ?
4)加載背景圖必須有容器區(qū)域;
(3)背景圖片平鋪設(shè)置
語法:選擇符 {background-repeat:no-repeat/repeat/ repeat-x/repeat-y }
no-repeat:不平鋪
repeat:平鋪 (默認(rèn))
repeat-x:橫向平鋪
(4)背景圖片位置
語法:選擇符{background-position:水平方向?qū)傩灾? 垂直方向?qū)傩孕?}
水平方向值:left/center/right或數(shù)值
垂直方向值: top/center/bottom或數(shù)值
說明:
水平向右 垂直向下移動 是正數(shù)值
水平向左 垂直向上移動 是負(fù)數(shù)值
兩個值 :第一個值表示水平位置的值,? ? ? ? ? 第二個值表示垂直的位置。 *例如:當(dāng)兩個值都是center的時候?qū)懸粋€值就可以代表的是水平位置和垂直位置。
(5)背景圖的固定
語法:選擇符{background-attachment:scroll(滾動)/fixed(固定);}
說明:? ? fixed 固定,不隨內(nèi)容一塊滾動;? ? scroll:隨內(nèi)容一塊滾動
(6)背景屬性簡寫
語法:選擇符{background:屬性值1 屬性值2 屬性值3;}
背景縮寫: {background:#00ff00? url(背景圖片的路徑及全稱) no-repeat? center? top;}