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與法,藉此提升開發效率。