DIV+CSS教程

今晚准备过一遍51dev.com上的开发在线教程（DIV+CSS教程）过一遍基础知识，记下自己不清楚的知识点。

1、引入CSS有三种方式

1）内联样式例如<p style="font-size:12px;color:#fff;">么么哒</p>

2)内联样式表

1 <head>
2 <style>
3 p{font-size:12px;color:#fff;}
4 </style>
5 </head>

3)外部样式表<link rel="stylesheet" href="style/mian.css" type="text/css">

在优先级上：内联样式 > 内联样式表 > 外部样式表 > 浏览器默认样式（如点击链接有下划线）。

2、CSS语法：selector{property:value;}就近原则

在使用CSS样式的时候，可能会有一些网页元素同时适用于多个CSS样式，那么这时候CSS就会遵循就近原则以避免冲突。

3、通配符

div *{color:#FF0;}/* DIV标签内的所有字体颜色为*/

4、伪类的典型应用

1 #nav a:hover{
2 color:#FF0000;
3 text-decoration:underline;
4 }

:link 未被访问前

：hover 鼠标悬停

：active 被激活

：visited 链接被访问过

:first-child 设置元素的第一个子对象

对于<a>标签中无“href”属性的内容，：hover,:link;:visited;:active均无效:hover必须置于：link 和：visited之后才是有效的:active必须置于:hover之后才有效

一、颜色名称方式

使用颜色名称表示对应的颜色，如红色为“red”，灰色为“gray”等。

例子：

p{ color: red; }

二、RGB方式

格式为：rgb(R,G,B)

正整数值的取值范围为：0 - 255，百分数值的取值范围为：0.0% - 100.0%，超出范围的数值将被截至其最接近的取值极限。

例子：

p{ color: red; }
p{ color: rgb(255,0,0); }

以上二者都表示红色。

三、十六进制方式

格式为：#RRGGBB

参数必须是两位数，对于只有一位的，应在前面补零。如果每个参数各自在两位上的数字都相同，那么本单位也可缩写为 #RGB 的方式。例如：#FF8800 可以缩写为 #F80，但我们不建议写成缩写的方式。

CSS 字体名称

“font-family”属性用于设置字体名称，按优先顺序排列，以逗号隔开，如果字体名称包含空格，则应使用引号括起。

“text-indent”属性用于设置文本缩进。

background-color 不继承只不过子元素未设置背景默认为透明

，因此在感觉上“看”起来好像是继承了背景属性。

1 body{background-image:url(../images/bg.gif);}

background-repeat 默认背景图像在纵向和横向上平铺！

1 ul li{ list-style-image: url(../images/li_red.gif); }
2 ul li{list-style-type:square;}

border-collapse 属性设置是否吧表格边框合并为单一的边框

1 table{ border-collapse: collapse; }