博客列表 ><iframe>标签,css样式设置的优先级,css的id, class与标签选择器的使用规则,盒模型的五大要素

<iframe>标签,css样式设置的优先级,css的id, class与标签选择器的使用规则,盒模型的五大要素

葛佬的博客
葛佬的博客原创
2019年09月02日 23:15:02793浏览

1、<iframe>标签的使用


实例

<ul>
  <li><a href="https://www.sohu.com" target="main">搜狐</a></li>
  <li><a href="https://www.sina.com.cn" target="main">新浪</a></li>
  <li><a href="https://www.baidu.com" target="main">百度</a></li>
</ul>

<iframe width="600" height="500" name="main"></iframe>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2、css样式设置的优先级

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式设置的优先级</title>
    <style>
        #content-id {
            color: red;
        }
        .content-class {
            color: blue;
        }
        div {
           color: grey;
        }
    </style>
</head>
<body>
    <div class="content-class" id="content-id" style="color: black">css样式设置的优先级</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

3、 css的id, class与标签选择器的使用规则

       HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义,class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示。

实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>css的id, class与标签选择器的使用规则</title> 
    <style>
      #para
      {
        text-align:right;
	color:red;
      }
      .para1
      {
	text-align:center;
	color:blue;
      }
    </style>
  </head>
 
  <body>
    <p id="para">Hello World!</p>
    <p class="para1">这个段落不受该样式的影响。</p>
  </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

 

4、盒模型的五大要素

盒模型的五大要素:width(宽度), height(高度), padding(内边距), border(边框), margin(外边距)。

实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>盒模型的五大要素</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            border: 1px solid red;
            padding: 20px,30px;
            margin: 40px,50px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 1px solid green;
            padding: 10px,20px;
            margin: 30px,40px;
        }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

 

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