CSS样式引用方式汇总

╰半夏微凉° 2022-06-09 05:08 424阅读 0赞

1、外部文件引用方式；(推荐使用)  
  
2、使用@import引用外部CSS文件;  
  
3、内部文档头方式也叫内嵌法调用；  
  
4、直接插入式也叫行内样式。  
  
  
　一、外部文件引用方式  
　　外部文件引用方式即将CSS写成一个文件，在HTML文档头通过文件引用来进行风格控制。也就是把写好的CSS属性的文件保存为文件扩展名为.CSS文件。 CSS文件的引用是在HTML的标记之间写下列语句：

如当前文件目录下有一CSS 文件名为myStyle.css，内容如下：

P{
             font-family:'宋体';
        　　font-size:9pt;
        　　color:blue;
        }

H2{
              font-family:'宋体';
        　　font-size:13pt;
        　　color:red;
        　　}

则在引用是，用下列语句:  
  
  
<link rel="stylesheet" href="CSS/test.CSS">  
  
  
　当然，你可以复制这句，然后改下引用文件的路径及文件名就可以了。  
  
  
　　应用CSS文件的一个最大好处就是，你可以在每个HTML文件中引用这个文件，从而可使整个站点的HMTL文件在风格上保持一致，避免重复的CSS属性设置；  
  
  
　　另外，当你遇上改版或作某些重大调整要对风格进行修改时，可直接修改这个CSS文件，  
  
  
　　当然了，HTML文件一直引用最近更新的样式单，而不必每个每个HTML文件进行修改，  
  
  
　　如果在建站之初没有网站风格的统一规划并形成CSS文件，以后内容一多，想调整一下风格会累死你的。  
  
  
  
  
　　二、使用@import引用外部CSS文件  
  
  
　　　这种方式在文档头<heade></head>之间使用style标签引用外部css  
  
  
  
  
  
<Style Type="text/css">  
　　  
　　</Style>  
  
  
  
　　三、内部文档头方式  
  
  
　　这种方式与外部文件方式区别在于这种方式是将风格直接定义在文档头<heade></head>之间，而不是形成文件。  
  
  
　　这种风格定义产生作用的范围也只局限于本文件，其格式如下(套用上边的CSS)  
  
  
  
<Style Type="text/css">  
　　  
　　</Style>  
  
　　 这种方式的主要用处是，在一些方面统一风格的前提下，可针对具体页面进行具体调整。这两种方式并不相排斥，而是相互结合，  
  
  
　　比如在CSS文件中定义了P标志的字体大小font-size为10pt,而在内部文档中可定义P标志字体颜色font-color为Red;  
  
  
　　而在另一个HTML文件中定义颜色为Green，从这里，你也可能明白为什么风格样式单叫层叠式样单了。  
  
  
　　四、直接插入式  
  
  
　　直接插入式很简单，只是在每个HTML标记后书写CSS属性就可以了。  
  
  
　　这种方式很直接，如我们想规定一个Table标志中的字为红色，字体大小为10pt，则可书写如下：  
　　  
  
  
<Table style="color:red;font-size:10pt" />  
　　这种方式主要用于对具体的标记做具体的调整,其作用的范围只限于本标记。  
  
  
　　综上所述，这几种方式各有用途，在统一整个站点风格上，用第一种方式在整个页面风格统一上，  
  
  
　　用第三种方式在页内某个标记的具体微调上，第三种方式也有用武之地，所以各有千秋吧！  
  
  
　　前三种的目的在于一是统一风格，二是减少繁琐的标记属性设置，真是功不可没哟!