jsp中引入css文件的优先级css样式引入优先级

1.选择器的优先级。

2.样式引入的优先级。

本日要研究的是样式引入的优先级。
网上又很多答案都是如下的，但是真的是这样的吗，让我们来探一探究竟是如何。

jsp中引入css文件的优先级css样式引入优先级 CSS

四种样式的优先级别是：行内样式最高、

？优先级？内嵌样式>链接样式>导入样式？

在这四种的优先中，行内样式最高（内嵌样式），大家都是认可的。
但剩下的3中就会是我们想的那样吗？

测试代码如下。
很大略，先测试内联样式。
一段文本，给设置个color：red；赤色。

<!DOCTYPE html >\r<html>\r<head>\r<meta http-equiv=\"大众Content-Type\公众 content=\公众text/html; charset=utf-8\"大众 />\r<title>无标题文档</title>\r<style>\r p{color:red;}\r</style>\r</head>\r<body>\r <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis natus dolorum iste quaerat alias tenetur fugit esse ratione officiis blanditiis similique qui pariatur tempore maxime ut. Accusamus dolor aut quod?</p>\r</body>\r</html>

浏览器显示如下。
没什么问题。

在接着来看看，用link的办法引入一个外部样式。

引入办法如下。

外部样式看下列代码：

浏览器显示如下：为什么什么显示的不是蓝色？

显示还是赤色，难道便是内联样式>连接样式？接下来调换了调用的下位置。
代码如下。

浏览器显示如下。

这样浏览器显示的却是蓝色，这时候我们就能看出个大概了。

优先便是个顺序解析问题，谁的引入样式在前面，后面的样式就会被覆盖前面的样式。
也便是说，哪个样式离标签越近，哪个样式的优先就越高。

然后接下要办理的便是@import的问题了。

阐明是这样：

@import既可以为页面引入外部样式表，也可以在一个样式表中引入另一个样式表。

例如：

1.@import url(\"大众style.css\公众);一个样式表中引入另一个样式表。

2.<style type=\"大众text/css\公众>

@import \公众mytest/div+css/mytest.css\公众;

</style>

也便是用style，或者是利用外部样式文件再去引入多个样式文件。

第一种中，直接在style标签内容中利用。
@import。

另开一个css样式文件，代码如下：

html代码如下：

<!DOCTYPE html >\r<html>\r<head>\r<meta http-equiv=\"大众Content-Type\公众 content=\公众text/html; charset=utf-8\公众 />\r<title>无标题文档</title>\r\r\r<style>\r @import \公众Noname2.css\"大众;\r</style>\r\r\r</head>\r<body>\r <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis natus dolorum iste quaerat alias tenetur fugit esse ratione officiis blanditiis similique qui pariatur tempore maxime ut. Accusamus dolor aut quod?</p>\r</body>\r</html>

浏览器显示没有问题：

接着利用在利用link标签去测试优先级。

先放在前面。
引入代码如下：

浏览器显示看到的是还是上面讲到，谁越靠近p标签，就会采取谁的样式。
有个词叫上面来着。
近水楼台先得月。
。
。

在看看放在后面会如何。

浏览器显示如下。

没有什么问题。
还是一样，近水楼台先得月。
。

四种样式的优先级别是：

行内样式最高、

内嵌样式与链接样式（哪个更靠近标签，哪个样式的优先级就越高）

导入样式？

@import的优先级问题就请等下篇。