包含CSS文件的最佳方法是什么?为什么要使用@import?

2021年3月19日18:25:07 发表评论 458 次浏览

CSS属性可以通过多种不同方式包含在HTML页面中。 HTML文档根据要包括的样式表中的信息进行格式化。

包含CSS文件的方法有很多, 如下所示:

  • 外部样式表(使用HTML <link>标记):外部CSS包含单独的CSS文件, 该文件仅包含样式属性, 借助标签属性(例如, 类, id, 标题等)。 CSS属性写在一个扩展名为.css的单独文件中, 应使用链接标记链接到HTML文档。这意味着对于每个元素, 样式只能设置一次, 并将应用于整个网页。 link标签用于将外部样式表与html网页链接。
    <link rel="stylesheet" href="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", 该属性用于忽略浏览器不支持的样式表类型。

范例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 = "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 >

输出如下:

外部CSS

范例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 >

输出如下:

内联CSS

@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 = "icss.css" rel = "stylesheet" > 
</ head > 
  
< body > 
     < h1 >lsbin</ h1 > 
     < p >A computer science portal for geeks</ p > 
</ body > 
</ html >

输出如下:

包含CSS文件的最佳方法是什么?为什么要使用@import?1

范例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 >

输出如下:

包含CSS文件的最佳方法是什么?为什么要使用@import?2

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: