一、CSS的三類選擇器
1、標記選擇器
<styletype="text/css">
標記
{
屬性:屬性值;
…………
}
</style>
2、類別選擇器
<styletype="text/css">
.class
{
屬性:屬性值;
…………
}
</style>
在HTML中的引用方式：<p class="類別名成">標記內容</p>
3、ID選擇器
<styletype="text/css">
#id
{
屬性:屬性值;
…………
}
</style>
在HTML中的引用方式：<p i="id名成">標記內容</p>
注意：
Id不允許重複使用。
二、選擇器的申明
1、集體申明
body,p,.class,#id
{
屬性:屬性值;
…………
}
2、嵌套使用
h1 em
{
屬性:屬性值;
…………
}
在HTML中的引用方式：<h1>我們的首都是<em>北京</em></h1>
在嵌套中，em樣式會繼承和h1的樣式，h1和em存在一定的父子關係。
三、CSS樣式表的引用方式
1、嵌套引用
<pstyle="屬性:屬性值;……">標記內容</p>
2、內部引用
HTML中<head></head>中定義並在<body></body>中引用
<styletype="text/css">
標記
{
屬性:屬性值;
…………
}
.class
{
屬性:屬性值;
…………
}
#id
{
屬性:屬性值;
…………
}
</style>
3、外部引用
在外部定義*.CSS文件，在<head></head>標記中引入該文件。
*.CSS文件
標記
{
屬性:屬性值;
…………
}
.class
{
屬性:屬性值;
…………
}
#id
{
屬性:屬性值;
…………
}
<linkhref="*.css" rel="stylesheet" type="text/css"/>
四、常用CSS屬性及含義
屬性 | 含義 | 屬性值 |
|---|---|---|
font-family | 設置字體 | 宋體 |
font-size | 字體大小 | 12px |
color | 顏色 | #00ff00 |
font-weight | 定義文字 | bold |
font-style | 文字樣式 | italic |
text-decoration | 文字裝飾 | underline |
text-transform | 文字轉換 | capital,lowercase |
letter-space | 字符間距 | |
vertical-align | 垂直對齊 | middle |
border-style | 邊框樣式 | solid |
border-width | 邊框寬度 | 2px |
width | 寬度 | 3px |
height | 高度 | 4px |
float | 浮動 | left,right |
padding | 邊距(left,right,top,buttom) | 4px |
五、網頁背景
說明 | 屬性 | 屬性值 |
|---|---|---|
背景顏色 | background-color | |
背景圖片 | background-image | |
背景圖片重複 | background-repeat | repeat-y,no-repeat |
位置 | position | absolute，fixed，inherit(繼承),realtive,static |
附加 | attachment | fix |
溢出 | overflow |
六、表格
<tableborder="1px solid">
<caption>表格標題</caption>
<tr>/*tr表示行*/
<th>用於表頭或者加粗顯示的單元格</th>
<th>用於表頭或者加粗顯示的單元格</th>
<tr>
<td>表示單元格</td>
<td>表示單元格</td>
</tr>
<tr>
<tdcolspan="2">表示橫向合併單元格</td>
</tr>
<tr>
<tdrowspan="2">表示縱向合併單元格</td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
七、頁面元素
1、動態超鏈接
a/*a標記*/
{
屬性:屬性值;
…………
}
a:link/*有連接時的*/
{
屬性:屬性值;
…………
}
a:visited/*已經訪問過的*/
{
屬性:屬性值;
…………
}
a:hover/*鼠標經過時的*/
{
屬性:屬性值;
…………
}
八、div與span標記
1、Div與Span的區別
div標記不同行，span標記同一行。
2、盒子模型
3、CSS排版觀念
ID選擇器：#container（width：100%）；#banner；#content；#links；#footer
設置各個板塊的位置