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文件.
本文鏈接http://www.cxybl.com/html/wyzz/CSS/20121121/34107.Html