首页 > 代码库 > CSS
CSS
引入
<link rel=”stylesheet” type=”text/css” href="http://www.mamicode.com/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 保留空白符、换行符、自动换行
pre-line 保留换行符、自动换行、合并空白符
text-transform 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 背景图片//background-image:url("bg.jpg")
none 不设置背景图片
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 1,2,3...
lower-roman i,ii,iii...
upper-roman I,II,III...
lower-alpha a,b,c,d,e...
upper-alpha A,B,C,D,E...
list-style-position inside 清单项目较往右移。
outside 清单项目正常显示。
list-style-image URL list-style-image:url(img.gif)
none 不会显示任何图象
清单的简化设置：list-style:circle inside url
边框
属性名称 属性值 说明
border-color 十六/英文/三原色 颜色//border-color:red green blue(上为红色、左右为绿色、下为蓝色)
border-style none 不显示边线
dotted 点线
dashed 虚线
solid 实线
double 双线
border-width 长度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;border-width: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 使用对象的实际尺寸
百分数/浮点实数 放大缩小
CSS