css初始化表(normalize.css)
时间:2020-05-18
本文章向大家介绍css初始化表(normalize.css),主要包括css初始化表(normalize.css)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
为什么要初始化CSS?
建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异。当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。最简单的初始化方法就是: * {padding: 0; margin: 0;} 。有很多人也是这样写的。这确实很简单,但有人就会感到疑问:*号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标签都初始化一遍,这样就大大的加强了网站运行的负载,会使网站加载的时候需要很长一段时间。写过css的都知道每个网页引进的css首先都需要初始化,而出名的css reset有YUI css reset(QQ、淘宝等都出现他的影子),业内用的最多的还有Erik Meyer’s CSS Reset。CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化CSS样式的属性,为我们将用到的CSS或html标签更加方便准确,使得我们开发网页内容时更加方便简洁,同时减少CSS代码量,节约网页下载时间。
雅虎工程师提供的CSS初始化示例代码
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; } body { background: #fff; color: #555; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; } td, th, caption { font-size: 14px; } h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; } a { color: #555; text-decoration: none; } a:hover { text-decoration: underline; } img { border: none; } ol, ul, li { list-style: none; } input, textarea, select, button { font: 14px Verdana, Helvetica, Arial, sans-serif; } table { border-collapse: collapse; } html { overflow-y: scroll; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; }
腾讯官网 样式初始化
body, ol, ul, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea, select { margin: 0; padding: 0 } body { font: 12px "宋体", "Arial Narrow", HELVETICA; background: #fff; -webkit-text-size-adjust: 100%; } a { color: #2d374b; text-decoration: none } a:hover { color: #cd0200; text-decoration: underline } em { font-style: normal } li { list-style: none } img { border: 0; vertical-align: middle } table { border-collapse: collapse; border-spacing: 0 } p { word-wrap: break-word }
新浪官网 样式初始化
body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div { margin: 0; padding: 0; border: 0; } body { background: #fff; color: #333; font-size: 12px; margin-top: 5px; font-family: "SimSun", "宋体", "Arial Narrow"; } ul, ol { list-style-type: none; } select, input, img, select { vertical-align: middle; } a { text-decoration: none; } a:link { color: #009; } a:visited { color: #800080; } a:hover, a:active, a:focus { color: #c00; text-decoration: underline; }
淘宝官网 样式初始化
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; } body, button, input, select, textarea { font: 12px/1.5 tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } address, cite, dfn, em, var { font-style: normal; } code, kbd, pre, samp { font-family: couriernew, courier, monospace; } small { font-size: 12px; } ul, ol { list-style: none; } a { text-decoration: none; } a:hover { text-decoration: underline; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } legend { color: #000; } fieldset, img { border: 0; } button, input, select, textarea { font-size: 100%; } table { border-collapse: collapse; border-spacing: 0; }
网易官网 样式初始化
html { overflow-y: scroll; } body { margin: 0; padding: 29 px00; font: 12px "\5B8B\4F53", sans-serif; background: #ffffff; } div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, p { padding: 0; margin: 0; } table, td, tr, th { font-size: 12px; } li { list-style-type: none; } img { vertical-align: top; border: 0; } ol, ul { list-style: none; } h1, h2, h3, h4, h5, h6 { font-size: 12px; font-weight: normal; } address, cite, code, em, th { font-weight: normal; font-style: normal; }
原文地址:https://www.cnblogs.com/ssjd/p/12909144.html
- Docker系列教程10-使用Docker Registry管理镜像
- webapp开发调试环境--weinre配置
- AWK 深入浅出教程
- Docker系列教程09-使用Docker Hub管理镜像
- C++11基础学习系列一
- 触屏touchstart 与 click
- Linux DNS之dig利器
- Docker系列教程08-Dockerfile实战
- VirtualBox和Vmware安装增强功能
- 事件委托与阻止冒泡
- Linux网络工具之Ping命令
- Linux DNS之nslookup命令
- 【LEETCODE】模拟面试-108-Convert Sorted Array to Binary Search Tree
- javascript单线程环境实现真正的setTimeout
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 解决Android studio Error:(30, 31) 错误: 程序包 不存在的问题
- AndroidQ 沙箱适配多媒体文件(小结)
- Bitcron 主题 Berry(简约wordpress主题)
- Android 实现图片转二进制流及二进制转字符串
- Android 如何实现exclude aar包中的某个jar包
- android 实现控件左右或上下抖动教程
- Android Studio引入FFmpeg的方法
- Android Studio 中获取屏幕宽度实例
- Android studio 生成带Kotlin文档的实现方式
- 基于Android FileProvider 属性配置详解及FileProvider多节点问题
- Android 通过API获取数据库中的图片文件方式
- android尺子的自定义view——RulerView详解
- 浅谈Android Studio3.6 更新功能
- Android 自定义View手写签名并保存图片功能
- android 使用Xml文件定义Shape方式