CSS核心屬性

一、CSS屬性組成和作用

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

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

?

?

二、CSS核心屬性

1、文本大小：{font-size:12px/14px/16px;}
說明：

1）屬性值為數值型時，必須給屬性值加單位，屬性值為0時除外。
2）單位還可以是pt，9pt=12px;

3）為了減小系統間的字體顯示差異，IE Netscape Mozilla的瀏覽器制作商于1999年召開會議，共同確定16px/ppi為標準字體大小默認值,即1em.默認情況下，1em=16px,0.75em=12px;

?

4)使用絕對大小關鍵字
xx-small???=9px
x-small????=11px
small??????=13px
medium?????=16px
large??????=19px
x-large????=23px
xx-large???=27px

?

2、文本顏色：{color:顏色值;}

?

說明：

用十六進制表示顏色值：

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

顏色值的縮寫：

當表示三原色的三組數字同時相同時，可以縮寫為三位;

當用十六進制表示顏色值時，需要在顏色值前加“#”

?

3、文本字體：{font-family:"字體1","字體2";}

?

說明：
*當字體是中文字體時需加引號；
*當英文字體中有空格時需加引號如“Times New Roman”；

?

Windows中文版本操作系統下，中文默認字體為宋體或者新宋體，英文字體默認為Arial.

?

*文字屬性簡寫：font:12px/1.5em "宋體";

?

4、加粗：{font-weight:bolder/bold/normal/100-900;}

?

說明：

1）在css規范中把字體的粗細分為9個等級，分別從100-900，其中100對應最輕的字體變形，而900對應最重的字體變形。

100-500常規字體

600-900加粗字體

?

?

5、傾斜：{font-style:normal常規字體/italic/oblique傾斜;}

說明：

?1）italic和oblique都表示傾斜，不過oblique的幅度要大一點。但一般瀏覽器對它們的區分不是很明顯。

?

?

?

?

?

6、水平對齊方式{text-align:left/right/center/justify（兩端對齊中文不起作用）;}

?

?

?

7、垂直對齊方式{vertical-align:top/bottom/middle;}

?

?

?

?

?

?

?

8、行高{line-height:normal/數值;}

?

說明：

1）當單行文本的行高等于容器高時，可實現單行文本在容器中垂直方向居中對齊；

2)???當單行文本的行高小于容器高時，可實現單行文本在容器中垂直中齊以上任意位置的定位；

3)???當單行文本的行高大于容器高時，可實現單行文本在容器中垂直中齊以下任意位置的定位。（IE6及以下版本存在瀏覽器兼容問題）

?

?

9、浮動屬性：

語法：float:none/left/right;

?

?

?

?

?

10、列表的樣式

定義列表符號樣式：

*list-style-type:disc(實心圓)/circle（空心圓）/square(實心方塊?)none(去掉列表符號)；

*使用圖片作為列表符號：list-style-image:url(所使用圖片的路徑及全稱);

*定義列表符號位置：list-style-position:outside/inside;

?

?

list-style:none;去掉列表符號

?

?

?

?

?

11、文本修飾：text-decoration:none/underline/overline/line-through/blink.(高版本瀏覽器不支持blink屬性)

說明：

none:沒有修飾

underline:添加下劃線

overline:添加上劃線

line-through:添加刪除線

blink：閃爍

?

?

?

12、border:3px solid red;

??????邊框border:線型（solid/dashed/dotted/double）?? 粗細（數值+單位） 顏色;

????????右邊框border-right:線形（solid/dashed/dotted/double）???? 粗細（數值+單位）???????? 顏色;

????????左邊框 border-left:線形（solid/dashed/dotted/double）???? 粗細（數值+單位）???????? 顏色;

???????上邊框?border-top:線形（solid/dashed/dotted/double）???? 粗細（數值+單位）???????? 顏色;

???????下邊框 border-bottom:線形（solid/dashed/dotted/double）???? 粗細（數值+單位）???????? 顏色;

???????線型：solid:實線，dashed:虛線，dotted:點狀線，double:雙線，

?

?

13、首行縮進：{text-indent:value;}
說明：

1）text-indent可以取負值；

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

?

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

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

?

16、文本流控制{layout-flow:horizontal/vertical-ideographic;}
說明：

1）horizontal:自左向右
2）vertical-ideographic:自上而下

?

?

?

17、關于背景的屬性

1）背景顏色
語法：選擇符{}

?

2）背景圖片的設置

語法：background-image:url(背景圖片的路徑及全稱);

插入圖片：屬于網頁內容，也就是結構。

背景圖：屬于網頁的表現，背景圖上可以顯示文字、插入圖片、表格等。

?

?

3）背景圖片的顯示原則

????????1）容器尺寸等于圖片尺寸，背景圖片正好顯示在容器中;

????????2）容器尺寸大于圖片尺寸，背景圖片將默認平鋪，直至鋪滿元素；

????????3）容器尺寸小于圖片尺寸，只顯示元素范圍以內的背景圖。

?

?

?

?

*背景圖片平鋪屬性

語法：選擇符{background-repeat:no-repeat/repeat/repeat-x/repeat-y }

no-repeat:不平鋪

repeat：平鋪

repeat-x：橫向平鋪

repeat-y ：縱向平鋪

?

?

?

?

?

5）背景圖的固定
語法：選擇符{background-attachment:scroll(滾動)/fixed(固定);}

?

?

?

?

?

6）背景圖片的位置
語法：選擇符{background-position:left/center/right/數值?????top/center/bottom/數值;}

background-position:值1 ???值2;

水平方向上的對齊方式（left/center/right）或值????垂直方向上的對齊方式(top/center/bottom)或值

兩個值 ：第一個值表示水平位置的值，第二個值：表示垂直的位置。

當兩個值都是center的時候寫一個值就可以代表的是水平位置和垂直位置。

說明：向右方向，向下方向是負值

7）各屬性的縮寫
語法：選擇符{background：屬性值1???屬性值2???屬性值3;}

?

?

?

?

18）網頁上常用的圖片格式

1)jpg:有損壓縮格式，靠損失圖片本身的質量來減小圖片的體積，適用于顏色豐富的圖像;(像素點組成的，像素點越多會越清晰 )

2）gif：有損壓縮格式，靠損失圖片的色彩數量來減小圖片的體積，支持透明，支持動畫，適用于顏色數量較少的圖像;

3)png:有損壓縮格式，損失圖片的色彩數量來減小圖片的體積，支持透明，不支持動畫，是fireworks的 源文件格式，適用于顏色數量較少的圖像;

?

?

?

?

轉載于:https://www.cnblogs.com/mingjixiaohui/p/5196782.html

總結

以上是生活随笔為你收集整理的第三天 css核心属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。