CSS
的使用方式有三种:内联
<p style=""></p>
;内部样式,在
head
加入
<style></style>
定义
css
,
body
中引用;外部样式,
css
放在一个外部文件中,
head
中用
<link src="">
加载,
body
中引用和内部样式使用方法相同。
再来点基础的,
css
定义有三种:
直接标签定义如,
p{
具体风格代码
}
效果范围是
body
中所有的
p
标签;根据
ID
号定义,
#p1{
具体风格代码
}
效果范围是
body
中
id="p1"
的标
签;自定义,
.p1{
具体风格代码
}
body
中标签以
class="p1"
进行引用;
一、
CSS
的语法是比较灵活的,比如可以同时定义两个
css
名使用同一种风格,中间以逗
号分隔,如:
.
.p1
,
.p2{
具体风格代码
}
或
.p1
,
#p2,p{
具体风格代码
}
,意思为,自定义的
p1
风格,
id
号为
p2
的风格,
<p>
标签的风格。
二、
接上,也可以
.p1
,
.p2{
具体风格代码
}
.p2{
具体风格代码
}
好处是把自定义
p1
和
p2
相同的部分放在
.p1
,
.p2{
具体风格代码
}
不同部
分
.p2
再定义。
三、
前面自定义好的风格,在引用时
class="
自定义风格
"
,也给了我们充分的灵活,可以
引用多个自定义风格,以空格间隔,如:
.p1{
具体风格代码
}
.p2{
具体风格代码
}
引用时
<p class="p1 p2">
1、新建一个html文件输入两个div标签,接着使用style属性,分别给div设置为绝对定位absolute和相对定位relative,让他们其中全部向左移动20px,向上移动30px的距离:
2、然后保存文件打开浏览器看看效果,位置显示还是比较明显的:
3、最后解释下这个结果,绝对位置就是对浏览器页面左边和顶部的距离,相对位置就是距离正常的标题的距离。以上就是css中绝对定位和相对定位的使用方法:
绝对定位是相对于父标签决定位置,一般用于相对定位标签里面,JS特效经常用到。相对定位是相对于上一个相对定位的。一般用于浮动定位标签里面,一般跟绝对定位配合使用。
浮动定位才是常用的。
看例子:
<body>
<div id="bq1" style=" position:absoluteleft:10pxtop:10px"></div>
<div id="bq2" style=" position:relative"></div>
<div id="bq3" style=" position:relative">
<div id="bq4" style=" position:absoluteleft:10pxtop:10px"></div>
</div>
</body>
以下只说id名代表div
绝对定位:position:absolute
如果bq1(绝对定位)外面没有div等父标签,bq1会以body为父标签。左边距距body 10像素,上边距距body 10像素。
如果bq4(绝对定位)在bq3(相对定位)里面,左边距距bq3 10像素,上边距距bq3 10像素。
相对定位:position:relative
bq2(相对定位)总是相对于前面的同级标签为基准标签(bq1)。
bq3以bq2为基准标签。