WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

1-6. CSS {樣式} 屬性有哪些？

CSS 樣式屬性有很多，依以下分類，先介紹常用的，大致認識一下屬性的用意，接下來的練習會陸續運用到。

background 背景類屬性

屬性 說明 CSS3 參考
background 背景類屬性合併的寫法，但CSS3新屬性部份不能合併。  英文 ／ 簡中
background-color 背景顏色。  英文 ／ 簡中
background-image 設計背景影像。  英文 ／ 簡中
background-repeat 設計背景影像的重複方式，預設是完全重複。  英文 ／ 簡中
background-position 設計背景影像的定位方式，預設是左上角。  英文 ／ 簡中
background-attachment 設計背景影像是否與頁面同時移動，預設是 scroll 會移動，可以設定 fixed 則固定不移動。  英文 ／ 簡中
background-size 設計背景影像的寬高尺寸。V 英文 ／ 簡中

寬高尺寸類屬性

屬性 說明 CSS3 參考
width 設定框架的固定寬度。  英文 ／ 簡中
max-width 設定框架的最大寬度。  英文 ／ 簡中
min-width 設定框架的最小寬度。  英文 ／ 簡中
height 設定框架的固定高度。  英文 ／ 簡中
max-height 設定框架的最大高度。  英文 ／ 簡中
min-height 設定框架的最小高度。  英文 ／ 簡中

Padding 內邊距類屬性

屬性 說明 CSS3 參考
padding 設定框架內部留白的四周邊界。  英文 ／ 簡中
padding-top 設定框架內部上方留白的邊界。  英文 ／ 簡中
padding-right 設定框架內部右側留白的邊界。  英文 ／ 簡中
padding-bottom 設定框架內部下方留白的邊界。  英文 ／ 簡中
padding-left 設定框架內部左側留白的邊界。  英文 ／ 簡中

margin 外邊距類屬性

屬性 說明 CSS3 參考
margin 設定框架外部留白的四周邊距。  英文 ／ 簡中
margin-top 設定框架外部上方留白的邊距。  英文 ／ 簡中
margin-right 設定框架外部右側留白的邊距。  英文 ／ 簡中
margin-bottom 設定框架外部下方留白的邊距。  英文 ／ 簡中
margin-left 設定框架外部左側留白的邊距。  英文 ／ 簡中

float 浮動類屬性

屬性 說明 CSS3 參考
float 定義框架的浮動排版。  英文 ／ 簡中
clear 定義結束以上元素的浮動排版。  英文 ／ 簡中
overflow (1) 設定框架內容超出框架的部份該如何表現，有 visible、hidden、scroll、auto…。
(2) 如果框架沒有設定固定高度，並且內容的子元素為浮動排版，那麼框架的高度會包含所有子元素。		  英文 ／ 簡中
overflow-x 設定框架內容水平範圍超出框架的部份該如何表現。V 英文 ／ 簡中
overflow-y 設定框架內容垂直範圍超出框架的部份該如何表現。V 英文 ／ 簡中

position 定位類屬性

屬性 說明 CSS3 參考
position 設定框架的定位模式。  英文 ／ 簡中
top 框架有定位能力時設定上方與父層的距離。  英文 ／ 簡中
right 框架有定位能力時設定右側與父層的距離。  英文 ／ 簡中
bottom 框架有定位能力時設定下方與父層的距離。  英文 ／ 簡中
left 框架有定位能力時設定左側與父層的距離。  英文 ／ 簡中
z-index 框架有定位能力時設定重疊前後的層級。  英文 ／ 簡中

border 邊框類屬性

屬性 說明 CSS3 參考
border 框架邊框的設計，同時設計邊框的四周，設定寬度、樣式、顏色。  英文 ／ 簡中
border-width 設定邊框的寬度 (也就是粗細)。  英文 ／ 簡中
border-style 設定邊框的樣式。  英文 ／ 簡中
border-color 設定邊框的顏色。  英文 ／ 簡中
border-left 設計左側的邊框。  英文 ／ 簡中
border-right 設計右側的邊框。  英文 ／ 簡中
border-top 設計上方的邊框。  英文 ／ 簡中
border-bottom 設計下方的邊框。  英文 ／ 簡中
border-radius 設計框架四周圓角。也可以分別使用 border-top-left-radius 設定左上角圓角，border-top-right-radius 設定右上角圓角，border-bottom-left-radius 設定左下角圓角，border-bottom-right-radius 設定右下角圓角。V 英文 ／ 簡中
box-shadow 設計框架的陰影。V 英文 ／ 簡中

table 表格類屬性

屬性 說明 CSS3 參考
border-collapse 設定表格中儲存格相鄰的框線合併。  英文 ／ 簡中
border-spacing 設定表格中儲存格之間的間距。  英文 ／ 簡中
caption-side 設定表格標題的位置。  英文 ／ 簡中
empty-cells 隱藏表格中空儲存格的邊框和背景。  英文 ／ 簡中
table-layout 設定表格的佈局算法。  英文 ／ 簡中

相關內容文字類旳屬性

