《自己总结的css》由会员分享，可在线阅读，更多相关《自己总结的css（15页珍藏版）》请在金锄头文库上搜索。
1、CSS的应用1、 长度单位类型单位含义示例相对长度px像素，根据显示设备的分辨率而确定的一个长度单位，显然，分辨率都为800*600的17寸显示器和52寸投影中，像素为100*80的绝对长度是不一样的，但同一显示设备中px值是绝对的。pfont-size:18px;将字号设置为18像素。em以目前字符高度为单位。p text-indent:2em段落前空两个字符。%表示长度为参考标签的百分比，前面可以加“+”或“-”两个符号，如果参考对象没有确定值，则为标准值。tablewidth:80%;表示表格占父容器宽度的80%。绝对长度in英寸，1 in = 2.54 cm，非国际单位，平时使用极少。
2、pfline-height:1in;行高为1英寸。cm厘米，国际标准单位，使用较少。mm毫米，国际标准单位，使用较少。pt点数，1 pt = 1 / 72 in，基本的显示单位，较少使用。pfont-size:11pt;将字号设置为11点。pc印刷单位，应用在印刷行业中，1pc=12pt。2、 颜色值表示方法含义示例颜色名使用系统预先定义好的颜色名称表示颜色，如red/green/blue分别表示红绿蓝。a:linkcolor:gray;活动超链接颜色为灰色十六进制使用十六进制表示颜色，格式为#RRGGBB，RR表示红色分量值，GG表示绿色分量值，BB表示蓝色分量值。font-color:#f
3、f0000字体颜色为红色background-color:#背景色为紫色RGB分量rgb(RR,GG,BB)，RR表示红色分量值，GG表示绿色分量值，BB表示蓝色分量值，可以用数值或百分比形式表示。color:rgb(255,0,0);红色color:rgb(80%,0,0);暗红3 、字体属性表示方法含义示例font-family所有字体hongenfont- style字体是否倾斜属性Normal italic obliquehongenhongenhongenfont- variant字体是否用大小写属性Normal small-caps bold bolder lithter等hong
4、enfont- size定义字体的大小属性Normal Absolute-size relative-size length percentageLeaf4、CSS中的文本属性属性名称属性值说明color十六进制、英文名称、三原色单位颜色letter-spacingNormal 正常显示长度 文本间隔设置字符间距，word-spacingnormal正常显示长度文本间隔设置文本中单词white-spacenormal文本自动处理换行pre换行和空白受保护nowrap强制在同一行显示text-alignleft（左）, right（右）, center（居中）, justify（两端对齐）设置对
5、象中首行文本的缩进值h1 h1 text-align: centertext-decorationunderline（下划线）, overline（底线）, line-through（线穿过）, blink（闪烁）文本修饰属性h3 text-decoration: underlinetext-indent长度首行缩进百分比同上设置首行缩进，p text-indent: 1.0 inline-height像素行高数字/百分比行高元素的行高divfont-size:10pt；line-height:2;text-transformnone正常显示可以包含大，小字符capitalize字符串第一个字
6、符大写uppercase设置大写字符lowercase设置小写字符用来设置文本格式转换，capitalize（首字母大写）, uppercase（大写）, lowercase（小写）和none（无） vertical-alignsub设置文字为下标super设置文字为上标top元件往上端靠齐middle设置文字是在中线位置bottom元件往下端靠齐设某对象相对其他文本的位置平方值：325、CSS中背景的使用属性名称属性值说明color定义前景色颜色color：rgb（204，82，28）background-attachmentscroll设置背景图像会随视窗滚动条的移动而移动fixed设置背
7、景图像不会随视窗滚动条的移动而移动背景是否随内容滚动background-color十六进background-color:#ff0000英文名称background-color:red三原色background-color:rgb(255,0,0)Transparent background-color:transparent;透明背景颜色background-imageURLbackground-image:url(bg.jpg)背景图片none不设置背景图片背景图像background-positiontop left设置背景图案出现在上左方。top center设置背景图案出现在上方中
8、间。top right设置背景图案出现在上右方。center left设置背景图案出现在中间左方。center center设置背景图案出现在IE中间。center right设置背景图案出现中间右方。bottom left设置背景图案出现在下左方。bottom设置背景图案出现在正下方。bottom right设置背景图案出现在下右方背景图片的位置background-repeatrepeat将背景图案填满整个背景repeat-x将背景图案在水平方向添满repeat-y将背景图案在垂直方向添满no-repeat图案只出现一次背景图片是否以如何平铺6、CSS中列表的使用属性名称属性值说明list
9、-style-typenone无符号disc 实体的小圆点。circle空心的小圆点。square实心的小方块。decimal1,2,3.lower-romani,ii,iii.upper-romanI,II,III.lower-alphaa,b,c,d,e.upper-alphaA,B,C,D,E.列表项所使用标记符号的样式list-style-positioninside清单项目较往右移outside清单项目正常显示列表项标记的放置位置list-style-imageURLlist-style-image:url(lmk.gif)none不会显示任何图象列表项标记的图像7、CSS中边框的使
10、用属性名称属性值说明border-color十六进制可依序设置上，右，下，左线英文名称border-color:red(四边均为红色)三原色border-color:red green(上下为红色，左右为绿色)border-color:red green blue(上为红色、左右为绿色、下为蓝色)border-color:red green blue yellow(上右下左分别为红绿蓝黄)border-stylenone不显示边线dotted点线dashed虚线solid实线double双线border-width长度 border-width:0.2cm 0.3cm 0.4cm 0.5cm
11、none border-width:1 2 3 48、CSS中边界的使用属性名称属性值说明padding-bottom长度/百分比元件下端边线的空隙padding-left长度/百分比元件左端边线的空隙padding-right长度/百分比元件右端边线的空隙padding-top长度/百分比元件上端边线的空隙简易写法：padding:10px padding:2px 4px padding:2px 6px 10px padding:1px 2px 3px 4pxmargin-bottomauto自动调整空隙长度/百分比设置下端空隙简化方案：margin:2px 4pxmargin:2px 6p
12、x 10pxmargin:1px 2px 3px 4px常用网页顶格设置：margin:0;margin-leftauto自动调整空隙长度/百分比设置左端空隙margin-rightauto自动调整空隙长度/百分比设置右端空隙margin-topauto自动调整空隙长度/百分比设置上端空隙9、CSS中区块的使用属性名称属性值说明 width像素/百分比区块的宽度auto height像素/百分比区块的高度automin-height像素像素/百分比区块最小高度automax-height像素像素/百分比区块最大高度automin-width像素像素/百分比区块最小宽度auto max-width像素像素/百分比区块最大宽度auto10、CSS中浮动的使用属性名称属性值说明floatnone正常显示left左浮动right右浮动clearnone允许两边浮动left不允许左边浮动right不允许右边浮动both不允许两边浮动11、CSS中定位的使用属性名称属性值说明positionrelative 设置区块基准点为左上角
