CSS高手秘笈

 

1. 如何写CSS友好的HTML.
大家知道要是自己的页面兼容不同厂商，不同版本的浏览器简直就是一场噩梦。一方面是因为不同浏览器的差异性，还有更重要的是我们自己写

的HTML不规范。我觉得每个HTMl标签都有它的特定的用途，有它的书写规范，我们必须遵守这些规范，不能舍近求远，不用废弃的标签和属性，

就可以减少浏览器不兼容的问题。以下是我们应该注意的几点.
    1). 一个页面只用一个h1.
    2). 重要性不同的内容要用不同级别的header (h1, h2, h3).
    3). 段落标签p用于整段文本。
    4). 无序列表ul一般用于几个相关的item, 比如导航条，子标题，或帮助条目。
    5). 有序列表ol一般用于一个用于表示步骤，有序列表等。
    6). 定义一连串术语(term)使用dl(definition list), dt(definition term)和dd(definition description).
    7). 要使用一段引用的文本的使用blockquote(多行)或q(单行)
    8). 使用cite来引用书名，报纸头条，网站. address用来显示本页作者的联系信息，或copyright.
    9). 尽量不要为标签添加控制显示的属性。
    10). 如果找不到符合需要的标签才考虑用div和span.
    11). 一定要使标签结束，包括br, img.
    12). 一定要有Doctype. Doctype在xhtml中是必须的，在html中声明doctype也是一种好的习惯，因为它会影响页面在浏览器中的显示，浏览器会根据不同的doctype而使用的不同的rule来解释执行页面元素。不声明doctype还可能会导致不同浏览器显示存在差异.

 

2. CSS基础

    1). 选择内嵌CSS样式还是使用外部CSS文件：如果一个样式在多个页面用到，那建议写到一个独立的CSS文件中，因为这样缩短了浏览器的加载时间，修改也更方便。

    2). 绝大部分HTML元素都有它特定的用途，但DIV和span是通用的元素，用来组织和管理一组元素或相识内容的。

    3). 各种Selector：

        ID Selector 是用来修饰某个页面中特定的元素的。

        Class Selector 是用来修饰页面中多个元素的。

        Inline Style：inline的方式局限性比较大，不能重用，inline style会使页面大小变大，导致页面加载时间变长，不推荐使用。

    4). Pseudo-class 和Pseudo-Element: 常见用法有a:link, a:visited, a:hover, a:active, :before, :after, :first-child, :focus.

    5). Child selector ">" (e.g: body > h2 {color:red;}，只对body的“儿子”并且是h2的元素起作用) 与 descendent selector (e.g: body h2{color:red;}，对body的“子孙（包括儿子和孙子等）)”起作用)的区别。

    6). Adjacent siblings 有时候我们需要对某个元素的兄弟元素应用样式表，就会用到比如：h2+p {color:red;}, 此时这个样式就会应用到紧接h2的p上面。

    7). Attribute selector:应用样式表到具有个属性的元素，比如：input[type="text"]{...}, a[href=www.baidu.com]{...}

    8). 有时候会有多个同名的样式应用与同一个元素上面，那么谁的优先级高，是根据他们的specificity的分数来判定的，分数高优先级就高，具体的计算规则是：

        a. Tag selector --- 1分 （注：包括:first-line）

        b. Class selector --- 10分 (注：包括:link等)

        c. ID selector --- 100分

        d. Inline style --- 1000分

        比如：

        p.byline{...} --- (specificity=1+10=11)

        .byline #banner {...} --- (specificity=10+100=110)

        a:link {...} --- (specificity=1+10=11)

        注： 如果分数相同，那么最后一个应用的样式获胜（优先级高），如果是两个样式都位于外部文件中，那么最后加载进来的文件中的样式获胜，所以好的习惯是把一些全局样式文件先加载进来，然后再就是特定的样式文件, "!important"使样式的优先级变为最高而无视分数限制，不建议使用。

 

3. 格式化文本

    1). 有时候各个机器支持的字体会有不同，可以同时声明多个字体，比如: {font-family:Arial, Helvetica, sans-serif;}, 按顺序，当前面的不支持的时候，浏览器会自动应用后面的字体。

    2). 颜色的多种声明方式：color:red/#3E8988/rgb(100%,100%,100%)/rgb(255,255,255)

    3). 字体大小, font-size:keywords/百分比/pixels/em, 使用pixels指定的是绝对的大小，不推荐使用，因为使用浏览器的调整字体大小的功能也不能使字体大小改变，此时要用em.

    4). 很少使用但有必要知道的：font-variant:small-caps;

    5). line-height的值是百分比时，是相对与fong-size讲的。

    6). text-indent的值是百分比时，是相对与整个元素的width而言的。

 

4. Box Model: Margin, Padding 和Border

    1). 规则1：当两个垂直的margin相遇时，小的margin将失效。

    2). 可以使margin等于负值来达到移动元素的效果。

    3). 给Inline元素的垂直方向的margin和padding赋值会失效。

    4). 通常说的width和height是指元素实际内容的宽度,不包括padding，border和margin. 那么元素实际站页面的大小将等与width/height + padding + border + margin. (IE6除外)

 

5. 表格

    1). 级细表格边框用: table{border-collapse:collapse;}

    2). col和colgroup用于应用一列或多列的样式。

 

6. 构建基于float的布局

    1). float:left/right通常配合margin:left/right使用。

    2). float的元素位于float元素内部得到理想的布局。

 

7. 关于position
    1). 如果一个position:relative的元素A位于一个relative:absolute/fixed的元素B内部，那表示A的top/left值是相对于B的位置而言的。如果元素一个position:relative的元素A位于一个relative:static的元素内部，那对于A来说表示的意思是"relative to me", 即A的子元素B如果是relative:absolute的话，B的top/left值是相对于A的。---好像还是没说清楚:(

 

8. 为打印的页面创建CSS。

    1). 为link标签添加media="print"，那么所加载的css文件将应用到打印的页面上。

    2). 使用@media print{...}内嵌打印页面的css样式。

    3). css分页属性：page_break_before和page_break_after.

 

9. 使用CSS的良好习惯

    1). 为CSS样式添加注释，比如背景信息。

    2). 根据样式的目标来命名，而不是UI特征。

    3). 不要根据位置来命名。

    4). 避免使用无意义的比如s1, s2, s3这样的名字。

    5). 如果多个class有重叠的样式定义，要把公共部分提取出来放到一个新的class中，可以避免重复定义同样的样式，以便以后重用。

    6). 为body标签添加id或class以便可以为特定的页面定义特殊的样式。

    7). IE hacks

        a. *html

        b. <!--[if IE]> 或 <!--[if lte IE 6]>HTML, CSS等<![endif]-->

 

 

----------------------------------------------------------------完---------------------------------------------------------------------------