浏览器的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

相关文章

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机

如何在Mac上彻底删除Edge账户? 手动卸载Edge浏览器并清理残留文件技巧

《如何在Mac上彻底删除Edge账户?手动卸载Edge浏览器并清理残留文件技巧》Mac上的Edge账户里存了不少网站密码和个人信息,结果同事一不小心打开了,简直尴尬到爆炸,想要卸载edge浏览器并清... 如果你遇到 Microsoft Edge 浏览器运行迟缓、频繁崩溃或网页加载异常等问题,可以尝试多种方

Python如何将OpenCV摄像头视频流通过浏览器播放

《Python如何将OpenCV摄像头视频流通过浏览器播放》:本文主要介绍Python如何将OpenCV摄像头视频流通过浏览器播放的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完... 目录方法1:使用Flask + MJPEG流实现代码使用方法优点缺点方法2:使用WebSocket传输视

如何关闭Mac的Safari通知? 3招教你关闭Safari浏览器网站通知的技巧

《如何关闭Mac的Safari通知?3招教你关闭Safari浏览器网站通知的技巧》当我们在使用Mac电脑专注做一件事情的时候,总是会被一些消息推送通知所打扰,这时候,我们就希望关闭这些烦人的Mac通... Safari 浏览器的「通知」功能本意是为了方便用户及时获取最新资讯,但很容易被一些网站滥用,导致我们

SpringBoot UserAgentUtils获取用户浏览器的用法

《SpringBootUserAgentUtils获取用户浏览器的用法》UserAgentUtils是于处理用户代理(User-Agent)字符串的工具类,一般用于解析和处理浏览器、操作系统以及设备... 目录介绍效果图依赖封装客户端工具封装IP工具实体类获取设备信息入库介绍UserAgentUtils

使用DrissionPage控制360浏览器的完美解决方案

《使用DrissionPage控制360浏览器的完美解决方案》在网页自动化领域,经常遇到需要保持登录状态、保留Cookie等场景,今天要分享的方案可以完美解决这个问题:使用DrissionPage直接... 目录完整代码引言为什么要使用已有用户数据?核心代码实现1. 导入必要模块2. 关键配置(重点!)3.

JavaWeb-WebSocket浏览器服务器双向通信方式

《JavaWeb-WebSocket浏览器服务器双向通信方式》文章介绍了WebSocket协议的工作原理和应用场景,包括与HTTP的对比,接着,详细介绍了如何在Java中使用WebSocket,包括配... 目录一、概述二、入门2.1 POM依赖2.2 编写配置类2.3 编写WebSocket服务2.4 浏

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》:本文主要介绍了如何使用CSS自定义浏览器滚动条的样式,包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式,并提供了完整的CSS代码示例,通过这些技巧,你可以为你的网站添加个性化的滚动条样式,从而提升用户体验,详细内容请阅读本文,希望能对你有所帮助...

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

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

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

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