博客列表 >css样式表/选择器,盒模型基础知识--2019.09.02

css样式表/选择器,盒模型基础知识--2019.09.02

Morning   Star的博客
Morning Star的博客原创
2019年09月06日 22:48:23599浏览

<iframe>标签示例:

1567768575(1).jpg

源码:

 <h1>网站管理后台</h1>
    <ul style="float:left;">
        <li><a href="demo3.html" target="main">用户管理</a></li>
        <li><a href="demo4.html" target="main">商品管理</a></li>
        <li><a href="demo6.html" target="main">分类管理</a></li>
        <li><a href="demo5.html" target="main">系统管理</a></li>
    </ul>
    <iframe srcdoc="<h2>显示页面</h2>" frameborder="" width="400" height="400" name="main" style="float:left;"></iframe>

css样式优先级:

                                             内联式 与  内部样式表的比较

1567770158(1).jpg

源码:

<style>
        p {
            color: red;
                    }
    </style>
</head>
<p style="color: blue">林志玲嫁给了一个***人</p>
<p>苍太难</p>
<p>波波</p>

                               内部样式表与外部样式表

1567770158(1).jpg

源码:

    <link rel="stylesheet" href="static/css/style1.css">
   <style>
        p {
            color: red;
        }
    </style>
</head>
<p style="color: blue">林志玲嫁给了一个***人</p>
<p>苍太难</p>
<p>波波</p>
</body>

css代码:

p {
    color: green;
}

css id class 标签选择器使用规则:

1567771160(1).jpg

源码:

<style>
#macbook {
        color: red;
    }
    .green {
        color: green;
    }
    p {
        color: blue;
    }
</style>
<body>
    <p id="macbook">买了mac的同学,后悔了吗</p>
    <p class="green" id="macbook">买了mac的同学</p>
    <p class="green">后悔了吗</p>

盒模型五大元素:

1567779558(1).jpg

源码:

 <div class="box1">
        <div class="box2"></div>
    </div>
.box1 {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    padding: 20px 30px 40px 50px;
    border-top: 10px green dashed;
    border-right: 10px solid red;
    border-bottom: 12px yellow double;
    border-left: 10px saddlebrown dotted;
}
.box2 {
    width: inherit;
    height: inherit;
    background-color: wheat;
}

总结:

今天课程主要学习了内联框架<iframe>,framborder 可以显示iframe标签的边框,可以将iframe的那么值放入a标签的target中实现在内联框中连接。通用容器:div 和span。

css(层级样式表):

在引入css时,内联样式表(style=“”)的优先级大于内部样式表(style标签)大于外部样式表(link)。css选择器优先级:js 》id 》class》标签。在盒子模型中 ,padding margin 时透明的不能设置样式,颜色。padding和margin的书写顺序都是顺时针方向。border的颜色 样式 宽度 顺序可以随意。子级在继承父级的时候可以不用继承宽度,而padding和margin不能使用继承,否则padding会产生增大效果,而margin会向父级元素传递。


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