CSS学习笔记
CSS学习笔记
一、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
设置各个板块的位置