1.什么是user agent stylesheet?
大家通常看到一个没有带任何CSS样式文件的HTML却带有不错的样式,这是由于在W3C的HTML标准里,一些HTML标签自带一些CSS样式。
不同的浏览器把实现这些HTML自带样式的模块称作User Agent Stylesheet。
不同的浏览器实现的User Agent Stylesheet不一,但大部分都能遵循W3C的标准。
个人认为chrome实现的User Agent Stylesheet是最符合人们阅读习惯,例如p前后都有1em的外边距等。
其实W3C的CSS标准中有一套完整的CSS样式的优先级规则,高优先级的样式覆盖低优先级,后面将逐步剖析这些优先级的规则,讲解怎样能做出高效能的CSS样式表。
下面是HTML4.0.1的W3C标准中默认的CSS样式(来源于:http://www.w3.org/TR/CSS21/sample.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; unicode-bidi: embed } 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 } 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, select { display: inline-block } big { font-size: 1.17em } small, sub, sup { font-size: .83em } sub { vertical-align: sub } sup { vertical-align: super } table { border-spacing: 2px; } thead, tbody, tfoot { vertical-align: middle } td, th, tr { vertical-align: inherit } s, strike, del { text-decoration: line-through } hr { border: 1px inset } 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"; white-space: pre-line } center { text-align: center } :link, :visited { text-decoration: underline } :focus { outline: thin dotted invert } BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override } BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override } *[DIR="ltr"] { direction: ltr; unicode-bidi: embed } *[DIR="rtl"] { direction: rtl; unicode-bidi: embed } @media print { h1 { page-break-before: always } h1, h2, h3, h4, h5, h6 { page-break-after: avoid } ul, ol, dl { page-break-before: avoid } } |
当然,浏览器的User Agent Stylesheet的优先级是很低的,经常被其他样式覆盖,这也是设置了CSS样式文件后能够起作用的原因。user agent stylesheet是浏览器的一些默认样式。如果对这个默认样式不满意最简单的解决办法就是重新设置该样式的属性,因为user agent stylesheet优先级很低,会被覆盖,这样就不会影响到我们的样式了.
相关推荐
如果对这个默认样式不满意最简单的解决办法就是重新设置该样式的属性,因为user agent stylesheet优先级很低,会被覆盖,这样就不会影响到我们的样式了,比如这里我就讲form 的margin-bottom设为0px。 User Agent ...
Google Chrome样式进度指示器控件源码,外观参见 http://img.my.csdn.net/uploads/201207/25/1343212749_2829.gif
<link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/bootstrap-table.min.css" rel="stylesheet"> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script...
<link rel="stylesheet" href="../css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="../css/print.css" type="text/css" media="print"> <!--[if IE]> <link rel="...
<link rel=stylesheet href="http://baike.baidu.com/css/font.css" type="text/css"> </head> 而在XML中,你应该如下例所示在声明区中加入: <? xml-stylesheet type="text/css" href=...
用户样式表和字体— GNOME Shell扩展 该扩展从~/.config/gnome-shell/gnome-shell.css加载CSS文件,从而允许您使用自定义样式表来自... org.gnome.Shell.Extensions.InstallRemoteExtension string: ' user-stylesheet
StyleSheet、StyleSheet
CSS Refactoring Architect Your Stylesheets for Success .pdf 英文无水印原版pdf pdf所有页面使用FoxitReader、PDF-XChangeViewer、SumatraPDF和Firefox测试都可以打开 本资源转载自网络,如有侵权,请联系上传...
CSS预览生成器 生成一个HTML文件以可视化CSS样式表中定义的所有样式。 依存关系 该脚本需要使用以下cssutils安装的cssutils模块: pip3 install cssutils 用法 python3 css_stylesheet_preview_generator.py ...
link rel="stylesheet" type="text/css" href="css/normalize.css?3.1.64" /> <link rel="stylesheet" type="text/css" href="css/demo.css?3.1.64" /> <link rel="stylesheet" type="text/css" href=...
link type="text/css" rel="stylesheet" href="css/reset.css?3.1.64" /> <link type="text/css" rel="stylesheet" href="css/theme.css?3.1.64" /> <link type="text/css" rel="stylesheet" href=...
QQ音乐界面模仿 web课程设计作业,主要是html+css,含有部分js 主要利用HBuilder X编写,主要用于学习 主要有四个界面,分别是首页、排行榜、...<link href="css/footer.css" rel="stylesheet" type="text/css" />等
CSS 样式表中文手册,手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。
link href="/site.css" rel="stylesheet" type="text/css" /> <%–第二种方法–%> <link href="site.css" rel="stylesheet" type="text/css" /> <%–第三种方法–%> <link href=...
作为一个前端小白,鼓捣了几天前端。。今天突然发现我深信不疑的东西,竟然出现了问题。。就比如我在css目录下面...link rel=stylesheet type=text/css href=css/style.css> 在浏览器一刷新。。哇,kao。竟然没
filter.css 仅CSS库可应用滤色器。 查看完整的产品特点只有CSS。 没有JavaScript! 缩小并压缩约1KB!... link href =" dist/filters.min.css " rel =" stylesheet " >用法filter.css可以与任何CSS框架一起使用。
比如 li ,这个元素默认的样式在IE和Firefox中就不一样。Css Reset 就是为了消除这种不同元素在...<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
link rel="stylesheet" href="css/reset.min.css?3.1.64"> <link rel="stylesheet" href="css/style.css?3.1.64"> </head> <body>[removed][removed] <h1>3d CSS GLOW <h1>...
link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css"> <!-- body 最后 --> [removed][removed] [removed][removed] <!-- 如果使用了某些拓展插件还需要...