1. class和id
(1). 同一id在一个页面内只能应用一次,而class则是
用于描述多次出现的元素。
(2). class的定义方法: 指定标签 .类名 {样式}
id的定义方法: 指定标签 #id名 {样式}
class的应用方法:<指定标签 class="类名">
id的应用方法: <指定标签id="id名">
2. css的引用
(1)内部样式
<head>
<style type="text/css">
/*符合CSS语法结构的CSS语句,例如*/ body { background-color: blue; }
</style>
</head>
(2)行内样式表(内嵌样式表)
<p style="text-indent:24px;">段落内容</p>
(3)外部样式
<head>
<link rel="stylesheet" type="text/css" href=".css" />
/*文件位置是所处在文件夹相对与当前网页的相对路径*/
</head>
(4)优先级
行内样式表(内嵌样式表)
内部样式表
外部样式表
补充规则:优先级相同的情况下,后定义的属性会覆盖先前定义
其他高级规则
3. CSS的盒子模式
在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。
Margin和Padding的用法:
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。如果只提供一个,将用于全部的四边。如果提供两个,第一个用于上-下,第二个用于左-右。如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
Margin 例:
body { margin: 36pt 24pt 36pt;}
body { margin: 11.5%; }
body { margin: 10% 10% 10% 10%; }
padding 例:
body { padding: 36pt 24pt 36pt;}
body { padding: 11.5%; }
body { padding: 10% 10% 10% 10%; }
4. 定位
1. 相对定位
相对定位是指相对它本来应该处的位置所做的移动。
.dingwei{ position:relative;
left:50px; }
2. 绝对定位
绝对定位非常好理解,你指定元素出现的坐标(x,y)。
绝对定位为其实也是相对定位
上例中,class为"dingwei2"的元素设置为绝对定位,它的父元素为body,所以它其实是相对body位置来定位的的。如果有如下代码:
.dingwei1{
position:absolute;
top:35px;
left:35px;
color:#FF0000
}
5. css的全局和局部控制
1.全局变量
a:link {
color: #FF0000;
text-decoration: none;
}
2.局部控制
#nvbar a:link {
color: #003366;
text-decoration: none;
}