样式表

分类

内联

写在标签里面

style="样式"

控制精确，代码重用性差

内嵌

嵌在页面的head里面

<style type="text/css"></style>

控制没有内联的精确，代码重用性好

外部

单独的样式文件

引入：右键-CSS样式表-附加样式表

引入：<link href="test.css" rel="stylesheet" type="text/cs

控制没有内联的精确，代码重用性最好

选择器

样式表用来选取元素的

标签

根据标签名选中元素

class

. (点)

根据class名来筛选元素

id

# (井号)

根据id名来筛选出唯一元素

复合

并列

div,span

class="第一种 第二种"

后代

#list li

点筛选

div.s

大小

width

宽度

height

高度

背景

background-color

背景色

background

rgb(x,x,x)

rgba(x,x,x,x)

最后一个是透明度 1为不透明 0为全透明

url(图片的相对路径)

不平铺

no-repeat

background-image

背景图片

background-repeat

背景图的平铺方式

background-position

背景图片位置

background-attachment

设置背景图片是否滚动

background-size

背景图的大小 200px 200px

字体

font-family

字体样式

font-size

字体大小 12px 14px

font-style

italic倾斜

font-weight

bold加粗

text-decoration

underline下划线

overline上划线

line-through删除线

none没有，用来去掉超链接的下划线

color

字体颜色

对齐方式

text-align

水平对齐方式

vertical-align

垂直对齐方式，配合行高使用

line-height

行高

text-indent

缩进 单位像素

边界边框

margin

外边距 上右下左

padding

内边距 上右下左

如果加了内边距，该元素会相应的变大

border

1px solid #60F 简写方式 第一个边框粗细 第二个边框样式 第三个边框颜色

列表方块

list-style

none将列表前面的序号去掉

list-style-image

可以将前面的序号变为图片

格式与布局

位置

position

fixed固定

相对于浏览器边框位置固定

absolute绝对位置

相对于父级元素（浏览器，绝对定位的上级）

relative相对位置

相对于自身应该出现的位置

top

距离上边的距离

right

距离右边的距离

bottom

距离下边的距离

left

距离左边的距离

流

float

left

向左流

right

向右流

clear

both

清掉流

<div style="clear:both;"></div>

z-index分层

值越大越靠上

其它

display

显示block和隐藏none,不占位置

visibility

显示visible和隐藏hidden,占位置

overflow

超出范围 hidden隐藏

透明

opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)

圆角

border-radius:5px;

阴影

box-shadow:0 0 5px white;