实例演示:标签,css样式设置的优先级,css的id,class与标签选择器,演示盒模型的五大要素 </h1> <div class="wz_info"> <span class="wz_frome"> <a href="/" target="_blank" title="程序员文章站"> 程序员文章站 </a> </span> <span class="wz_time"> 2022-03-11 13:39:45 </span> </div> <div class="wz_smalltext"> ...</div> <div class="content"> <p><strong>1.实例演示:<iframe>标签的使用</strong></p> <blockquote><p>iframe标签规定一个内联框架，作用是文档中的文档，或者浮动的框架（FRAME），iframe元素会创建包含另外一个文档的内联框架（即行内框架）<strong><br></strong></p></blockquote> <p><span style="color: rgb(20, 25, 30);"></span></p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"><pre class="brush:html;toolbar:false"><ul> <li><a href="1.html" target="name1">猪哥的博客</a></li> </ul> <iframe name="name1" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567491489703&di=185702fb6ecf86db01dcad47d25695a6&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F9c16e7ba74a8638e24a344326795bd4f967a661151244-Hdnn39_fw658" frameborder="0" width=100%; height=80%;></iframe> <!-- frameborder边框显示方式,属性取值1-有边框,0-无边框. width显示的宽度,height显示的高度 --></pre></div> <br><a href="#" class="showbtn codebtn">运行实例 »</a><p>点击 "运行实例" 按钮查看在线实例</p> </div> <p><strong>2.实例演示: css样式设置的优先级</strong></p> <p><span style="background-color: rgb(245, 245, 245); color: rgb(120, 125, 130);"></span></p> <blockquote><p>优先级内联样式 > 内部样式 >外部样式(如果外部样式写在内部样式的下面,那么外部样式会覆盖内部样式)<span style="background-color: rgb(245, 245, 245); color: rgb(120, 125, 130);"> </span></p></blockquote> <p><span style="background-color: rgb(245, 245, 245); color: rgb(120, 125, 130);"></span></p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"><pre class="brush:html;toolbar:false"> <link rel="stylesheet" href="style1.css"> <style> p { color: blue; } </style> <!-- <link rel="stylesheet" href="style1.css"> --> </head> <body> <p style="color: red; ">CSS是什么? 层叠样式表,用来设置HTML元素在文档中的布局与显示方式</p> <!-- 这是内联样式 --> <p>CSS的引入方式分为内联样式,内部样式,外部样式</p> <p>优先级内联样式 > 内部样式 >外部样式(如果外部样式写在内部样式的下面,那么外部样式会覆盖内部样式)</p> </body></pre></div> <br><a href="#" class="showbtn codebtn">运行实例 »</a><p>点击 "运行实例" 按钮查看在线实例</p> </div> <p><span style="background-color: rgb(245, 245, 245); color: rgb(120, 125, 130);"></span><br></p> <p><strong>3. 实例演示: css的id, class与标签选择器的使用规则</strong></p> <blockquote><p>标签选择器优先级: 标签 < class < id < js</p></blockquote> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"><pre class="brush:html;toolbar:false"><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>Document</title> <style> p { color: blue; } #red { color: red; } .green { color: green; } </style> </head> <body> <!-- 3. 实例演示: css的id, class与标签选择器的使用规则 标签选择器优先级: 标签 < class < id < js --> <p>标签选择器</p> <p id="red">id选择器</p> <p class="green">class类选择器</p> <p id="red" class="green">class类选择器</p> </body></pre></div> <br><a href="#" class="showbtn codebtn">运行实例 »</a><p>点击 "运行实例" 按钮查看在线实例</p> </div> <p><br></p> <p><strong>4. 实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)</strong></p> <p><strong><br></strong></p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"><pre class="brush:html;toolbar:false"><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>Document</title> <style> .div_class { width: 200px; height: 200px; border: 1px solid yellow; padding: 0px 95px 00px 00px; background-color: red; } .div_class1 { width: 200px; height: 200px; border: 1px solid yellow; padding: 10px 20px 20px 10px; background-color: red; } #div_blue { width: 300px; height: 300px; border: 1px solid black; background-color: cornflowerblue; } div { width: 100px; height: 100px; border: 1px solid black; background-color: green; } </style> </head> <body> <!-- 4. 实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略) --> <div id="div_blue"> <div class="div_class"> <div></div> </div> </div> </body></pre></div> <br><a href="#" class="showbtn codebtn">运行实例 »</a><p>点击 "运行实例" 按钮查看在线实例</p> </div> <p><br></p> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cHM6Ly9pbWcucGhwLmNuL3VwbG9hZC9pbWFnZS81MDkvOTE3Lzg0My8xNTY3NDc5NDAzMTI3MjQ2LnBuZw==" title="实例演示:<iframe>标签,css样式设置的优先级,css的id,class与标签选择器,演示盒模型的五大要素" alt="实例演示:<iframe>标签,css样式设置的优先级,css的id,class与标签选择器,演示盒模型的五大要素"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cHM6Ly9pbWcucGhwLmNuL3VwbG9hZC9pbWFnZS81NTAvMzgyLzYyNy8xNTY3NDc5NDA3NDExOTY5LnBuZw==" title="实例演示:<iframe>标签,css样式设置的优先级,css的id,class与标签选择器,演示盒模型的五大要素" alt="实例演示:<iframe>标签,css样式设置的优先级,css的id,class与标签选择器,演示盒模型的五大要素"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cHM6Ly9pbWcucGhwLmNuL3VwbG9hZC9pbWFnZS80MDEvNjQzLzQzNC8xNTY3NDc5NzU0MTMzNjY1LnBuZw==" title="实例演示:<iframe>标签,css样式设置的优先级,css的id,class与标签选择器,演示盒模型的五大要素" alt="实例演示:<iframe>标签,css样式设置的优先级,css的id,class与标签选择器,演示盒模型的五大要素"></p> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cHM6Ly9pbWcucGhwLmNuL3VwbG9hZC9pbWFnZS8xMzQvMjUzLzc5OS8xNTY3NDc5OTM1Nzk1NjU3LnBuZw==" title="实例演示:<iframe>标签,css样式设置的优先级,css的id,class与标签选择器,演示盒模型的五大要素" alt="实例演示:<iframe>标签,css样式设置的优先级,css的id,class与标签选择器,演示盒模型的五大要素"></p> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cHM6Ly9pbWcucGhwLmNuL3VwbG9hZC9pbWFnZS80ODAvMTYxLzM0Ny8xNTY3NDc5NDEzMzg4NzMwLnBuZw==" title="实例演示:<iframe>标签,css样式设置的优先级,css的id,class与标签选择器,演示盒模型的五大要素" alt="实例演示:<iframe>标签,css样式设置的优先级,css的id,class与标签选择器,演示盒模型的五大要素"></p> <blockquote><p>总结: 万物皆盒子.</p></blockquote> </div> <div class="info-pre-next"> <p> 上一篇： <a href="/article/146541.html"> 用php数组完成评论区内容展示 </a> </p> <p> 下一篇： <a href="/article/146543.html"> 写一个分级的命名空间, 并实现类的自动加载,写一个trait类, 理解它的功能与使用场景 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/147065.html" target="_blank" title="html的iframe标签，css样式优先级，css标签选择器，css盒子模型的代码演示—2019/9/2作业"> <h2> html的iframe标签，css样式优先级，css标签选择器，css盒子模型的代码演示—2019/9/2作业 </h2> </a> </li> <li> <a href="/article/146542.html" target="_blank" title="实例演示:<iframe>标签,css样式设置的优先级,css的id,class与标签选择器,演示盒模型的五大要素"> <h2> 实例演示:<iframe>标签,css样式设置的优先级,css的id,class与标签选择器,演示盒模型的五大要素 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>