• :一大波赠书活动正式来袭!满足条件的小伙伴每人赠送一本书,只限前100名!小伙伴们赶紧到碗里来!查看详情

1.3 CSS在HTML中的引用方式

在HTML中引入CSS共有3种方式:

  • (1)外部样式表;
  • (2)内部样式表;
  • (3)内联样式表;

下面我们详细为大家介绍这3种CSS引入方式。

一、CSS的3种引用方式

1、外部样式表

外部样式表是最理想的CSS引用方式,在实际开发当中,为了提升网站的性能和维护性,一般都是使用外部样式表。所谓的“外部样式表”,就是把CSS代码和HTML代码都单独放在不同文件中,然后在HTML文档中使用link标签来引用CSS样式表。

当样式需要被应用到多个页面时,外部样式表是最理想的选择。使用样式表,你就可以通过更改一个CSS文件来改变整个网站的外观。

外部样式表在单独文件中定义,并且在<head></head>标签对中使用link标签来引用。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--在HTML页面中引用文件名为index的css文件-->
    <link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div></div>
</body>
</html>

说明:

外部样式表都是在head标签内使用link标签来引用的。

2、内部样式表

内部样式,指的就是把CSS代码和HTML代码放在同一个文件中,其中CSS代码放在<style></style>标签对内,并且<style></style>标签对是放在<head></head>标签对内的。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--这是内部样式表,CSS样式在style标签中定义-->
    <style type="text/css">
        p{color:Red;}
    </style>
</head>
<body>
    <p>绿叶学习网</p>
    <p>绿叶学习网</p>
    <p>绿叶学习网</p>
</body>
</html>

在浏览器预览效果如下:

内部样式表

说明:

对于内部样式表,CSS样式在<style>标签内定义,而<style>标签必须放在<head>标签内。

3、内联样式表

内联样式表,也是把CSS代码和HTML代码放在同一个文件中,但是跟内部样式表不同,CSS样式不是在<style></style>标签对中定义,而是在标签的style属性中定义。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <p style="color:Red; ">绿叶学习网</p>
    <p style="color:Red; ">绿叶学习网</p>
    <p style="color:Red; ">绿叶学习网</p>
</body>
</html>

在浏览器预览效果如下:

内联样式表

说明:

大家仔细对比一下这个例子和内部样式表中的例子,其实这两段代码实现的是同一个效果。三个p元素都定义了color属性,那么如果采用以下内部样式表,样式只需要写一遍;而如果采用内联样式表,则三个p元素都要单独写一遍。

内联样式是在单个元素内定义的,对于网站来说,冗余代码很多,而且由于冗余代码多,每次改动CSS样式都要到具体的标签内修改,这样使得网站的维护性也非常差。

在“HTML入门教程”中为什么强烈不推荐使用Dreamweaver那种“点点点”的方式来制作网页,就是因为在那种方式产生的代码中,CSS样式全部都是使用内联样式,导致冗余代码非常多,网站的维护性也非常差。

二、CSS引用方式用途

在实际开发中,我们一般使用外部样式表,而在在线代码测试工具和CSS入门的过程中,我们使用的是内部样式表,因为代码量不是很多,HTML代码和CSS代码放在同一个文件,这样也方便我们修改和测试。不管是在测试或者实际开发中,我们都不建议使用内联样式表。不过呢,我们可以使用内联样式表进行细节的微调,这个技巧我们在“CSS进阶教程”再给大家介绍,敬请关注。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

如果你想要获取更多学习资料,或者在学习过程中遇到疑问想要得到跟教程一样最优质的解答,请通过以下方式关注我们:

(1)官方微博:

(2)新手Q群:69660533(暗号:lvye)(建议初学前端的加)

(3)官方Q群:457631216(暗号:lvye)(建议有JS基础的加)

(4)绿叶论坛:进入论坛

(5)常见问题:绿叶学习网常见问题解答

回到顶部