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>

来源：CSDN

作者：飓风肆虐的青春

链接：https://blog.csdn.net/weixin_42207496/article/details/104171322

标签

font-weight

text-decoration

css样式

css