网页设计师必备CSS样式库:Normalize.css

CSS教程

Normalize.css

Normalize.css:网页设计师必备CSS样式库重置样式达到规范化,需要的原因是浏览器通常会用某些元素的默认样式,他们所谓的,不同浏览器的用户代理样式表可能会有所不同。所以为了得到在不同的浏览器一致的网页效果,我们需要使用特殊功能重置这些样式表,现在最流行的Normalize。

Normalize.css是尼古拉斯·加拉格尔(Nicholas Gallagher)和乔纳森·尼尔创建的一个项目,我们看看如何使用它,我们可以访问GitHub页面获得规范化CSS样式库文件。

Normalize.css-获取方法

1、手动下载
2、使用MPM
3、使用Bower

我将使用Bower,如果你不确定如何使用bower的请查看之前的课堂笔记,我曾经穿插关于Bower的使用方法,Bower的实际使用方法是非常简单的,你需要一个终端,导航到你的位置安装或下载,只需用Bower安装Normalize,在我们的例子中,它是normalize.css。

当然,您需要先安装Bower,现在我们把整个normalize文件库下载到bower_components文件夹中,正是我们所见normalize-css。
现在来看这个动作,我们实际上这里需要一些内容,所以我们添加一些。我们有一些标题,我们有一些段落,某些显示格式。

Normalize.css-规范化各个浏览器

总体而言,我们的页面看起来像这样,现在应该这样做的原因使用重置文件,是一些元素可能看起来在不同的浏览器中有所不同,由于该用户代理,默认情况下,我之前提到的样式表。

这就是在Chrome中的外观。

但是以IE为例,有些元素可能看起来有所不同,或某些元素可能根本不起作用,例如,在IE的某些旧版本中一些HTML 5元素无效,因此,通过使用重置文件,在这种情况下标准化,我们确保我们带来所有要素。

我们给它们调整样式显示效果,看起来在所有浏览器中都相同。因此,我们拥有统一的经验,我们为我们的项目取得一个很好的开始。

因此,让我们实际包括我们的normalize-css和看看它会带来什么样的改变。所以,我要说链接href,我们将导航至normalize-css,我们要右键单击,我们将在此处复制项目路径,我们将其粘贴到此处,当然,请确保您的路径正确。

现在,让我们进行实际比较,所以这是之前和之后,所以你看,我们有一些不同的字体,加载,一些不同的字体大小。还有其他一切
达到特定标准。所以我们实际上有,在这里查看我们的CSS文件,如你所见,我们设置了默认值,我们正在从body去除边缘。

然后我们要纠正某些浏览器块的显示模式,如你所见,这些评论很好,所以你马上知道,他们在做什么。这就是规范化,你看到了
重置文件可以有所作为,所以这绝对属于网页设计师基本的CSS样式库,接下来,我们来看看一个真正有用的库创建动画。

接近10年的互联网从业经验,精通Scrum敏捷软件开发的方法,从事互联网产品设计,开发,测试,运营,案例不少于20个,发现自己最喜欢的工作是做外贸营销,外贸SEO,特别喜欢谷歌优化。从2017年3月开始坚持在群161510483直播谷歌SEO和WEB前端开发技术,只要加进来坚持学习零基础也能够学会。

Last modified: 2019年10月14日

Previous Story

CSS教程

css特效:css裁剪和css遮罩

css裁剪(css clip):从Web标准中删除,css遮罩(css mask)隐藏一个元素的可见区域,除了IE和Edge浏览器不支持,Firefox,Chrome以及移动端等都已经全线支持,其实际应用价值已不可同日而语。

...

Next Story

CSS教程

CSS伪元素:用bckdrop自定义弹出窗口背景源码

::backdrop CSS伪元素:在任何处于全屏模式的元素下的即刻渲染的盒子(并且在所有其他在堆中的层级更低的元素之上)。backdrop伪元素一个尚未完全支持的伪元素。

...