小白学代码之iframe内联框架的认识和CSS基础入门
ccwgpt 2024-10-21 04:03 37 浏览 0 评论
一、内联框架标签
HTML的内联框架元素<iframe>标签可以将其他的HTML页面嵌入到当前页面中。
内联框架的代码结构：
<a href="www.abc.com" target="iframe"></a>
<iframe src="" srcdoc="" frameborder="0" name="iframe"></iframe>- src 表示被嵌套的URL地址；
- srcdoc 该属性可以是一段html代码，这些代码会被渲染到iframe中展示最终的样式。
- name 与标签和<form>标签的target属性可以配合使用，当点击对应的标签按钮时，可以跳转到点击的标签的URL地址。
拓展：使用iframe可以实现一个后台管理系统的菜单导航。
二、CSS基础语法
1.什么是CSS？
CSS全称：Cascading Style Sheets，中文名称叫层叠样式表。它是用来表示HTML、XML等文件 样式的计算机语言。
2.CSS相关术语：
CSS的规则由两个部分组成：
- 选择器：由html元素构成；
- 声明块：由一对“{…}”包裹的名、值对。
例如：
<style>
/* 声明块中的每一个名、值对，叫一个“样式声明” */
h1 {
/* 前景色 */
color: green;
font-weight: 200;
}
</style>
<header class="page-header">
<h1 id="page-title" class="title" style="color: green;">Web全栈开发入门课程</h1>
<h2 id="page-title">大家晚上好，我是Hello World！</h2>
</header>效果如下：
在Chrome浏览器中，通过F12打开控制台工具，通过选择工具选中h1标签，我们可以看到一个元素的样式会受到四个级别的影响：
- 继承的：根据元素在文档的结构和层级关系来确定它的最终样式；
- 浏览器客户端：用户代理样式（user agent style），基本上浏览器的表现样式都是一致的；
- 用户自定义：写在HTML文档<style>标签中的样式；
- 行内样式（内联样式）：写在元素的style属性中的样式。
3.CSS层叠与优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS层叠与优先级</title>
<!-- 如果CSS样式仅仅用来控制当前页面的元素，我们就用style标签写在当前页面中。 -->
<style>
/* CSS（Cascading Style Sheets）：层叠样式表 */
/* 1.标签选择器 */
h1 {
color: green;
}
/* 2.属性选择器 */
/* *：表示所有元素（标签） */
*[class="title"] {
color: hotpink;
}
h1[class="title"] {
color: indigo;
}
h2[class="title"] {
color: mediumslateblue;
}
/* 3.类选择器 */
/* .title {
color: lawngreen;
} */
/* 4.id选择器 */
/* #page-title {
color: lightseagreen;
} */
/* 标签选择器 < 类选择器 < id选择器 < 行内样式 */
</style>
</head>
<body>
<header class="page-header">
<h1 id="page-title" class="title">Web全栈开发入门课程</h1>
<h2 id="page-title" class="title">大家晚上好，我是Hello World！</h2>
</header>
</body>
</html>效果图：
由上述例子可以看出CSS的优先级是：
标签选择器 < 类选择器 < id选择器 < 行内样式
其中行内元素的优先级别是最高的，这点是需要注意的，其实这个优先级从控制台也是能看出来的，如下图：
通过学习CSS的基础知识，我发现还是有好多属性需要去记，这个内容实在是太多了，还是需要多写，多练才可以熟能生巧。
相关推荐
- 丨公司丨公司大架构整理汇总
-
注：本文转自团队成员原创作品，特此鸣谢（公号：法海图鉴）今日话题公司大架构整理背景介绍经过前几期话题对各种企业类型的介绍，想必大家已经有了初步认识。之后我将带着大家开启对公司的深入了解。本期...
- 图解物理--八年级物理下册最全知识框架导图
-
第七章力1力2弹力3重力第八章运动和力1牛顿第一定律2二力平衡3摩擦力第九章压强1压强2液体压强3大气压强4流体压强与流速的关系第十章浮力1浮力2阿基米德原理3物体的浮沉条件及应用第十一章功...
- 八年级上册生物，思维导图，期末高分必备资料，家长收藏
-
这是八年级上册生物的思维导图，孩子在背诵知识点的时候，可以看一下知识点在导图中的位置，形成对知识点整体的把握，有助于学生拿高分，特别是图片中带红色星星的部分，更是要注意背诵，是重点内容。家长可以把图片...
- 2019政府工作报告精华，这张思维导图里全都有
-
每经记者：李可愚每经编辑：陈星每日经济新闻
- 图解薪酬体系结构设计
-
...
- 司考复习独家总结!一张图总结行政法知识结构体系
-
作为三大实体法之一，行政法的分值在60分左右，行政法在司法考试中一直比较平稳常规，没有偏题怪题，还是比较容易得分的。小编要提醒大家，在3月之前要把三大实体法学习一遍。下图是厚大在线360导学师小周总结...
- 实用干货!高中物理框架图，让零碎知识“串联”起来
-
高中物理学习一定要抓好逻辑结构大框架！了解整个知识框架体系后，更易抓住骨干知识，干掉重难知识点~今天给大家分享高中物理的框架图同学们赶紧收藏起来吧！力学知识结构图光学知识结构图热学、原子物理知识结构图...
- 254m超高层办公楼型钢砼框架-核心筒结构图
-
高度类别：超高层建筑钢筋混凝土结构：框架,框架核心筒钢结构：钢框架建筑功能：办公包含：办公楼57层（-3层）254.150m钻孔灌注桩桩+筏板型钢混凝土框架-钢筋混凝土核心筒西裙房2层（-...
- 砖混结构与框架结构，究竟有何区别?千万别被坑!
-
现在买房装修的人最怕啥？不是价格高，而是房子不安全！两种主流建筑结构，砖混靠墙，框架靠柱子，选错了隔墙都可能要命。简单说，砖混便宜但别碰高层，框架贵点但能保命。砖混那些承重墙根本不能拆，想砸墙改个开放...
- 大师一百——高中化学必考:《元素周期律》考点框架图
-
今天大师给大家带来的是高中化学的《元素周期律》考点框架图，高中的同学必须牢记于心，这种重要的考点，考试是一定会考的！化学大师...
- 需求分析框架图
-
需求分析框架图
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- mfc框架 (52)
- abb框架断路器 (48)
- beego框架 (52)
- java框架spring (58)
- grpc框架 (65)
- tornado框架 (48)
- 前端框架bootstrap (54)
- orm框架有哪些 (51)
- ppt框架 (48)
- 内联框架 (52)
- cad怎么画框架 (58)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)