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

css|样式表

外部引用的优点

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

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

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

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

开始动手做CSS文件

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

body{font-size:9pt}

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

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

<head>
<title>CSS外部调用示例</title>
<link href="style.css" rel=stylesheet type="text/css">
</head>
时间: 2024-08-03 03:31:32

CSS初级入门:样式表的外部调用的相关文章

CSS初级入门样式的多次声明

分项声明 搞懂了基本声明和整体声明后,现在要来谈谈分项声明了,这个内容基本上不用多讲,因为并没有什么特别的用法,看看下例就知道了:  代码如下 复制代码 <style type="text/CSS"> body{font-size:9pt; font-color:red} body{font-family:宋体; background:white} </style>  你会发现,我们同时对标签做了两次声明,对!这就是我们今天要讲的分项声明,也就是说,对同一个标签

CSS初级入门:样式的单独调用

css 为什么要单独调用呢? "单独调用"就是加入STYLE属性.就是将CSS声明套用在单独的一个网页元素上(任一个文字.图片.表格...等,都是网页元素),此时,CSS将不再以一个样式表来显示结果了,而是利用STYLE属性加到标签中.为什么要"单独调用"CSS?原因是:比较灵活...举个简单的例子,我们希望让输入的表单的底色不使用白色了? 关于Style属性 其实,几乎每个 HTML 标签都有其各自的属性,例如 <p align="center&q

CSS学习之样式表基础知识

css|样式表 什么是样式表  CSS是Cascading Style Sheet 的缩写.译作「层叠样式表单」.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.  如何将样式表加入您的网页  你可以用以下三种方式将样式表加入您的网页.而最接近目标的样式定义优先权越高.高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义. 链入外部样式表文件 (Linking to a Style Sheet) 你可以先建立外部样式表文件(.css),然后使用HTML的link对

[css]简明教程 样式表中的类

css|教程|样式表 类 为了对网页格式的定义更为精确,有必要让相同的选择符也能分类,并能按照不同的类别来进行不同的样式设计.基本格式如下: 选择符.类别名 {属性:值} 类别名将可以在HTML的标识符里引用: <标识符 class=类别名>网页内容标识符> 实例: <html> <head> <title>CSS例子</title> <style type="text/css"> <!-- p.Eng

[css] 简明教程 样式表的编辑和浏览

css|教程|样式表 CSS样式表编辑器 CSS是HTML语言的扩展,也是一种标记性语言,所以凡是可以用来编写HTML的编辑器都可以用来编写CSS. 不带格式的文本编辑器都支持对CSS的编辑,如:Windows自带的写字板和记事本,以及DOS下的EDIT.使用文本编辑器编写和修改CSS文档很方便.快捷,但前提是要记住所有的CSS标识,如果编写中出现语法错误,文本编辑器将不会提示.由此看来,文本编辑器比较适合编写小型的CSS文档或对CSS文档进行局部的修改.另外需要提醒注意的是,用文本编辑器编写的

[css]简明教程 样式表的书写格式

css|教程|样式表 一般来说,样式表的声明分为选择符(selector)和块{}(block),块里包含属性(properties)和属性的取值(value),基本格式如下: 选择符 {属性:值} 其它格式1: 选择符1,选择符2,选择符3 {属性1:值1:属性2:值2:属性3:值3} 有时候多个选择符将使用相同的设置,为了简化代码,我们可以一次性为它们设置样式,并在多个选择符之间加上","来分隔它们. 当有多个属性的时候,必须在两个属性之间用":"来分隔. 其它

CSS 循序渐进三样式“表”秀

不知道大家看完前面两篇以后是否对用style已经有了一点心得,其实前文所说的不过是样式表最基本的运用.笔者这里想问一问,读者们有没有感觉到html中所规定的那些标准形式的表格(table)和表单(form)样子过于呆板,而风格又时常与自己网页格格不入呢?而且,对于一个大信息量和交互式的网页而言,表格和表单是需要大量运用并且占有很重要的位置的.现在如果笔者告诉大家用样式表定制自己个人风格的表单和表格的话,您是否会兴奋得跳起来呢?其实,如果恰当的运用style,甚至可以做出比作图更好的效果来. 先给

CSS初级入门:页面样式的整体声明

css|页面 整体声明的方法 1. 基本上,整体声明有两种方法,第一种就是针对一个标签,然后一次设定好几个样式.第二种就是同时对好几个标签设定相同的样式.下面这个例子就是:"针对一个标签,然后一次设定好几个样式": <stype="text/css"> body{font-size:9pt;font-color:red;background:white} </style> 2. 你会发现,我们同时声明了:字形大小为 9pt.字形颜色为红色.背

CSS初级入门:样式的多次声明

css 分项声明 搞懂了基本声明和整体声明后,现在要来谈谈分项声明了,这个内容基本上不用多讲,因为并没有什么特别的用法,看看下例就知道了: <style type="text/css"> body{font-size:9pt; font-color:red}body{font-family:宋体; background:white} </style> 你会发现,我们同时对标签做了两次声明,对!这就是我们今天要讲的分项声明,也就是说,对同一个标签,哦们可以做两次不