CSS常用总结
来源:互联网 发布:mac远程 qq 编辑:程序博客网 时间:2024/05/20 03:47
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">
/* 我是注释 */
a:link{color:green;text-decoration:none}
a:active{color:blue;text-decoration:none}
a:visited{color:orange;text-decoration:none}
a:hover{color:red;text-decoration:underline}
</style>
5.边距属性
<style type="text/css">
.p1{background-image:url(images/02.jpg); background-repeat:no-repeat;margin-left:5em}
</style>
6.边框属性
<style type="text/css">
p{border:10px double purple} </style>
四.CSS布局
1.DIV标记(分块标记)——<div style="color:#00FF00">***</div>
<html>
<body>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</body>
</html>
2.span标记(行标记)——<span style="***">***</span>
<p><span>some text.</span>some other text.</p>
3.DIV&span区别
Div会造成换行,span不会。
4.display属性
display 属性规定元素应该生成的框的类型。
p.inline { display:inline; }
Inline在同一行中显示,none文字不会被显示,block换行输出.
5.@import合并央视文件
可将多个css文件合并成一个css文件.
- 常用css总结
- CSS常用总结
- 常用的CSS总结
- css - 常用样式总结
- css常用属性总结
- 常用CSS样式总结
- css 常用总结
- css常用效果总结
- css常用简写总结
- 常用CSS属性总结
- css常用选择器总结
- CSS常用样式总结
- 常用css选择器总结
- css常用效果总结
- css常用效果总结
- 常用CSS缩写语法总结
- 常用CSS缩写语法总结
- 常用CSS缩写语法总结
- Linux c 目录操作函数scandir
- html常用总结
- Android 任务共用性Affinity
- Linux系统中硬链接与软链接的区别
- android PorterDuffXfermode ,PorterDuff.Mode 使用 以及Porter-Duff规则详解
- CSS常用总结
- Eucalyptus虚拟机登陆问题
- javascript常用总结
- 大家好,我是麦兜
- js页面跳转的几种方式
- 如何使frame能居中显示
- gdb常用命令
- 安装和使用ffmpeg转换视频为flv文件
- 转:用C#和NAudio解码库播放mp3示例