HTML引入CSS样式三种方法及优先级

时间:2022-11-15 21:20:21

方法

    css的样式引用由3种方式。分别为内联定义、链入内部CSS和链入外部CSS。有一点注意,样式表放在不同的地方,产生作用的范围不同(以下会说明)。

内联定义

   内联定义,即在对象的标记内使用对象的style属性定义适用的样式表属性,格式定义为 :<div style="内容"><div>,如下示例

HTML引入CSS样式三种方法及优先级

浏览器此时显示内容

HTML引入CSS样式三种方法及优先级

链入内部CSS

  CSS内链接是由<style></style>标记对放在<head></head>中,在<style>中有一个类型属性type,后面接test/css,表示CSS文本,语法格式如下:

  <style type="text/css">

   /*这里写CSS内容*/

 </style>

  示例如下:

  HTML引入CSS样式三种方法及优先级

效果图如下:

HTML引入CSS样式三种方法及优先级

链接外部CSS

  css外链接是把CSS文件放在网页外面,通过链接<link>使CSS文件对本网页的样式有效,就相当于C语言的.h文件喽。

  <link>里面的属性有type、rel、href,其中type固定为text/css,rel(即样式表)固定为stylesheet,href自然指的就是css文件的地址了,语法格式为:

  <link type="text/css" rel="stylesheet"  href="css文件的存放地址">

  示例代码如下:

  HTML引入CSS样式三种方法及优先级

  web.css内容为

  HTML引入CSS样式三种方法及优先级

 效果如下

HTML引入CSS样式三种方法及优先级

三种样式范围及优先级

   简而言之吧,

   链接外部CSS:作用在引用该CSS文件的网页中。

   链接内部CSS:只作用在该CSS文件的网页中。

  内联定义:只作用在定义该样式的div层中,对其它层无效。

三种样式优先级

  不知道以“优先级”这个词来形容是否合适,专业的如果看到莫怪。下面以代码效果说明:

  HTML引入CSS样式三种方法及优先级

  我在外部CSS文件内定义class的div1背景颜色为红色,内部CSS定义为黑色,内联定义为绿色,效果图如下:

  HTML引入CSS样式三种方法及优先级

 显示为绿色,好吧,内联定义优先级最高。

然后我再把内联定义去掉,比较一下内部CSS和外部CSS的优先级,如下

 HTML引入CSS样式三种方法及优先级

此时效果图如下:

 HTML引入CSS样式三种方法及优先级

恩,就这样了,内部CSS次之,外部CSS优先级最低。重要的话说三遍,优先级:内联定义最高、内部CSS次之、外部CSS优先级最低。或许我提优先级的时候,很多人感觉想想也应该是这样。恩,我也这样想的,不过还是验证一下呗,大周末的也没事儿,斗地主也没豆子了。

后语

  脑袋里还有些对div模糊的,想写,不过下节写background的知识。