1.  默认字体设置,边距设置

html {

font-family: sans-serif; /* 默认字体 */

font-size: 100%; /* 在用户调整窗口大小时,字体大小做相应调整。 */

-ms-text-size-adjust: 100%; /* IE浏览器 */

-webkit-text-size-adjust: 100%; /* FireFox浏览器 */

}

2.  去除默认边距

body{

margin: 0; /* 外边距 */

padding: 0; /* 内边距 */

border: 0; /* 边框 */

}

3.   链接相关样式

a {

text-decoration: none; /* 去除默认下划线 */

}

a:focus {

outline:thin dotted; /* 处理“outline”在Chrome浏览器中和其它浏览器之间的不一致 */

}

a:active, a:hover {

outline: 0;

}

4.   排版相关样式

h1 {

/* 使h1标签在section标签和article标签的留白和字体样式统一。可同时兼容Firefox 4+、Safari 5和Chrome等不同的浏览器 */

font-size: 2em;

margin: 0.67em 0;

}

abbr[title] {

border-bottom: 1px dotted; /* 解决首字母样式在IE8/9、Safari 5和chrome浏览器中未定义的问题 */

}

b, strong {

font-weight: bold; /* 添加加粗样式,应用于Firefox 4+、Safari 5和Chrome */

}

dfn {

font-size:italic; /* 添加斜体样式,应用于Safari 5和chrome */

}

hr {

/* 解决其在Firefox中的兼容性问题 */

-moz-box-sizing: content-box;

box-sizing: content-box;

height: 0;

}

mark {

/* 解决其在IE8/9中样式未定义的问题 */

background: #ff0;

color: #000;

}

code, kbd, pre, samp {

/* 更正关联字体在Safari 5和Chrome中的老式设置 */

font-family: monospace, serif;

font-size: 1em;

}

pre {

/* 提高pre标签格式化文本在所有浏览器中的可读性 */

white-space: pre-wrap;

}

q {

/* 设置相一致的引号类型 */

quotes: "\201C" "\201D" "\2018" "\2019";

}

small {

/* 统一所有浏览器中字体大小不一致的兼容性问题 */

font-size: 80%;

}

sub, sup {

/* 在所有浏览器中,防止“sub”和“sup”标签影响“line-height”属性 */

font-size: 75%;

line-height: 0;

position: relative;

vertical-align: baseline;

}

sup {

top: -0.5em;

}

sub {

bottom: -0.25em;

}

5.  内嵌文本相关样式

img {

border: 0; /* 在IE8/9浏览器中,当img标签中包含a标签时,去除img边框属性。 */

}

svg:not(:root) {

overflow: hidden;

}

6.  表单文本相关样式

fieldset {

     /* 定义一致的边框、内边距和外边距 */

   border: 1px solid #c0c0c0;

    margin: 0 2px;

    padding: 0.35em 0.625em 0.75em;

}

    legend {

       border: 0; /* 更改“color”属性在IE8/9浏览器中没有被继承的问题 */

      padding: 0; /* 去除外边距,如此即使人们将字段集归零也不会失去样式 */

}

     button, input, select, textarea {

          font-family: inherit; /* 更改关联字体属性在IE8/9浏览器中没有被继承的问题 */

       font-size: 100%; /* 更改字体大小属性在IE8/9浏览器中没有被继承的问题 */

      margin: 0; /* 调整边距设置在Firefox 4+, Safari 5, 和 Chrome浏览器中的兼容性问题 */

}

button, input {

     line-height: normal; /* 调整Firefox 4+浏览器下,客户端样式表中设置了“!important”的“line-height”属性的input表单 */

}

button, select {

text-transform: none; /**

* 调整“button”和“select”的“text-transform”继承不一致性的问题 * 其他表单控件元素不继承“text-transform”属性

* 修正“button”标签在Chrome, Safari 5+, and IE 8+中的样式继承问题

* 修正“select”标签在Firefox 4+ 和Opera中的样式继承问题 */

}

button, html input[type="button"], /* 避免webKit bug发生在Android 4.0.* 设备上,破坏原生“audio”和“video”控制组件 */

input[type="reset"], input[type="submit"] {

      -webkit-appearance: button; /* 改正iOS设备中“input”类型表单样式不可用的问题 */

      cursor: pointer; /* 增强光标样式在input表单和其他表单的可用性和一致性 */

}

button[disabled], html input[disabled] { cursor: default; /* 为禁用表单重设定默认光标样式 */ }

input[type="checkbox"], input[type="radio"] {

     box-sizing: border-box; /* 调整IE 8/9中尺寸属性设置为“内容框”的盒子模型 */

padding: 0; /* 去除IE 8/9中的多余的外边距留白部分 */

}

