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

1、浏览器默认的样式各种 HTML 标签： h1-h6,p,ul,ol,dl, 即使没有给他们定义样式属性值，他们在浏览器中显示时，也 会具有各种样式属性 (主要是字体大小和各种间距 )。这是因为浏览器和 CSS 给这些标签设置了默认的 样式属性值，各种版本的浏览器和CSS可能略有差别，下面列举的是Firefox 1.5和CSS 2.1(IE)设置的 一些常见标签的默认样式属性值。HTML 样式html, address,blockquote,bod,ydd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, nof

2、rames,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 /*默认为表

3、格头部分组显示 */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-wei

4、ght: 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, di

5、r, 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 wh

6、ite-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 /* 定

7、义表头、主体表、表脚元素默认为垂直对齐 */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

8、: 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 :f

9、ocus 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="

10、;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: alw

11、ays 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;

12、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. 列表

13、样式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 样

14、式默认带有下划线，显示颜色为蓝色，被访问过的超链接变紫色，要清除链接样式， 置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”的高度。此高度通常为字体尺寸

15、的一半。 如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。px像素（Pixel）。相对长度单位。像素是相对于显示器屏幕分辨率而言的。譬如， WONDOWS 的用户所使用的分辨率 寸。而 MAC 的用户所使用的分辨率一般是 72 像素/英寸。般可以设般是 96像素/英pt 点（Point）。绝对长度单位。em vs pxem指字体高，任意浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合：1em=16px。那么 12px=0.75em, 10px=0.625em。 为 了简 化 font-size 的换 算，需 要在 css 中的 body 选择器 中 声明 Fo

16、nt-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