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所提供的參考也就是這裡