CSS索引
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
1.DIV标记(分块标记)——<div style="color:#00FF00">***</div> 5
2. span标记(行标记)——<span style="***">***</span> 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; } |
二.样式表
<p style+"color=Blue";></p> |
<head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head> |
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在(文档的)头部: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> |
三.属性
<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> |
属性 | 描述 | |
设置文本颜色 | ||
设置文本方向。 | ||
设置行高。 | ||
设置字符间距。 | ||
文本对齐。 | ||
向文本添加修饰。 | ||
首行缩进。 | ||
控制元素中的字母。 | ||
设置字间距。 | ||
<style type="text/css"> .text1{word-spacing:4; letter-spacing:4; text-decoration:blink; font-size:18pt; color:red} </style> |
<style type="text/css"> .p1{background-image:url(images/02.jpg); background-repeat:no-repeat;} </style> |
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> |
<style type="text/css"> .p1{background-image:url(images/02.jpg); background-repeat:no-repeat;margin-left:5em} </style> |
<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> |
Div会造成换行,span不会。
display 属性规定元素应该生成的框的类型。
p.inline { display:inline; } |
Inline在同一行中显示,none文字不会被显示,block换行输出.
可将多个css文件合并成一个css文件.