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)"

CSS ol/ul li 遞減 (css ol/ul li reversed)

最近在做網頁時突然需要遞減排序編號的功能,在html5的架構下<ol>可以直接加reversed屬性,但如果是用<ul>標籤的話,以下也提供一個解決方案。

css方法

html5方法