前面的话

　　Web早期，HTML是一种很有限的语言，这种语言不关心外观，它只是一种简洁的小型标记机制。随着Mosaic网页浏览器的出现，网站开始到处涌现。对于页面改变外观的需求增加，于是增加了类似<font>和<big>之类的标记元素。几年之后，大多数网站标记几乎完全由表格和font元素组成，且对于所要表现的内容不能传达任何实际含义，使文档可用性降低，且不易于维护。于是1995年，W3C发布了CSS草案，试图解决结构与样式混杂的问题。1996年，W3C正式推出CSS1。1998年，推出CSS2。2001年从CSS3开始，CSS这门语言分割成多个独立的模块，每个模块独立分级，且只包含一小部分功能；2011年开始设计CSS4

　　本文将主要介绍引入CSS样式的方式，包括外部样式表、内部样式表和行间样式三种方式

　　[注意]CSS语法非常简单，但容易忽略的一点是不能省略分号(最后一个样式除外)

外部样式表

【使用link标记】

　　在link标记中rel和href属性是必须的，type属性和media属性可省略

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<link rel="stylesheet" href="sheet1.css">

<title>Document</title>

</head>

<body></body>

</html>    
body{

    background-color: red;

}

　　[注意]样式表中不能包含HTML标记语言，只能有CSS规则和CSS注释

/*若CSS文件中存在除了CSS样式和CSS注释的其他标记，则会导致在该标记后面的CSS样式将无法被识别*/

<style></style>

body{

    background-color: red;

}

　　CSS注释只支持/**/的写法，不支持//的写法

【多个样式表】

　　一个文档可能关联多个样式表，如果是这样，文档最初显示时只会使用rel为stylesheet的link标记　　　

<link rel="stylesheet" href="sheet1.css" />

<link rel="stylesheet" href="sheet2.css" />
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<link rel="stylesheet" href="sheet1.css">

<link rel="stylesheet" href="sheet2.css">

<title>Document</title>

</head>

<body>

</body>

</html>
/*sheet1*/

body{

    background-color: red;

}
/*sheet2*/

body{

    height: 100px;

    border: 10px solid black;

}

【候选样式表】

　　将rel属性的设置为alternate stylesheet可以定义候选样式表，只有在用户选择这个样式表时才会用于文档表现。如果浏览器能使用候选样式表，它会使用link元素的title属性值生成一个候选样式列表，可在菜单栏中查看->样式中进行选择。(IE和firefox支持)

　　[注意]若一个候选样式表没有设置title，那么它将无法在候选样式列表中出现，则无法被引用　

<link rel="stylesheet" type="text/css" href="sheet1.css" />

<link rel="alternate stylesheet" type="text/css" href="sheet2.css" title="sheet2"/>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="sheet1.css" />

<link rel="alternate stylesheet" type="text/css" href="sheet2.css" title="sheet2"/>

<title>Document</title>

</head>

<body>

</body>

</html>
/*sheet1*/

body{

    background-color: red;

}
/*sheet2*/

body{

    height: 100px;

    border: 10px solid black;

}

内部样式表

【使用style元素】

　　内部样式表需要使用<style>元素包含样式表，它在文档中单独出现。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<style>

body{

    background-color: red;

}

</style>

<title>Document</title>

</head>

<body>

</body>

</html>

【多个style标签】

　　文档中可出现多个style标签，且样式规则与层叠样式规则一致

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<style>

body{

    background-color: red;

}

</style>

<style>

body{

    background-color: blue;

    height: 100px;

    border: 10px solid black;

}

</style>

<title>Document</title>

</head>

<body>

</body>

</html>

【使用@import指令】

　　与link类似，@import指令用于指示Web浏览器加载一个外部样式表，并在表现HTML文档时使用其样式。唯一的区别在于命令的具体语法和位置。@import指令常用于样式表需要使用另一个样式表中的样式的情况。

<style>

@import url(sheet2.css);

body{

    background-color: red;

}

</style>

　　　[注意]@import必须出现在style元素中，且要放在其他CSS规则之前，否则将根本不起作用。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<style>

/*将@import放置在CSS规则之后将不起使用*/

body{

    background-color: red;

}

@import url(sheet2.css);

</style>

<title>Document</title>

</head>

<body>

</body>

</html>

【多个@import指令】

　　可以使用@import指令导入多个CSS样式表，且可以使用media来限制应用场景。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<style>

@import url(sheet1.css) all;

@import url(sheet2.css);

</style>

<title>Document</title>

</head>

<body>

</body>

</html>

行间样式

　　如果只是想为单个元素指定一些样式，可以使用HTML的style属性来设置一个行间样式。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body style="background-color: red; height: 100px; border: 10px solid black;" style="background-color: red;">

