1.内联框架:指当前页面中加载另外一个页面。用iframe表示,src为插入的页面链接,sredoc为内联页面开始页面,有宽高和name属性,name属性可在A标签里面引用,frameborder为设置边框大小。一般用来制作网站管理后台。
实例
<h3><a href="https;//baidu.com" target="baidu"></a></h3> <p> <iframe src="https://baidu.com" frameborder="1" width="500" height="800" name="baidu"></iframe> </p>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS介绍
css用来设置HTML元素在文档中的显示方式与布局。
一。css样式
1.内联样式:将元素的样式使用style属性应用到当前的元素上,只适用于当前标签
实例
<body> <p style="color: red">我在学习PHP</p> <p style="color: red">我在学习PHP</p> <p style="color: red">我在学习PHP</p> </body>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2.内部样式:将元素的样式使用style标签插入到当前的html文档中,这个样式规则仅适用于当前的这个html文档
实例
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style_zy.css"> <title>css简介与引入</title> <style> p{ color: blue; } </style> </head>
运行实例 »
点击 "运行实例" 按钮查看在线实例
外部样式:创建在.css文档中,在使用的文档中通过link引用进来。
实例
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style_zy.css"> <title></title> </head> p { /* 外部样式 */ color: yellow; }
运行实例 »
点击 "运行实例" 按钮查看在线实例
css样式的优先级为内联样式(通过styles属性) > 内部样式(style标签) > 外部样式(.css文档).
二. css选择器
css选择器:1.id选择器;2.class选择器;3.标签选器;4:js选择器。
选择器的优先级:标签选择器 < class类选择器 < id选择器 < js选择器 。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css基本选择器</title> <style> #red { /* id选择器:一个 */ color: red; } .green { /* class类选择器:多个 */ color: green; } /* 标签选择器 */ p { color: aqua; } </style> </head> <body> <p id="red">明天要上班了,好难过!</p> <p class="green">现在还在赶作业</p> <p class="green">还有好多没有写</p> </body>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三. 盒子模型的基本属性
盒模型是布局的基础,页面上可见的元素都可以看作是盒子,盒模型默认都i是块级元素,独占一行,支持宽度设置。
盒模型有五个基本属性(宽高背景内外边距和边框)
width:宽度
height:高度
background-color:背景
padding:内边距,内容与边框之间的填充区域
margin:外边距,决定当前盒子与其他盒子之间的位置与关系
border:边框,位于内外边框之间,是可见元素,允许设置宽度样式和颜色
根据可见性分为两类:
一. 可见的:width,height,border
二. 不可见的: background-color,padding,margin
padding和margin只能设置宽度,不能设置样式和颜色。
实例
.box1 { width: 200px; height: 200px; background-color: aqua; padding-top: 20px; padding-right: 30px; padding-bottom: 40px; padding-left: 50px; padding: 10px 20px 30px 40px; padding: 20px 30px 40px; padding: 20px 30px; padding: 20px; /* 上边框 */ border-top-width: 10px; border-top-style: solid; border-top-color: blue; /* 简写 */ border: 10px solid red; }
运行实例 »
点击 "运行实例" 按钮查看在线实例