CSS样式表引用方式
最近讲课中,有些学员对调用样式表老是有含糊不清?大体说来有四种方式:
1、外部文件引用方式;(推荐使用)
2、使用@import引用外部CSS文件;
3、内部文档头方式也叫内嵌法调用;
4、直接插入式也叫行内样式。
它们主要的差别在于它们规定的风格使用的范围不同:
一、外部文件引用方式
外部文件引用方式即将CSS写成一个文件,在HTML文档头通过文件引用来进行风
格控制。也就是把写好的CSS属性的文件保存为文件扩展名为.CSS文件。
CSS文件的引用是在HTML的标记之间写下列语句:
<link Rrel="stylesheet" href="mystyle.css">
如当前文件目录下有一CSS 文件名为mystyle.css,内容如下:
p{
font-family:'宋体';
font-size:9pt;
color:#000;
}
h2{
font-family:'宋体';
font-size:13pt;
color:#fff;
}
<link Rrel="stylesheet" href="mystyle.css">
当然,你可以复制这句,然后改下引用文件的路径及文件名就可以了。
应用CSS文件的一个最大好处就是,你可以在每个HTML文件中引用这个文件,从而
可使整个站点的HMTL文件在风格上保持一致,避免重复的CSS属性设置;另外,当你遇
上改版或作某些重大调整要对风格进行修改时,可直接修改这个CSS文件,当然了,
HTML文件一直引用最近更新的样式单,而不必每个每个HTML文件进行修改,如果在建
站之初没有网站风格的统一规划并形成CSS文件,以后内容一多,想调整一下风格会累
死你的。
二、使用@import引用外部CSS文件
这种方式在文档头之间使用style标签引用外部css(不建议使用,引用没有先后顺序,容易出错)
<style type="text/css">
<!-- @import url(mystyle.css);/*这里是通过@import引用CSS的样式内容*/-->
</Style>
三、内部文档头方式
这种方式与外部文件方式区别在于这种方式是将风格直接定义在文档头
之间,而不是形成文件。这种风格定义产生作用的范围也只局限于
本文件,其格式如下(套用上边的CSS)
<style type="text/css">
<!--
p{
font-family:'宋体';
font-size:9pt;
color:#000 }
h2{
font-family:'宋体';
font-size:13pt;
color:#fff;
}
-->
</style>
这种方式的主要用处是,在一些方面统一风格的前提下,可针对具体页面进行具体调整。这两种方式并不相排斥,而是相互结合,比如在CSS文件中定义了P标志
的字体大小font-size为10pt,而在内部文档中可定义P标志字体颜色font-color为Red;
而在另一个HTML文件中定义颜色为Green,从这里,你也可能明白为什么风格样式单叫
层叠式样单了。
四、直接插入式
直接插入式很简单,只是在每个HTML标记后书写CSS属性就可以了。这种方式很直
接,如我们想规定一个Table标志中的字为红色,字体大小为10pt,则可书写如下:
<table style="color:red;font-size:10pt" />
这种方式主要用于对具体的标记做具体的调整,其作用的范围只限于本标记。
综上所述,这几种方式各有用途,在统一整个站点风格上,用第一种方式在整个
页面风格统一上,用第三种方式在页内某个标记的具体微调上,第三种方式也有用
武之地,所以各有千秋吧!前三种的目的在于一是统一风格,二是减少繁琐的标记属性
设置,真是功不可没哟!
延伸了解:引用外部CSS的link和import方式的分析与比较
CSS样式表引用方式的更多相关文章
- css样式表的引入方式
一般来说,css 有两种样式表的引入方式,在这里我记录一下,比较这两种引入方式的区别: <link rel="stylesheet" type="text/css& ...
- HTML基础(三)——css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- DOM与CSS样式表
在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...
- 一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- 【2017-03-24】CSS样式表
CSS样式表:层叠式样式表 一.样式表的分类 1.内联式 写在标记的属性位置,优先级最高,重用性最差. 格式: <div style="width:100px;height:100px ...
- CSS样式表的写作规范
推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...
- CSS样式----CSS样式表的继承性和层叠性(图文详解)
本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- 当css样式表遇到层
(附:White-space:pre可以是样式表里卖弄body的属性,作用是保持html源代码的空格与换行,等同<pre>标签.) Css样式表可以通过被封在层里的方式来限制页面所修饰的内 ...
随机推荐
- Ubuntu Linux 分区简易教程
关于Linux系统下的“分区”问题,对于新手来说一直是很头疼的.我来简单写一下,它的“分区”方法,规则. 声明:我为了让没有接触过Linux系统的人,理解更加简单.所以在言语表述上不是很规范,专业.我 ...
- Cocos2d-x中播放背景音乐
背景音乐的播放与停止实例代码如下: SimpleAudioEngine::getInstance()->playBackgroundMusic("sound/Jazz.mp3" ...
- 如何在UINavigationBar上添加UISearchBar以及UISearchDisplayController的使用 --OC --iOS
那我们开始吧,下面是Sely写的一个Demo,分享给大家. 新建一个项目, UISearchDisplayController 的 displaysSearchBarInNavigationBar太死 ...
- (转)SQLSERVER表分区的介绍(二)
分区函数和分区方案的创建和使用方法 具体设计过程如下: (1)首先创建一个名为partionTest的数据库.然后分别为数据库partionTest添加四个文件组,文件组名依次为FileGroup00 ...
- javascript笔记——闭包
花了三天时间,终于弄清楚闭包的各种写法和注意的事项,以及以前写,经常出错的地方,特此做一个总结,虽然不够专业,但是对于那些初学者来说,绝对对闭包的理解事半功倍. 案例一: function aa(){ ...
- Wildfly8 更改response header中的Server参数
项目经过局方安全检查需要屏蔽掉服务器中间件信息,查了一下午,网上看到的都是修改jboss7的,我们使用的wildfly8(jboss改名为wildfly),修改地方不一样,折磨了半天. jboss服务 ...
- 利用Linux下的pthread_mutex_t类型来实现哲学家进餐问题
首先说一下什么是哲学家进餐问题,这是操作系统课程中一个经典的同步问题, 问题如下:如上图,有6个哲学家和6根筷子(那个蓝色部分表示哲学家,那个紫色长条部分表示筷子),他们分别被编了0~5的号!如果某个 ...
- 5步解决移动设备上的300ms点击延迟
译者:jmouse 大多数基于触摸的浏览器设备,在点击时都会有个 300ms 的事件触发等待时间,做过 web app 开发的同学应该都遇到过这个情况,通过下面的5步可以轻松搞定这个延迟. 1.不要太 ...
- PhpExcel数组输出到Excel浏览器下载
经常是mysql查出二维数组,并且数组的带key也是有意义的,考虑到经常用,就打算弄个函数出来,方便以后用! 相对是规范的数组哈,具体可看下$data数组: 生成的excel第一行是对应的key: 直 ...
- php计算代码运行时间与内存使用的一段代码
计算运行时间及内存使用,代码如下: <?php //开始计时 $HeaderTime = microtime(true);//参数true表示返回浮点数值 //代码 //... printf(& ...