一些常用的CSS属性[1272阅/0回]
ＩＤ：1 , 等级：大虾
〓字体属性〓[hr]
font: ①italic ②bold ③105% ④small-caps ⑤"Times New Roman",Georgia,Serif;
说明:
①italic /*字体风格为斜体。normal:默认值，oblique:倾斜文字*/
②bold /*字体浓淡为粗体。normal:默认值，bold:粗体，bolder:更粗，lighter:更细，100~900: 定义由粗到细的字符，400等同于 normal，而700等同于 bold*/
③105% /*字体尺寸为默认的105%。通过百分比或12px等控制，由实际情况而定*/
④small-caps /*字体为小型大写字母。若要正常值删除该部分即可*/
⑤"Times New Roman",Georgia,Serif /*字体系列。通常字体系列名称有"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。提示：建议使用多个，浏览器将使用其可识别的第一个值。使用逗号分割每个值，并始终提供一个通常字体系列作为最后的选择*/
color:①white;
说明:
①white /*字体颜色。可用颜色代码如#000或#668547或red等*/
〓背景属性〓[hr]
background:①url(背景图地址) ②no-repeat ③scroll ④right ⑤bottom ⑥#002255; background-size:⑦cover;
说明:
①url(背景图地址) /*加背景图*/
②no-repeat /*背景图片重复属性。默认为图片既横向重复，又竖向重复，repeat-x:背景图片横向重复，repeat-y:背景图片竖向重复，no-repeat:背景图片不重复*/
③scroll /*背景图随网页下拉而滚动*/
④right /*背景图水平位置居右。left:居左，居中:center，也可以用1%-1008%表示与左端距离大小*/
⑤bottom /*背景图垂直位置位于底部。top:居顶部，center:居中，也可用1%-100%表示与顶端距离大小*/
⑥#002255/*背景颜色*/
⑦cover /*背景图尺寸。cover:保持原图宽高比例，缩放到正好完全覆盖定义区域 contain:保持原图宽高比例，缩放到宽度或高度正好适应指定区域，或用像素如320px 480px或百分比如80% 90%表示*/
〓边框属性〓[hr]
border:①5px ②solid ③red;
说明:
①5px /*边框宽度*/
②solid /*边框样式*/
③red /*边框颜色*/
添加文字下划线(即下边框)
border-bottom:2px solid red;
说明: 同上(border部分)
边框宽度(可单独设置各框宽度)
border-width:2px 3px 0 5px;
说明: /*分别为上右下左框*/
边框颜色(可单独设置各框颜色)
border-color:red white green #660022;
说明: /*分别为上右下左框*/
〓内边距属性〓[hr]
padding:10px 5px 15px 20px;
说明:
/*分别为上右下左内边距*/
〓外边距属性〓[hr]
margin:10px 5px 15px 20px;
说明:
/*分别为上右下左外边距*/
〓文本属性〓[hr]
文本对齐
text-align: ①center;
说明:
①center /*文字居中。left:把文本排列到左边，默认值：由浏览器决定，right 把文本排列到右边，justify 实现两端对齐文本效果。*/
规定当文本溢出包含元素时发生的事情
text-overflow:
①ellipsis;
说明:
①ellipsis /*clip:修剪文本，ellipsis:显示省略符号来代表被修剪的文本，string:使用给定的字符串来代表被修剪的文本*/
文本文字阴影[hr]
text-shadow: ①5px ②5px ③6px ④#FF0000;
说明:
①5px /*水平阴影的位置，允许负值*/
②5px /*垂直阴影的位置，允许负值*/
③6px /*模糊的距离*/
④#FF0000 /*阴影的颜色*/
允许长单词换行到下一行[hr]
word-wrap: ①break-word;
说明:
①break-word /*允许长单词换行到下一行*/
〓垂直对齐属性〓[hr]
vertical-align:①text-top;
说明:
①text-top /*把元素的顶端与父元素字体的顶端对齐。baseline:默认，元素放置在父元素的基线上，sub:垂直对齐文本的下标，super:垂直对齐文本的上标，top:把元素的顶端与行中最高元素的顶端对齐，middle:把此元素放置在父元素的中部，bottom:把元素的顶端与行中最低的元素的顶端对齐，
text-bottom:把元素的底端与父元素字体的底端对齐，
%:使用 "line-height" 属性的百分比值来排列此元素，允许使用负值。*/
〓圆角属性〓[hr]
border-radius:①1px 1px 5px 5px;
说明:
①1px 1px 5px 5px /*分别为左上角，右上角，右下角，左下角*/
建议也加上下面两段，即复制上面那段在前面分别加上-moz-和-webkit-(如-moz-border-radius:1px 1px 5px 5px; -webkit-border-radius:1px 1px 5px 5px;)
〓阴影属性〓[hr]
box-shadow:①inset ②-2px ③2px ④10px ⑤#06c;
说明:
①inset /*阴影类型。默认为投影效果，inset:内阴影效果。*/
②-2px /*阴影水平偏移值(即控制左右阴影。正数值控制左边，负数值控制右边)*/
③2px/*垂直偏移值(即控制上下阴影。正数值控制上边，负数值控制下边)*/
④10px /*模糊值*/
⑤#06C /*阴影颜色*/;
建议也加上下面两段，即复制上面那段在前面分别加上-moz-和-webkit-(如-moz-box-shadow:inset -2px 2px 10px #06C; -webkit-box-shadow:inset -2px 2px 10px #06C;)
〓轮廓属性〓[hr]
outline:①2px ②black ③solid;
说明:
①2px /*轮廓宽度*/
②black /*轮廓颜色*/
③solid /*轮廓样式。边框线的类型有九个确定值:
none:无边框线，
dotted:由点组成虚线，
dashed:由短线组成的虚线，
solid:实线，
double:双线，
groove:3D沟槽状的边框，
ridge:3D脊状的边框，
inset:3D内嵌边框,颜色较深，
outset:3D外嵌边框,颜色较浅。*/
〓尺寸属性〓[hr]
height:102%; /*元素的高度*/
line-height:2px; /*行高*/
max-height:240px; /*元素的最大高度*/
max-width:320px; /*元素的最大宽度*/
min-height:100px; /*元素的最小高度*/
min-width:100px; /*元素的最小宽度*/
width:240px; /*元素的宽度*/
生成框属性[hr]
display: ①none;
说明:
①none /*此元素不会被显示*/
②block /*此元素将显示为块级元素，前后会带有换行符*/
③inline /*默认。此元素会被显示为内联元素，元素前后没有换行符*/
④inline-block /*行内块元素*/
⑤list-item /*此元素会作为列表显示。*/
⑥run-in /*此元素会根据上下文作为块级元素或内联元素显示*/
⑦table /*此元素会作为块级表格来显示(类似<table>)，表格前后带有换行符*/
⑧inline-table /*此元素会作为内联表格来显示(类似<table>)，表格前后没有换行符*/
⑨table-row-group /*此元素会作为一个或多个行的分组来显示(类似<tbody>)*/
⑩table-header-group /*此元素会作为一个或多个行的分组来显示(类似<thead>)*/
①①table-footer-group /*此元素会作为一个或多个行的分组来显示(类似<tfoot>)*/
①②table-row /*此元素会作为一个表格行显示(类似<tr>)*/
①③table-column-group /*此元素会作为一个或多个列的分组来显示(类似<colgroup>)*/
①④table-column /*此元素会作为一个单元格列显示(类似<col>)*/
①⑤table-cell /*此元素会作为一个表格单元格显示(类似<td>和<th>)*/
①⑥table-caption /*此元素会作为一个表格标题显示(类似<caption>)*/
⊙伪元素[hr]
在某区域前面添加内容
①#whole_body:before{content:②"要显示的文字";}
说明:
①#whole_body /*填要定义的区域*/
②填显示文字
在某区域后面添加内容
.file_list li:after{content:"显示文字";}
说明:同上
用于给文本的首行设置特殊样式[hr]
.file_list:first-line{填通用代码}
伪类在元素获得焦点时向元素添加特殊的样式
a:focus{通用代码}
font: ①italic ②bold ③105% ④small-caps ⑤"Times New Roman",Georgia,Serif;
说明:
①italic /*字体风格为斜体。normal:默认值，oblique:倾斜文字*/
②bold /*字体浓淡为粗体。normal:默认值，bold:粗体，bolder:更粗，lighter:更细，100~900: 定义由粗到细的字符，400等同于 normal，而700等同于 bold*/
③105% /*字体尺寸为默认的105%。通过百分比或12px等控制，由实际情况而定*/
④small-caps /*字体为小型大写字母。若要正常值删除该部分即可*/
⑤"Times New Roman",Georgia,Serif /*字体系列。通常字体系列名称有"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。提示：建议使用多个，浏览器将使用其可识别的第一个值。使用逗号分割每个值，并始终提供一个通常字体系列作为最后的选择*/
color:①white;
说明:
①white /*字体颜色。可用颜色代码如#000或#668547或red等*/
〓背景属性〓[hr]
background:①url(背景图地址) ②no-repeat ③scroll ④right ⑤bottom ⑥#002255; background-size:⑦cover;
说明:
①url(背景图地址) /*加背景图*/
②no-repeat /*背景图片重复属性。默认为图片既横向重复，又竖向重复，repeat-x:背景图片横向重复，repeat-y:背景图片竖向重复，no-repeat:背景图片不重复*/
③scroll /*背景图随网页下拉而滚动*/
④right /*背景图水平位置居右。left:居左，居中:center，也可以用1%-1008%表示与左端距离大小*/
⑤bottom /*背景图垂直位置位于底部。top:居顶部，center:居中，也可用1%-100%表示与顶端距离大小*/
⑥#002255/*背景颜色*/
⑦cover /*背景图尺寸。cover:保持原图宽高比例，缩放到正好完全覆盖定义区域 contain:保持原图宽高比例，缩放到宽度或高度正好适应指定区域，或用像素如320px 480px或百分比如80% 90%表示*/
〓边框属性〓[hr]
border:①5px ②solid ③red;
说明:
①5px /*边框宽度*/
②solid /*边框样式*/
③red /*边框颜色*/
添加文字下划线(即下边框)
border-bottom:2px solid red;
说明: 同上(border部分)
边框宽度(可单独设置各框宽度)
border-width:2px 3px 0 5px;
说明: /*分别为上右下左框*/
边框颜色(可单独设置各框颜色)
border-color:red white green #660022;
说明: /*分别为上右下左框*/
〓内边距属性〓[hr]
padding:10px 5px 15px 20px;
说明:
/*分别为上右下左内边距*/
〓外边距属性〓[hr]
margin:10px 5px 15px 20px;
说明:
/*分别为上右下左外边距*/
〓文本属性〓[hr]
文本对齐
text-align: ①center;
说明:
①center /*文字居中。left:把文本排列到左边，默认值：由浏览器决定，right 把文本排列到右边，justify 实现两端对齐文本效果。*/
规定当文本溢出包含元素时发生的事情
text-overflow:
①ellipsis;
说明:
①ellipsis /*clip:修剪文本，ellipsis:显示省略符号来代表被修剪的文本，string:使用给定的字符串来代表被修剪的文本*/
文本文字阴影[hr]
text-shadow: ①5px ②5px ③6px ④#FF0000;
说明:
①5px /*水平阴影的位置，允许负值*/
②5px /*垂直阴影的位置，允许负值*/
③6px /*模糊的距离*/
④#FF0000 /*阴影的颜色*/
允许长单词换行到下一行[hr]
word-wrap: ①break-word;
说明:
①break-word /*允许长单词换行到下一行*/
〓垂直对齐属性〓[hr]
vertical-align:①text-top;
说明:
①text-top /*把元素的顶端与父元素字体的顶端对齐。baseline:默认，元素放置在父元素的基线上，sub:垂直对齐文本的下标，super:垂直对齐文本的上标，top:把元素的顶端与行中最高元素的顶端对齐，middle:把此元素放置在父元素的中部，bottom:把元素的顶端与行中最低的元素的顶端对齐，
text-bottom:把元素的底端与父元素字体的底端对齐，
%:使用 "line-height" 属性的百分比值来排列此元素，允许使用负值。*/
〓圆角属性〓[hr]
border-radius:①1px 1px 5px 5px;
说明:
①1px 1px 5px 5px /*分别为左上角，右上角，右下角，左下角*/
建议也加上下面两段，即复制上面那段在前面分别加上-moz-和-webkit-(如-moz-border-radius:1px 1px 5px 5px; -webkit-border-radius:1px 1px 5px 5px;)
〓阴影属性〓[hr]
box-shadow:①inset ②-2px ③2px ④10px ⑤#06c;
说明:
①inset /*阴影类型。默认为投影效果，inset:内阴影效果。*/
②-2px /*阴影水平偏移值(即控制左右阴影。正数值控制左边，负数值控制右边)*/
③2px/*垂直偏移值(即控制上下阴影。正数值控制上边，负数值控制下边)*/
④10px /*模糊值*/
⑤#06C /*阴影颜色*/;
建议也加上下面两段，即复制上面那段在前面分别加上-moz-和-webkit-(如-moz-box-shadow:inset -2px 2px 10px #06C; -webkit-box-shadow:inset -2px 2px 10px #06C;)
〓轮廓属性〓[hr]
outline:①2px ②black ③solid;
说明:
①2px /*轮廓宽度*/
②black /*轮廓颜色*/
③solid /*轮廓样式。边框线的类型有九个确定值:
none:无边框线，
dotted:由点组成虚线，
dashed:由短线组成的虚线，
solid:实线，
double:双线，
groove:3D沟槽状的边框，
ridge:3D脊状的边框，
inset:3D内嵌边框,颜色较深，
outset:3D外嵌边框,颜色较浅。*/
〓尺寸属性〓[hr]
height:102%; /*元素的高度*/
line-height:2px; /*行高*/
max-height:240px; /*元素的最大高度*/
max-width:320px; /*元素的最大宽度*/
min-height:100px; /*元素的最小高度*/
min-width:100px; /*元素的最小宽度*/
width:240px; /*元素的宽度*/
生成框属性[hr]
display: ①none;
说明:
①none /*此元素不会被显示*/
②block /*此元素将显示为块级元素，前后会带有换行符*/
③inline /*默认。此元素会被显示为内联元素，元素前后没有换行符*/
④inline-block /*行内块元素*/
⑤list-item /*此元素会作为列表显示。*/
⑥run-in /*此元素会根据上下文作为块级元素或内联元素显示*/
⑦table /*此元素会作为块级表格来显示(类似<table>)，表格前后带有换行符*/
⑧inline-table /*此元素会作为内联表格来显示(类似<table>)，表格前后没有换行符*/
⑨table-row-group /*此元素会作为一个或多个行的分组来显示(类似<tbody>)*/
⑩table-header-group /*此元素会作为一个或多个行的分组来显示(类似<thead>)*/
①①table-footer-group /*此元素会作为一个或多个行的分组来显示(类似<tfoot>)*/
①②table-row /*此元素会作为一个表格行显示(类似<tr>)*/
①③table-column-group /*此元素会作为一个或多个列的分组来显示(类似<colgroup>)*/
①④table-column /*此元素会作为一个单元格列显示(类似<col>)*/
①⑤table-cell /*此元素会作为一个表格单元格显示(类似<td>和<th>)*/
①⑥table-caption /*此元素会作为一个表格标题显示(类似<caption>)*/
⊙伪元素[hr]
在某区域前面添加内容
①#whole_body:before{content:②"要显示的文字";}
说明:
①#whole_body /*填要定义的区域*/
②填显示文字
在某区域后面添加内容
.file_list li:after{content:"显示文字";}
说明:同上
用于给文本的首行设置特殊样式[hr]
.file_list:first-line{填通用代码}
伪类在元素获得焦点时向元素添加特殊的样式
a:focus{通用代码}
WAP开源论坛