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">
css常用的定位方式有五种：1、static定位(普通流定位) -------------- 默认定位
2、float定位(浮动定位) 例：float:left
有两个取值：left(左浮动)和right(右浮动)。浮动元素会在没有浮动元素的上方，效果上看是遮挡住了没有浮动的元素，有float样式规则的元素是脱离文档流的，它的父元素的高度并不能有它撑开。
如果父元素的宽度太窄，那么其他浮动元素会向下移动，直到有足够的空间（左图所示）；如果浮动元素的高度不同，那么其他浮动元素向下移动时，就有可能会出现卡住的情况（下图所示）
注意：浮动元素的外边缘不会超过父元素的内边缘；浮动元素不会上下浮动；浮动元素不会互相重叠，会像行内块元素一样排列。
如果想要既设置浮动，又使父元素的高度被浮动元素撑开，即清除子元素浮动对父元素带来的高度的影响，有四种方法可以实现：
假设HTML代码部分为：
<div class="parent">这是父元素
<div style="float:left">这是子元素</div>
</div>
1) 为父元素设置固定高度 -------------缺点：不知道具体高度没办法设置
CSS代码部分：
.parent{
//...
height:xxx//某个固定值
}
2) 在父元素内，在浮动元素的下方多写一行代码：<div style="clear:both"></div>------------- 缺点：增加代码冗余
HTML代码部分：
<div class="parent">这是父元素
<div style="float:left">这是子元素</div>
<div style="clear:both"></div>
</div>
3) 为父元素设置css规则：overflow:hidden ------------- 缺点：有时候不希望超出部分隐藏
.parent{
// ...
overflow:hidden //某个固定值
}
4) 内容生成 ------------- 最优的方法，推荐
CSS代码部分：
.parent:after{
content:''
display:'block'
clear:both
}
3、relative定位(相对定位) position:relative
相对本元素的左上角进行定位，top,left,bottom,right都可以有值。虽然经过定位后，位置可能会移动，但是本元素并没有脱离文档流，还占有原来的页面空间。可以设置z-index。使本元素相对于文档流中的元素，或者脱离文档流但是z-index的值比本元素的值要小的元素更加靠近用户的视线。
相对定位最大的作用是为了实现某个元素相对于本元素的左上角绝对定位，本元素需要设置position为relative。
4、absolute定位(绝对定位) position:absolute
相对于祖代中有relative(相对定位)并且离本元素层级关系上是最近的元素的左上角进行定位，如果在祖代元素中没有有relative定位的，就默认相对于body进行定位。
5、fixed定位（固定定位）position:fixed
相对于窗口的位置，而且不受其他网页内元素影响，永远处于浏览器窗口的相对位置。
绝对定位是脱离文档流的，与浮动定位是一样的效果，会压在非定位元素的上方。可以设置z-index属性。
注意：当同时有浮动元素和绝对定位元素出现并且浮动元素没有设置z-index，浮动元素是压在绝对定位元素上的，即离用户的视线更近。
![如何用css设置网页字体[多图]](/aiimages/%E5%A6%82%E4%BD%95%E7%94%A8css%E8%AE%BE%E7%BD%AE%E7%BD%91%E9%A1%B5%E5%AD%97%E4%BD%93%5B%E5%A4%9A%E5%9B%BE%5D.png)
