CSS边框及常用样式

原文链接： https://www.mk2048.com/blog/blog.php?id=h0jjc1bcbhaa&title=CSS%E8%BE%B9%E6%A1%86%E5%8F%8A%E5%B8%B8%E7%94%A8%E6%A0%B7%E5%BC%8F

一、CSS设置样式

　　1.1 边框border

　　作用：设置标签周围的边框，方法 board：宽度样式颜色，一般情况下样式使用 solid实体的，和dotted虚线的

<head>
    <meta charset="UTF-8">
    <title>css边框</title>
    <style>
        .c1{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="c1">
    今天天气真好
</div>
</body>

border

　　此外还有 border-top,border-left,border-right，border-bottom,分别是边框顶部，边框左边，边框右边，边框底部

　　1.2 高度height

　　作用：设置标签的高度的，使用方法：height：高度大小，可以是具体的数字大小比如说：20px，也可以是百分比：80%，但是高度没有固定的值，这个设定要在一个边框内，否则没有意义。　　

<head>
    <meta charset="UTF-8">
    <title>css边框</title>
    <style>
        .c1{
            border: 1px solid red;
            height: 80px;
        }
    </style>
</head>
<body>
<div class="c1">
    今天天气真好
</div>
</body>

height

　　1.3 宽度width

　　作用：设置标签的宽度，使用方法：width：宽度大小，这个跟上面的height是一样的，可以是具体大小：50px，也可以根据浏览器大小设置为百分比：80%　　

    <style>
        .c1{
            border: 1px solid red;
            height: 80px;
            width: 70%;
        }
    </style>

width

　　1.4 字体大小 font-size

　　作用：设置标签内的字体大小，使用方法：font-size:字体大小，示例：font-size:20px　

<style>
    .c1{
        border: 1px solid red;
        height: 80px;
        width: 70%;
        font-size:20px;
    }
</style>

font-size

　　1.5 字体颜色 color

　　作用：设置标签内的字体颜色，使用方法： color：颜色，示例：color：red

<style>
    .c1{
        border: 1px solid red;
        height: 80px;
        width: 70%;
        font-size:20px;
        color: blue;
    }
</style>

color

　　1.6 字体加粗 font-weight

　　作用：给你标签内的字体加粗。使用方式：font-weight：bold

<style>
    .c1{
        border: 1px solid red;
        height: 80px;
        width: 70%;
        font-size:20px;
        color: blue;
        font-weight: bold;
    }
</style>

font-weight

　　1.7 水平居中

　　作用：能把标签内的字体，进行水平居中。使用方法：text-align:center　

<style>
    .c1{
        border: 1px solid red;
        height: 80px;
        width: 70%;
        font-size:20px;
        color: blue;
        font-weight: bold;
        text-align: center;
    }
</style>

text-align

　　1.8 垂直居中

　　作用：能把标签内的字体，进行水平居中。使用方法：line-height：标签高度值。　　

<style>
    .c1{
        border: 1px solid red;
        height: 80px;
        width: 70%;
        font-size:20px;
        color: blue;
        font-weight: bold;
        text-align: center;
        line-height:80px;
    }
</style>

line-height

更多专业前端知识，请上【猿2048】www.mk2048.com

CSS边框及常用样式

一、CSS设置样式

猜你喜欢