CSS3的魔法——引入CSS文件的方式

CSS的导入方式一般有三种:
一、HTML的style标签内

<style>
/*这里可以书写CSS样式*/
</style>

这种方式被称为内联css文件。

二、HTML元素的style属性内

<div style="/*这里可以书写css样式*/"></div>

这种方式被称为内联css样式。

三、作为单独的.css层叠样式表文件引入HTML中 ,导入CSS文件的方式有两种

1、链接式引入CSS,在HTML的head标签内使用link标签将一个独立的CSS文件导入到HTML,语法如下:

<link href="./mycss.css" rel="stylesheet" type="text/css"/> 

2、在HTML的style标签内部使用@import导入CSS文件,语法如下:

<style>
    @import"mystyle.css";
</style>

link标签和@import的区别: link是html加载前就引用,而import是html加载后才引用 。

CSS属性的继承性

如果某些属性在不同的样式表中被同样的选择器定义,那么属性值不同的样式表中被继承过来。 如下代码定义在外部样式表中。

H1{
    color:red;
    text-align:left;
    font-size:8pt;
}

而内部样式表中也有相关定义如下:

H1{
    text-align:right;
    font-size:20pt;
}

如果这时,拥有内部样式表的HTML文件使用link标签引入了外部样式表,这时外部样式表中的属性会被继承过来,于是H1得到的样式如下:

color:red;
text-align:right;
font-size:20pt;

从我们得到的css效果来看,我们从外部样式表继承得到了color样式,而text-align和font-size样式则被内部样式表的样式所取代。
在CSS中相同属性只能生效一条,规则为:
1、后声明的样式替换先声明的样式
2、根据选择器优先级来进行替换

发表评论

电子邮件地址不会被公开。 必填项已用*标注