在开发中,为了确保不同浏览器的默认样式统一,通常会对样式进行初始化,也就是在页面中定义一些初始样式,用来覆盖浏览器的默认样式。在移动端Web开发中,初始化默认样式推荐使用Normalize.css样式库,因为它具有如下特点。

保留有用的浏览器默认样式,而不是完全去掉它们。

保证各浏览器样式的一致性。

采用模块化开发,方便后期维护。

拥有详细的文档。

在熟悉了Normalize.css的特点之后,下面为大家讲解如何下载和使用Normalize.css。

1. 下载Normalize.css

在Normalize.css官方网站可以获取文件的下载,如图1所示。

在图1中,页面使用英文展示了Normalize.css的一些信息。我们单击“Download v8.0.1”按钮,即可获取Normalize.css源代码,如图2所示。

在图2所示的页面中,单击鼠标右键,然后在弹出的菜单中选择“另存为”,即可将Normalize.css保存到本地。

2. 使用Normalize.css

将Normalize.css文件下载完成之后,就可以使用Normalize.css初始化页面的默认样式。为了让大家更好地学习Normalize.css的使用,下面通过例2-3进行演示。

【例2-3】

(1)创建C:\web\chapter02\demo03.html文件,具体代码如下。

成功引入Normalize.css

上述代码中,第7行代码通过标签引入normalize.css文件,其中,href属性的值为normalize.css文件的路径地址,读者需要将下载后的normalize.css放在demo03.html的相同目录下,即C:\web\chapter02。第10行代码用来通过

标签在页面中显示“成功引入Normalize.css”的提示信息。

(2)在浏览器中打开demo03.html文件,运行结果如图3所示。

设置body元素的margin值为0

本文来自千锋教育,转载请注明出处。

如何下载和使用Normalize.css?相关推荐

  1. 移动web:如何下载和使用Normalize.css?

    在开发中,为了确保不同浏览器的默认样式统一,通常会对样式进行初始化,也就是在页面中定义一些初始样式,用来覆盖浏览器的默认样式.在移动端Web开发中,初始化默认样式推荐使用Normalize.css样式 ...

  2. css 重置样式表(Normalize.css)

    目录 一.为什么要重置CSS? 二.如何重置CSS 三.重置方案 1.自定义重置(博主推荐) 2.官方推荐重置(Normalize.css) 2.1.normalize.css并不是简单的重置了所有的 ...

  3. 浅谈Normalize.css

    转载自简书:https://www.jianshu.com/p/3d21d1932aa0 Normalize.css只是一个很小的css文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性. ...

  4. Normalize.css和Reset CSS有什么区别?

    我知道CSS重置是什么,但是最近我听说了这个叫做Normalize.css的新东西. Normalize.css和Reset CSS有什么区别? 标准化CSS和重置CSS有什么区别? CSS重置只是一 ...

  5. [转]浅谈Normalize.css

    原文地址:https://www.jianshu.com/p/3d21d1932aa0 Normalize.css只是一个很小的css文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相 ...

  6. html网页改兼容模型,浏览器兼容、CSS hack、normalize.css及盒模型基础知识问答

    一.问题(一).如何调试 IE 浏览器 1.对于IE7及以下版本可采用IETester(不能测脚本,模拟出来的IE6平台与真实的IE6还是有差异的,结果不完全可靠).Expression Web Su ...

  7. CSS进阶篇--Normalize.css的使用(重置表)

    本文译自Normalize.css官网: http://nicolasgallagher.com/a... Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨 ...

  8. php normalize,normalize.css的使用

    Normalize.css的使用及下载 Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normaliz ...

  9. Normalize.css介绍

    Normalize.css只是一个很小的css文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的css reset,Normalize.css是一种现代的,为HTML5准备的 ...

最新文章

  1. Vim 用户的大脑变化
  2. 基站基带fgpa 服务器芯片,基于FPGA的AIS基带数据处理芯片设计
  3. 各国家分析之- 阿根廷与乌拉圭
  4. java jar 源码乱码,java使用jar包时出现乱码的解决方法
  5. [机器翻译]参与 Microsoft 开放源代码软件项目的方式
  6. java类作用域标识符_java入门 (二) 标识符、数据类型、类型转换、变量、常量、作用域...
  7. python和c++无缝对接_总结:Python学习 和 Python与C/C++交互
  8. 两个简单的前台显示构架01
  9. php传值到模板,thinkphp模板传值
  10. 奥的斯服务器显示chc,奥的斯服务器查看故障清除故障
  11. 发送HTTP请求的新姿势
  12. 加密设备攻防(二)- 智能设备篇
  13. 【工控老马】基于PLC的花样喷泉设计原理详解
  14. Mac系统下编译并使用ijkplyer播放器
  15. macOS调整分辨率与HiDPI
  16. c语言读取字符到缓冲区,C语言缓冲区问题——getchar描述
  17. CVF转IVF可能遇到的问题
  18. 推荐几个正经网站,让你的数据结构和算法学习事半功倍!
  19. SPSS学习笔记 -- 独立样本t检验
  20. Oracle 层次查询、递归

热门文章

  1. 大专计算机专业怎么写,大专计算机专业的自我鉴定怎么写,〔急〕给个范文
  2. 无人机光电吊舱目标定位-实验安排
  3. 【吉比特】G-bits2018校园春季招聘技术类岗位笔试经验
  4. 8.20模拟赛 [POI2009]WIE-Hexer [Lydsy1708月赛]跳伞求生 51nod 1479 小Y的数论题
  5. web测试通用要点大全(Web Application Testing Checklist)
  6. java上传问题,求各位高手帮帮忙,看看是什么问题,急!急!急!
  7. 苹果备忘录怎么调字体大小_苹果备忘录误删了怎么恢复?快速恢复,只要收藏这两招!...
  8. 配色方案及色彩心理学
  9. 半导体器件-----短沟道效应
  10. TMS320C6713与TMS320C6713B区别