zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    ASP.NET MVC Ajax下载文件(使用NPOI向现有的excel模板文件里面添加数据)
    Devexpress MVC DateEdit 设置默认的Time
    SQL 行转列(列的值不规则的数目)
    靶机Cyberry
    PHP-Audit-Labs-Day1
    DASCTF七月赛两道Web题复现
    靶机BlackMarket
    靶机CH4INRULZ_v1.0.1
    Kali中John的使用方法
    虚拟机中桥接模式和NAT模式以及仅主机模式的区别
  • 原文地址:https://www.cnblogs.com/bigberg/p/8430831.html
Copyright © 2011-2022 走看看