• css样式引入优先级?


    css中的优先级讲的有

      1.选择器的优先级。

      2.样式引入的优先级。

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

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

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

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

     测试代码如下。很简单,先测试内联样式 。一段文本,给设置个color:red;红色。

    <!DOCTYPE html >
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
        p{color:red;}
    </style>
    </head>
    <body>
        <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>
    </body>
    </html>

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

    在接着来看看,用link的方式引入一个外部样式。

      引入方式如下。

    <link rel="stylesheet" href="Noname1.css">
    <style>
        p{    color:red;}
    </style>

      外部样式看下列代码:

    p{
        color:blue;
    }

    浏览器显示如下:为什么什么显示的不是蓝色?

    显示还是红色,难道就是  内联样式>连接样式?接下来调换了调用的下位置。代码如下。

    <style>
        p{    color:red;}
    </style>
    <link rel="stylesheet" href="Noname1.css">

    浏览器显示如下。

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

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

    然后接下要解决的就是@import的问题了。

    解释是这样:

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

    例如:  

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

      2.<style type="text/css">

    @import "mytest/div+css/mytest.css";

    </style> 

     也就是用style,或者是使用外部样式文件再去引入多个样式文件。

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

    另开一个css样式文件,代码如下:

    p{
        color:yellow;
    }

    html代码如下:

    <!DOCTYPE html >
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    
    
    <style>
        @import "Noname2.css";
    </style>
    
    
    </head>
    <body>
        <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>
    </body>
    </html>

    浏览器显示没有问题:

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

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

    <link rel="stylesheet" href="Noname1.css">
    <style>
        @import "Noname2.css";
    </style>

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

    在看看放在后面会如何。

    <style>
        @import "Noname2.css";
    </style>
    <link rel="stylesheet" href="Noname1.css">

    浏览器显示如下。

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

    四种样式的优先级别是:

       行内样式最高、

       内嵌样式  与  链接样式(哪个更靠近标签,哪个样式的优先级就越高)

         导入样式?

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

  • 相关阅读:
    计算机基础--http的基础整理和巩固
    设计方案系列-如何看待前端框架选型 ?
    数据可视化-svg入门基础(二)
    数据可视化系列--svg入门基础(一)
    Jenkins自动部署增加http状态码校验
    快速搭建python程序
    Request 接收参数乱码原理解析三:实例分析
    Request 接收参数乱码原理解析二:浏览器端编码原理
    Request 接收参数乱码原理解析一:服务器端解码原理
    Newtonsoft.Json(Json.Net)学习笔记
  • 原文地址:https://www.cnblogs.com/webHero/p/5638186.html
Copyright © 2020-2023  润新知