[tag selector]
ex: p {color:#0000ff;}
[class selector]
ex: .myclass{color:#0000ff;}
[ID selector]
ex: #myclass{color:#0000ff;}
[descendant selector]
ex: .myclass p{color:#0000ff;}
[child selector]
ex: .myclass>p{color:#0000ff;}
difference between descendant and child
後代是指該層所衍生下來的所有都要符合，子代只要該層的下一層符合就可以了
combine usage
ex: #myclass .myclass{color:#0000ff;}
a.myclass{color:#0000ff;}
- 用p元素的color屬性來取待font標籤
- 用font-size:12px;來改變字體大小
- 字體大小的測量單位:pt、pc(等於12pt)用於列印樣式時，網站勿用。px(pixels)對印刷毫無用處。em如果在browser設定偏好會有效果，比如設font-size:1em;看到的結果會是設定的Medium的大小，如果設1.1em會比設定的還大10%，反之0.9em會小10%。
- 可用絕對關鍵字來指定字體大小(xx-small、x-small、small、medium、large、x-large、xx-large)
- 相對關鍵字(larger、smaller)，會以母元素的大小為基準。
- 特定字型顯示 font-family:Verdana , Geneva , Arial ,sans-serif;
- 把Link的底線移除 a:link,a:visited{ text-decoration:none;}
- 強調文字中的文字，在p元素中放入span標籤並為其加入類.highlight{background-color:#FFFFCC;}
- 增加文字行距p{line-height:2.0;}
- 文字左右分散 text-align : justify ，其它值right,left,center
- 水平分割線 hr {background-color: #ADD8E6;}
- 文字全改大小寫.transform{text-transform:uppercase;}其它值lowercase、none、capitalize(第一個字母改大寫)
- 移除項目前的符號 ul { list-style-type : none;}換成圖片ul{list-style-image:url(aaa.gif);}、移除縮排左邊界ul{list-style-type:none;padding-left:0;margin-left:0;}
- 把項目成水平排列ul.horiz li{display:inline;}
- CSS註解/*我是註解*/ 或
註解1
....
*/
- margin 屬性有四種組合值:
* 一個值 such as 10px , 去指定每個margin都是10
* 兩個值, such as 10px 5px, 去指定上/下 (first value) 和右/左(second value)
* 三個值, such as 10px 5px 2px, 去指定上(first value), 右/左 (second value) 和下 (third value)
* 四個值, such as 10px 5px 2px 1px ,去指定 上, 右, 下 ,左
