一些常用的CSS属性
2014-01-13 10:06:53 -0500
〓字体属性〓[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 /*此元素会作为块级表格来显示(类似
),表格前后带有换行符*/ ⑧inline-table /*此元素会作为内联表格来显示(类似
),表格前后没有换行符*/ ⑨table-row-group /*此元素会作为一个或多个行的分组来显示(类似
)*/ ⑩table-header-group /*此元素会作为一个或多个行的分组来显示(类似
)*/ ①①table-footer-group /*此元素会作为一个或多个行的分组来显示(类似
)*/ ①②table-row /*此元素会作为一个表格行显示(类似
)*/ ①③table-column-group /*此元素会作为一个或多个列的分组来显示(类似
)*/ ①④table-column /*此元素会作为一个单元格列显示(类似
)*/ ①⑤table-cell /*此元素会作为一个表格单元格显示(类似
和
)*/ ①⑥table-caption /*此元素会作为一个表格标题显示(类似
)*/ ⊙伪元素[hr] 在某区域前面添加内容 ①#whole_body:before{content:②"要显示的文字";} 说明: ①#whole_body /*填要定义的区域*/ ②填显示文字 在某区域后面添加内容 .file_list li:after{content:"显示文字";} 说明:同上 用于给文本的首行设置特殊样式[hr] .file_list:first-line{填通用代码} 伪类在元素获得焦点时向元素添加特殊的样式 a:focus{通用代码}
«Newer
Older»
Comment:
Name:
Back to home
Subscribe
|
Register
|
Login
|
N