引入
<link rel=”stylesheet” type=”text/css” href="style.css"/>
<style type="text/css">@import "style.css"</style>
文字属性
| 属性名称 | 属性值 | 说明 |
| font-style |
normal italic/obligue |
正常显示 斜体 |
| font-variant |
normal small-caps |
正常显示 将英文大小写字母写调为同宽 |
| font-weight |
normal bold |
正常显示 粗体 |
| font-size | 像素/百分比 | 字体大小 |
| font-family | 字体名称 | 设置字体名称 |
font属性简化的使用方法：
font:是否斜体 是否同宽 是否粗体 大小 字体名称
例如:font:italic bold 200 隶书
文本属性
| 属性名称 | 属性值 | 说明 |
| color | 十六/英文/三原色 | 颜色 |
| letter-spacing |
normal 长度 |
正常显示 文本间隔 |
| word-spacing |
normal 数字 |
正常显示 单词间距 |
| white-space |
normal pre nowrap |
文本自动处理换行 换行和空白受保护 强制在同一行显示 |
| text-align |
left right center justify |
文字靠左 文字靠右 文字靠中 两端对齐 |
| text-decoration |
none underline overline line-through |
正常显示 加上下划线 加顶线 加删除线 |
| text-indent | 长度/百分比 | 首行缩进 |
| line-height | 像素/数字/百分比 | 行高 |
| text-space | pre-wrap | 保留空白符、换行符、自动换行 |
| text-transform |
pre-line none capitalize uppercase lowercase |
保留换行符、自动换行、合并空白符 正常显示可以包含大，小字符 字符串第一个字符大写 设置大写字符 设置小写字符 |
| vertical-align |
sub super top middle bottom |
设置文字为下标 设置文字为上标 元件往上端靠齐 设置文字是在中线位置 元件往下端靠齐 |
单行显示，省略结尾：overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
背景
| 属性名称 | 属性值 | 说明 |
| background-attachment |
scroll fixed |
设置背景图像会随视窗滚动条的移动而移动 设置背景图像不会随视窗滚动条的移动而移动 |
| background-color |
十六/英文/三原色 transparent |
颜色 透明 |
| background-image |
URL none |
背景图片//background-image:url("bg.jpg") 不设置背景图片 |
| background-position | top left/像素/百分比 | 设置背景图案出现方位 |
| background-repeat |
repeat repeat-x repeat-y no-repeat |
将背景图案填满整个背景 将背景图案在水平方向添满 将背景图案在垂直方向添满 图案只出现一次 |
背景图案简化方案：background:颜色 背景图片 repeat attachment position
列表的使用
| 属性名称 | 属性值 | 说明 |
| list-style-type |
none disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha |
无符号 实体的小圆点 空心的小圆点 实心的小方块 1,2,3... i,ii,iii... I,II,III... a,b,c,d,e... A,B,C,D,E... |
| list-style-position |
inside outside |
清单项目较往右移 清单项目正常显示 |
| list-style-image |
URL none |
list-style-image:url(img.gif) 不会显示任何图象 |
清单的简化设置：list-style:circle inside url
边框
| 属性名称 | 属性值 | 说明 |
| border-color | 十六/英文/三原色 | 颜色//border-color:red green blue(上为红色、左右为绿色、下为蓝色) |
| border-style |
none dotted dashed solid double |
不显示边线 点线 虚线 实线 双线 |
| border-width | 长度 | border-0.2cm 0.3cm 0.4cm 0.5cm;border-1 2 3 4; |
简化方案：border:形态 长度 颜色 例如 border:1px solid black;
边界
padding
| 属性名称 | 属性值 | 说明 |
| padding-bottom | 长度/百分比 | 元件下端边线的空隙 |
| padding-left | 长度/百分比 | 元件左端边线的空隙 |
| padding-right | 长度/百分比 | 元件右端边线的空隙 |
| padding-top | 长度/百分比 | 元件上端边线的空隙 |
margin
| 属性名称 | 属性值 | 说明 |
| margin-bottom |
auto 长度/百分比 |
自动调整空隙 设置下端空隙 |
| margin-left |
auto 长度/百分比 |
自动调整空隙 设置左端空隙 |
|
margin-right |
auto 长度/百分比 |
自动调整空隙 设置右端空隙 |
| margin-top |
auto 长度/百分比 |
自动调整空隙 设置上端空隙 |
区块
| 属性名称 | 属性值 | 说明 |
| width | 像素/百分比/auto | 区块的宽度 |
| height | 像素/百分比/auto | 区块的高度 |
| min-height | 像素/百分比/auto | 区块最小高度 |
| max-height | 像素/百分比/auto | 区块最大高度 |
| min-width | 像素/百分比/auto | 区块最小宽度 |
| max-width | 像素/百分比/auto | 区块最大宽度 |
浮动
| 属性名称 | 属性值 | 说明 |
| float |
none left right |
正常显示 左浮动 右浮动 |
| clear |
none left right both |
允许两边浮动 不允许左边浮动 不允许右边浮动 不允许两边浮动 |
定位
| 属性名称 | 属性值 | 说明 |
| position |
relative absolute static |
设置区块基准点为左上角 设置网页的为基准点左上角 无设置 |
| z-index |
auto 数字 |
自动调整高度 数字越大越往上层 |
溢出
| 属性名称 | 属性值 | 说明 |
| overflow |
visible auto hidden scroll/overflow-x/overflow-y |
不剪切内容也不添加滚动条 在必需时对象内容才会被裁切或显示滚动条 不显示超过对象尺寸的内容 总是显示滚动条 |
滚动条
| 属性名称 | 属性值 | 说明 |
| scrollbar-3dlight-color | 颜色/十六进制 | 滚动条亮边框 |
| scrollbar-highlight-color | 颜色/十六进制 | 滚动条 3D 界面亮边 |
| scrollbar-face-color | 颜色/十六进制 | 滚动条 3D 表面 |
| scrollbar-arrow-color | 颜色/十六进制 | 滚动条方向箭头 |
| scrollbar-shadow-color | 颜色/十六进制 | 滚动条 3D 暗边 |
| scrollbar-darkshadow-color | 颜色/十六进制 | 滚动条暗边框 |
| scrollbar-base-color | 颜色/十六进制 | 滚动条基准颜色 |
| scrollbar-track-color | 颜色/十六进制 | 滚动条的拖动区域 |
超链接伪类
a:link 表示该超链接文字尚未被点选
a:visited 表示该超链接文字已被点选过
a:active 表示该超链接文字正被点选,但未被放开
a:hover 表示当鼠标停留在文字上
光标
| 属性名称 | 属性值 | 说明 |
| cursor |
auto crosshair default hand/pointer move text wait help |
光标是手指 光标是十子形 光标是箭头 光标是手形 光标是移动的符号 输入文字的符号 漏斗 帮助 |
缩放
| 属性名称 | 属性值 | 说明 |
| zoom |
normal 百分数/浮点实数 |
使用对象的实际尺寸 放大缩小 |