Box Properties



為了準備微軟證照考試 70-480 Programming in HTML5 with JavaScript and CSS3，到處尋找相關考試資源。趁這個時候
，重新把CSS基礎打好。
在同事Alan介紹下MVA(Microsoft Virtual Academy)有許多學習資源，且完全免費。
Developing in HTML5 with JavaScript and CSS3 Jump Start 這篇課程相當不錯，內容基礎且詳盡。除了影片教學，還有範例與課後考試。

 下面是一些使用筆記：

 一、Selectors
  • type selectors
table { color:red }
ul { color:red }
  • .class selectors
.fancy { color:red }
div.fancy { color:red }
  • #id selectors
#myTable { color:red }
  • [attribute] selectors



1


2


3
上面為範例，下列是一般用法：
[data-author] { color:red }

[data-author=psmith] { color:red }

在任何位置都找到smith，如下圖：
[data-author$=smith] { color:red }

開頭為p的屬性，如下圖：
[data-author^=p] { color:red }

包含任何文字：
[data-author*=p] { color:red }

  • :pseudo-class and ::pseudo-element selecctors
第一個字母 與 第一行：
p::first-letter { color:red }


p::first-line{ color:red }

移動反白：
p:hover{ color:red }

全部移動反白：
*:hover{ color:red }

  • selector chains
id為Div1下的p屬性皆會變成紅色(底下每一層p都會變)：
#Div1 p { color:red }

id為Div1下child 的p屬性會變成紅色：
#Div1 > p { color:red }

sibling的屬性皆會變成紅色：
ul ~ div { color:red }

child：
li:first-child  { color:red }

li:nth-child(1)  { color:red }

二、color properties
各種顏色表示方法如下：

p { color:red; }
p { color:#fff; }
p { color:#ffffff; }
p { color:rgb(0,0,255); }
p { color:rgba(0,0,255,0.5); }  //0.5為透明度
p { color:hsl(0,50%,50%); } 
p { opacity:0.5; } //default:black

三、column
可調整大小比例與固定行數
  .csscolumn .columns {  columns: 400px;}
  .csscolumn .columns {  columns: 8;}

 四、box properties
分成border、margin、padding，最上方的圖片可以解釋其關係。
#myTable  { border-left:2px solid green; padding-left: 20px; margin:20px}

一般常用的selector、color、box等用法，在平常開發時已經知道如何使用。這次基礎學習讓自己對語法更熟悉，也更了解不常見的CSS與法，藉此提升開發效率。