input[type="search"] {

-webkit-appearance: textfield; /* 兼容Safari 5 and Chrome上 “searchfield” 上设置 “appearance”属性 */

-moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 兼容Safari 5 and Chrome上 “border-box” 上设置 “box-sizing”属性 */

box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {

-webkit-appearance: none; /* 去除OS X系统上Safari 5和Chrome中容器内边距和搜索取消按钮属性 */ }

button::-moz-focus-inner, input::-moz-focus-inner {

//Firefox 4+浏览器中,去除容器内边距和边框属性 border: 0; padding: 0; }

textarea {

overflow: auto; /* IE 8/9中,去除默认垂直滚动条属性 */ vertical-align: top; /* 提高所有浏览器中的文本可读性和版式 */ }

Global 全局样式基本设置的更多相关文章

  1. BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  2. 手机端全局样式表整理(mobile)

    @charset "utf-8";/*  * filename:          global.css * description:       全局样式(包含样式重置,公共常用 ...

  3. bootstrap复习:全局样式

    一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ...

  4. styled-components解决全局样式'injectGlobal' 废除的问题

    最新版的 styled-components v4 已经将原有的 injectGlobal() 方法替换成了 createGlobalStyle() ,而且用法也和之前的 injectGlobal 方 ...

  5. bootstrap 全局样式设置

    HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...

  6. 全局css , 样式设置, css 初始化. css ,style ,全局样式, 初始化样式

    全局CSS设置总结 1.清除所有标记的内外边距 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldse ...

  7. taro 组件的外部样式和全局样式

    自定义组件对应的样式文件,只对该组件内的节点生效. 编写组件样式时,需要注意以下几点: 组件和引用组件的页面不能使用 id 选择器(#a).属性选择器([a])和标签名选择器,请改用 class 选择 ...

  8. 关于微信小程序中组件和页面对全局样式的继承性

    1.组件只能继承全局样式中的font和color(backgroundcolor不继承) 2.页面可以继承全局样式中所有样式

  9. bootstrap基础学习小记(一)简介模板、全局样式

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

随机推荐

  1. markdownPad2 绿色破解版安装

    markdownpad2,默认为markdown传统风格,不能编辑分行的代码段,可以在设置里改为Github 风格,但需要付费激活,以下是绿色安装包,附激活方法 下载地址 https://pan.ba ...

  2. arcgis10.0 切片并发布服务及验证

    1.切片参考网址:https://jingyan.baidu.com/article/fa4125accc6bef28ac7092d7.html 2.通过下面代码验证  参考网址https://www ...

  3. Objective-C中NSString转NSNumber的方法

    本文转载至 http://www.linuxidc.com/Linux/2013-02/78866.htm 在Objective-C中,以数字格式组成的字符串经常需要转换为NSNumber对象后再使用 ...

  4. GS给客户单发包以及m_queGcWait(所有GC共享)

    GS给客户单发包以及m_queGcWait(所有GC共享) send_stat BaseChannel::SendCmd(int nCmd, void* pData, int nLen) { Prot ...

  5. Sqlite 设置默认时间为本地时间

    Sqlite 设置默认时间为本地时间 先设置字段类型为datetime, 再把缺省值设置为datetime( 'now', 'localtime' ) 代码查看如下 Time DATETIME DEF ...

  6. VI带行号查看

        :set nu         带行号查看,并不改变文件内容 :set nonu     取消带行号查看 在每个用户的主目录下,都有一个 vi 的配置文件".vimrc"或 ...

  7. 【题解】 AT2134 Zigzag MST

    [题解]AT2134 Zigzag MST 一道MST好题 \(Anson\)有云: 要么是减少边的数量. 要么是改变连接边的方式. 那么如何减少边的数量呢?很简单,把所有不可能对答案产生贡献的边去掉 ...

  8. BZOJ3878: [Ahoi2014&Jsoi2014]奇怪的计算器

    BZOJ3878: [Ahoi2014&Jsoi2014]奇怪的计算器 Description [故事背景] JYY有个奇怪的计算器,有一天这个计算器坏了,JYY希望你能帮助他写 一个程序来模 ...

  9. hdu5325 树的思维题

    pid=5325">http://acm.hdu.edu.cn/showproblem.php? pid=5325 Problem Description Bobo has a tre ...

  10. @Transactional注解不回滚原因详解

    最近试了试spring的回滚功能,根据网上的教程配置怎么都不好使,遂寻找答案, 网上的答案都是这么讲的: 1. 检查你方法是不是public的. 2. 你的异常类型是不是unchecked异常.如果我 ...