• CSS基本样式-文本属性


    字体属性

    文本属性呢,自我认为就是写文档的一些格式属性,例如:字体颜色,字体加粗,字体大小,字体类型等,而且我们在输出测试用例报告的时候也可以用到这些属性,对测试报告进行优化。

    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>字体属性</title>
        <style>
            .box{
                /*字体颜色*/
                color: red;
                /*字体加粗*/
                font-weight:bold ;
                /*font-weight: normal;*/
                /*font-weight: 700;*/
                /*font-weight: bolder;*/
                /*font-weight: lighter;*/
    
                /*字体大小*/
                font-size: 20px;
    
                /*字体类型*/
                font-style: italic;
    
                /*字体*/
                font-family: 幼圆,楷体,微软雅黑;
            }
            h1{
                /*font-weight: normal;*/
            }
        </style>
    </head>
    <body>
    <div class="box">小测试</div>
    <h1>一号标题</h1>
    </body>
    </html>
    

    text属性

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>text属性</title>
        <style>
            .box{
                /*内容水平对齐方式*/
                /*text-align: right;*/
                text-align: center;
    
                /*加下划线*/
                text-decoration: underline;
            }
            a{
                font-size: 26px;
                /*去下划线*/
                /*text-decoration: none;*/
    
    
                /*了解*/
    
                /*删除线*/
                /*text-decoration: line-through;*/
    
                /*text-decoration: overline;*/
            }
            p{
                /*全部转换为大写*/
                /*text-transform: uppercase;*/
                /*全部转换为小写*/
                /*text-transform: lowercase;*/
                /*每个单词首字母大写*/
                /*text-transform: capitalize;*/
            }
            .two{
                font-size: 20px;
                /*首行缩进*/
                text-indent: 40px;
            }
        </style>
    </head>
    <body>
    <div class="box">
        今天不加班
        <br/>
        <img src="images/pic2.jpeg" alt=""/>
    </div>
    <a href="#">超链接</a>
    
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cum deserunt dignissimos, hic officiis praesentium ullam! Ab dolorem doloribus ea et harum mollitia neque optio suscipit tempora temporibus, vel voluptas!
    </p>
    <div class="two">
        学习强国
        小测试
        接口自动化
        APP自动化
    </div>
    </body>
    </html>
    
  • 相关阅读:
    java bio 之聊天室
    自定义gradle plugin
    gradle build 找不到tools.jar 解决方法
    java switch case 枚举类型的反编译结果
    spring mvc 关键接口 HandlerMapping HandlerAdapter
    H5 Video 去除 下载按钮 禁用右键
    https 请求发送 例子 tls && ssl
    mac 安装mongodb
    (扫盲)DTO数据传输对象
    (扫盲)RPC远程过程调用
  • 原文地址:https://www.cnblogs.com/Testking/p/12078549.html
Copyright © 2020-2023  润新知