SublimeText3編輯器(二){LIVE_CODING:及時預覽編寫內容HTML+CSS3}

前一篇(SublimeText3編輯器(一){精簡強大的外掛管理})介紹過Sublime的外掛管理工具,但好用的外掛絕對不止這些,當然最重要的還是編寫完後要看到的效果,如果能夠及時預覽更新就太方便了,不用一直重新整理網頁,有雙螢幕的話也只需要開著另個視窗就可以知道現在寫的CODE有沒有問題;當然影響網頁視覺最主要的當然是HTML本體和CSS樣式表啦,所以這次會介紹兩個外掛LiveReload、LiveStyle來幫助我們加速開發!!

繼續閱讀 “SublimeText3編輯器(二){LIVE_CODING:及時預覽編寫內容HTML+CSS3}"

css padding (內距)、margin (外距)、border (邊框) 四邊向屬性值 (CSS padding, margin, border four direction values)

CSS需要寫四個邊向數位的屬性常用的有三個,padding (內距)、margin (外距)、border (邊框),寫四邊向數值的時候可以用不同的方式來寫,可以更快更好~

屬性加方向:

最簡單的寫法就是在這三個屬性的後面加上方向就可以,這是用在單純想指定某一邊向數值的時候。

padding-top: 5px; (上內距)

padding-bottom: 5px; (下內距)

padding-left: 5px; (左內距)

padding-right: 5px; (右內距)

 

margin-top: 5px; (上外距)

margin-bottom: 5px; (下外距)

margin-left: 5px; (左外距)

margin-right: 5px; (右外距)

 

border-top: 5px; (上邊框)

border-bottom: 5px; (下邊框)

border-left: 5px; (左邊框)

border-right: 5px; (右邊框)

繼續閱讀 “css padding (內距)、margin (外距)、border (邊框) 四邊向屬性值 (CSS padding, margin, border four direction values)"

CSS 選擇器、選取器(CSS Selector)

css的選取器越來越複雜,這篇來介紹一下各種選取器

  1. Class selectors(類別選擇器)
  2. ID selectors(ID選取器)
  3. Tag selectors(標籤選取器)
  4. Universal selector(通用選取器)
  5. Attribute selectors(屬性選取器)
  6. Descendant combinator(後代選取器)
  7. Child combinator(子選取器)
  8. Adjacent sibling combinator(同層相鄰選取器)
  9. General sibling combinator(同層全部選取器)
  10. Pseudo-classes(偽類別選取器)
  11. Pseudo-elements(偽元素選取器)
  12. Groups of selectors(群組選取器)

1~5是單一選取器,6~12是組合選取器。

繼續閱讀 “CSS 選擇器、選取器(CSS Selector)"