博主信息
博文 9
粉丝 0
评论 0
访问量 5143
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
CSS基础以及盒模型-2019年9月2日作业
杨林的博客
原创
624人浏览过

实例

<head>
    <style>
        /* p {
            color: blue
        }
         */
        
        #艾迪 {
            color: blueviolet
        }
        
        .lei {
            color: green
        }
        
        #123 {
            color: red
        }
        
        .456 {
            color: red
        }
        
        #big {
            border: 3px solid red;
            width: 400px;
            height: 400px;
            padding: 20px 40px 60px;
            background-color: wheat;
            margin: 20px;
        }
        
        #little {
            width: 200px;
            height: 200px;
            background-color: black;
            padding: 20px 40px 50px 60px;
            margin: 20px 300px;
            border: 3px solid blue;
        }
    </style>
</head>

<body>
    <h3>第一题</h3>
    <p><a href="https://www.baidu.com" target="baidu">打开百度</a></p>
    <iframe src="" frameborder="1" name="baidu" width="400" height="400"></iframe>
    <p style="color: yellow">这里是演示</p>
    <h3>第二题:标签内的样式属性大于html文档内“style”标签的样式属性大于引用的CSS样式表的样式属性</h3>
    <p id="艾迪">这里是ID123用选择器设置为紫色</p>
    <p class="lei">这里是类456用选择器设置为绿色</p>
    <p class="lei" style="color: orange">这里是类456标签内属性设置为橙色</p>
    <p id="123">ID设置成数字之后选择器不能用</p>
    <p class="456">类名设置成数字后,选择器也不能用</p>
    <h3>第三题:JS脚本的样式属性大于标签内的样式属性大于文档内“STYLE”选择器的样式属性大于CSS样式表的样式属性</h3>
    <h3>第四题:</h3>
    <div id="big">
        <div id="little">

        </div>
    </div>
    <span id="little">

    </span>
    <div id="big">

    </div>
    
</body>

运行实例 »

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

总结:

1、盒模型中的width,height属性标记了宽度与高度,行元素不专门设置width属性时,默认是一整行,所以只写出height高度属性即可。

2、padding是内边距属性,margin是外边距,边距值分上右下左,按顺时针排序

3、border是边框属性,可设置边框值,单位是PX,solid设置为实线,还有颜色属性

4、span是行内元素,不自己换行,并且设置了内外编剧值之后,标签内没有内容时也只显示占据边距的范围。

5、ID和CLASS不能用纯数字命名,选择器不识别。

批改状态:合格

老师批语:css不是不能用, 只是不能用数字开头, 因为这不是一合法的标识符
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学