css-20201215（内联框架标签工作原理与css入门优先级） -

html5-03

01内联框架标签工作原理

target= name(a herf标签的target属性等于iframe标签的name属性发生交互)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内联框架标签工作原理</title>
  <style>
      iframe {
          width: 30em;
          height: 16em;
      }
  </style>
</head>
<body>
  <a href="https://j.map.baidu.com/86/VpE", target="yangj">阳江地图</a>
  <iframe src="" name = "yangj"></iframe>
</body>
</html>

iframe做迷你小后台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内联框架标签工作原理</title>
    <style>
        iframe {
            width: 30em;
            height: 16em;
        }
        div {
            display: grid;
        }
    </style>
</head>
<body>
    <!-- 标题 -->
    <div class="header">网站管理后台</div>
    <!-- 侧边栏 -->
    <a href="https://docs.qq.com/desktop/mydoc/folder/1IYzC_100000" target="content">实务</a>
    <a href="https://docs.qq.com/desktop/mydoc/folder/1IYzC_100000" target="content">体验馆</a>
    <div>
        <div class='mian'></div>
        <iframe srcdoc="请点击右侧按钮" name="content"></iframe>
    </div>
</body>
</html>

css01入门

术语：选择器、规则、属性和值，声明块
选择器:h1，id，class，style等
声明块：{、、、}
属性和值：键值对，color：blue
规则：选择器+声明块
外部写法：<link rel="stylesheet" href="001.css">推荐多使用,养成习惯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h1 {
        color: #007aff;
        font-weight: 200;
    }
</style>
<body>
    <header class="page-header"></header>
    <h1 id="page-title" class="title">web</h1>
</body>
</html>

css优先级与基础语法
01优先级
1.标签选择器（h1）
2.属性选择器（class、id）
3.id>class>tag
02基础语法
1.css中的class写可以#，id可以写成.
2.*代表所有

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h1 {
        color: #007aff;
    }
    .title {
        color: #ff1700;
    }
    #page-title {
        color: #cb954f;
    }
</style>
<body>
    <h1 id="page-title" class="title">哈哈</h1>
</body>
</html>