CSS菜鸟学习小结
日期：2014-03-27 浏览次数：20680 次
一、基本概念
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>
