龙空技术网

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

陶伟学代码 188

前言:

此时朋友们对“css内联是”可能比较关注,咱们都想要剖析一些“css内联是”的相关资讯。那么小编也在网上搜集了一些有关“css内联是””的相关资讯,希望姐妹们能喜欢,同学们快快来学习一下吧!

一、内联框架标签

HTML的内联框架元素<iframe>标签可以将其他的HTML页面嵌入到当前页面中。

内联框架的代码结构:

<a href="; 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>

效果如下:

html+css

在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的基础知识,我发现还是有好多属性需要去记,这个内容实在是太多了,还是需要多写,多练才可以熟能生巧。

标签: #css内联是