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代码即可。如下代码所示:
div {
width: 500px;
height: 500px;
background-color: red;
}
结果如下:
图片
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文件嘛,只是用处不同罢了^_^。
The most popular courses