CSS笔记(二)

韩轩eve

于 2021-07-01 20:40:40 发布

阅读量92

点赞数

文章标签： css html

本文链接：https://blog.youkuaiyun.com/Hanjiexuan/article/details/118397010

版权

1，边框样式
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            /*设置所有的边框*/
            /*border: 5px solid black;*/
            border-top: 5px solid black;
            border-left: 5px double red;
            border-right: 5px dotted blue;
            border-bottom: 5px dashed pink;
            width: 150px;
            height: 150px;
        }
        #d2{
            border: 5px solid red;
            border-radius: 25px;

            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<hr/>
<div id="d2"></div>

</body>
</html>

2，文本样式
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
            font-family:宋体,serif;
            font-size: 32px;
            text-decoration: underline;
            text-align: center;
        }
        span{
            vertical-align: 50%;
        }
    </style>
</head>
<body>
<div>hanjie</div>

    <img src="../img/3.svg" width="32" height="32">
    <span>微信</span>

</body>
</html>