1,定义方式:selector {property:value}
selector可一次应用所有元素,或用class指定,或用ID,前者时selector名字为html自带,后者为自定义。
(1)定义多个属性用;隔开。p {text-align:center;color:red}
(2)多个同一样式:
h1,h2,h3,h4,h5,h6
{
color:green
}
(3)应用多个样式:用空格分开 <p>This is a paragraph.</p>
(4)内部样式,外部样式,在页面中应用:
<style>
p{ background-color:#006633}background-color:#006633}
</style>
若有相同的css定义,相同的部分部分优先级为本页最高,其次是外部引用,本页覆盖外页,若不相同,则二者求并集。
优先级也可通过 !important 为调节,带它的优先级会最高,无论是内页还是外页。
.module ul{margin-left:-55px !important; } //直接加在分号前即可。
2,html自带:
(1)p {font-family:”sans serif”} 页面中所有段落都会自动应用此样式。
(2)自带内部定义用 点 :p.right {text-align:right} 应用于 <p>This paragraph will be right-aligned.</p>
(3)指定子类自动应用:input[type="text"] {background-color:blue} 类型为text的所有控件都会被应用。
注:自定义的用. 如p.right, html的以空格隔开如:a:hover img {border: 1px solid #0000ff;width:500px;height:500px;} //以a 内的img应用
<a target=”_blank” href=”klematis_big.htm”><img src=”klematis_small.jpg” alt=”Klematis” width=”110″ height=”90″ /></a>
3,自定义:以.开头,以class引用
.cc {text-align:center}
<p>This paragraph will also be center-aligned.</p>
注:名称不能以数字开头,firefox不支持。
4,id指定,不用class
#username{color:green} 则页面中ID为username的控件会自动应用此样式。
5,注释:/*This is a comment*/
6,总结:
(1)自动应用的,即不用class指定的
1)名字以html元素开头,如body, h1, th, td,table
2) 用[]指定子类型的。如:input[type="text"] {background-color:blue}
3) 以#开头的ID,页面中有此ID的自动应用。
(2)用class指定应用的。名字以 . 开头
(1)页面元素前为元素名后为 . 如:p.right {text-align:right} 应用于 <p>This paragraph will be right-aligned.</p>
(2)自定义,以 . 开头 .cc {text-align:center} <p>This paragraph will also be center-aligned.</p>
注:因一些浏览器不支持css, 要在<style></style>加上<!– –>