前言:
此时朋友们对“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内联是