有很多方法将样式表加入到HTML中，每种方法都有自己的优点和缺点。新的HTML元素和属性已被加入，以允许样式表与HTML文档更简易地组合起来。将样式表加入到HTML中的常用方法有内联样式表、嵌入一张样式表或链接到一张外部的样式表。

1  内嵌样式表

样式可以使用style属性内联，该属性可以应用于任意body元素（包括body本身），除了basefont、param和script标记。这个属性将任意数量的CSS声明当作自己的值，而每个声明用分号隔开，如下所示：

<p style="color: red; font-family: ‘微软雅黑’"> 此段落的样式是红色的“微软雅黑”字体</p>

内联的样式比其他方法更加灵活，但需要和展示的内容混合在一起，这样会失去样式表的一些优点。例如在本例中，如果有多个段落<p>标记都需要输出相同的样式，则在每个<p>标记中都需要使用style属性声明相同的样式，不仅需要的代码量比较多，而且不利于更新。

2  嵌入一张样式表

一张样式表可以使用<style>元素嵌入到HTML文档中使用，<style>元素需要放在HTML文档的head部分，如下所示：

其中，<style>和</style>之间是样式的内容（不要在这个标记中写HTML语句），type属性表示使用的是文本中层叠样式表书写的代码。“｛｝”前面是样式的选择器，“｛｝”中是声明的样式属性。嵌入样式表对整个HTML文档都有效，可在一个HTML文档具有独一无二的样式时使用。

3  链接到一张外部的样式表

如果多个文档都使用同一样式表，那么外部样式表会更适用。一张外部的样式表可以通过HTML的link元素链接到HTML文档中。<link />标签放置在文档的head部分，可以通过多个<link />标签链接多个样式文件到同一个HTML文档中，如下所示：

<link rel="StyleSheet" href="style.css" type="text/css" />   <!-- 在HTML中链接一个外部样式文件  -->

可选的type属性用于指定媒体类型，允许浏览器忽略它们不支持的样式表类型。rel属性用于定义链接的文件和HTML文档之间的关系，该属性的值StyleSheet指定一个固定或首选的样式。而href属性则用来指定样式文件的位置，可以是相对的也可以是绝对的URL。外部样式表文件要以扩展名.css命名，并且在样式表文件中不能含有任何像<head>或<style>这样的HTML标记，样式表仅仅由样式规则或声明组成，如下所示：

p { margin: 2em }                             /*  style.css文件中的样式代码 */

在样式文件style.css中，一个单独由本例一条样式语法规则组成的文件，就可以用作外部样式表了。当样式被应用到很多的网页时，一张外部样式表是理想的。开发者使用外部样式表可以改变整个网站的外观，而仅仅通过改变一个文件。同样，大多数浏览器会在缓冲区保存外部样式表，这样如果样式表在缓冲区，就避免了在展示网页时的延迟。

注意、如果同时使用内联样式表和嵌入样式表，并设置了相同属性，则内联样式表的优先级高；而同时使用嵌入样式表和外部样式表并设置相同属性时，则优先级由出现的先后顺序决定。

