正在播放：黑马html5+css3前端基础全套教程

2.三种应用css方式：

1）创建外部样式表：

外部样式表即创建后缀为css的文件，然后在想要使用的网页中引入该文件即可。

具体的示例如下：

第一步：创建名为test.css的文件，并写入以下内容：

div {

    width: 500px;

    height: 500px;

    background-color: red;

} 

第二步：在html文件中引入该css文件，具体靠link标签实现，该标签写在head标签内，如下：

   

第三步：打开html文件，结果如下：

图片

link标签：

link标签除去引入css文件外，还有其它的作用，但是文中没有具体给出。然后，link标签的两个属性：

rel="stylesheet" 指明文件格式（stylesheet指的就是css文件）

href = “url” 指明引入css文件的地址

2）创建嵌入式样式表：

嵌入式样式表，通过html中的style标签实现，里面直接写入css代码即可。如下代码所示：

   

结果如下：

图片

3）创建内联式样式：

这个靠的是HTML标签内共有的一个属性style中，如下：

   

结果如下：

图片

可以看出的是，style属性值中不同的样式用分号隔开。

4）三者的比力：

首先最为保举的是外部样式表，其次是嵌入式样式。最后才是内联式的。因为我们一般写代码的一个目标是实现代码分离，即HTML代码和CSS代码分离，这样写的代码干净易懂。

5）重要性：

前一个章节提及了对于某个标签来说，会有多个css样式，发生冲突是很常见的。而在其它条件相同的情况下，内联式是最重要的，因为它最晚出现，其它的都出现在head标签内，而内联式出现在body标签内。

3.使用与媒体相关的样式表：

可以指定一个只用于特定输出的样式表，如只用于打印，或只用于用浏览器在屏幕上查看。

其中，指定方法如下：

使用标签：link标签

使用属性：media

media属性的值：print（打印）、screen（屏幕显示）、all（默认声明）（当然还有其它值，但是这三者是最为常用的）

  示例如下：

   

这段代码的意思是：当我们使用浏览器查看网页的时候，screen.css里面的代码会发挥作用，当我们打印网页时候，print.css里面的代码会发生作用。

除去上面的使用方法外，还有一种方法，就是在css代码中使用，如下：

@media print {

    div {

        width: 100px;

        height: 100px;

        background-color: pink;

    }

}

div {

    width: 100px;

    height: 200px;

    background-color: red;

}

这样，第一行代码代表当打印的时候起作用的样式。

4.提供替代的样式表：

规范允许设置一组基本的持久性样式，一组默认样式和多组可替代样式表。你可以这样理解，你有一个网页，基本的持久性的样式就是网页框架的基本样式，而一组默认样式就是我们个人主页的基本样式，我们想要调整样式，就是使用了可替代的样式表。

如下代码所示：

   

其中，rel="alternate"代表着这个样式就是可替代的样式表。

老实说，我觉得这不就是多写几个css文件嘛，只是用处不同罢了^_^。