屬性 說明 CSS3 參考
color 設定文字的顏色。  英文 ／ 簡中
font 設定字體的各種屬性，包含 font-style, font-variant, font-weight, font-size/line-height, and the font-family。  英文 ／ 簡中
font-family 設定文字字體。  英文 ／ 簡中
font-size 設定文字大小。  英文 ／ 簡中
font-weight 設定字體粗細。  英文 ／ 簡中
font-style 設定字體樣式是否為斜體。  英文 ／ 簡中
letter-spacing 設定文字字元間距。  英文 ／ 簡中
line-height 設定文字行高。  英文 ／ 簡中
text-align 設定文字水平對齊模式，有靠左、靠右、置中、靠左齊行。  英文 ／ 簡中
text-decoration 設定文字的裝飾線條，有上線、下線、中間刪除線。  英文 ／ 簡中
text-indent 設定段落中的首行縮排。  英文 ／ 簡中
vertical-align 設定行中元素與左右物件(文字、影像…) 垂直對齊的方式。  英文 ／ 簡中
white-space 設定文字過多超過行寬時，文字之間遇空白是否會換行。  英文 ／ 簡中
text-overflow 設定文字超行寬的部份以何方式呈現。V 英文 ／ 簡中
text-shadow 設定文字的陰影。V 英文 ／ 簡中
word-break 設定文字換行的規則。允許在單詞內換行或是只能在半形空格或連字符處換行。V 英文 ／ 簡中
word-wrap 設定文字換行的規則。允許在長單詞或URL地址內部進行換行。V 英文 ／ 簡中

list 清單類屬性

屬性 說明 CSS3 參考
list-style 設定 <ul> <ol> <li> 的樣式。含 list-style-type、list-style-image、list-style-position。  英文 ／ 簡中
list-style-type 設定清單前方顯示的符號。  英文 ／ 簡中
list-style-image 設定清單前方顯示的影像。  英文 ／ 簡中
list-style-position 設定清單前方符號顯示縮排或凸排。  英文 ／ 簡中

flex 彈性框類的屬性

屬性 說明 CSS3 參考
flex-direction 設定 display: flex 之後，flex-direction 決定子元素的排版方向。V 英文 ／ 簡中
justify-content 設定 Flex Box 中子元素的水平對齊方式。V 英文 ／ 簡中
align-items 設定 Flex Box 中子元素依文字的垂直對齊方式。V 英文 ／ 簡中
align-content 設定 Flex Box 中子元素依框架的垂直對齊方式。V 英文 ／ 簡中
flex-wrap 設定 Flex Box 中的子元素是否允許換行。V 英文 ／ 簡中

transform 變形類屬性

屬性 說明 CSS3 參考
transform 設定物件的變形，包含 scale縮放、rotate旋轉、skew頃斜、translate偏移。V 英文 ／ 簡中
transform-origin 設定物件的變形時定位不動的位置。V 英文 ／ 簡中

transition 轉場過程屬性

屬性 說明 CSS3 參考
transition 設定物件轉場過程，包含 transition-property、transition-duration、transition-timing-function、transition-delay … 的合併寫法。V 英文 ／ 簡中
transition-property 設定物件轉場過程變化的屬性。V 英文 ／ 簡中
transition-duration 設定物件轉場過程變化的時間。V 英文 ／ 簡中
transition-delay 設定物件轉場過程變化的延遲時間。V 英文 ／ 簡中
transition-timing-function 設定物件轉場過程變化的加減速特效函式。V 英文 ／ 簡中

animation 動畫類屬性

屬性 說明 CSS3 參考
@keyframes 定義一個動畫，@keyframes 定義的動畫名稱用來被 animation-name 所使用。V 英文 ／ 簡中
animation 設定物件的動畫效果，包含 animation-name、animation-duration、animation-delay、animation-iteration-count、animation-timing-function … 的合併寫法。V 英文 ／ 簡中
animation-name 設定物件動畫效果時配合的 @keyframes 名稱。V 英文 ／ 簡中
animation-duration 設定物件的動畫時間。V 英文 ／ 簡中
animation-delay 設定物件動畫的延遲時間。V 英文 ／ 簡中
animation-iteration-count 設定物件動畫的重覆次數。V 英文 ／ 簡中
animation-timing-function 設定物件動畫的加減速特效函式。V 英文 ／ 簡中

還有哪些 CSS 設定屬性呢？(想要更詳細了解，請看看以下連結的介紹)

【CSS 屬性參考列表-英文版】

【CSS 屬性引導學習-英文版】

【CSS 屬性分類參考列表-簡中版】

【CSS 屬性引導學習-簡中版】

還有哪些 CSS 規則名稱(選取器)呢？

【CSS規則名稱(選取器)參考列表---英文版】

【CSS規則名稱(選取器)參考列表---簡中版】

 

這一類整理性的教學網站還有很多，還可以看看【W3school】特色簡明扼要

另外也可以看看Mozilla提供的說明詳細的參考文件【MDN Reference】VScode所提供的參考也就是這裡

 

 

go TOP