一、css文字属性
color:#999999;
/ 文字颜色 /
font-family:宋体,sans-serif;
/ 文字宋体 /
font-size:9pt;
/ 文字大小 /
font-style:itelic;
/ 文字斜体 /
font-variant:small-caos;
/ 小字体 /
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: top;
/ 垂直向上对齐 /
vertical-align: bottom;
/ 垂直向下对齐 /
vertical-align: middle;
/ 垂直居中对齐 /
vertical-align: text-top;
/ 文字垂直向上对齐 /
vertical-align: text-bottom;
/ 文字垂直向下对齐 /
二、css边框空白
padding-top: 10rpx;
/ 上边框留白 /
padding-right: 10rpx;
/ 右边框留白 /
padding-bottom: 10rpx;
/ 下边框留白 /
padding-left: 10rpx;
/ 左边框留白 /
三、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-position: outside;
/ 凸排 /
list-style-position: inside;
/ 缩进 /
四、css背景样式
background-color: #f5e2ec;
/ 背景颜色 /
background: transparent;
/ 透视背景 /
background-image: url();
/ 背景图片 /
background-attachment: fixed;
/ 浮水印固定背景 /
background-repeat: no-repeat;
/ 不重复排列 /
background-repeat: repeat-x;
/ 在x轴上重复排列 /
background-repeat: repeat-y;
/ 在y轴上重复排列 /
指定背景位置
background-position: 90% 90%;
/ 背景图片在x与y轴的位置 /
background-position: top;
/ 向上对齐 /
background-position: bottom;
/ 向下对齐 /
background-position: left;
/ 向左对齐 /
background-position: right;
/ 向右对齐 /
background-position: center;
/ 居中对齐 /
五、css链接属性
a
/ 所有超链接 /
a:link
/ 超链接文字格式 /
a:visited
/ 浏览过的链接文字格式 /
v:active
/ 按下链接的格式 /
a:hover
/ 鼠标转到链接 /
鼠标光标样式
链接手指 CURSOR:hand
十字体 cursor:crosshair
箭头朝下 cursor:s-resize
十字箭头 cursor:move
箭头朝左 cursor:w-resize
加一问号 cursor:help
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文字I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
光标图案(E6) p {cursor:url("光标文件名.cur"),text}
六、css框线一览表
border-top: 1px solid #69c;
/ 上框线 /
border-bottom: 1px solid #69c;
/ 下框线 /
border-left: 1px solid #69c;
/ 左框线 /
border-right: 1px solid #69c;
/ 右框线 /
以上是建议书写方式,但也可以使用常规的方式,如下:
border-top-color: #369;
/ 设置上框线top颜色 /
border-top-width: 1rpx;
/ 设置上框线top宽度 /
border-top-style: solid;
/ 设置上框线top样式 /
其他框线样式
solid
/ 实线框 /
dotted
/ 虚线框 /
double
/ 双线框 /
groove
/ 立体内凸框 /
ridge
/ 立体浮雕框 /
inset
/ 凹框 /
outset
/ 凸框 /
七、css表单运用
文字方块
按钮
复选框
选择钮
多行文字方块
下拉式菜单 选项1选项2
八、css边界样式
margin-top: 10rpx;
/ 上边界 /
margin-right: 10rpx;
/ 右边界 /
margin-bottom: 10rpx;
/ 下边界 /
margin-left: 10rpx;
/ 左边界 /
网友评论