css属性

字 体 属 性

字体属性	描      述
font-family	用一个指定的字体名或一个种类的字体族科
font-size	字体显示的大小
font-style	以3个方法其中的一个来定义显示的字体：normal（普通），italic（斜体）或oblique（倾斜）
font-weight	以bold为值可以使字体加粗
font-variant	设置英文大小写转换
	font{font-family: "宋体"; font-size: 12px;  font-style: normal; line-height: 20px;font-weight: bold; font-variant: normal; text-transform: capitalize; color: #666666;  text-decoration: underline;}

文 本 属 性

文本属性	描        述
letter-spacing	定义一个附加在字符之间的间隔数量
word-spacing	定义一个附加在单词之间的间隔数量
text-decoration	文本修饰属性允许通过5个属性中的一个来修饰文本
text-align	设置文本的水平对齐方式，包括左对齐、右对齐、居中、两端对齐
text-indent	文字的首行缩进
line-height	行高属性接受一个控制文本基线之间的间隔的值
text-transform	控制英文文字大小写
	font{letter-spacing: 2em; text-align: left; text-indent: 10px; vertical-align: middle; word-spacing: 5em; white-space: normal;}

边  框  属  性

边  框  属  性	描       述
border	边框
border-top	上边框
border-left	左边框
border-right	右边框
border-bottom	下边框
border-color	边框颜色
border-style	边框样式
border-width	边框宽度
border-top-color	上边框颜色
border-left-color	左边框颜色
border-right-color	右边框颜色
border-bottom-color	下边框颜色
border-top-style	上边框样式
border-left-style	下边框样式
border-right--style	右边框样式
border-bottom-style	下边框样式
border-top-width	上边框宽度
border-left-width	下边框宽度
border-right-width	右边框宽度
border-bottom-width	下边框宽度
	border{ border-top-width: 1px; border-top-style: dotted; border-top-color: #FF0000;}

边框属性设置值

边框样式属性值	描       述
none	无边框
dotted	边框由点组成
dash	边框由短线组成
solid	边框是实线
double	边框是双实线
groove	边框带有立体感的沟槽
ridge	边框成脊槽
inset	边框内嵌一个立体边框
outset	边框外嵌一个立体边框

定 位 属 性

定位属性	描       述
position	absolute（绝对定位）relative（相对定位）
top	层距离顶点纵坐标的距离
left	层距离顶点横坐标的距离
width	层的宽度
height	层的高度
z-index	决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素
clip	限定只显示裁切出来的区域。裁切出来的区域为矩形。只要设定两个点即可。一个是矩形左上角的顶点，由top和right两项的设置完成。另一个是右下脚的顶点，由bottom和right两项的设置完成
overflow	当层内的内容超出层所能容纳的范围时，Visible：无论层的大小，内容都会显示出来；Hidden：会隐藏超出层的大小的内容；scrol：不管内容是否超出层的范围，选中此项都会为层添加滚动条；auto：只在内容超出层的范围时才显示滚动条
visibility	这一项是针对嵌套层的设置，嵌套层插入在其他层中的层，分为嵌套的层（子层）和被嵌套的层（父层）。Inherit：子层继承父层的可见性，父层可见，子层也可见；父层不可见，子层也不可见。Visible：无论父层可见与否，子层都可见。Hidden：无论父层可见与否，子层都隐蔽。

区  块  属  性

区块属性	描       述
width	设定对象的宽度
height	设定对象的高度
float	让文字环绕在一个元素的四周
clear	指定在某一个元素的某一边是否允许有环绕的文字或对象
padding	决定了究竟在边框与内容之间应该插入多少空间距离。它有四个属性，分别是：top（上）、right（右） 、bottom（下）、left（左）分别用于设定上下左右的填充距。
margin	决定了内容区块距离外边元素有多少空间距离。分别是：top（上）、right（右） 、bottom（下）、left（左）分别用于设定上下左右的填充距。
	#alignLeft{float:left;margin:0;padding:0;width:100px;height:100px;clear:both}

列  表  属  性

列表属性	描      述
list-style-type	设定引导列表项目的符号类型
list-style-image	选择图象作为项目的引导符号 li{ list-style-image:url(14-25.gif)}
list-stle-position	决定列表项目所缩进的程度

列表符号类型属性值

列表符号类型属性值	描      述
disc	在文本行前面加“●”实心圆
circle	在文本行前面加“○”空心圆
spuare	在文本行前面加“■”实心方块
decimal	在文本行前面加普通的阿拉伯数字
lower-roman	在文本行前面加小写罗马数字
upper-roman	在文本行前面加大写罗马数字
lower-alpha	在文本行前面加小写英文字母
upper-alpha	在文本行前面加大写英文字母
none	不显示任何项目符号或编号
	#alignLeft li { list-style-image: url(images/arrow1.gif); list-style-type: none;list-style-position: outside;}

列表位置属性值

列表位置属性值	描         述
outside	列表贴近左侧边框
inside	列表缩进

 

 

 

 

 

 

/*这是注释的写法*/

body {

/*文字属性*/

font-size:12px;/*文字大小*/   color:#CCCCCC;/*文字颜色*/

font-family:Arial, Helvetica, sans-serif;/*设置字体*/

font-weight:bold;/*文字加粗*/

text-align:center;/*DIV标签内部水平方向居中center或居左left右right*/

text-decoration:underline;/*下划线 无下划线为none*/

line-height:150%;/*行高也可以是像素px*/

/*背景属性*/

/*背景颜色*/

background-image:url(images/test.gif);/*背景图片*/

background-repeat:no-repeat;/*背景图片不平铺*/

background-position:5px 10px;/*背景图片的位置，第一个为横坐标，第二个为纵坐标*/

/*填充及边界属性*/

height: 100px; width: 100px;

margin:10px 0 5px 0;/*容器外部边距 顺序为上 右 下 左,为0时可以不用单位*/

margin-top:10px; /*单独一项的写法 */

padding:10px 0 5px 0;/*容器内部边距，顺序为上 右 下 左,为0时可以不用单位*/

float:left; /*1.在做列的结构才用 left  right 和*/

/*列表属性*/

list-style-type:none;/*消除ul无序列表li前面的小黑点*/

display:block;/*以块形式显示，通常用于链接中实现鼠标划过的效果*/

display:inline;/*当用了float时做靠边的DIV外边距出现翻倍情况时才使用，针对的是IE6的一个bug*/

/*边框属性*/

border:1px solid #ccc;/*表格、DIV、LI、A等容器的边框属性，虚线是dashed*/

overflow:hidden;/*溢出部分隐藏*/ overflow:auto;/*自动判断容器高度，从而选择自动出现/隐藏垂直滚动条*/

/*特殊属性，不需要强行掌握*/

/*文字竖排：*/writing-mode: tb-rl;

/*预定格式*/

/*字符间距*/ letter-spacing:5px;

/*单词间距*/ word-spacing:5px;

}

定位属性	描       述
position	absolute（绝对定位）relative（相对定位）
top	层距离顶点纵坐标的距离
left	层距离顶点横坐标的距离
width	层的宽度
height	层的高度
z-index	决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素
clip	限定只显示裁切出来的区域。裁切出来的区域为矩形。只要设定两个点即可。一个是矩形左上角的顶点，由top和right两项的设置完成。另一个是右下脚的顶点，由bottom和right两项的设置完成
overflow	当层内的内容超出层所能容纳的范围时，Visible：无论层的大小，内容都会显示出来；Hidden：会隐藏超出层的大小的内容；scrol：不管内容是否超出层的范围，选中此项都会为层添加滚动条；auto：只在内容超出层的范围时才显示滚动条
visibility	这一项是针对嵌套层的设置，嵌套层插入在其他层中的层，分为嵌套的层（子层）和被嵌套的层（父层）。Inherit：子层继承父层的可见性，父层可见，子层也可见；父层不可见，子层也不可见。Visible：无论父层可见与否，子层都可见。Hidden：无论父层可见与否，子层都隐蔽。css