一、基本概念
1、
选择符：就是HTML当中可用的任何元素，例如：body,a,td
p.....
2、
类：
就是我们自己给格式起的名字，应用的时候叫名字（class=类）
3、
伪类：visited、
active
、link
等
二、基本语法
1、选择符
{
属性:
值
}
例如：
TD
{
FONT-SIZE:
9pt}
2、选择符.类
{
属性:
值
}
例如：
td.aaa
{
color:
#191970
}
只能在该元素下有效
引用方法：
<P
CLASS=aaa>
3、.类
{
属性:
值
}
例如：
.aaa
{
color:
#191970
}
任何元素都能用
例如：
<p
class=aaa
...
>
</p>
<a
class=aaa
...
>
</a>
<td
class=aaa
...
>
</td>
4、
选择符:伪类
{
属性:
值
}
例如：a:link
{color:red}
5、
选择符.类:伪类
{
属性:
值
}
例如：a.bbb:link
{color:blue}
引用方法：
<a
CLASS=aaa
...>
</a>
6、
.类:伪类
{
属性:
值
}
例如：
.mainnv:hover
{COLOR:
#ff0000}
三、具体使用
1、行内：
用选择符
{
属性:
值
}
例如：
TD
{
FONT-SIZE:
9pt}
2、文件头：方在<head>
</head>
之间
例如：
<style
type="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>
加如下链接代码：
<LINK
rel="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}
<a
class=black>这里显示黑色</a>
<a
class=white>这里显示白色</a>
具体的蚊子已经说过了，
自己看看咯
---------------------------------------------------------------
补充几个很重要的CSS用法:
1.
div#divID
{color:
#ff0000}
<div
id=divID>div1</div>
<div>div2</div>
2.
div#divID
table
td{color:
#FF0000}
<div
id=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是唯一的.否则会出错