</body>

</html>

　　[注意]行间样式若存在多个style属性，只能识别第一个

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<!-- 只能识别第一个style属性的值，所以页面显示为红色-->

<body style="background-color: red; height: 100px; border: 10px solid black;" style="background-color: blue;">

</body>

</html>
 

最后

　　关于CSS的优先级先后问题，与外部、内部、行间这三种引入CSS的方式关系不大，主要与重要性、特殊性和出现顺序有关。在重要性相等的情况下，行间样式的优先级最高，外部样式和内部样式无可比性。关于优先级的详细内容移步至此

　　[注意]<style>标签和<link>标签可以写在<body>标签里面

引入CSS的更多相关文章

  1. CSS系列：在HTML中引入CSS的方法

    HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...

  2. Spring MVC：在jsp中引入css

    为了将css引入jsp中,今天可真是踩了好多坑,最后在stackoverflow上找到了解决方法,不多说贴出代码. 在web.xml中添加以下代码: <servlet-mapping> & ...

  3. html引入css文件

    在HTML中,引入CSS的方法主要有行内式.内嵌式.导入式和链接式. 行内式:即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用.例: <html&g ...

  4. jquery，js引入css文件，js引入头尾

    jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...

  5. 引入css外部样式表

    前言 为什么会有这篇文章,外部引入样式有什么好谈的,不外乎就是 <link rel="stylesheet" href="style.css" /> ...

  6. 引入css ，使用@import和link的方式

    我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗? 继续往下看 linklink就是把外部CSS与网页连接起来. @importimport文字上与link的区别就是它可以把在一 ...

  7. 引入CSS文件的方式，以及link与@import的区别

    一.引入css的方式 在HTML中引入css的方法主要有4种:行内式.内嵌式.链接式和导入式. 1.行内式 <div style="background:yellow;"&g ...

  8. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  9. HTML中引入CSS的方法

    在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 ...

随机推荐

  1. 使用属性android:onClick，出现异常NoSuchMethodException

    在Activity中注册点击事件有两种方式,setOnClickListener或在xml中设置控件的android:onClick="gotoSecond"属性,在Activit ...

  2. 基于AutoCAD的ObjectARX之NET扩展(mcnetarx)-AcdbEntMake

    1.创建一个结果缓冲区. 2.调用AcdbEntMake创建对象. 示例: ' 创建文字实体 Dim rb As ResultBuffer = New ResultBuffer rb.Add(New ...

  3. springmvc和struts2的差别

    springmvc和struts2的区别相关内容   1.spring mvc的入口是servlet,而struts2是filter filter功能:用户可以改变一个request和修改一个resp ...

  4. MVC_Controller

    准备工作 安装VS2010或更高版本 安装数据库2008或更高版本 视个人系统不同配置IIS本地服务 数据库和VS下载地址 http://msdn.itellyou.cn/ 本节目标 通过本节案例对M ...

  5. 解决VS2008 开发Windows Mobile 项目生成速度慢的问题（转）

    最近用VS2008开发Windows Mobile程序,使用C#..NET Compact Framework,发现项目生成速度比较慢.用VS2008打开项目后,开始一段时间生成速度还能忍受,时间一长 ...

  6. 移动端web开发进阶

    三个月前曾写过一篇跨终端响应式页面设计入门的博客,上了博客园头条也得到了不少关注,今天想在这篇博客的基础上,继续写一篇进阶的文章. 补充 基于“入门”一文,我想再补充几个基础知识点,主要都是针对iOS ...

  7. listview(3、动态刷新）

    listview的动态刷新主要是调用adapter的notifyDataSetChanged. 在下面的例子中除了记录正常的刷新外,还记录一种错误的情况(注释掉的),作为备忘. notifyDataS ...

  8. Java设计模式2：简单工厂模式

    简单工厂模式 简单工厂模式是类的创建模式,又叫做静态工厂方法模式.简单工厂模式由一个工厂对象决定生产出哪一种产品类的实例. 为什么要使用简单工厂模式 原因很简单:解耦. A对象如果要调用B对象,最简单 ...

  9. javascript中this指针探讨

    javascript是一门类java语言有很多跟java相类似的特点,但也仅是类似而已,真正使用中还是有很大的差别.this指针常常让很多初学者抓狂,本人也曾为此困惑不解,查找过很多资料,今天在这里总 ...

  10. 【读书笔记】javascript 继承

    在JavaScript中继承不像C#那么直接,C#中子类继承父类之后马上获得了父类的属性和方法,但JavaScript需要分步进行. 让Brid 继承 Animal,并扩展自己fly的方法. func ...