首页 > 其他分享 >CSS重置通用浏览器默认样式

CSS重置通用浏览器默认样式

时间:2024-02-23 19:55:19浏览次数:20  
标签:none 浏览器 color 重置 background webkit input font CSS

html,
body {
  height: 100%;
  /* 文字风格 Sans-serif 各笔画粗细相同,Serif 笔画粗细不同,monospace 等宽体,cursive草书,fantasy梦幻 */
  font-family: 'Microsoft YaHei', sans-serif, 'Helvetica Neue', Helvetica, Arial,
    '黑体', '宋体', Arial;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-size: 14px;
  color: #333;
}
 
/* 重置各标签的默认样式 */
a,
body,
center,
cite,
code,
dd,
del,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hr,
html,
img,
input,
label,
legend,
li,
mark,
ol,
p,
section,
span,
textarea,
time,
td,
th,
ul {
  margin: 0;
  border: 0;
  padding: 0;
  font-style: normal;
  box-sizing: border-box;
  /*  自动换行 */
  word-wrap: break-word;
  /*  强制英文单词断行 */
  word-break: break-all;
}
 
/*  设置标签为块级分类 */
article,
aside,
details,
fieldset,
figcaption,
figure,
footer,
header,
main,
nav,
section {
  display: block;
}
 
/* 去除input标签的默认样式 */
button,
input,
textarea {
  -webkit-appearance: none;
  font-family: 'Microsoft YaHei', sans-serif, 'Helvetica Neue', Helvetica, Arial,
    '黑体', '宋体', Arial;
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 1em;
  line-height: 1em;
  outline: none;
  background-color: transparent;
}
 
/*  禁止多文本框手动拖动大小 */
textarea {
  resize: none;
  -webkit-appearance: none;
}
 
/* 去掉按下的阴影盒子 */
input,
textarea,
a {
  -webkit-tap-highlight-color: transparent;
}
 
/*  清除a标签下划线 */
a,
a:visited {
  text-decoration: none;
}
a:focus,
a:active,
a:hover {
  outline: none;
}
 
/*  清除列表前面的点 */
ol,
li,
ul {
  list-style: none;
}
 
/*  清除IE下图片的边框 */
img {
  border-style: none;
  font-size: 0;
}
 
/*  解决chrome浏览器默认黄色背景问题 */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
 
/*  设置默认滚动条样式 */
::-webkit-input-placeholder {
  color: #afbdcc;
}
:-moz-placeholder {
  color: #afbdcc;
}
::-moz-placeholder {
  color: #afbdcc;
}
:-ms-input-placeholder {
  color: #afbdcc;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
::-webkit-scrollbar-track-piece {
  background-color: #f5f5f5;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  border-radius: 6px;
}
::-webkit-scrollbar-corner {
  background-color: #f5f5f5;
}
::-webkit-resizer {
  background-repeat: no-repeat;
  background-position: bottom right;
}

 

标签:none,浏览器,color,重置,background,webkit,input,font,CSS
From: https://www.cnblogs.com/smedas/p/18030281

相关文章

  • css 动画
    <divclass="quan-box">逐渐放大消失<div>  /*申明一个div的class用于执行动画*/.quan-box{opacity:0;background:#70D97C;position:absolute;//3秒执行完成quan动画,infinite动画会无限次重复播放,steps(40)表示将整个动画过程分割成40个......
  • 爬虫之css选择器
    用soup.select方法#panel节点内部的panel—heading节点print(soup.select('.panel.panel-heading'))#ul里面的liprint(soup.select('ulli'))#id为list-2的内部element节点print(soup.select('#list-2.element'))p......
  • css 清除浮动的方法
    好的,我会增加一些更详细的说明。在web开发的过程中,"浮动"是CSS中可以使元素向左或向右移动,直到他们碰到其父元素边缘或者另一个浮动元素的属性。虽然它很有用,但是如果不正确地处理,它可能会导致一些意想不到的页面布局问题。**清除浮动的方法**:1.**使用clear属性**:HTML......
  • 阻止浏览器自动填充input密码框
    1.最简单的方法,加一个属性autocomplete=“new-password”.<inputtype="text"placeholder="密码"autocomplete=“new-password”/>2.把inputtype=”password”改成inputtype=”text”并在后面加上οnfοcus=”this.type=’password’”.<inputtype="text"pla......
  • 浏览器录屏技术:探索网页内容的视觉记录之道
    在当今数字化时代,浏览器录屏技术已经成为了一种强大的工具,用于记录和分享网页内容的视觉体验。无论是用户体验测试、教育培训、产品演示还是远程协作,浏览器录屏技术都能提供便捷、高效的解决方案。在线录屏|一个覆盖广泛主题工具的高效在线平台(amd794.com)amd794.com/reco......
  • unocss 安装使用
    1.安装pnpmi-Dunocss2.引入在项目根目录新建一个文件uno.config.tsimport{defineConfig,presetAttributify,presetIcons,presetUno}from'unocss'exportdefaultdefineConfig({presets:[presetUno(),presetAttributify(),presetIcons()],shortcuts:{......
  • 学习环境(浏览器与编辑器)配置,HTTP常识
    学习大纲一前端html5/css3写页面2.JaveScript/ES6/jQuery/Bootstrap写页面逻辑二PHP编程PHP语法,数据类型,面向对象,命令空间,数据库POD,Composer,MVC三Laravel框架微信小程序,CRM,Laravel基础,项目分析,数据表创建,前后台的完整开发流程,项目优化与项目上线学习......
  • vue3+vite 移动端适配postcss-pxtorem插件
    1、安装插件npmipostcss-pxtorem-D2、与package.json同级目录创建postcss.config.js文件module.exports={plugins:{autoprefixer:{overrideBrowserslist:["Android4.1","iOS7.1",......
  • css浮动(float)详解
    https://blog.csdn.net/weixin_45123004/article/details/104463619浮动详解一、什么是浮动?浮动,顾名思义,就是漂浮的意思。指的是一个元素脱离文档流,悬浮在父元素之上的现象。二、如何产生浮动?给元素本身添加float属性float: 三、浮动有什么作用?作用:在html文档流中,分为行元......
  • CSS
    CSS(1)介绍在HTML中,标签(Tag)是用于定义文档结构和内容的元素,而CSS(CascadingStyleSheets,层叠样式表)则用于控制网页的样式和布局。CSS样式表中可以通过选择器(Selectors)来选择HTML中的标签,并为其应用样式。在HTML中,标签(Tag)是用于定义文档结构和内容的元素,而CSS(Cascadi......