Working Part CSS (10)

學習主軸 2. w3school - CSS undone

do all exercises

• CSS 註解 同 C 語言, // , /* */

• Colors

• Backgrounds
  background-color,
  background-image: url(""),
  background-repeat: repeat-x, repeat-y, no-repeat
background-position: right top
background-attachment: fixed
  簡化
  background:#fff url("") no-repeat right top

• Borders
  border:size style color
border-radius: % or px

• Margins
  margin: auto # 置中
  Margin Collapse # 只有在上下才存在的問題，上下兩個的 Margin 取最大值顯示。
  margin: inherit # 繼承上層的設定值

• Padding
  Padding # 會額外增加於 width 之外。
  box-sizing: border-box # 或者使用這個指令，則由 width 控制寬度，多的內容會自動換行。

• Height, Width
  pixel px 控制
  百分比 % 控制 # 畫面寬度或高度的百分比

  max-width: # 與 width 不同，max-width 在顯示長度小於設定時，會自動縮小 width 。

• Box Model
  margin, border, padding, content.

• Outline
  類似於 border 設至於 border 之外，作為輪廓或高亮使用

• Text
  text-align: center, left, right, justify # justify 每行字都拉到同寬，報紙或雜誌的排版。
  text-decoration: none, overline, line-through, underline
text-transform: uppercase, lowercase, capitalize
text-indent: px # 段落首行內縮
  letter-spacing:
line-height:
word-spacing:
text-shadow:

• Font
  font-family: # 字型
  font-size: px, em, % # 大小
  font-style: normal, italic # 斜體與否
  font-weight: normal, bold # 粗體與否
  font-variant: small-caps # 字型變化

• Icons
  有很多內建的小圖示可以使用，搜尋 CSS Icons

• link 裝飾 超連結
  color, background-color, padding, text-decoration
以連結的狀態區分
a:link # 一般狀態, 未拜訪過的
  a:visited # 拜訪過的
  a:active # 滑鼠點擊超連結時
  a:hover # 滑鼠在超連結上時

• list ul, ol, li
  list-style-type: circle, square, upper-roman, lower-alpha
list-style-image: url(" ") # 利用圖片作為標籤
  list-style-position: inside, outside # 顯示位置
  可以調整 padding, margin, list-style-type
list-style: image type position # 簡寫

• table table, th, tr, td
  border: # 設定邊框
  border-collapse: collapse # 自動結合邊界
  width, height # 設定寬高
  text-align, vertical-align # 設定對齊
  padding: # 設定填充區
  tr:hover # 指定設定於被滑鼠移動到的列 :hover
tr:nth-child(even, odd) # 藉由 :nth-child() 指定基數或偶數列的裝飾

  當欄位過長於顯示寬度時，讓表格擁有拖拉列。

  <div style="overflow-x: auto;">
             <table>
             </table>
          </div>
          

<br / >

• Display & Visibility
  display: none # Remove 直接移除，導致相鄰的物件移位。
  display: block # 顯示, 把不換行的物件變成換行。
  display: inline # 把換行的物件變成不換行。
  display: inline-block; # 變成不換行並且顯示空間。
  visibility: hidden # 隱藏，但是位置還在。

• position
  先指定類型後才指定位置
  position: static; # default
  position: relative; # 從 default 的位置去移動
  position: fixed; # 固定於畫面的指定位置，就算捲動畫面也不會移動。
  position: sticky; # 一開始類似 relative 指定位置，捲動畫面後如同 fixed 被黏住畫面上。
  position: absolute;# 絕對於上層結構的位置。即把上層結構當作畫面去移動。

  移動明確位置
  top, bottom, left, right px;

  z-index: -1; # 移動到後方不覆蓋。

• Overflow
  捲軸設定
  overflow: visible # default
  overflow: hidden # 看不到也沒有捲軸
  overflow: scroll # 固定加上捲軸
  overflow: auto # 只有在需要的時候，才會增加捲軸。
  overflow-x: # 只增加水平捲軸
  overflow-y: # 只增加垂直捲軸

• Float & Clear
  物件在容器中的位置設定
  float: left
float: right
float: none # 預設
  float: inherit
  設置空間不允許的 float 位置
  clear: none # 預設
  clear: left
clear: right
clear: both
clear: inherit

• 藉由
  float,
  padding,
  margin,
  position,
  text-align,
  line-height
  排版物件想要的位置

• Selector Combinators
  空白 # 所有的後代 ex: div p
> # 連接的下一層 ex: div > p
+ # 馬上相連的一個 ex: div + p
~ # 之後所有的 ex: div ~ p

• Pseudo-classes
  選擇器加上特殊的狀態 selector:pseudo-classes {}
  例如 :hover
  可以藉由 :hover 與 display:none 製作出移動顯示的功能。

• Pseudo-elements
  用來指定選擇器中特定的 部份， selector::pseudo-elements {}
  使用 :: 作為與 Pseudo-classes 的區分。
  ::first-line # 第一行
  ::first-letter # 第一個字母
  ::selection # 被選取時，可單獨使用
  ::before { content: } # 物件之後
  ::after { content: } # 物件之前

• opacity
  不透明度設定 1.0 ~ 0.0, 1 不透明, 0 完全透明

• navigation bar
  藉由 超連結的 list 裝飾而成

學習主軸 3. 書: CSS 重構

Book: CSS 重構, Steve Lindstrom

第一章 重構與架構

好架構：

• 可預期性
• 重用性
• 擴充性
• 維護性

最佳實務: 新技術帶來的新方法取代舊方法。

重構的時機與重構的內容

進行的流程：

1. 撰寫程式碼
2. 撰寫測試
3. 重構
4. 執行測試

第二章 瞭解串接

串接 (cascade)

特定度
選擇器的優先順序

第三章 編寫較佳的 CSS

第四章 為不同類型的樣式分類

第五章 測試

第六章 樣式碼置放與重構策略

note

What made this design stand out to you?
What do you like best about this design?
What is one thing you don’t like about this design?