css学习总结（不断更新中）

CSS的定义是由三个部分构成:

　　选择符(selector)，属性(properties)和属性的取值(value)。

　　语法: selector {property: value} (选择符 {属性:值})

选择符组,用逗号分割,减少重复定义

h1, h2, h3, h4, h5, h6 { color: green }

 

1）：.类选择符：相同的元素分类定义不同的样式

p.right {text-align: right}

 

2）：#ID选择符。应用和类选择符类似，只要把CLASS换成ID即可

 　#menu
　　{

　　font-size:110%;

　　font-weight:bold;

　　color:#0000ff;

　　background-color:transparent

　　}

 

注意:ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。

 

3）：包含选择符

　　可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如:

　　table a

　　{
　　font-size: 12px

　　}
在表格内的链接改变了样式，文字大小为12像素，而表格外的链接的文字仍为默认大小。

注释:/* ... */

 

 

a:link {color: #FF0000}     /* 未访问链接 */
a:visited {color: #00FF00}  /* 已访问链接 */
a:hover {color: #FF00FF}   /* 光标在链接上 */
a:active {color: #0000FF}   /* 已选中链接 */

a:focus {color: #00FF00}   /* 获得焦点的链接 */

除 CSS2 引入的 :focus 不被 IE 支持外，其余的四种伪类在 IE、Firefox 等浏览器中都是支持的。

使用的时候需要注意它们的顺序：a:hover 必须写在 a:link 和 a:visited 之后才有效。类似地，a:active 必须写在 a:hover 之后才有效！

另外，:hover、:active、:focus 这三个伪类还可用于其它元素，譬如 li、input、textarea 等。

 

padding用在容器内部，margin指容器外部

比如：
padding-top:10px;是指容器内的内容距离容器的顶部有10个像素，是包含在容器内的；
margin-top:10px;是指容器本身的顶部距离其他容器有10个像素，不饱含在容器内。