• CSS边框及常用样式


    一、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
  • 相关阅读:
    获取汉字信息(结合正则就可以得到想要的详细啦)
    压缩图片(递归结合pillow)通过改变图片尺寸实现;tinify 需要付费
    实现两个视频同时播放,利用到opencv模块 (线程进程开启)
    切换pip下载源头
    516. 最长回文子序列
    87.扰乱字符串
    Maximum Likelihood ML
    数组右边第一个比当前元素大的数
    4. 寻找两个正序数组的中位数
    min-hash
  • 原文地址:https://www.cnblogs.com/bigberg/p/8430831.html
Copyright © 2020-2023  润新知