日期:2013-04-24  浏览次数:20998 次


CSS索引
一.CSS款式选择器 2
1. 通用选择器——{font-family:"宋体"; declaration2; ... declarationN } 2
2. 类型选择器——p{font-family:"宋体"; } 或p1,p2{font-family:"宋体"; }逗号代表或者的意思。
2
3. Class——p.code{font-family:"宋体"; } 2
4.ID——#code{font-family:"宋体"; } 2
二.款式表 2
1. 行内款式表 2
2. 内部款式表 2
3. 外部款式表 2
4. 款式表优先级——就近准绳 3
三.属性 3
1. 文字 3
2. 文本 3
3. 背景属性 4
4. 超链接 4
5. 边距属性 4
6. 边框属性 4
四.CSS规划 5
1.DIV标记(分块标记)——<div style="color:#00FF00">***</div> 5
2. span标记(行标记)——<span style="***">***</span> 6
3. DIV&span区别 6
4. display属性 6
5. @import合并央视文件 6
一.CSS款式选择器
1.通用选择器——{font-family:"宋体"; declaration2; ... declarationN }
2.类型选择器——p{font-family:"宋体"; } 或p1,p2{font-family:"宋体"; }逗号代表或者的意思。
3.Class——p.code{font-family:"宋体"; } 
td.fancy {
    color: #f60;
    background: #666;
    }
在上面的例子中,类名为 fancy 的表格单元将是带有灰色背景的橙色。
<td class="fancy">
4.ID——#code{font-family:"宋体"; } 
#sidebar p {    font-style: italic;    text-align: right;    margin-top: 0.5em;    }
二.款式表
1.行内款式表
<p style+"color=Blue";></p>
2.内部款式表
<head>
     <style type="text/css">
         hr {color: sienna;}
         p {margin-left: 20px;}
         body {background-image: url("images/back40.gif");}
     </style>
</head>
3.外部款式表
当款式需求使用于很多页面时,外部款式表将是理想的选择。在使用外部款式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到款式表。<link> 标签在(文档的)头部:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
4.款式表优先级——就近准绳
三.属性
1.文字
<style type="text/css">
.font1{font-family:verdana; font-style:italic; font-variant: small-caps; font-weight: lighter;
        font-size:18pt; color:red}
.code{font-size:16pt;color:red}
</style>
2.文本
属性描述
color设置文本颜色
direction设置文本方向。
line-height设置行高。
letter-spacing设置字符间距。
text-align文本对齐。
text-decoration向文本添加修饰。
text-indent首行缩进。
text-transform控制元素中的字母。
word-spacing设置字间距。
<style type="text/css">
.text1{word-spacing:4; letter-spacing:4; text-decoration:blink; font-size:18pt; color:red}
</style>
3.背景属性
<style type="text/css">
.p1{background-image:url(images/02.jpg); background-repeat:no-repeat;}
</style>
4.超链接
A:link 未访问时的形状
A:visited 访问过后的形状
A:active 鼠标点中不放时的形状
A:hover 鼠标划过时的形状
<style type="text/css"><