博客列表 >iframe标签与css标签 2019-9-8

iframe标签与css标签 2019-9-8

aiyouhe的博客
aiyouhe的博客原创
2019年09月08日 14:45:33563浏览

1.实例演示:<iframe>标签的使用

<body>
    <!-- 内联标签:在当前页面中加载另一个页面 -->
    <h1>内联标签演示</h1>
    <h3><a href="https://www.baidu.com" target="baidu">百度</a></h3>
    <iframe frameborder="0" name="baidu"></iframe>
    <!-- a标签的值与iframe中name的值相同,就可以在iframe中打开网页 -->
</body>

2. 实例演示: css样式设置的优先级

优先级:内联样式 > 内部样式 > 外部样式;

外部样式表:通过link标签将一个css文档连接到html文档中

内部样式:将元素的样式规则用style标签插入到当前的html文档中,这个样式规则, 仅适用于当前的这个html文档

内联样式:将元素的样式使用styel属性应用到当前元素上,只适用于当前标签

3. 实例演示: css的id, class与标签选择器的使用规则

优先级:标签 < class < id 

<style>
        /*id选择器: 一个*/
        #red {
            color: red;
        }
        /*类选择器: 一批*/
        .green {
            color: green;
        }
        /*标签选择器*/
        p {
            color: aqua;
        }
    </style>
    <p id="red">id选择器</p>
    <p>类选择器</p>
    <p>标签选择器</p>

4. 实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)

盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成,一个盒子中主要的属性就5个:width(内容宽度)、height(内容高度)、padding(内边距)、border(边框,三个要素:粗细、线型、颜色。)、margin(外边距)。

<style>
  .box {
    width: 500px;
    height: 500px;
    padding: 10px;
    border: 5px dashed black;
    margin: 0;
  }
</style>
<div>
  <div class="box">这是一个盒子</div>
</div>


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议