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个像素,不饱含在容器内。