CSS初级入门:样式表的外部调用

2016-02-19 17:27 7 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享CSS初级入门:样式表的外部调用,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发 】

外部引用的优点

为什么要把CSS声明做成一个CSS文件呢?这样做的好处有三个。

第一个好处,网页处理速度会更快一些,尤其在有很多网页共用一份CSS样式表时更为好用!因为你不用为每一页都写同样的CSS代码,网页自然就会更瘦一些轻快一些。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

第二个好处是,可以防止一些电脑程度较低的使用者直接看到CSS语法(就是有人不喜欢被看见语法),当然指的是无法直接看到,而非无法看到,稍微有点能力的,要查看CSS文件的内容简直是易如反掌。

第三个好处当然就是维护方便了!你只要修改一个CSS文件,不管你有几千个网页文件,都会以你最新修改的版本为准了!

开始动手做CSS文件

首先,我们将把原来声明中的style type="text/css"/style去掉(CSS文件里不需要这两个标签,因为,浏览器看到扩展名为css就知道这是CSS文件了),然后利用记事本程序把下面代码粘贴过去。

body{font-size:9pt}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

然后将它保存,文件名的扩展名为.css,在这里可以保存为style.css,并和网页放在同一目录下。
在网页中调用 CSS 文件

做好CSS文件后,下面我们就该在网页中调用了,调用的方法如下所示:

head
titleCSS外部调用示例/title
link href="style.css" rel=stylesheet type="text/css"
/head

来源:http://www.tulaoshi.com/n/20160219/1615247.html

延伸阅读
标签: Web开发
插入样式表前后的网页。 为了更好地理解样式表的作用,我们先看一个CSS的应用实例。在本例子中,你很容易对比出使用CSS前后两个网页的区别,当然了,现在你可能读不懂CSS部分的代码。别担心,这些代码将在少后的教程中介绍。 我们首先来看一下未加入CSS的页面。网页里只有一段话:菜鸟吧的站长是大傻瓜!傻瓜爱吃大西瓜!。而且由于分别是标题1...
标签: Web开发
class(类)和id的一个小实例 在上一节中我们了解了如何为特定的标签定义样式,例如我们利用 h1{font-size: 12px;}将页面内所有的标题1的字体大小改为了12像素。那么如果我不希望所有的标题1样式都被修改该怎么做呢?这时class和id就可以帮你的忙。 为了了解class和id,我们先来看两个网页。 没有加入CSS时的页面,加入CSS之后的页面。它们的源...
标签: Web开发
  1、在一个网页中同时调用CSS的多种引入方式     在HTML中引入CSS的方式很多,例如直接插入式,使用 链接外部样式表,使用CSS"@import"导入样式表以及在内部元素中使用"STYLE"标记来定义样式表等。有网友询问,这些引入方式能不能同时在一个网页中被调用,它们之间会不会产生混乱?其实,我们大可不必这么担心,这就...
标签: Web开发
类 为了对网页格式的定义更为精确,有必要让相同的选择符也能分类,并能按照不同的类别来进行不同的样式设计。基本格式如下: 选择符.类别名 {属性:值} 类别名将可以在HTML的标识符里引用: 标识符 class=类别名网页内容 实例: <html> <head> <title>CSS例子</title> <style type="t...
标签: Web开发
分项声明 搞懂了基本声明和整体声明后,现在要来谈谈分项声明了,这个内容基本上不用多讲,因为并没有什么特别的用法,看看下例就知道了: style type="text/css" body{font-size:9pt; font-color:red} body{font-family:宋体; background:white} /style  你会发现,我们同时对标签做了两次声明,对!这就是我们今天...

经验教程

635

收藏

94
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部