用户代理样式表(浏览器样式).doc

浏览器默认的样式各种HTML标签：h1-h6,p,ul,ol,dl即使没有给他们定义样式属性值，他们在浏览器中显示时，也会具有各种样式属性(主要是字体大小和各种间距)。这是因为浏览器和CSS给这些标签设置了默认的样式属性值，各种版本的浏览器和CSS可能略有差别，下面列举的是Firefox 1.5 和CSS 2.1(IE)设置的一些常见标签的默认样式属性值。HTML样式html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre display: block /*以上列表元素默认状态下一块状显示，未显示的将以内联元素显示，该列表针对HTML4版本，部分元素在XHTML1中将废弃*/li display: list-item /*默认以列表显示*/head display: none /*默认不显示*/table display: table /*默认为表格显示*/tr display: table-row /*默认为表格行显示*/thead display: table-header-group /*默认为表格头部分组显示*/tbody display: table-row-group /*默认为表格行分组显示*/tfoot display: table-footer-group /*默认为表格底部分组显示*/col display: table-column /*默认为表格列显示*/colgroup display: table-column-group /*默认为表格列分组显示*/td, th display: table-cell; /*默认为单元格显示*/caption display: table-caption /*默认为表格标题显示*/th font-weight: bolder; text-align: center /*默认为表格标题显示，呈现加粗居中状态*/caption text-align: center /*默认为表格标题显示，呈现居中状态*/body margin: 8px; line-height: 1.12 h1 font-size: 2em; margin: .67em 0 h2 font-size: 1.5em; margin: .75em 0 h3 font-size: 1.17em; margin: .83em 0 h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu margin: 1.12em 0 h5 font-size: .83em; margin: 1.5em 0 h6 font-size: .75em; margin: 1.67em 0 h1, h2, h3, h4, h5, h6, b,strong font-weight: bolder blockquote margin-left: 40px; margin-right: 40px i, cite, em,var, address font-style: italic pre, tt, code, kbd, samp font-family: monospace pre white-space: pre button, textarea, input, object, select display:inline-block; big font-size: 1.17em small, sub, sup font-size: .83em sub vertical-align: sub /*定义sub元素默认为下标显示*/sup vertical-align: super /*定义sub元素默认为上标显示*/table border-spacing: 2px; thead, tbody, tfoot vertical-align: middle /*定义表头、主体表、表脚元素默认为垂直对齐*/td, th vertical-align: inherit /*定义单元格、列标题默认为垂直对齐默认为继承*/s, strike, del text-decoration: line-through /*定义这些元素默认为删除线显示*/hr border: 1px inset /*定义分割线默认为1px宽的3D凹边效果*/ol, ul, dir, menu, dd margin-left: 40px ol list-style-type: decimal ol ul, ul ol, ul ul, ol ol margin-top: 0; margin-bottom: 0 u, ins text-decoration: underline br:before content: A /*定义换行元素的伪对象内容样式*/:before, :after white-space: pre-line /*定义伪对象空格字符的默认样式*/center text-align: center abbr, acronym font-variant: small-caps; letter-spacing: 0.1em :link, :visited text-decoration: underline :focus outline: thin dotted invert /* Begin bidirectionality settings (do not change) */BDODIR=ltr direction: ltr; unicode-bidi: bidi-override /*定义BDO元素当其属性为DIR=ltr时的默认文本读写显示顺序*/BDODIR=rtl direction: rtl; unicode-bidi: bidi-override /*定义BDO元素当其属性为DIR=rtl时的默认文本读写显示顺序*/*DIR=ltr direction: ltr; unicode-bidi: embed /*定义任何元素当其属性为DIR=ltr时的默认文本读写显示顺序*/*DIR=rtl direction: rtl; unicode-bidi: embed /*定义任何元素当其属性为DIR=rtl时的默认文本读写显示顺序*/media print /*定义标题和列表默认的打印样式*/ h1 page-break-before: always h1, h2, h3, h4, h5, h6 page-break-after: avoid ul, ol, dl page-break-before: avoid 浏览器默认样式1.页边距IE默认为10px，通过body的margin属性设置FF默认为8px，通过body的padding属性设置要清除页边距一定要清除这两个属性值body margin:0; padding:0;2.段间距IE默认为19px，通过p的margin-top属性设置FF默认为1.12em，通过p的margin-bottom属性设p默认为块状显示，要清除段间距，一般可以设置p margin-top:0; margin-bottom:0;3.标题样式h1h6默认加粗显示：font-weight:bold;。默认大小请参上表还有是这样的写的h1 font-size:xx-large;h2 font-size:x-large;h3 font-size:large;h4 font-size:medium;h5 font-size:small;h6 font-size:x-small;个大浏览器默认字体大小为16px，即等于medium，h1h6元素默认以块状显示字体显示为粗体，要清除标题样式，一般可以设置hx font-weight:normal; font-size:value;4.列表样式IE默认为40px，通过ul、ol的margin属性设置FF默认为40px，通过ul、ol的padding属性设置dl无缩进，但起内部的说明元素dd默认缩进40px，而名称元素dt没有缩进。要清除列表样式，一般可以设置ul, ol, dd list-style-type:none;/*清楚列表样式符*/ margin-left:0;/*清楚IE左缩进*/ padding-left:0;/*清楚非IE左缩进*/5.元素居中IE默认为text-align:center;FF默认为margin-left:auto;margin-right:auto;6.超链接样式a 样式默认带有下划线，显示颜色为蓝色，被访问过的超链接变紫色，要清除链接样式，一般可以设置a text-decoration:none; color:#colorname;7 鼠标样式IE默认为cursor:hand;FF默认为cursor:pointer;。该声明在IE中也有效8 图片链接样式IE默认为紫色2px的边框线FF默认为蓝色2px的边框线要清除图片链接样式，一般可以设置img border:0;em相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。ex相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。px像素（Pixel）。相对长度单位。像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。pt点（Point）。绝对长度单位。em vs pxem指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。em有如下特点：1. em的值并不是固定的；2. em会继承父级元素的字体大小。 长度单位优化方法：1. body选择器中声明Font-size=62.5%；2. 将你的原来的px数值除以10，然后换上em作为单位；简单吧，如果只需要以上两步就能解决问题的话，可能就没人用px了。经过以上两步，你会发现你的网站字体大得出乎想象。因为em的值不固定，又会继承父级元素的大小，你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em，但如果p属于content的子级的话，p的字体大小就不是12px，而是1.2em=1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em，这个em值继承其父级元素body的大小，也就是16px * 62.5% * 1.2=12px, 而p作为其子级，em则继承content的字体高，也就是12px。所以p的1.2em就不再是12px，而是14.4p