css学习资料

 css学习资料

一、Font 字体

1、font-family

示例：{font-family：字体：字体1}

2、font-size 字号大小

示例： p { font-style: normal; } 

 p { font-size: 12px; } 

 p { font-size: 20%; } 

3、font-style  字体样式

参数： normal : 正常的字体 

 italic : 斜体。对于没有斜体变量的特殊字体，将应用oblique 

 oblique : 倾斜的字体 

示例：  p { font-style: normal; } 

 p { font-style: italic; } 

 p { font-style: oblique; } 

4、font-weight 文本字体的粗细

参数： normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置 

 bold : 粗体。相当于number为700。也相当于b对象的作用 

 bolder : IE5+　特粗体 

 lighter : IE5+　细体 

示例： span { font-weight:800; } 

5、text-decoration 文本的装饰

参数：  none : 　无装饰

 blink : 　闪烁

 underline : 　下划线

 line-through : 　贯穿线

 overline : 　上划线 

示例： div { text-decoration : underline; } 

 div { text-decoration : underline overline; } 

6、font-variant 英文的大小写转换

参数：  normal : 正常的字体 

 small-caps : 小型的大写字母字体 

示例： span { font-variant: small-caps; } 

7、text-transform 英文大小写

参数： none : 　无转换发生

 capitalize : 　将每个单词的第一个字母转换成大写，其余无转换发生

 uppercase : 　转换成大写

 lowercase : 　转换成小写 

示例： div { text-transform : uppercase; } 

8、line-height 文字行高

参数： normal : 　默认行高

 length : 　百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值

示例： div {line-height:6px; } 

div {line-height:10.5; } 

9、letter-spacing 文字之间的间隔

参数：  normal : 　默认间隔

 length : 　由浮点数字和单位标识符组成的长度值，允许为负值。

示例： div {letter-spacing:6px; } 

 div {letter-spacing:0.5pt; } 

10、word-spacing  英文单词间距

参数： normal : 　默认间距

 length : 　由浮点数字和单位标识符组成的长度值，允许为负值

示例：div { word-spacing : 10; }  div { word-spacing : 10px; } 

二、文本  text

1、text-indent  文字缩进

参数：length : 　百分比数字|由浮点数字和单位标识符组成的长度值，允许为负值。

示例：div { text-indent : -5px; } 

div { text-indent : underline 10%; 

2、text-align  对齐

参数： left : 　左对齐

 right : 　右对齐

 center : 　居中

 justify : 　两端对齐 

示例： div { text-align : center; } 

三、背景  background

1、background-color   背景色

参数： transparent : 　背景色透明

 color : 　指定颜色

示例： p { background-color: silver }

div { background-color: rgb(223,71,177) } 

body { background-color: #98AB6F }

pre { background-color: transparent; } 

2、background-image  背景图

参数： none : 　无背景图

 url : 　使用绝对或相对地址指定背景图像 

示例： code { background-image: url("comet.jpg"); }

 blockquote { background-image: url("c:\InetPub\MyPixs\comet.jpg"); } 

 br { background-image: url(http://Fred.com/ImageFile/Q.gif); } 

 body { background-image: none; } 

3、background-position  背景图像位置

参数： length : 　百分数 | 由浮点数字和单位标识符组成的长度值。

 position : 　top | center | bottom | left | center | right 

示例： div { background: url("images/aardvark.gif"); background-position: 35% 80%; } 

 menu { background: url("images/aardvark.gif"); background-position: 35% 2.5cm; } 

 a { background: url("images/aardvark.gif"); background-position: 3.25in; } 

 body { background: url("images/aardvark.gif"); background-position: top right; } 

4、background-repeat  背景图像平铺

参数： repeat : 　背景图像在纵向和横向上平铺

 no-repeat : 　背景图像不平铺

 repeat-x : 　背景图像在横向上平铺

 repeat-y : 　背景图像在纵向平铺 

示例： menu { background: url("images/aardvark.gif"); background-repeat: repeat-y; } 

 p { background: url("images/aardvark.gif"); background-repeat: no-repeat; }

四、定位  Positioning 

1、position  

参数： static : 　无特殊定位，对象遵循HTML定位规则

 absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位

 relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

 fixed : 　IE5.5及NS6尚不支持此属性

 width:  层的高度

 height:  层的宽度

示例： div { position: absolute; bottom: 1in; left: 1in; right: 1in; top: 1in; }

 div { position:relative; top:-3px; left:6px; } 

2、z-index  

参数： auto : 　遵从其父对象的定位

 number : 　无单位的整数值。可为负数 

示例： div { position:absolute; z-index:3; width:6px; } 

五、布局  Layout

1、overflow 

参数： visible : 不论层的大小，内容都显示出来 

auto : 　只在内容超出层的范围的时候才显示滚动条 

hidden : 　不显示超过对象尺寸的内容

scroll : 　总是显示滚动条 

示例： body { overflow: hidden; }

 div { overflow: scroll; height: 100px; width: 100px; }

2、visibility  

参数： inherit : 　继承上一个父对象的可见性

 visible : 　对象可视

 hidden : 　对象隐藏

 collapse : 　主要用来隐藏表格的行或列。

示例： img { visibility: inherit; float: right; }

六、边框  border

1、border-width  边框宽度

参数： medium : 　默认宽度

 thin : 　小于默认宽度

 thick : 　大于默认宽度

 length : 　由浮点数字和单位标识符组成的长度值。

示例： span { border-style: solid; border-width: thin; } 

 span { border-style: solid; border-width: 1px thin; }

2、

border-top-width 上宽 （当把width换成color就是边框颜色）

border-bottom-width 下宽（当把whdth换成style就是边框样式）

border-left-width 左宽

border-right-width 右宽

3、border-style  边框样式

参数： none : 　无边框

 hidden : 　隐藏边框。IE不支持 

 dotted : 　点线

 dashed : 　虚线

 solid : 　实线边框 

 double : 　双线边框

 ----一一下只对表格有效-----

 groove : 　根据border-color的值画3D凹槽 

 ridge : 　根据border-color的值画菱形边框 

 inset : 　根据border-color的值画3D凹边 

 outset : 　根据border-color的值画3D凸边 

示例： body { border-style: double groove; } 

 body { border-style: double groove dashed; 

七、外补丁 margin

1、 检索或设置对象四边的外延边距。

 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

 margin-top  上

 margin-right 右

 margin-bottom 下

 margin-left 左

示例： body { margin: 36pt 24pt 36pt; } 

 body { margin: 11.5%; } 

 body { margin: 10% 10% 10% 10%; }  

 body { margin-top: 11.5%; } 

八、内补丁 padding

检索或设置对象四边的补丁边距。

如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

和外补丁相似 

九、超链接

a:link {color: #FF0000}     /* 未访问的链接 */

a:visited {color: #00FF00}  /* 已访问的链接 */

a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */

a:active {color: #0000FF}   /* 被选择的链接 */

十：鼠标光标

1、cursor：光标形状 

参数： crosshair  交叉十字 help 代问号的鼠标

 default  默认鼠标形状 text 文本形状

 hand  手型  

 move  移动的形状

 wait  沙漏形状

 w-resize 向西的箭头 s-resize 向南的箭头

 n-resize 向北的箭头 e-resize 向东的箭头

 ne-resize 向东北  sw--resize 向西南

 se-resize 向东南 nw-resize 向西北

Xscan,LC4/5,流光