百度360必应搜狗淘宝本站头条
vba高级教程svn连接scheduledtaskmybatis plus结构体数组
当前位置：网站首页 > 编程网 > 正文

小白学代码之iframe内联框架的认识和CSS基础入门

yuyutoo 2024-10-24 17:47 20 浏览 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的基础知识，我发现还是有好多属性需要去记，这个内容实在是太多了，还是需要多写，多练才可以熟能生巧。

相关推荐

实现分页的最简单的方式(附带源码下载)

分页是每个网站并不可少的，但是处理往往非常麻烦，虽然有很多的插件可以使用，但复杂度依然不减，今天我们来手敲一个最简单的实现方式，看够之后分页再也不是难题，而且以后用插件也懂原理了。手动擒来！文章概略：...

什么是XSS攻击，我们又该如何防范?

什么是XSS?XSS，全称为CrossSiteScripting，意思是跨站脚本攻击，为了与层叠样式表（CSS：CascadingStyleSheets...

网站wn万能命令wn.run怎么用?

wn万能命令是一个在线工具快捷跳转平台，将各种高质量的在线工具按应用站点聚合起来，让你以方便快捷好记的方式寻找和使用网页型在线工具。...

游客在三清山景区坐椅子拍照被强制收费 官方通报:已责令摄影点立即整改

大皖新闻讯7月31日，大皖新闻报道了游客称三清山景区坐下椅子拍照就被强制收费一事，引发关注。31日下午，三清山景区管理局发布情况通报称，经调查核实，视频反映情况属实，已责令该摄影点立即整改。官方发布情...

使用JavaScript如何获取网站网址

在做网站开发时，我们有时候会获取当前页面的完整路径。在网页前端如何实现呢？请在网页脚本代码段中粘贴如下代码。functiongetRootPath(){//获取当前网址，...

重磅发布!时间终于确定

]|\[sS])*"|'(?:[^\']|\[sS])*'|[^)}]+)s*)/g,l=window.testenv_reshost||window.__moon_host||"res.wx.qq...

收到一个神奇的任务，聊天工具运行不正常，原来是浏览器的问题

如何神奇呢？先来简单介绍一下背景，接下来再说一下这个现象如何神奇。出问题的是一个即时聊天工具插件，被嵌入到客户的第三方程序中。工程师说，我们自己的例子程序是没问题的，而且也不是所有的客户端都有问题。他...

微服务架构实战:商城的用户登录与账户切换设计、订单查询设计

商城的用户登录与账号切换设计在移动商城的设计中，除商品和分类查询是完全开放权限的页面外，其他涉及个人隐私的个人信息、订单查询和购物车等都必须进行权限管理。有关用户权限管理的功能,在这里根据移动设备的特...

前端进阶-每日一练(4)

本期问题：document.write和innerHTML、innerText有什么区别？jQuery中如何中断each遍历？如何查找数组中的最小值和最大值？如何做到优雅降级，渐进增强？$....

js中的正则表达式入门

什么是正则表达式呢？...

前端路由简介以及vue-router实现原理

作者：muwoo来源：https://zhuanlan.zhihu.com/p/37730038...

详解三类的友情链接不能交换

“假PR页面导出链接太多专门的友情链接页无效链接内页的链接关联性网页快照更新的速度收录的数量nofollow生成静态伪装图片链接链接工厂下拉列表或滚动js脚本转向fram...

福建推进河(湖)长制工作:当好“施工队长”建设八闽幸福河湖

]|\[sS])*"|'(?:[^\']|\[sS])*'|[^)}]+)s*)/g,l=window.testenv_reshost||window.__moon_host||"res.wx.qq...

如何愉快地使用Via浏览器

...

将 Safari 打造成 iOS 里的快速启动中心:Bookmarklet

Safari作为iOS设备上我们使用最为频繁的App之一，它除了能让我们翱翔于无边的网际之外，其实利用它本身自带的书签功能我们还可以将其打造成一个快速启动中心。在桌面环境中大多数浏览器都允许...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表