包含CSS文件的最佳方法是什么（为什么要使用@import？） _CSS

CSS属性可以通过多种不同方式包含在HTML页面中。 HTML文档根据要包括的样式表中的信息进行格式化。
包含CSS文件的方法有很多, 如下所示：

外部样式表(使用HTML < link> 标记)：外部CSS包含单独的CSS文件, 该文件仅包含样式属性, 借助标签属性(例如, 类, id, 标题等)。 CSS属性写在一个扩展名为.css的单独文件中, 应使用链接标记链接到HTML文档。这意味着对于每个元素, 样式只能设置一次, 并将应用于整个网页。 link标签用于将外部样式表与html网页链接。
< link rel="stylesheet" href="https://www.lsbin.com/style.css">
外部样式表(使用@import规则)：规则方法必须包含在< style> 标记内或样式表内。
< style> @import url(style.css); < /style>
内部样式表(使用< style> 元素)：当单个HTML文档必须具有唯一样式时, 可以使用此方法。 CSS规则集应位于头部的HTML文件中, 即CSS嵌入在HTML文件中。
< style> element {// CSS property}< /style>
内联样式内联CSS在body部分包含CSS属性, 该属性随元素附加在一起, 称为内联CSS。这种样式是在HTML标记中使用style属性指定的。它用于为单个元素应用独特的样式。
< h1 style="style property"> lsbin< /h1>

最佳方法：外部样式表(使用HTML < link> 标记)是用于链接元素的最佳方法。在不同页面上维护和重用CSS文件既简单又高效。 < link> 标记位于HTML < head> 元素中。为级联样式表< type> 属性指定媒体类型=" text / css", 该属性用于忽略浏览器不支持的样式表类型。
【包含CSS文件的最佳方法是什么（为什么要使用@import？）】范例1：下面给出的文件包含CSS属性。该文件以.css扩展名保存。例如：geeks.css

body {background-color:powderblue; }.main {text-align:center; }.GFG {color:#009900; font-size:50px; font-weight:bold; }#geeks {font-style:bold; font-size:20px; }

< !DOCTYPE html> < html > < head > < link rel = "stylesheet" href = "https://www.lsbin.com/geeks.css" /> < / head > < body > < div class = "main" > < div class = "GFG" > lsbin< / div > < div id = "geeks" > A computer science portal for geeks< / p > < / div > < / body > < / html >

输出如下：

文章图片
范例2：此示例描述了内部或嵌入式CSS。

< !DOCTYPE html> < html > < head > < title > Internal CSS< / title > < style > .main { text-align:center; } .GFG { color:#009900; font-size:50px; font-weight:bold; } .geeks { font-style:bold; font-size:20px; } < / style > < / head > < body > < div class = "main" > < div class = "GFG" > lsbin< / div > < div class = "geeks" > A computer science portal for geeks< / p > < / div > < / body > < / html >

输出如下：

文章图片
范例3：此示例描述了内联CSS。

< !DOCTYPE html> < html > < head > < title > Inline CSS< / title > < / head > < body > < p style = "color:#009900; font-size:50px; font-style:italic; text-align:center; "> lsbin< / p > < / body > < / html >

输出如下：

文章图片
@import规则：@import规则用于将一个样式表导入另一个样式表。此规则还支持媒体查询, 以便用户可以导入依赖于媒体的样式表。 @import规则必须在任何@charset声明之后在文档顶部声明。
@import的特征：

@import规则用于将样式表导入HTML页面或其他样式表。
@import规则还用于添加媒体查询, 因此import是与媒体相关的。
它总是在文档顶部声明。

语法如下：

@import url|string list-of-mediaqueries;

属性值：

url |字符串：URL或字符串表示要导入的资源的位置。网址可以是相对的, 也可以是绝对的。
媒体查询列表：媒体查询列表以链接URL中定义的CSS规则的应用为条件。

范例1：考虑如下所示的两个CSS文件。

icss.css
@import url("i1css.css"); h1 {color: #00ff00; }
i1css.css
h1 {text-decoration: underline; font-size:60px; }p {padding-left: 20px; font-size: 60px; }

< !DOCTYPE html> < html > < head > < title > WebPage< / title > < link href = "https://www.lsbin.com/icss.css" rel = "stylesheet" > < / head > < body > < h1 > lsbin< / h1 > < p > A computer science portal for geeks< / p > < / body > < / html >

输出如下：

文章图片
范例2：

< !DOCTYPE html> < html > < head > < title > @import property< / title > < style type = "text/css" > @import url( "https://media.lsbin.org/wp-content/uploads/imp.css"); < / style > < / head > < body > < div id = "Geeks" > < h1 > lsbin< / h1 > < h2 > External style sheet (Using @import At-rule)< / h2 > < / div > < / body > < / html >

输出如下：