css常見屬性和屬性值

標籤：family   位置   order   之間   chm   normal   引用   置中   letter   

CSS常見屬性和屬性值

1. 字型屬性
   1. Font-family 字型族科  宋體|微軟雅黑
   2. Font-size  字型大小
   3. Font-style  字型樣式  normal|italic(傾斜)|oblique(斜體)

不是所有的字型都支援傾斜 如果沒有傾斜那麼你就必須使用斜體來代替傾斜

1. Font-weight 字型加粗  normal |bold(加粗)|lighter(變細)
2. Font-variant 字型變形   normal|small-caps

          Font:[字型風格] [字型變形] [字型加粗] <字型大小>[/行高] <字型族科>

注意:每個內容和內容之間要有空格

Url  ./  http://www. 

Src  引入 拿取過來內容

Href 引用 串連前往 a  link    

現在所有的命名 請按照下面我說的去命名

可以使用字母 數字 底線組成  但是不能以數字開頭

一、CSS常用屬性

1. 顏色屬性

Color

         2背景屬性

mso-para-margin-left:0.0000gd;text-indent:21.0000pt;mso-char-indent-count:0.0000;">Background-image: 背景圖片

Background-repeat: 背景重複

Repeat-x(x軸方向重複) | repeat-y(y軸方向重複) |no-repeat（不重複）

Background-attachment: 背景附件 scroll(預設值)  fixed（固定）

Background-position:背景位置

Left|center|right( 橫向)

Top|center|bottom(縱向)

像素

注意:background-position 兩個值之間需要使用空格隔開

Background:<背景顏色>|<背景圖片>|<背景重複>|<背景附件>|<背景位置>

每個屬性中間都要用空格隔開

    3邊框屬性

border-style 邊框樣式

Border-top-style

Border-left-style

Border-bottom-style

Border-right-style

值:

dotted 點線

Dashed 虛線

Solid   實線

Double 雙實線

Groove 槽狀線

Ridge   脊線

Inset  內嵌效果

Outset 外凸效果

Border-width 邊框寬度

單位使用像素

同上

Border-color  邊框顏色

同上

Border:邊框寬度 邊框樣式 邊框顏色;

     4文字屬性

Letter-spacing  字母間隔  值為長度  值可以是負值 可以支援中文

Word -spacing  詞間距   值為長度  值可以是負值 抓取詞邊界  可以支援中文但是 請加上詞邊界

Text-decoration 文本修飾

None(預設值) 通常我們使用這個屬性將a標籤的預設底線取消

Underline 定義文本下的一條線

Overline 定義文本上的一條線

Line-through  定義穿過文本中的一條線

Text-align 對齊

Left|center|right|justify(左右對齊)

Justify 將我們的文字貼近我們的邊框 將我們的空白留給中間

Text-indent  文本縮排  2em
line-height 設定行間距離(行高)   不允許出現負值

 作用:用來將文本置中顯示 一般都是和設定的高度相同 讓文字垂直置中顯示

 

  5. 滑鼠游標屬性

Cursor

Text      文本

Crosshair 十字架

Wait     等待

Help     協助

Pointer   小手

6.列表屬性

List-style-type  列表樣式類型

值：

Disc 實心點

Circle 圓圈

Square 小方塊

Decimal  數字

Lower-roman  小寫羅馬字

Upper-roman  大寫羅馬字

Lower-alpha   小寫字母

Upper-alpha   大寫字母

None 沒有標識

List-style-image  列表樣式圖片

url()

List-style-position 列表樣式位置

Inside 表示在li裡面

Outside 表示在li外面(預設值)

作用:就是讓你來判斷是否控製圖片被樣式表是否修改

三、無意義標籤

Div

塊級標籤，會自動換行(獨佔一行)

Span

行內標籤 內容顯示在一行內

區塊層級元素的特點：

1.總是獨自佔一行顯示

2.高度、行高和內邊距外邊距 都可以控制

3.寬度和瀏覽器寬度一樣 與內容無關

4.可以容納行內元素和其他塊元素

行內元素特點:

1.和其他標籤在同一行內顯示

2.高度 行高 內邊距 外邊距 部分可控

3.與內容有關 內容改變寬度改變

容納文本和其他行內元素

css常見屬性和屬性值