用iframe写的一个简单的小后台，及CSS样式优先级和元素样式的四个引入方式汇总 - html和css的学习

首页 > 博客列表 > 用iframe写的一个简单的小后台，及CSS样式优先级和元素样式的四个引入方式汇总

博主信息

博文 16

粉丝 0

访问量 14837

专题推荐

更多>

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

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用iframe写一个迷你小后台</title>
    <link rel="stylesheet" href="css/dome1.css">
</head>
<body>
    <!-- 总体 -->
    <div class="total">
        <!-- 头部 -->
        <div class="header">
            <div class="header-left">网站后台管理</div>
            <div class="header-right"><a href="../1209/dome3.html" target="content">登录</a></div>
        </div>
        <div class="aside">
            <a href="../oooo/img.html" target="content">壁纸</a>
            <a href="../1209/dome1.html" target="content">课程表</a>
            <a href="../1209/dome2.html" target="content">列表</a>
            <a href="https://www.baidu.com/" target="content">百度</a>
            <a href="https://www.php.cn/" target="content">php中文网</a>
        </div>
        <div class="main">
            <iframe srcdoc="请点击左侧按钮" name="content"></iframe>
        </div>
    </div>
</body>
</html>

css代码：

a{
    text-decoration: none;
}
.total{
    width:960px;
    margin:0 auto;
    margin-top:50px;
}
.header{
    height:60px;
    background:rgb(174, 174, 184);
    font-size:24px;
    line-height:60px;
    padding:0 10px;
}
.header-left{
    float:left;
}
.header-right{
    float:right;
}
.aside{
    width:200px;
    height:600px;
    background:lightcyan;
    border:1px solid rgb(207, 235, 235);
    float:left;
}
.main{
    float:left;
}
iframe{
    width:754px;
    height:598px;
    background-color: rgb(240, 235, 235);
}
.aside a {
    color: rgb(121, 20, 236);
    display:block;
    font-size:30px;
    text-align:center;
    line-height:50px;
    border-bottom:1px solid rgb(181, 226, 226);
  }

登录页面：

课程表页面：

CSS样式优先级

css的继承性性

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

<div style="color:red;">
        <p>Hello World!</p>
</div>

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

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

<div style="color:red;">
        <div style="color:blue;">
            <div class="son">Hello World!</div>
        </div>
</div>

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

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

选择器的优先级

CSS7种基础的选择器：

ID 选择器，如 #id{}

类选择器，如 .class{}

属性选择器，如 a[href=”segmentfault.com”]{}

伪类选择器，如 :hover{}

伪元素选择器，如 ::before{}

标签选择器，如 span{}

通配选择器，如 *{}

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

html代码：

<div class="color-a" id="color-b" style="color:green;">
        Hello World!
</div>

css代码：

#color-b{
            color:red;
        }
.color-a{
            color:blue;
        }
div{
            color:grey;
        }

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

html代码：

<div class="father">
        <p class="son">Hello World!</p>
</div>

css代码：

p{
            color:red !important;
        }
.father .son{
            color:blue;
        }

HTML中引入CSS的方式

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

1.内联方式

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

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

2.嵌入方式

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

<head>
        <style>
            .cotent{
                color:red;
            }
        </style>
</head>

3.链接方式

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

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

4.导入方式

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

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

总结

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

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

1条评论

葵花宝典 2020-12-12 20:38:30

大佬, 你那个内嵌的iframe的高宽怎么弄的, 我弄的一调整浏览器大小, 调小时,iframe就自动跳出main标签,到最下面显示了

1楼

作者最新博文

html页面中常用的文本元素的总结-2019年3月11日20时00分

2019-03-12 17:52:56

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

html代码：

css代码：

登录页面：

课程表页面：

CSS样式优先级

css的继承性性

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

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

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

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

选择器的优先级

CSS7种基础的选择器：

ID 选择器， 如 #id{}

类选择器， 如 .class{}

属性选择器， 如 a[href=”segmentfault.com”]{}

伪类选择器， 如 :hover{}

伪元素选择器， 如 ::before{}

标签选择器， 如 span{}

通配选择器， 如 *{}

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

html代码：

css代码：

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

html代码：

css代码：

HTML中引入CSS的方式

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

1.内联方式

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

2.嵌入方式

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

3.链接方式

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

4.导入方式

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

总结

ID 选择器，如 #id{}

类选择器，如 .class{}

属性选择器，如 a[href=”segmentfault.com”]{}

伪类选择器，如 :hover{}

伪元素选择器，如 ::before{}

标签选择器，如 span{}

通配选择器，如 *{}