仅用于当前网页的CSS样式和外部链接CSS样式的主要区别

html-css020

仅用于当前网页的CSS样式和外部链接CSS样式的主要区别,第1张

仅用于当前网页的CSS样式和外部链接CSS样式的主要区别:

1、适用范围:

由页面进行调用,多个网页可以调用一个外部样式文件,因此可以实现代码的最大化使用及网站文件的最优化配置。一般是采用<link href="style/style.css" rel="stylesheet" type=text/css"/>进行调用。而仅用于当前网页的CSS样式就如同字面上的意思,只有当前一个网页能够适用该css。

2、耦合度:

外部链接CSS样式是独立于HTML文件单独可以存在的,因此与网页的HTML文件耦合度减低了,在后期维护时就更方便更安全。仅用于当前网页的CSS样式存在于HTML文件中,对后期的更新维护不利。

扩展资料:

CSS的语言特点:

1、丰富的样式定义:

CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2、多页面应用:

CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

3、层叠:

简单的说,层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写,在浏览器中看到的将是最后面设置的样式效果。

参考资料:百度百科——css

HTML文档使用<link .../>元素来引入外部样式文件, <link .../>要放在head元素里

href="文件地址"

结合题目: style/css.css  就是表示在html所在目录里有个文件夹style. 该文件夹里有一个css文档,  该css文档名字叫css

type="文件类型"

            常见的有text/css表示层叠样式表

text/javascript 表示 javascript脚本

rel="外部文件和HTML文档的关系"

stylesheet: 表示外部文件是该HTML的样式表

参考代码 HTML文件

<!DOCTYPE html>

<html>

<head>

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

<meta charset="utf-8">

<title>Test</title>

</head>

<body>

 <h3 id="title">标题</h3>

    <p class="myp">风云</p>

    <p class="myp">雷电</p>

</body>

</html>

参考CSS文件(注意该文件,在html所在目录的style文件夹里, 详细看前面的图)

#title{

 color:#f00

}

.myp{

 background:#999

 

}

效果图