iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 30
0
Modern Web

挑戰 CSS 30 天系列 第 30

day30_review

  • 分享至 

  • twitterImage
  •  

在 day2 中有提到,我的發文內容可能比較偏向基本,因是第一次參賽,目的希望在挑戰連續發文的 30 天中,更重要的是能從中學習並累積自己的前端技術。終於來到最後一天了,這天想做一個複習。

day1_連接樣式:在網頁上連接的預設樣式為藍色,且有下劃線。若要改變此預設的樣式,可參考此連結。

day2_background:background-color 和 background-image 的背景屬性。

day3_border-style:可以用來指定邊框的樣式。

day4_border 其他樣式:包含 border, border-color, border-width, border-top-, border-left-, border-bottom-, border-right-。

day5_float&clear:float (浮動) 屬性可達成文字繞著一個圖案顯現;clear (清除) 屬性可用來抵銷 float 屬性的作用。

day6_color:可設定一個元素的顏色。

day7_cursor:可設定滑鼠游標圖案。

day8_direction:用來設定文字的方向。

day9_letter-spacing&line-height:letter-spacing 屬性可用來設定每一個字母之間的空間;line-height 屬性可用來設定每一行之間的空間。

day10_text-align&text-decoration:text-align 屬性是用來設定文字是如何對齊;text-decoration 屬性是用來設定文字上有什麼裝飾。

day11_text-indent&text-transform&word-spacing:text-indent 屬性是用來設定每一段的第一行前面要留多少空間。text-transform 屬性是用來控制大小寫是如何展現的。word-spacing 屬性是用來設定每個字與每個字之間的距離。

day12_font:有關字體的 CSS。

day13_template 參考:模板參考網站。

day14_list-style-type:用來設定在清單中,每一條之前的記號要用什麼。

day15_list-style-position:此屬性讓我們可以決定記號是否應該被視為是文字的一部份,並且由此而決定記號的位置。

day16_list-style-image:用來將某個圖案設定為記號。

day17_margin:邊界 (margin) 是在邊框之外,並且是用來設定各個元素之間的距離。

day18_padding:留白 (padding) 是在內容外,邊框內的部分。

day19_z-index&position&top&left:z-index 屬性是用來決定元素重疊的順序。換言之,當兩個元素有重疊的情況時,z-index 值將會決定哪一個元素在上面。z-index 值比較大個元素會被放在上面。position 屬性制定出要用哪一類的位置。每一個方向 (top, right, bottom, left) 的位置值可以是長度、百分比、或是 auto。

day20_table:製作表格。

day21_繼承:繼承 (inheritance) 的意思就是說子標籤的樣式會跟父標籤一樣,除非子標籤本身另有自訂的樣式。

day22_選擇器 (selector):Class 與 ID。

day23_div&span:介紹 div 與 span。

day24_vertical-align:可用來調整圖片與文字的對齊效果。

day25_css3 border:border-radius 屬性可為元素添加圓角邊框,以及 box-shadow 屬性可為元素添加陰影。

day26_css3 border-radius:可指定圓角邊框或橢圓邊框。

day27_css3 box-shadow:box-shadow 屬性適用於盒子陰影,也可用來創建卡片。

day28_Happy new year->過年去了......

day29_hover:鼠標移動到按鈕上後添加箭頭標記之動畫。

day30_review:複習。


上一篇
day29_hover
系列文
挑戰 CSS 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言