超链接的时候会使用到的：
A:visited { COLOR: #414141; TEXT-DECORATION:none; }
A:hover { COLOR: #ff0000; TEXT-DECORATION: none; }
A:active { COLOR: #414141; TEXT-DECORATION: none; }
A:link { COLOR: #414141; TEXT-DECORATION: none; }
固定宽度且居中：
body { margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif; text-align: center; }
设置li对象无符号：
.myclass ul li { list-style:none; }
设置页脚： .foot { clear:both; }
.btn {
BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid
}
.btn1_mouseout {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn1_mouseover {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
.btn3_mouseout {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mouseover {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mousedown
{
BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid
}
.btn3_mouseup {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn_2k3 {
BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid
}
</style>
<body>
<button class=btn title="CSS样式按钮">CSS样式按钮</button><P></p>
<button
class=btn1_mouseout οnmοuseοver="this.className='btn1_mouseover'"
οnmοuseοut="this.className='btn1_mouseout'"
title="CSS样式按钮">CSS样式按钮</button>
<button
class=btn1_mouseout οnmοuseοver="this.className='btn1_mouseover'"
οnmοuseοut="this.className='btn1_mouseout'" DISABLED>CSS样式按钮</button>
<P>
<button class=btn2 title="CSS样式按钮">CSS样式按钮</button>
<P>
<button class=btn3_mouseout οnmοuseοver="this.className='btn3_mouseover'"
οnmοuseοut="this.className='btn3_mouseout'"
οnmοusedοwn="this.className='btn3_mousedown'"
οnmοuseup="this.className='btn3_mouseup'"
title="CSS样式按钮">CSS样式按钮</button>
<P>
<button class=btn_2k3 title="CSS样式按钮">CSS样式按钮</button></body>
1、自定义CSS样式（类样式）：使你可以将样式属性设置为任何文本范围或文本块。如：
.self{color:#66ff00} 强调的一点是在样式名称前必须加“."，并且包含任何字母和数字的组合。
2、HTML标签样式：重定义标签的格式。创建或更改标签的CSS样式时，所有用标签设置了格式的文本都立即更新。如：
h1{font-family:Arial} 3、CSS链接样式：重定义链接有关的格式。有四种如下
A:link 设置正常状态下链接文字的样式
A:active 设置鼠标单击时的链接文字的外观
A:visited 设置访问过的链接外观
A:hover 设置鼠标放置链接文字上文字的效果
添加CSS样式表的三种方法
1、直接在标签内定义，主要是在body内实现。例如：<p style="color:blue;font-size:10pt">css实例</p>。不过呢，这种方法使用比较简单、显示直观，无法发挥样式表的优势，因此呢我们是不推荐使用的。
2、在head里实现的css样式。这种的css一般位于html文件的头部，即<head>与</head>标签内，而且必须放在<head>与</head>之间，并且以<style>开始，以</style>结束。例如如下代码：
<style Type="text/css">
<!--
H1{font-size:x-large；color:red}
H2{font-size:large;color:blue} .spanstyle{font: 12pt verdana; font-weight:700; color:red;}
-->
</style>引用<span class="spanstyle">我是杨剑</span> 其中<style>与</style>直接是样式的内容，在{ }前面可以写样式的类型和名称。{ }中是样式的属性。这种方法是经常被使用的添加样式表的方法。
3、在文件外使用（也就是使用链接样式表），就是我们在网页中可以调用我们已经定义好的样式表来实现样式表的应用，它可以定义在html文件内部，也可以单独成为文件。这种方法最适合大型网站的css样式定义。下面这段语句必须放在<head>与</head>之间
<link rel＝"stylesheet" href="style.css" type="text/css">style.css文件里直接写控制元素的标志如下：body{ background-color:orange;}.spanstyle { font: 12pt verdana; font-weight:700; color:red;}这里需要说明的一点：如果不是自定义的CSS样式就不需要在标志里引用了。什么意思呢？用例子说明比如你声明了body{ background-color:orange;}哪么你就不用在<body>标志里再加上class="body"了,但是自定义的就需要，比如你声明了.spanstyle { font: 12pt verdana; font-weight:700; color:red;}哪么你就需要在<span class="spanstyle">如果不是就应用不上这个自定义样式了，注意这里把点给去掉了
扫一扫
2561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
