收藏

下载资源 加入VIP,免费下载

第1页 / 共13页

第2页 / 共13页

第3页 / 共13页

第4页 / 共13页

第5页 / 共13页

Fixed;top:

10px;left:

10px;">

//元素位置固定浏览器位置不变

二、Float

float是css的定位属性,fload属性有四个可用的值：

Left和Right分别浮动元素到各自的方向，None（默认的）使元素不浮动，Inherit将会从父级元素获取float值。

Float的用处

float属性定义元素在哪个方向浮动。

以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

浮动非替换元素要指定一个明确的宽度；否则，它们会尽可能地窄。

注释:

假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

除了简单的在图片周围包围文字，浮动可用于创建全部网页布局。

参考地址：

三、margin（外边距）

定义

margin属性是用于在一个声明中设置四个外边距的所有属性的简写属性。

注释：

允许使用负值。

继承性：

No

说明

这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。

行内元素的的左右外边距不会合并。

同样地，浮动元素的外边距也不会合并。

允许指定负的外边距值，不过使用时要小心。

例子

四个边距均为10px：

h1{margin:

10px}顶边距和底边距为10px，左边距和右边距是父元素宽度的2%：

h1{margin:

10px2%}顶边距为10px，左边距和右边距是父元素宽度的2%，底边距是-10px：

h1{margin:

10px2%-10px}顶边距为10px，右边距是父元素宽度的2%，底边距是-10px，而左边距由浏览器设置：

h1{margin:

10px2%-10pxauto}

可能的值

设置针对边距的属性。

margin-top

margin-right

margin-bottom

margin-left

值可以是：

百分比（基于父对象总高度或宽度的百分比）

长度值（定义一个固定的边距）

auto（浏览器设定的值）。

默认值：

未定义。

例子：

p.margin{margin:

2cm4cm3cm4cm}

这个段落没有指定外边距。

这个段落带有指定的外边距。

这个段落带有指定的外边距。

这个段落带有指定的外边距。

这个段落带有指定的外边距。

这个段落带有指定的外边距。

这个段落没有指定外边距。

四、padding（内边距）

CSS中定义了一个盒式模型，关于这个网上有很多文章。

主要有margin（外边距），border（边框），padding（内边距）这三个名词，用来设置这个盒子的空隙。

W3C定义的盒式模型定义的width和height是指内容实体的，而不包括margin，border和padding，而传统的盒式模型则不同，他的width是包括border和padding，可以看下图帮助理解。

五、border（边框）

border（边框）border-leftborder-rightborder-bottomborder-top

border-style:

dotted;（点线）dashed;（虚线）solid;double;（双线）groove;（槽线）ridge;（脊状）inset;（凹陷）outset;

border-width:

;边框宽度

border-color:

#;

六、lefttoprightbottom

这四个属性是设置一个偏移量，对于特定容器的一个偏移。

top是指元素的顶边相对于容器的顶边的偏移，right是元素的右边相对于容器的右边的便宜，但方向是从右到左。

正因为有方向，所以这四个属性也可以设置为负值，是向反方向偏移。

也可以设置百分比，这个值是相对于容器计算出来的，比如top:

50%，就是容器的height*50%。

这四个属性必须与position共同使用，不然就没有效果，position值为static时这四个属性也是无效的。

position还存在其他三个值absolute，relative，fixed，fixed和absolute类似，所以最大的区别还是absolute和relative。

absolute是相对于根容器偏移，而relative是相对于父级容器偏移。

偏移值指的是容器的内容实体到元素外边距的距离，就算说topleft定义的盒子左上角的坐标是margin-top和margin-left的交点，当然这个坐标是相对于容器来说的，传统模型也是如此。

七、（block）文字和字体相关

字间距letter-spacing:

normal;数值

对刘text-align:

justify;（两端对齐）left;（左对齐）right;（右对齐）center;（居中）

缩进text-indent:

数值px;

垂直对齐vertical-align:

baseline;（基线）sub;（下标）super;（下标）top;text-top;middle;bottom;text-bottom;

词间距word-spacing:

normal;数值

空格white-space:

pre;（保留）nowrap;（不换行）

显示display:

block;（块）inline;（内嵌）list-item;（列表项）run-in;（追加部分）compact;（紧凑）marker;（标记）table;inline-table;table-raw-group;table-header-group;table-footer-group;table-raw;table-column-group;table-column;table-cell;table-caption;（表格标题）

类型list-style-type:

  disc;（圆点）circle;（圆圈）square;（方块）decimal;（数字）lower-roman;（小罗码数字）upper-roman;lower-alpha;upper-alpha;

