在前端开发中怎么引用外部的CSS样式?

在前端开发中,我们一般将html页面和css样式分开写,但是这样有什么好处呢?或者是为何非要这样写呢?其实写在一起喝分开写效果是一样的,但是写在外面的话一个CSS样式可以用来修饰很多页面,写在里面的话一个css就只能应用在当前页面,造成代码冗余。

操作方法

  • 01

    打开一款自己使用着顺手的一款编辑器,然后创建一个web项目,在这里我创建了一个项目,项目名字叫叫 demo。

  • 02

    在新创建的demo项目中,有一个 css文件夹,里面并没有文件,这时我们创建一个css文件 ,创建的步骤: 右键CSS文件 →新建→CSS文件。

  • 03

    完成上述步骤后,会出现一个 创建的弹窗,根据需要 创建css名称,我这里命名为demo.css,然后 点击确定,这时候我们的css文件夹里面就会出现一个叫demo.css的文件。

  • 04

    css文件创建完成后,我们回到我们的 index.html页面,实现我们先写一些简单的代码,顺便看一下效果。

  • 05

    然后我们根据我们的html代码,打开我们的 demo.css文件,给它写一些css样式修饰一下,为了显得明显我们给他们加一个颜色。html的代码和css的样式都一样准备完毕了,这时候让我们再运行一下我们的代码看一下有木有效果,很显然没有什么用。

  • 06

    因为我们还缺少最重要的一部就是把他们给链接 起来,打开我们的index.html界面,在head里面加上挂载的代码: <link rel="stylesheet" type="text/css" href="css/demo.css"/>最后再让我们运行一下没看一下效果究竟怎么样,CSS样式是不是加载上了。看下图 ,很明显效果出来了。

(0)

相关推荐

  • 20个精心挑选新鲜好用的前端开发工具

    客户似乎总是欲求不满的,要满足他们的需求你总需要不停地解决各种问题.也正是这样的客观现实,使得我们不得不借助各种工具来应对各种挑战,越来越多的开发者和设计师也加入到创造新工具的行列中来. 今天我们精心 ...

  • Java开发中的break的三种用法

    在Java开发中,有那么几个关键词非常常用,如:return.continue.break:其实它们本身含义不大,英文解释一句话的事情,但是当它们依附循环或者switch语句时,就变得复杂而有意思了. ...

  • excel如何查询引用外部数据单元格位置

    excel是一个单独单独的数据库,处理数据时,我们经常要用VLOOKUP引用外部excel表数据,导致了文件打开经常出现警告链接了外部数据,那么我们怎么知道引用数据的单元格位置呢? 操作方法 01 经 ...

  • 前端开发要学什么?

    了解答案之前,首先我们要分清前端这部分的分工,一般来讲分为:设计和开发.工作过的人都很清楚,设计是设计师的工作,设计师按照用户需求的功能设计出图片,他们使用的工具一般是fireworks和photos ...

  • 前端开发有必要买mac吗(程序员有必要买mac吗)

    相信大多数前端对苹果电脑Mac都有一定程度的执念,而我不得不说Mac是前端程序员最好的武器,没有之一.苹果电脑Mac为什么那么适合前端呢?    Mac可以说是为设计而生,高精的屏幕,而前端为设计程序 ...

  • 魅族智能路由器已在开发中 魅族路由器有哪些功能?

    小米的路由器产品已经卖了很久,那么作为老对手的魅族是否也会推出路由器呢?关于魅族路由器是否存在网友们一直争论不休,现在似乎有了一个确切的答案。自9月开始,魅族将连续四个月举行新品发布会,不出意外,MX ...

  • 网页前端开发工具推荐

    当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文章中,我编译整理了我最喜欢的 CSS样板,框架和库,帮助你在建立网站或应用程序时更加高效。 Bootstrap 如果你想 ...

  • excel中绝对引用,相对引用,与快捷键相对引用图文教程

    我们在用excel处理数据的过程中,经常要用到拖拽单元格以进行公式复制,引用的数据是已有单元格中的数据,我们可能需要: 1)绝对引用,就是指引用某一单元格的数值,不随着拖拽而变成引用了其他数值 2)也 ...

  • word毕业论文中的引用怎么插入?

    word毕业论文中的引用怎么插入?