HTML及CSS基础课（十） 用class和id为div设置风格

这节课主要是复习一下前一课的内容，会用div来创建几个圆圈，让用class和id来给他们设置风格。

其中涉及到的属性：

display: inline-block

border-radius: 100%;

margin-left: 5px

将会在后面课程有讲

stylesheet.css

/*Add your CSS below!*/  

div {
    display: inline-block;
    margin-left: 5px;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    border: 2px solid black;
}
.friend {
    border: 2px dashed #008000;
}
.family {
    border: 2px dashed #0000FF;
}
.enemy {
    border: 2px dashed #FF0000;
}
#best_friend {
    border: 4px solid #00C957;
}
#archnemesis {
    border: 4px solid #CC0000;
}

index.html

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css" />
        <title>My Social Network</title>
    </head>
    <body>
        <!--Add your HTML below!-->
        <div class="friend" id = "best_friend"> </div>
        <div class="family"> </div>
        <div class="enemy" id = "archnemesis"> </div>
    </body>
</html>

更多精彩内容：http://www.bianceng.cn/web/Html/

效果图：

从效果可以看出，class friend 和id best_friend还有enemy和archnemesis都同时被一个div引用，结果显示的效果是best_friend的，说明了id的优先级比class更高。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索class
， border
inline-block
css div class、div class css样式、css 第一个div class、css div多个class、div class css 不生效，以便于您获取更多的相关知识。