CSS学习之样式表引入

CSS样式表引入方式

• 内联样式
• 内嵌样式
• 外部样式
  • 链接式
  • 导入式

内联样式

<p style="height: 100px; weight: 50px;"> xxxx </p>
注意点：
    内联样式只能包含一个声明块，不能放样式表、@import、完整的规则。

内嵌样式

<style type="text/css" media="print, screen">  
<!--
    p {
        color: red;
        font-size: 100px;
    }
-->
</style>
注意点：
    1. 可以设置media属性，常用的media值为all、print、screen；
    2. type属性必须要有；
    3. 加<!-- xxx -->的目的在于保证网页的向后可访问性。
       对于较老的浏览器不仅会将style标记忽略，并且还会忽略声明，因为HTML的注释内容不会展示出来；
       而对于能理解CSS的浏览器仍能正常地读取样式表

外部样式

链接式

 <link rel="stylesheet" type="text/css" href="xxx.css" />
 <link rel="stylesheet" type="text/css" href="xxx2.css" />
 PS：如果有多个样式表，则会合并规则再应用到元素上
 
 # 替换样式表
 <link rel="alternate stylesheet" type="text/css" href="xxx.css" title="alternate" />
 PS: 如果浏览器支持，用户可以自行选择网页的样式(火狐的可以)
 
 # 首选样式表
 <link rel="stylesheet" type="text/css" href="xxx.css" title="Default" />
 有title属性并且rel为stylesheet的link就是首选样式表，优先级高于替换样式表
 PS：如果有多个首选样式表，那么只会选择一个进行使用，具体哪一个跟浏览器有关。
 
 # 永久样式表：始终用于页面的显示
 就是之前写过的这种，没有title属性并且rel为stylesheet
 <link rel="stylesheet" type="text/css" href="xxx.css" />
 <link rel="stylesheet" type="text/css" href="xxx2.css" />
 PS：如果有多个样式表，则会合并规则再应用到元素上
 
 # 小例子：
 可以利用title进行样式表的分组
 <link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" media="screen" />
 <link rel="stylesheet" type="text/css" href="sheet2.css" title="Default" media="print" />
 <link rel="alternate stylesheet" type="text/css" href="sheet3.css" title="Big Text" media="screen" />
 <link rel="alternate stylesheet" type="text/css" href="sheet4.css" title="Big Text" media="print" />
 只要为一个rel为stylesheet的link指定了title，也就是指定了该表为首选样式表，也就是优先于候选样式表使用，
 但是一旦用户选择了候选样式表，那么就不会再使用首选样式表了。
 在屏幕媒体上应用sheet3.css，在打印媒体上应用sheet4.css

导入式

 @import指令
 
 用法：
     <style type="text/css">
         @import url(sheet2.css);
         @import url(sheet3.css) screen;
         @import url(sheet4.css) print;
         @import url(sheet5.css) all;
         h1 {color: red;}
         p {font-size: 100px;}
     </style>
 注意点：
     1. @import url()必须写在style标签中而且也必须写在在其他声明之前，分号结束。
     2. 常见的用途就是使用在链接式link文件中，因为link文件中无法使用标签元素，此时@import就非常有用。

链接式与导入式的区别：
1. <link />标签属于XHTML，@import是属于css2.1
2. 使用<link />链接的css文件先加载到网页中，再进行编译显示
3. 使用@import导入的css文件，客户端显示HTML结构，再把css文件加载到网页中
4. @import是属于css2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的