CSS 初識

CSS樣式表 初識
1.CSS的作用
讓結構和樣式進行分開,提升效率;


2.css屬性詳解
font-family 設置字體
例如:
font-family:<font1>,<font2>...<fontn> 瀏覽器會依次查詢設置的字體,如果都沒有,則使用默認的字體.


font-style 字體風格
例如:
font-style:normal|italic|oblique 分別是:默認,斜體,傾斜顯示


font-variant 字體變形
例如:
font-variant:normal|small_caps 分別是:默認,小型大寫字母


font-weight 字體加粗
例如:
font-weight:normal|bold|bolder|lighter|100|200 分別是:默認爲7,約爲400;粗體,約爲700;粗體再加粗,約爲900;比默認的還小;數字越小,字體越細


font-size 字號的控制
例如:
font-size:35px;//px是瀏覽器通用的.還有其他的單位.pt...


text-transform 文字的更改
例如:
text-transform:uppercase|lowercase|capitalize|none 分別是:大寫,小寫,首字母大寫,正常顯示


text-decoration 文字修飾
例如:
text-decoration:underline|overline|line-through|blink|none 分別是:下劃線,上劃線,刪除線,文字閃爍,無上述效果,正常顯示;


font 字體屬性
例如:
font:font-family|font-style|font-variant|font-weight|font-size 


word-spacing/letter-spacing  設置字間距以及字母間距(單詞,字母)


line-height 設置行距


text-align/vertical-align  文字對齊
例如:
text-align:left|right|center|justify
vertical-align:top|bottom|text_bottom|baseline|middle|sub|supper


text-indent 首行縮進
例如:
text-indent:數字|百分比 


color 顏色
例如:
color:red;


background-color 背景顏色
例如:
background-color:red;


background-image 背景圖像屬性
例如:
background-image:<url>|none;


background-repeat  背景圖片重複屬性
例如:
background-repeat:repeat|repeat-x|repeat-y|no-repeat


background-attachment 固定背景圖片屬性
例如:
background-attachment:scroll|fixed 
表示:背景圖片是隨內容滾動的還是固定的.


background-position 背景圖片的位置
例如:
background-position:百分比|長度|關鍵字
background-positon:X% y%|x y|


background  背景
例如:
background:上述背景的屬性.


標籤<a> 對應的anchor的語法說明:
a:link 尚未鏈接過的超鏈接文字的樣式
a:sisited 已經鏈接過的超鏈接的文字
a:active 鼠標單擊超鏈接後,鏈接文字的顯示樣式
a:hover 鼠標拖動到超鏈接文字上時,超鏈接顯示的文字效果


cursor  設置光標的屬性


margin,border padding來控制段落.圖片和表格等對象的樣式
例如:
margin-(top,right,bottom,left):長度|百分比|auto


border-width 是指邊框的寬度
例如:
border-width:thin|medium|thick|長度


border-style 設置邊框的樣式
例如:
border-style:none|solid|double|dotted|dashed|groove|ridge|inset|outset  分別是:實線,雙直線,小點虛線,大點虛線,3D凹線,


padding-(top,right,left,bottom) 設置內邊界
例如:
padding-(top,right,left,bottom):長度|百分比