精通CSS

HTML原本是一种简单易懂的标识语言，但由于可视化工具的介入，有时候HTML代码变得非常复杂，以致于无法手工修改而不会破坏代码。

 

就在这种情况下，有了CSS。CSS可以使用文档内容部分和形式分开。使用CSS而不是Table格式来对页面进行布局。HTML标识重新变得简单了。

 

CSS有各种版本。CSS1在1996年末成为标准。CSS2在1998年末成为推荐标准。CSS3开发工作在2000开始，但最终发布还要很长的路程。尽管CSS3的进程很慢，人们已经开始了CSS2.1的开发。

 

各个浏览器对DType的解析。

 

http://meyerweb.com/eric/dom/dtype/dtype-grid.html

 

 

1. 常用的选择器

      类型选择器和后代选择器。

     

    常用选择器：

      p{color:black}

     a{text-decoration:underline}

      h1{font-weight:bold}

     

    后代选择器：

      li a{text-decoration:none}

 

    ID选择器：

   

    #info{font-weight:bold}

 

    类选择器：

 

    .datePosted{color:green}

 

    ID(类)选择器和后代选择器混合使用

        #mainContenth1{font-size:8em}

 

    伪类：

   

    IE只支持锚链接的伪类

   

     a:link{color:blue}

     a:visited{color:green}

     a:hover, a:active{color:red}

 

    Firefox支持其他类型的伪类

 

     tr:hover{background-color:red}

    input:focus{background-color:yellow}

 

通用选择器：

 

通用选择器使用通配符，用来选择所有的元素。

 

*{

     padding:0;

     margin:0;

}

 

其他的选择器

 

子选择器：

 

子选择器只选择元素的直接后代。

 

#nav > li{background:url(folder.png) no-repeat lefttop;}

 

相邻同胞选择器：

 

利用两个元素的相邻关系来选择。

 

h1 + p{font-weight:bold}

 

属性选择器

 

使用属性来选择元素。只有Firefox支持。IE不支持。

 

abbr[title]:hover{
    cursor:help;
}

 

abbr[title=help]:hover{
    cursor:help;
}

 

abbr[title~=help]:hover{
    cursor:help;
}

 

 

1.1 CSS选择器的特殊性

 

选择器的特殊性分为四个等级，a,b,c,d
1.如果样式是行内样式，则a=1；
2.b=ID选择器的总数；
3.c=类,伪类和属性选择器的总数；
4.d=类型选择器和伪元素选择器的总数；

Style=""	1,0,0,0	1000
#wrapper #content{}	0,2,0,0	200
#content .datePosted{}	0,1,1,0	110
div #content{}	0,1,0,1	101
#content{}	0,1,0,0	100
p.comment{}	0,0,1,1	11

 

1.2 使用特殊性

特殊性非常有用，因为它可以对一般元素应用样式，然后在更特殊的元素上覆盖它们。

假如在大多数的表单输入框的长度为15em，搜索的输入框为30em

form{width:15em}

form#search{width:30em}

使用CSS文件。