Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 用iframe写的一个简单的小后台，及CSS样式优先级和元素样式的四个引入方式汇总
Blogger Information
Blog 16
fans 0
comment 0
visits 11411
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
用iframe写的一个简单的小后台，及CSS样式优先级和元素样式的四个引入方式汇总
多@点的博客
Original
785 people have browsed it

用iframe写的一个简单的小后台

html代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>用iframe写一个迷你小后台</title>
  7.     <link rel="stylesheet" href="css/dome1.css">
  8. </head>
  9. <body>
  10.     <!-- 总体 -->
  11.     <div class="total">
  12.         <!-- 头部 -->
  13.         <div class="header">
  14.             <div class="header-left">网站后台管理</div>
  15.             <div class="header-right"><a href="../1209/dome3.html" target="content">登录</a></div>
  16.         </div>
  17.         <div class="aside">
  18.             <a href="../oooo/img.html" target="content">壁纸</a>
  19.             <a href="../1209/dome1.html" target="content">课程表</a>
  20.             <a href="../1209/dome2.html" target="content">列表</a>
  21.             <a href="https://www.baidu.com/" target="content">百度</a>
  22.             <a href="https://www.php.cn/" target="content">php中文网</a>
  23.         </div>
  24.         <div class="main">
  25.             <iframe srcdoc="请点击左侧按钮" name="content"></iframe>
  26.         </div>
  27.     </div>
  28. </body>
  29. </html>
css代码：
  1. a{
  2.     text-decoration: none;
  3. }
  4. .total{
  5.     width:960px;
  6.     margin:0 auto;
  7.     margin-top:50px;
  8. }
  9. .header{
  10.     height:60px;
  11.     background:rgb(174, 174, 184);
  12.     font-size:24px;
  13.     line-height:60px;
  14.     padding:0 10px;
  15. }
  16. .header-left{
  17.     float:left;
  18. }
  19. .header-right{
  20.     float:right;
  21. }
  22. .aside{
  23.     width:200px;
  24.     height:600px;
  25.     background:lightcyan;
  26.     border:1px solid rgb(207, 235, 235);
  27.     float:left;
  28. }
  29. .main{
  30.     float:left;
  31. }
  32. iframe{
  33.     width:754px;
  34.     height:598px;
  35.     background-color: rgb(240, 235, 235);
  36. }
  37. .aside a {
  38.     color: rgb(121, 20, 236);
  39.     display:block;
  40.     font-size:30px;
  41.     text-align:center;
  42.     line-height:50px;
  43.     border-bottom:1px solid rgb(181, 226, 226);
  44.   }

登录页面：

课程表页面：

CSS样式优先级

css的继承性性

css的继承性指的是应用在一个标签上的那些css属性被传到其子标签上。

  1. <div style="color:red;">
  2.         <p>Hello World!</p>
  3. </div>

如果<div>有个属性color: red,则这个属性将被<p>继承，即<p>也拥有属性color: red。

1：最近的祖先样式比其他祖先样式优先级高。

  1. <div style="color:red;">
  2.         <div style="color:blue;">
  3.             <div class="son">Hello World!</div>
  4.         </div>
  5. </div>

2：”直接样式”比”祖先样式”优先级高。

  1. <div style="color:red;">
  2.         <div class="son" style="color:pink;">Hello World!</div>
  3. </div>

选择器的优先级

CSS7种基础的选择器：

ID 选择器， 如 #id{}
类选择器， 如 .class{}
属性选择器， 如 a[href=”segmentfault.com”]{}
伪类选择器， 如 :hover{}
伪元素选择器， 如 ::before{}
标签选择器， 如 span{}
通配选择器， 如 *{}

3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

html代码：
  1. <div class="color-a" id="color-b" style="color:green;">
  2.         Hello World!
  3. </div>
css代码：
  1. #color-b{
  2.             color:red;
  3.         }
  4. .color-a{
  5.             color:blue;
  6.         }
  7. div{
  8.             color:grey;
  9.         }

4：属性后插有!important的属性拥有最高优先级。若同时插有!important，则再利用规则3判断优先级。

html代码：
  1. <div class="father">
  2.         <p class="son">Hello World!</p>
  3. </div>
css代码：
  1. p{
  2.             color:red !important;
  3.         }
  4. .father .son{
  5.             color:blue;
  6.         }

HTML中引入CSS的方式

有4种方式可以在HTML中引入CSS。其中有2种方式是在HTML文件中直接添加CSS代码，另外两种是引入外部CSS文件。

1.内联方式

内联方式指的是直接在HTML标签中的style属性中添加CSS。

  1. <div style="color:red;">你好！</div>

2.嵌入方式

嵌入方式指的是在HTML头部中的<style>标签下书写CSS代码。

  1. <head>
  2.         <style>
  3.             .cotent{
  4.                 color:red;
  5.             }
  6.         </style>
  7. </head>

3.链接方式

链接方式指的是使用HTML头部的<head>标签引入外部的CSS文件。

  1. <head>
  2.         <link rel="stylesheet" type="text/css" href="css/style.css">
  3. </head>

4.导入方式

导入方式指的是使用CSS规则引入外部CSS文件。

  1. <style>
  2.         @import url(style.css);
  3. </style>

总结

内联方式只能改变当前标签的样式，如果想要改变多个样式，就要修改很多，会使代码变得冗长，使网页难以维护。嵌入方式只对当前页面有效，当多个页面需要引入相同的CSS代码时，这样写会导致代码冗余，也不利于维护。链接方式是最常用的，使用这种方式，所有的CSS代码只存在于单独的CSS文件中，所以具有良好的可维护性。所以，我们应尽量使用<link>标签导入外部CSS文件，避免或者少使用其他三种方式。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
1 comments
葵花宝典 2020-12-12 20:38:30
大佬, 你那个内嵌的iframe的高宽怎么弄的, 我弄的一调整浏览器大小, 调小时,iframe就自动跳出main标签,到最下面显示了
1 floor
Author's latest blog post