CSS是HTML装扮器,一个漂亮的Web页面不可能没有它。HTML页面中有多种引用CSS的方法,不同的方法导致的效率也不一样。通常,我们可以将定义于<style></style>间的样式控制代码提取出来,保存到单独的.css文件中,然后在HTML页面中以<LINK>标记或者@import标记的方式进行引用:

<style>

@import url("mysheet1.css");

</style>

请注意2点:1、.css文件中无需包括<style>标记;2、@import和LINK标记要定义在HTML页面的HEAD部分。



样式表的主要功能是指定同一个文件在不同媒体上按不同的样式显示。通过在种方式可指定不同媒体

  • @media方式

    <style>
        @media screen {div{color:red;}}
        @media print {div{color:green;}}
        </style>
        <div>不同媒体显示不同颜色</div>
        
  • @import是另一种指定不同媒体的方式,它可引入外部的css文档。它的语法格式是:

    <style>
        @import url("simple.css") screen;
        </style>
        *********************************************************************************************************************
  • 在HTML4.0中,可以用LINK标记的media属性为不同媒体类型指定样式表。

    <LINK rel="stylesheet" href="import.css" type="text/css" media="print">
        

!important规则会改变应用样式的优先级,有!important参数样式的优先级最高,会优先显示。

<style>
h1 {color:red;}
h1 {color:green !important;}
</style>
<h1>字体为绿色</h1>