css的三种位置及各自适用范围

html-css08

css的三种位置及各自适用范围,第1张

先来点基础的,

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为基准标签。