css中外部样式表的案例分析

了解css中外部样式表的案例分析?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

在css中,如果css样式被放置在网页文档外部的文件中,则称为外部样式表,一个css样式表文档就表示一个外部样式表;css外部样式表文件使用“. css”为扩展名,且HTML文档中包含指向该文件位置的链接,以便网页浏览器知道在哪里查找样式。

当网页浏览器加载网页时,它的显示方式取决于来自级联样式表的信息,HTML文件有三种使用样式表的方法:外部,内部和内联。

内部和内嵌样式表存储在HTML文件本身中。它们很容易在当下工作,但由于它们不是存储在中心位置,因此不可能轻易地在整个网站上同时更改样式;您必须返回每个条目并手动更改它。

而如果CSS样式被放置在网页文档外部的文件中,则称为外部样式表,一个CSS样式表文档就表示一个外部样式表。

实际上,外部样式表也就是一个文本文件,扩展名为. CSS。当把CSS样式代码复制到一个文本文件中后,另存为。css文件,则它就是一个外部样式表。

如下图所示就是在线外部样式表

css外部样式表文件使用。css文件扩展名,并且HTML文档中包含指向该文件位置的链接,以便网页浏览器知道在哪里查找样式说明。

一个或多个文档可以链接到同一个css文件,一个网站可能有许多独特的css文件,用于为不同的页面,表格,图像等设置样式。

<>强如何链接到css外部样式表?

每个想要使用特定外部样式表的网页都需要链接到& lt; head>部分中的css文件,如下所示:

& lt; head> 　　& lt;链接rel="样式表" type=" text/css " href=https://www.yisu.com/zixun/" styles”css> 　　

在此示例中,唯一需要更改以使其适用于您自己的文档的是styles文CSS本,这是CSS文件的位置。

如果文件实际上被称为风格。css并且与链接到它的文档位于完全相同的文件夹中,那么它可以保持与上面所读的完全相同。但是,您的css文件可能标题为其他内容,在这种情况下,您只需将名称从“样式”更改为您的名称即可。

如果css文件不在此文件夹的根目录中,而是在子文件夹中,则它可能会读取以下内容:

& lt; head> 　　& lt;链接rel="样式表" type=" text/css " href=https://www.yisu.com/zixun/"风格/菜单/black.css "> 　　

<强>有关外部CSS文件的更多信息

外部样式表的最大好处是它们不依赖于任何特定页面,如果样式在内部或内嵌执行,则网站上的其他页面无法指向这些样式首选项。

但是,使用外部样式,相同的CSS文件可以用于网站上的每个页面,这样所有页面都具有统一的外观,编辑整个网站的CSS内容非常容易和集中。

你可以在下面看到它是如何工作的……

内部样式需要使用,& lt; style>,标记,因为它们需要与& lt; html>,标记区分开来,:

& lt; head> 　　& lt; style> 　　身体{ 　　背景颜色:绿色; 　　} 　　h2 { 　　颜色:蓝色; 　　margin-left: 15 px; 　　} 　　& lt;/style> 　　& lt;/head>

但是,由于外部样式表包含在它们自己的文件中,因此可以像这样创建它们,这意味着与上面的示例完全相同:

身体{ 　　背景颜色:绿色; 　　} 　　h2 { 　　颜色:蓝色; 　　margin-left: 15 px; 　　}

在这些示例中,内联样式仅适用于该特定页面,这显然是因为它包含在该HTML页面的标题详细信息中。在第二个示例中,CSS信息是自包含在CSS文件中的,任何页面都可以使用上面的“如何链接到外部样式表”,部分中的代码链接到该文件。

感谢各位的阅读!看完上述内容,你们对CSS中外部样式表的案例分析大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。

css中外部样式表的案例分析