Blogger Information
Blog 9
fans 0
comment 0
visits 3833
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS基础以及盒模型-2019年9月2日作业
杨林的博客
Original
420 people have browsed it

实例

<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不能用纯数字命名,选择器不识别。

Correction status:qualified

Teacher's comments:css不是不能用, 只是不能用数字开头, 因为这不是一合法的标识符
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post