浏览器的User Agent Stylesheet

2024-06-11 07:32

本文主要是介绍浏览器的User Agent Stylesheet,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

大家通常看到一个没有带任何CSS样式文件的HTML却带有不错的样式,这是由于在W3C的HTML标准里,一些HTML标签自带一些CSS样式。  

不同的浏览器把实现这些HTML自带样式的模块称作User Agent Stylesheet。  
不同的浏览器实现的User Agent Stylesheet不一,但大部分都能遵循W3C的标准。  
个人认为chrome实现的User Agent Stylesheet是最符合人们阅读习惯,例如p前后都有1em的外边距等。  

在chrome里的User Agent Stylesheet如下图所示。  

从上图中还可以看出浏览器的User Agent Stylesheet的优先级是很低的,经常被其他样式覆盖,这也是设置了CSS样式文件后能够起作用的原因。  

从CSS的英文全称 Cascading Style Sheet,中文译作“层叠样式表单”, 其中cascading取义为层叠,即不同层级的样式表单叠加覆盖的意思。  

其实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 }  

/* Begin bidirectionality settings (do not change) */  
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的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1050528

相关文章

zeroclipboard 粘贴板的应用示例, 兼容 Chrome、IE等多浏览器

zeroclipboard单个复制按钮和多个复制按钮的实现方法 最近网站改版想让复制代码功能在多个浏览器上都可以实现,最近看网上不少说我们的代码复制功能不好用的,我们最近将会增加代码高亮等功能,希望大家多多支持我们 zeroclipboard是一个跨浏览器的库类 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的

微软正式推出 Spartan 斯巴达浏览器

作为用于替代 IE 浏览器的下一代继任者,微软的 Project Spartan 斯巴达浏览器可算是吊足了玩家们的胃口!如今,在最新的 Windows 10 Build 10049 版本起,它终于正式登场了。 斯巴达浏览器搭载了全新的渲染引擎、新的用户界面并集成了 Cortana 语音助手。功能上新增了稍后阅读列表、阅读视图、F12开发者工具、支持网页注释 (手写涂鸦),可以保存到 O

PC与android平板通过浏览器监控Verybot的视频

下面这个视频是PC与android平板通过浏览器监控Verybot的视频:           http://v.youku.com/v_show/id_XNjYzNzYyMTIw.html

flume系列之:记录一次flume agent进程被异常oom kill -9的原因定位

flume系列之:记录一次flume agent进程被异常oom kill -9的原因定位 一、背景二、定位问题三、解决方法 一、背景 flume系列之:定位flume没有关闭某个时间点生成的tmp文件的原因,并制定解决方案在博主上面这篇文章的基础上,在机器内存、cpu资源、flume agent资源都足够的情况下,flume agent又出现了tmp文件无法关闭的情况 二、

搜狗浏览器打开CSDN博客排版错乱问题解决

之前发生过几次,不知道什么原因。 今天一直用着好好的,打开一个csdn连接,显示404,博文被删除了,于是就用百度快照打开试试,百度快照打开显示的排版很乱也没找到有用信息。 后面再浏览CSDN博客就排版错乱,显示一个大大二维码图片。 尝试删除IE缓存无效,使用谷歌浏览是好的。 基本锁定就是搜狗缓存导致的,于是找如何删除搜狗缓存   清除后恢复正常

240907-Gradio插入Mermaid流程图并自适应浏览器高度

A. 最终效果 B. 示例代码 import gradio as grmermaid_code = """<iframe srcdoc='<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width" /><title>My static Spa

Jasperreports+jaspersoft studio 实现单个或多个jrxml(jasper)文件生成一个pdf文件,并利用Servlet发送该pdf文件到浏览器中展示

Jasperreports+jaspersoft studio 实现单个或多个jrxml(jasper)文件生成一个pdf文件,并利用Servlet发送该pdf文件到浏览器中展示; 代码如下: Demo07.jrxml <?xml version="1.0" encoding="UTF-8"?><!-- Created with Jaspersoft Studio version 6.6.

vite是如何实现依赖预构建的,浏览器为什么没有实现从node_modules查找依赖,vite开发环境解决了什么问题

浏览器的esmodule 为什么没有做从node_modules查找依赖项 浏览器是基于http请求的,node_modules中依赖项不可控,可能又会依赖很多的包,整个依赖图都需要加载的话很耗性能。 commonjs是运行在服务端的,以file形式读取文件,内部有规避机制。 依赖预构建 首先vite会找到对应的依赖,然后调用esbuild(对js语法进行处理的一个库),将其他规范的代码转换

浏览器工作原理(3)-TCP协议文件如何从服务器到浏览器

浏览器工作原理-TCP协议,文件如何从服务器到浏览器 本周继续学习浏览器工作原理及实践,本次内容来看一下TCP协议确保文件完整的送到至浏览器 First Page 是指页面加载到首次开始绘制的时长,而影响这个性能指标的一个重要原因是网络加载速度,网络传输协议无论使用http还是websocket,都是基于TCP/IP的,所以有必要了解一下TCP/IP,对于web的性能调优和问题定位都有很

浏览器工作原理(2)-进程的理解

Chrome架构:仅仅打开了1个页面,为什么有4个进程? 1 并行处理:同一时刻处理多个任务,比如计算如下公式并显示出来 A = 1+2B = 20/5C = 7*8 这个过程分成四个任务:三个计算,一个显示。正常情况下使用单线程来处理,分为四步依次执行。如果采用多线程,前三个计算任务同时执行,最后再显示,单线程需要四步,而多线程只需要两步,使用并行处理大大提升性能 2 线程 VS