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,流光……
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/shuyu586813/archive/2008/07/25/2707607.aspx
