黑马html5+css3前端基础全套教程

  • 名称:黑马html5+css3前
  • 分类:网页设计  
  • 观看人数:加载中
  • 时间:2021/7/10 18:39:55

2.三种应用css方式:

1)创建外部样式表:

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

具体的示例如下:

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

div {

    width: 500px;

    height: 500px;

    background-color: red;

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

   

    Title

   

   

第三步:打开html文件,结果如下:

图片

link标签:

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

rel="stylesheet" 指明文件格式(stylesheet指的就是css文件)

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

2)创建嵌入式样式表:

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

   

    Title

   

   

结果如下:

图片

3)创建内联式样式:

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

   

    Title

   

结果如下:

图片

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

4)三者的比较:

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

5)重要性:

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

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

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

其中,指定方法如下:

使用标签:link标签

使用属性:media

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

  示例如下:

   

    Title

   

   

   

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

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

@media print {

    div {

        width: 100px;

        height: 100px;

        background-color: pink;

    }

}

div {

    width: 100px;

    height: 200px;

    background-color: red;

}

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

4.提供替代的样式表:

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

如下代码所示:

   

    Title

   

   

   

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

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