- 文字属性
- 边框
- 边界
- 列表符号属性
- 背景样式
- 连接属性
- a
- 鼠标光标样式
- 边框基本样式属性
- 边框倒角
- 边框阴影：(元素阴影，盒子阴影)
- 边框轮廓
- 表单运用
文字属性
控制字体：如字体大小、字体系列、字体加粗等
设置文本格式：如字体颜色、文本排列、文本缩进等
建议：使用文本格式化相关的样式，取代加粗<b>,倾斜<i>等html元素
[ 控制字体 ]
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
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; /*英文小写*/
[ 设置文本格式 ]
color : #999999; /*文字颜色*/
letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/
text-align:right; /*文字右对齐*/
text-align:left; /*文字左对齐*/
text-align:center; /*文字居中对齐*/
text-align:justify; /*文字分散对齐*/
vertical-align属性
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/
边框
padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白
【简写】
padding:value; 四个方向内边距
padding:v1 v2; 上下 左右
padding:v1 v2 v3; 上 左右 下
padding:v1 v2 v3 v4; 上 右 下 左
边界
margin-top:10px; /*上边界*/
margin-right:10px; /*右边界值*/
margin-bottom:10px; /*下边界值*/
margin-left:10px; /*左边界值*/
【简写】
margin:value; 四个方向内边距
margin:v1 v2; 上下 左右
margin:v1 v2 v3; 上 左右 下
margin:v1 v2 v3 v4; 上 右 下 左
列表符号属性
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; /*缩进*/
背景样式
background-color:#F5E2EC; /*背景颜色*/
background:transparent; /*透视背景*/
background-image : url(/image/1.jpg); /*背景图片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重复排列-网页默认*/
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 : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/
连接属性
a /*所有超链接*/
a:link /*超链接文字格式*/
a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/
【鼠标光标样式】
cursor: hand /*链接手指*/
cursor:crosshair /*十字体*/
cursor:s-resize /*箭头朝*/
cursor:move /*十字箭头*/
cursor:move /*箭头朝右*/
cursor:help /*加一问号*/
cursor:w-resize /*箭头朝左*/
cursor:n-resize /*箭头朝上*/
cursor:ne-resize /*箭头朝右上*/
cursor:nw-resize /*箭头朝左上*/
cursor:text /*文字I型*/
cursor:se-resize /*箭头斜右下*/
cursor:sw-resize /*箭头斜左下*/
cursor:wait /*漏斗*/
p {cursor:url(“光标文件名.cur”),text;} /*光标图案(IE6) */
边框基本样式属性
border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/
border-right : 1px solid #6699cc; /*右框线*/
border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*设置上框线top宽度*/
border-top-style : solid/*设置上框线top样式*/
【简写方式】
四个边框一次性定义:border:width style color;
【width】
边框宽度，以px为单位
【style】
边框样式
solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
groove /*立体内凸框*/
ridge /*立体浮雕框*/
inset /*凹框*/
outset /*凸框*/
【color】
颜色，合法的颜色值
也可取值为 transparent（透明）
边框倒角
将 元素 四个角的 直角倒换成圆角
【语法】
属性：border-radius
取值：px/百分比
取一个值：表示的四个角的半径相同
... ...
取四个值：表示从左上角开始，按顺时针方向设置四个角
单独定义:
border-bottom-right-radius
border-bottom-left-radius
border-top-right-radius
border-top-left-radius
边框阴影：(元素阴影，盒子阴影)
属性:box-shadow
值：
（1）h-shadow
阴影的水平偏移距离,必须的
取值为+，阴影右偏移
取值为-，阴影左偏移
（2）v-shadow
阴影的垂直偏移距离,必须的
取值为+，阴影下偏移
取值为-，阴影上偏移
（3）blur
可选，模糊距离
（4）spread
可选，阴影的尺寸大小
（5）color
可选，阴影的颜色
（6）inset
将外部阴影(outset)默认值改为内部阴影
【综合属性】
box-shadow：h-shadow、v-shadow、blur、color
如：box-shadow：0px 0px 1px #ddd;
边框轮廓
轮廓是绘制于元素周围的一条线，位于边框的外围
属性：outline:width style color
outline-width：轮廓的宽度
outline-style：轮廓的样式
outline-color：轮廓的颜色
如：outline:none; 或 outlint:0;
表单运用
CSS样式用户留言表单美化
文字方块
按钮
复选框
选择钮
多行文字方块
下拉式菜单 选项1选项2
网友评论