Learning CSS

1. CSS的selector可参考http://www.w3.org/TR/CSS2/selector.html
2. font-family中可按顺序设置多种字体,以避免某些字体在客户端未安装,比如:
   p {font-family: "Gill Sans", Trebuchet, Calibri, sans-serif;} //font stack
3. 可以使用@font-face嵌入字体文件
4. 使用word-wrap: break-word;切断长字符串（单词）
5. 要隐藏一块区域可使用diplay:none, visibility:hidden，注意后者隐藏后但仍然会占据页面空间。
6. 字体大小可以使用：
   绝对度量单位：Inches (in)， Centimeters (cm)， Millimeters (mm)， Points (pt)， Picas (pc)
   相对度量单位：百分比（相对于默认字体大小的百分比）， Em， X-height (ex)， Pixels (px，像素大小在各客户端不一致)
   关键字：xx-small, x-small, small, medium, large, x-large
   由于浏览器的差异，字体显示效果各有不同，在选择何种字体大小单位时是一个可学习的小题目
7. 设置文本溢出时候以省略号显示可以用text-overflow:ellipsis表示，但同时要配合使用white-space: nowrap;overflow: hidden;

   p.style1
   {
       border: 1px solid black;
       width: 150px;
       height: 30px;
       padding: 12px;
       border: 1px solid black;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }

8. font属性由以下几个属性组成：

   • font-style
   • font-variant
   • font-weight
   • font-size/line-height
   • font-family
   前3个属性的顺序可以任意写，后两个的顺序则按上述规定写

9. 对于HTML中的Box-Items，从外到底依次是margin, border, padding,内容。更多参考http://www.w3.org/TR/CSS2/box.html
10. background-repeat: repeat-x;设置图片在X轴即水平方向上重复。
11. 可用blockquote标签设置引用效果，该标签下应该是<p><div>等block element，不直接包含文本。
12. 默认div, p等block elment都是一行一行的排列，在使用div布局时若要想设置左右两个区域，或者左右两块文本，可使用float:left方式，设置其中一块漂浮在左边。
13. text-indent可设置第一行的缩进大小，若该值为负可产生倒挂效果。若使用该属性的块在屏幕的左边，这时候用负值会让第一行的前面看不见，安全的方法是同时设置margin-left值。
14. 使用pseudo-element  :first-line设置第一行的样式

    p:first-line {
    font-weight: bold;
    }

15. text-shadow: yellow .15em .15em .15em;可以设置文本背景颜色，后面四个值是背景色与文本行的偏离距离等参数。
16. letter-spacing word-spacing line-height可设置字符、单词以及行间距。
17. CSS3的border-radius可设置Box-Items中边框拐角半径大小。
18. 设置背景图片：
    body {
    background-image: url(bkgd.jpg);
    background-repeat: no-repeat;
    }
19. border-image可为边框设置背景色。
20. 可以通过以下方法设置第二副图片旋转270度的效果,注意selector img+img 表示中+兄弟关系,此外不同浏览器平台的属性值有可能不一样,下面这么写可支持Safari, Firefox and Internet Explorer

img+img {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

21. 控制浏览器滚动条的样式

body,html {
scrollbar-face-color: #99ccff;
scrollbar-shadow-color: #ccccff;
scrollbar-highlight-color: #ccccff;
scrollbar-3dlight-color: #99ccff;
scrollbar-darkshadow-color: #ccccff;
scrollbar-track-color: #ccccff;
scrollbar-arrow-color: #000033;
}

22. 可以用下述方法自定义列表前面的符号：

ul {list-style: none;margin: 0;padding: 0 0 0 1em;text-indent: −1em;} /*首先在这里设置list-style none清除默认列表符号*/
li {width: 33%;padding: 0;margin: 0 0 0.25em 0;}
li:before {content: "\00BB \0020";}   /*设置了每个列表项前面的内容*/

23. 设置图片为列表符号：

li {
list-style-type: disc;
list-style-image: url(bullet.gif);
}

24. clear : none | left |right | both 参数：none : 　允许两边都可以有浮动对象 both : 　不允许有浮动对象 left : 　不允许左边有浮动对象 right : 　不允许右边有浮动对象