字 体 属 性
字体属性 |
描 述 |
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 |