网页中引用CSS 样式篇_网页引用css-优快云博客

本文链接：https://blog.youkuaiyun.com/Ran_zz/article/details/147191129

基础知识

SCC的引用方法（3种）

1，外部样式表

rel的取值是固定的，即stylesheet,表示引入一个样式表文件（css文件）

type的取值也是固定的，即text/css

<link rel="stylesheet" type="text/css" href="文件路径" />

2，内部样式表

<style type="text/css">
    ……
</style>

3，行内样式表

<h1 style="color:red;"> 内容 </h1>

样式配置的优先级

样式配置的优先级有四级

4级：行内样式
3级：id选择器
2级：类选择器
1级：标签选择器

样式配置优先级遵循：行内样式 > id选择器 > 类选择器 > 标签选择器 的原则

无优先级的情况下则遵循 “后来居上”（层级）的原则。

CSS的注释格式为：/* 注释内容*/

一，当scc如下时，因为这两个选择器等级相同，遵循“后来居上”原则，绿色在最下面，所以绿色会覆盖前面所有颜色

    <style>
        h1{
            color:blue
         }
         h1{
            color:yellow
         }
         h1{
            color:green
         }
    </style>
</head>
<body>
    <h1>我是一级标题</h1>
    <h1>我是绿色</h1>
</body>

绿色在最下面，所以绿色会覆盖前面所有颜色，运行结果如下：

二，当css如下时，行内样式的等级更高

    <style>
        h2{
            color:blue
         }
         h2{
            color:yellow
         }
         h2{
            color:purple
         }
    </style>
</head>
<body>
    <h2 style="color: green;">我是二级标题</h2>    
</body>

运行结果如下：

三，在这个css中，里面有标签选择器和类选择器两个优先级，因为类选择器比标签选择器等级高，所以运行的是类选择器

<style>
        /*标签选择器*/
        h2{
            color:blue
        }
        /*类选择器*/
        .my-title{
            color: red;
        }
        /*标签选择器*/
        h2{
            color:green
        }
    </style>
</head>
<body>
    <h2 class="my-title" id="title1">二级标题</h2>
</body>

结果如下：

四，这个scc中，有三个优先级，同样根据样式配置优先级原则，id选择器是这个css中最高的优先级，所以运行的是id选择器

 <style>
        /*标签选择器*/
        h2{
            color:blue
        }
        /*类选择器*/
        .my-title{
            color: red;
        }
        /*id选择器*/
        #title1{
        color: orange;
      }
    </style>
</head>
<body>
    <h2 class="my-title" id="title1">二级标题</h2>
</body>

运行结果如下：

综合以上来看下面这个代码

     <style>
        /*类选择器*/
        .my-title{
          color: red;
        } 
        .my-title{
          color: pink;
        }
        /* 标签选择器*/
        h1{
        color: brown;
       }
       h1{
        color:blue
       }
         /*id选择器*/
      #title1{
        color: orange;
      }
      #title2{
        color: pink;
      }
      #title3{
        color: purple;
      }     
    </style>
</head>
<body>    
    <h1 style="color: green;"id="title2">嘻嘻</h1>
    <h1 class="my-title" id="title1">我是一级标题</h1>
    <h1 class="my-title" id="title3">嘻嘻哈哈</h1>
    <h1 class="my-title" >一级标题</h1>
    <h1>这是什么颜色</h1>    
</body>

最高等级的行内样式 <h1 style="color: green;"id="title2">嘻嘻</h1> 即使有 ”id选择器“ 改为粉色，但行内样式等级最高，所以是绿色。

下一级到 “id选择器”

<h1 class="my-title" id="title1">我是一级标题</h1> 是橘色

<h1 class="my-title" id="title3">嘻嘻哈哈</h1> 是紫色

接下来看 “类选择器”，因为这两个等级相同，粉色在下面，覆盖了红色，所以

<h1 class="my-title" >一级标题</h1> 运行结果是粉色

最后的 “标签选择器” 也是同理，蓝色覆盖了棕色，运行出来的结果最终也是蓝色。