IT兄弟连 HTML5教程 CSS3揭秘 在HTML文档中放置CSS的几种方式的更多相关文章

  1. IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性1

    通过CSS选择器找到元素,就要使用CSS属性给找到的元素设置样式.尽管现在的浏览器已经支持了众多的CSS3属性,但作为初学者,最应该关注的就是一些“主流”的属性,如border-radius.box- ...

  2. IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性4

    7  多列布局属性 通过CSS3,开发人员能够创建多列来对文本进行布局.在CSS2时代,对于多列布局的设计,大多采用浮动布局和绝对定位布局两种方式.浮动布局比较灵活,但是需要编写大量的附加样式代码,而 ...

  3. IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器2

    4  结构性伪类选择器 在学习结构性伪类选择器之前,先了解两个概念:伪类选择器和伪元素选择器.伪类选择器是CSS中已经定义好的选择器,不能随便命名.常用的伪类选择器是使用在a元素上的几种,如a:lin ...

  4. IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1

    要使用CSS对HTML页面中的元素实现一对一.一对多或者多对一的控制,就需要用到CSS选择器.选择器是CSS3中一个重要的内容,使用它可以大幅度地提高开发人员书写或修改样式表的效率.在大型网站中,样式 ...

  5. IT兄弟连 HTML5教程 CSS3揭秘 CSS规则的组成

    CSS和HTML一样都是由W3C制定的标准,本章中介绍的特性和功能还是来源于CSS1和CSS2(CSS2是根据CSS1扩展的).W3C也有新的版本更新,称为CSS3.虽然浏览器已经准备开始实现CSS3 ...

  6. IT兄弟连 HTML5教程 CSS3揭秘 小结及习题

    小结 CSS3对于开发者来说,给web应用带来了更多的可能性,极大提高了开发效率.CSS3在选择器上的支持可谓是丰富多彩,使得我们能够灵活的控制样式,而不必为元素进行规范化的命名.CSS3支持的动画类 ...

  7. IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性5

    9  透明属性 元素透明也是我们常用的样式,在CSS2中使用滤镜属性opacity实现透明效果.现在有了CSS3的rgba属性,就不用这么麻烦了,当然这也得要浏览器支持才行.通常我们定义颜色都是用十六 ...

  8. IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性3

    5 用户界面属性 在CSS3中,新的用户界面特性包括重设元素尺寸.盒尺寸及轮廓等.本小节着重介绍一下resize属性,只有Firefox 4和Safari 3浏览器支持此属性.resize属性可用于重 ...

  9. IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性2

    3  背景属性 在CSS3中提供了多个背景属性,这里只介绍两个比较常用的属性,其他属性可以从手册中获取帮助.在CSS3中,通过background-image或者background属性可以为一个容器 ...

随机推荐

  1. ELK-logstash基本用法

    一:logstash介绍 Logstash在elk系统中为数据存储,报表查询和日志解析创建了一个功能强大的管道链.Logstash提供了多种多样的 input,filters,codecs和outpu ...

  2. 【NodeJS】跨域

    [NodeJS]跨域 转载:https://www.cnblogs.com/yangchongxing/p/10635480.html var express = require('express') ...

  3. SpringBoot整合axis1.4后，@Autowired注入失败，使用工具类注入

    问题描述: 费劲心思搭建好webservices服务端后,没想到客户端调用失败,查看日志文件,发现报空指针异常,debug代码后,发现sql查询的值都是null.通常情况下,我们将Dao注入Servi ...

  4. Java设计模式整理

    一.创建型模式 1.抽象工厂模式(AbstractFactory): 提供一个接口, 用于创建相关或依赖对象的家族, 而不需要指定具体类. 案例:https://www.cnblogs.com/lfx ...

  5. 解决visual studio换行（回车键）不能代码补全问题

    打开工具--选项:将标红的位置改为true即可.

  6. ChinaSys 一些心得

    这周不要脸的和老板一起去了 ChinaSys,可以说整个中国搞系统最nb的一批人的学术交流了.一圈报告听下来, 有几点心得,不多,可能也没有那么深刻. 系统领域的开源框架并不多 搞系统和搞AI,搞算法 ...

  7. linux系统centos7安装最新版本nginx

    一.准备环境 1.安装centos,一般买一个阿里云测试 2.下载nginx,链接http://nginx.org/download/nginx-1.10.2.tar.gz 二.开始安装 1.cent ...

  8. JS---涉及到的common.js

    //格式化日期的代码 //获取指定标签对象 //获取元素的文本内容 //获取元素的文本内容 //获取父级元素中的第一个子元素 //获取父级元素中的最后一个子元素 //获取某个元素的前一个兄弟元素 // ...

  9. DDMS files not found: xxx\hprof-conv.exe

    出现如下错误: DDMS files not found: xxx\hprof-conv.exe The connection to adb is down, and a severe error h ...

  10. RN配置 java和python环境

    安装java JDK 不推荐更改安装路径. 安装时 不要有中文 会安装jdK和jre 1==>配置新建 JAVA_HOME 具体是[编辑]==>[新建] 然后添加下两句 JAVA_HOME ...