内联框架和CSS概述

最新推荐文章于 2023-06-28 08:00:00 发布

Tong++

最新推荐文章于 2023-06-28 08:00:00 发布

阅读量230

点赞数

本文链接：https://blog.csdn.net/m0_46698935/article/details/120468355

版权

内联框架

内联框架（窗口）：在一个窗口中嵌入一个子窗口，在子窗口中显示一个网页。

<iframe src="初始页面的URL" frameborder="框架的边框宽度" width="宽度" height="高度"> 
</iframe>

css：级联样式表（Cascading Style Sheet)。

作用：用来修饰网页外观。

级联：关联，将页面内容与样式表关联。

样式表：修饰网页标签的语法集。

html与css的关系：html是网页内容，css是网页的样式。

（1）行内（行级）样式表

<a href="" style="color:red; font-size:20px;"></a>

style="属性名: 值;" （使用较少）

（2）内嵌样式表

将样式表与内容分离，通过选择器将内容与样式关联。

<style type="text/css">
   /*一组{}就是一个样式表*/
    .aa{
        color:green;
        font-size:30px;
    }
</style>

（3）外部样式表

在实际开发中，用到css非常多，css和html混合在一起维护比较麻烦，可以把css代码抽取到一个css文件中。

在html文件中引用外部css文件（实际开发中使用较多）：

<link href="./css/out.css" rel="stylesheet"/>

（1）标签选择器：以标签名作为参照

a{
    color:red;
    font-size:30px;
}

（2）类选择器：以类名作为选择参照

.aa{
    color:blue;
    font-size:20px;
}

（3）id选择器：id属性的值不允许重复

#aid{
    color:aqua;
    font-sizze:30px;
}

（4）选择器组合：将多个有共同属性的选择器组合在一起，对应同一个样式表

p,b,.aa{
    font-family:隶书；
}

（5）通配选择器：选中所有的标签

*{
    color:green;
}

行级样式表>id选择器>类选择器>标签选择器>通配选择器

关注