一、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
设置各个板块的位置