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文件.