首页 > > 网页制作 > css >

CSS菜鸟学习小结

2008-02-23 08:28:48来源：互联网阅读 ()

一、基本概念　　
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>　