位置list-style-position:

outside;（外）inside;

图像list-style-image:

url（..）;

定位属性：

（Position）

Position:

absolute;relative;static;

visibility:

inherit;visible;hidden;

overflow:

visible;hidden;scroll;auto;

clip:

rect（12px,auto,12px,auto）（裁切）

八、box（方框）

width:

;height:

;float:

;clear:

both;margin:

;padding:

;   顺序：

上右下左

九、（font）字体属性

大小font-size:

x-large;（特大）xx-small;（极小）一般中文用不到，只要用数值就可以，单位：

PX、PD

样式font-style:

oblique;（偏斜体）italic;（斜体）normal;（正常）

行高line-height:

normal;（正常）单位：

PX、PD、EM

粗细font-weight:

bold;（粗体）lighter;（细体）normal;（正常）

变体font-variant:

small-caps;（小型大写字母）normal;（正常）

大小写text-transform:

capitalize;（首字母大写）uppercase;（大写）lowercase;（小写）none;（无）

修饰text-decoration:

underline;（下划线）overline;（上划线）line-through;（删除线）blink;（闪烁）

常用字体：

（font-family）

"CourierNew",Courier,monospace,"TimesNewRoman",Times,serif,Arial,Helvetica,sans-serif,Verdana

一十、（background）背景属性

色彩background-color:

#FFFFFF;

图片background-image:

url（）;

重复background-repeat:

no-repeat;

滚动background-attachment:

fixed;（固定）scroll;（滚动）

位置background-position:

left（水平）top（垂直）;

简写方法background:

#000url（..）repeatfixedlefttop;

其他常用样式

一CSS文字属性：

color:

#999999;/*文字颜色*/

font-family:

宋体,sans-serif;/*文字字体*/

font-size:

9pt;/*文字大小*/

font-style:

itelic;/*文字斜体*/

font-variant:

small-caps;/*小字体*/

letter-spacing:

1pt;/*字间距离*/

line-height:

200%;/*设置行高*/

font-weight:

bold;/*文字粗体*/

vertical-align:

sub;/*下标字*/

vertical-align:

super;/*上标字*/

text-decoration:

line-through;/*加删除线*/

text-decoration:

overline;/*加顶线*/

text-decoration:

underline;/*加下划线*/

text-decoration:

none;/*删除链接下划线*/

text-transform:

capitalize;/*首字大写*/

text-transform:

uppercase;/*英文大写*/

text-transform:

lowercase;/*英文小写*/

text-align:

right;/*文字右对齐*/  

text-align:

left;/*文字左对齐*/

text-align:

center;/*文字居中对齐*/

text-align:

justify;/*文字分散对齐*/

vertical-align属性

vertical-align:

top;/*垂直向上对齐*/

vertical-align:

bottom;/*垂直向下对齐*/

vertical-align:

middle;/*垂直居中对齐*/

vertical-align:

text-top;/*文字垂直向上对齐*/

vertical-align:

text-bottom;/*文字垂直向下对齐*/

二、CSS边框空白

padding-top:

10px;/*上边框留空白*/

padding-right:

10px;/*右边框留空白*/

padding-bottom:

10px;/*下边框留空白*/

padding-left:

10px;/*左边框留空白

三、CSS符号属性：

list-style-type:

none;/*不编号*/

list-style-type:

decimal;/*阿拉伯数字*/

list-style-type:

lower-roman;/*小写罗马数字*/

list-style-type:

upper-roman;/*大写罗马数字*/

list-style-type:

lower-alpha;/*小写英文字母*/

list-style-type:

upper-alpha;/*大写英文字母*/

list-style-type:

disc;/*实心圆形符号*/

list-style-type:

circle;/*空心圆形符号*/

list-style-type:

square;/*实心方形符号*/

list-style-image:

url（/dot.gif）;/*图片式符号*/

list-style-;/*凸排*/

list-style-;/*缩进*/

四、CSS背景样式：

background-color:

#F5E2EC;/*背景颜色*/  

background:

transparent;/*透视背景*/

background-image:

url（/image/bg.gif）;/*背景图片*/

background-attachment:

fixed;/*浮水印固定背景*/

background-repeat:

repeat;/*重复排列-网页默认*/

background-repeat:

no-repeat;/*不重复排列*/

background-repeat:

repeat-x;/*在x轴重复排列*/

background-repeat:

repeat-y;/*在y轴重复排列*/

指定背景位置

background-90%;/*背景图片x与y轴的位置*/

background-;/*向上对齐*/

