引入CSS 的方法有哪几种?比较其优缺点。

Posted 2023-03-26

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了引入CSS 的方法有哪几种?比较其优缺点。相关的知识，希望对你有一定的参考价值。

1、链入外部样式表文件 (Linking to a Style Sheet)

你可以先建立外部样式表文件（.css），然后使用html的link对象。示例如下：
<head>
<title>title of article</title>
<link rel=stylesheet href="http://www.dhtmlet.com/rainer.css" type="text/css">
</head>

2、定义内部样式块对象 (Embedding a Style Block)

你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。定义方式请参阅样式表语法。示例如下：
<html>
<style type="text/css">

</style>
<body>

3、内联定义 (Inline Styles)

内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下：
<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁<p>

其中第一种是最常用的，做到了css与布局代码的分离,可以使代码可编辑性更高。参考技术A 1.行内样式表（只对所在行有效）
eg, <h1 style="color:orange; font-family:impact"> 行内样式表</h1>
2.植入样式表（只对所在的页面有效)
将样式表放在<head> </head>里面。
eg. <head>
<style type="text/css">
h1color:green; font-family:impact;
</style>
</head>
3.输入样式表：（同链接样式表相似）
eg.<style ype="text/css">

</style>
4.链接样式表：
<head>
<link rel="stylesheet" href="xxx.css" type="text/css">
</head>

参考资料：网站、网页制作（团队）

参考技术B 这几种插入方式的效果是相同的，但是其优缺点却不一样。应当依据使用要求而选择不同的插入方法。比如，外部样式单的优点在于可以统一整个网站的所有网页的样式，只要改动一个外部样式单文件，站点内所有的引用了该样式单相应样式的页面便都进行了改动，也方便了站点的维护。而嵌入式样式单的作用在于统一整个页面的样式，只需要改动某一个样式定义，整个页面内的所有文件的相应位置均会改变，有利于统一页面内部的样式。内联式样式单的作用在于简化了HTML标记的属性，直接通过CSS控制显示样式，使页面效果更加丰富多彩。参考技术C 内联和外联
外联方便修改
内联优先级最高

以上是关于引入CSS 的方法有哪几种?比较其优缺点。的主要内容，如果未能解决你的问题，请参考以下文章