一、基本概念
1、选择符:就是HTML当中可用的任何元素,例如:body,a,tdp.....
2、类:就是我们自己给格式起的名字,应用的时候叫名字(class=类)
3、伪类:visited、active、link等
二、基本语法
1、选择符{属性:值}
例如:TD{FONT-SIZE:9pt}
2、选择符.类{属性:值}
例如:td.aaa{color:#191970}
只能在该元素下有效引用方法:<PCLASS=aaa>
3、.类{属性:值}
例如:.aaa{color:#191970}
任何元素都能用
例如:<pclass=aaa...></p>
<aclass=aaa...></a>
<tdclass=aaa...></td>
4、选择符:伪类{属性:值} 例如:a:link{color:red}
5、选择符.类:伪类{属性:值}例如:a.bbb:link{color:blue}
引用方法:<aCLASS=aaa...></a>
6、.类:伪类{属性:值}
例如:.mainnv:hover{COLOR:#ff0000}
三、具体使用
1、行内:用选择符{属性:值}
例如:TD{FONT-SIZE:9pt}
2、文件头:方在<head></head>之间例如:
<styletype="text/css">
<!--
A:link{text-decoration:none;color:#0072A8} //选择符:伪类 { 属性:值}
A:visited{text-decoration:none;color:#0072A8}
A:active{text-decoration:none;color:#FF0000}
A:hover{text-decoration:underline;color:FF0000}
A.a1:active{COLOR:#ffffff} //选择符.类:伪类{属性:值}
A.a1:link{COLOR:#ffffff}
A.a1:visited{COLOR:#ffffff}
A.a1:hover{COLOR:#faf108;TEXT-DECORATION:underline}
body{font-size=9pt}//选择符{属性:值}
H{FONT-SIZE:9pt}
TD{FONT-SIZE:9pt}
-->
</STYLE>
3、外连文件:要求文件扩展名为css,<head></head>加如下链接代码:
<LINKrel="stylesheet"href="first.css"type="text/css">//first.css是文件名
first.css内容如下:
A:link{COLOR:#3a2a00;TEXT-DECORATION:none} //选择符:伪类{属性:值}
A:visited{COLOR:#602400;TEXT-DECORATION: none}// 用a元素的连接都是这种方式
A:active{COLOR:#ff6600;TEXT-DECORATION:none}
A:hover{COLOR:#ff3300;TEXT-DECORATION:underline}
A.hot:link{COLOR:#dd0000}//选择符.类:伪类{属性:值}
A.hot:visited{COLOR:#dd0000}//用a元素的而且指明类class用hot的显示方式
A.hot:hover{COLOR:#ff0000} //引用方法class=hot
A.hot:active{COLOR:#ff3300}
A.blk:link{COLOR:#000000} //选择符.类:伪类{属性:值}
A.blk:visited{COLOR:#000000}//用a元素的而且指明类class用blk的显示方式
A.blk:hover{COLOR:#000000}
.mainnv{FONT-SIZE: 12px;FONT-WEIGHT:bold}// .类 {属性: 值 }指明类用mainnv的显示
.mainnv:link{COLOR:#cccc99}
.mainnv:visited{COLOR:#cccc99} //.类:伪类{属性:值}
.mainnv:active{COLOR:#cccc99} //所有指明类用mainnv的连接效果用这种方式显示
.mainnv:hover{COLOR:#ff0000;TEXT-DECORATION:none}
.main1{BACKGROUND:#cccc99}//.类{属性:值}
.main1t{COLOR:#cccc99}//所有指明类用main1t的都用这种方式显示
.main2{BACKGROUND:#c5c5b2}
.main3{BACKGROUND:#e6e0b2}
五、控制优先级:
优先级:1、行内插入式2、头部方式3、外连文件方式
---------------------------------------------------------------
我想问一下,要在一个页面同时实现两个效果,就是说onmouseover时,字体有的显示为黑色,有的显示为白色,请问大侠,用Css该怎么定义呢?谢了!
---------------------------------------------------------------
南山居士,
用类咯!
2、类:就是我们自己给格式起的名字,应用的时候叫名字(class=类)
比如说:a.black:hover{COLOR:#000000}
a.white:hover{COLOR:#ffffff}
<aclass=black>这里显示黑色</a>
<aclass=white>这里显示白色</a>
具体的蚊子已经说过了,
自己看看咯
---------------------------------------------------------------
补充几个很重要的CSS用法:
1.
div#divID{color:#ff0000}
<divid=divID>div1</div>
<div>div2</div>
2.
div#divIDtabletd{color:#FF0000}
<divid=divID><table><tr><td>table1</td></tr></table></div>
<div><table><tr><td>table2</td></tr></table></div>
对CSS的样式不一定只用class=CSSName引用,其实这两种定义才更能体现出CSS的妙处.
注意:用div#divID对某个ID赋样式时应该确保网页里这个ID是唯一的.否则会出错