background-;/*向下对齐*/

background-;/*向左对齐*/

background-;/*向右对齐*/

background-;/*居中对齐*/

五、CSS连接属性：

a/*所有超链接*/

a:

link/*超链接文字格式*/  

a:

visited/*浏览过的链接文字格式*/

a:

active/*按下链接的格式*/

a:

hover/*鼠标转到链接*/

鼠标光标样式：

链接手指CURSOR:

hand

十字体cursor:

crosshair

箭头朝下cursor:

s-resize

十字箭头cursor:

move

箭头朝右cursor:

move

加一问号cursor:

help

箭头朝左cursor:

w-resize

箭头朝上cursor:

n-resize

箭头朝右上cursor:

ne-resize

箭头朝左上cursor:

nw-resize

文字I型cursor:

text

箭头斜右下cursor:

se-resize

箭头斜左下cursor:

sw-resize

漏斗cursor:

wait

光标图案（IE6）  p{cursor:

url（"光标文件名.cur"）,text;}

六、CSS框线一览表：

border-top:

1pxsolid#6699cc;/*上框线*/

border-bottom:

1pxsolid#6699cc;/*下框线*/

border-left:

1pxsolid#6699cc;/*左框线*/  

border-right:

1pxsolid#6699cc;/*右框线*/

以上是建议书写方式,但也可以使用常规的方式如下:

border-top-color:

#369/*设置上框线top颜色*/

border-top-width:

1px/*设置上框线top宽度*/

border-top-style:

solid/*设置上框线top样式*/

其他框线样式

solid/*实线框*/

dotted/*虚线框*/

double/*双线框*/

groove/*立体内凸框*/

ridge/*立体浮雕框*/

inset/*凹框*/

outset/*凸框*/

七、CSS表单运用：

文字方块  

按钮  

复选框  

选择钮  

多行文字方块  

下拉式菜单选项1选项2

八、CSS边界样式：

margin-top:

10px;/*上边界*/

margin-right:

10px;/*右边界值*/

margin-bottom:

10px;/*下边界值*/

margin-left:

10px;/*左边界值*/ 

字体样式（FontStyle）

序号中文说明标记语法

1字体样式{font:

font-stylefont-variantfont-weightfont-sizefont-family}  

2字体类型{font-family:

"字体1","字体2","字体3",...}  

3字体大小{font-size:

数值|inherit|medium|large|larger|x-large|xx-large|small|smaller|x-small|xx-small}  

4字体风格{font-style:

inherit|italic|normal|oblique}  

5字体粗细  {font-weight:

100-900|bold|bolder|lighter|normal;}  

6字体颜色  {color:

数值;}

7阴影颜色{text-shadow:

16位色值}

8字体行高  {line-height:

数值|inherit|normal;}

9字间距  {letter-spacing:

数值|inherit|normal}

10单词间距{word-spacing:

数值|inherit|normal}

11字体变形{font-variant:

inherit|normal|small-cps}  

12英文转换{text-transform:

inherit|none|capitalize|uppercase|lowercase}

13字体变形{font-size-adjust:

inherit|none}  

14字体{font-stretch:

condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider} 

文本样式（TextStyle）

序号中文说明标记语法

1行间距{line-height:

数值|inherit|normal;}  

2文本修饰{text-decoration:

inherit|none|underline|overline|line-through|blink}

3段首空格  {text-indent:

数值|inherit}

4水平对齐{text-align:

left|right|center|justify}  

5垂直对齐{vertical-align:

inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}  

6书写方式{writing-mode:

lr-tb|tb-rl}  

背景样式

序号中文说明标记语法

1背景颜色{background-color:

数值}

2背景图片{background-image:

url（URL）|none}

3背景重复{background-repeat:

inherit|no-repeat|repeat|repeat-x|repeat-y}

4背景固定{background-attachment:

fixed|scroll}

5背景定位{background-

6背影样式{background:

背景颜色|背景图象|背景重复|背景附件|背景位置}

框架样式（BoxStyle）  

序号中文说明标记语法

1边界留白{margin:

margin-topmargin-rightmargin-bottommargin-left}

2补　　白{padding:

padding-toppadding-rightpadding-bottompadding-left}

3边框宽度{border-width:

border-top-widthborder-right-widthborder-bottom-widthborder-left-width}　　

宽度值：

thin|medium|thick|数值

4边框颜色{border-color:

数值数值数值数值}　　数值：

分别代表top、right、bottom、left颜色值

5边框风格{border-style:

none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}

6边　　框{border:

border-widthborder-stylecolor}

  上边框{border-top: