1. 爱易网页
  2. CSS教程
  3. css常用:CSS常用总结

css常用:CSS常用总结

日期：2013-04-24　 浏览次数：21256 次


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"><

相关资料更多>

  1. 网页制造心得:分别之后怎样做？
  2. 跨阅读器的CSS固定定位
  3. CSS Sprites讨论
  4. CSS网页技巧：完成超级链接文字上划线和下划线
  5. letter-spacing和word-spacing
  6. CSS常用属性缩写实例
  7. 样式表CSS中div、span和center元素
  8. CSS id 选择器
  9. 学习网站树立技术CSS规划心得