CSS的样式与内联框 -

这一章写到了很多
比如CSS CSS样式的优先级
以及一些布局元素
内联框

/ 术语: 规则 , 选择器 ,声明块 , 属性和值 /
/ 选择器 H1 /
/ 声明块: 由一对{} 大括号包住的内容 /
/ 规则: 选择器 + 声明块 /
/ 属性和值: 写在声明块中的名值对型 /

                    /* 标签选择器 */
        h1{
            color: #90EE90;
        }
        /* 属性选择器 */
        /* *:表示所有元素/标签*/ 
    /*     h2[class="title"]{
            color: #FF0000;
        } */
    /*     h1[id="page-title"]{
            color: red;
        } */
        /* id:浏览器并不检查他的唯一性,由程序员自己控制 */
        /* 3:类选择器 */
/*         h1.title{
            color: #87CEFA;
        } */
        /* 4:id选择器 */
/*         #page-title{
            color: #EEEEEE;
        } */

迷你小后台

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="style/iframe.css"/>
    </head>
    <body>
        <div class="header">网站管理后台</div>
        <div class="aside"> <!-- aside 侧边栏 -->
            <a href="../第二章/列表与表格.html" target="content">列表与表格</a>
                <a href="../第二章/表单 文本框.html" target="content">表单 文本框</a>
                <a href="../第二章/表格.html" target="content">表格</a>
        </div>
        <div class="main">
            <iframe srcdoc="右击左侧按钮" name="content"></iframe>
        </div>
    </body>
</html>

CSS优先级
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>

<style>
/ 标签选择器 /
h1{
color: #90EE90;

}

/ 属性选择器 /

/ :表示所有元素/标签/

/ h2[class=”title”]{
color: #FF0000;

} /
/ h1[id=”page-title”]{
color: red;

} /

/ id:浏览器并不检查他的唯一性,由程序员自己控制 /

/ 3:类选择器 /
/ h1.title{
color: #87CEFA;

} /

/ 4:id选择器 /

/ #page-title{
color: #EEEEEE;

} /
</style>

</head>
<body>

<style>
h1{
color: red;

}

.active{
color: #333333;
}

#bt{
color: #87CEFA;

}

/ 标签< 类 <id */ </style>

<h1 class="active" id="bt">hello world</h1>

</body>
</html>

CSS的语法与属性

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>


<style type="text/css">
/ 术语: 规则 , 选择器 ,声明块 , 属性和值 /
/ 选择器 H1 /
/ 声明块: 由一对{} 大括号包住的内容 /
/ 规则: 选择器 + 声明块 /
/ 属性和值: 写在声明块中的名值对型 /
h1{

color: red;
font-weight: 200;
}

</style>

</head>
<body>
<header class="page-header">
<h1 id="page-title" class="title">web全栈开发课程</h1>
<h2 id="page-title">慢慢学web开发</h2>
</header>
</body>
</html>

内联框的原理和应用
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
display: grid;

}

iframe{
width: 30em;
height: 16em;

}

</style>
</head>
<body>
<div>
<a href="https://j.map.baidu.com/4f/gHY" target="gd">广东</a>
<iframe srcdoc="广东地图" name="gd"></iframe>
</div>

<div>
<a href="https://j.map.baidu.com/d4/-jY" target="yn">越南</a>
<iframe srcdoc="越南地图" name="yn"></iframe>
</div>

</body>
</html>