CSS字体背景样式更改_css怎么调整字体背景颜色的大小-CSDN博客

本文链接：https://blog.csdn.net/qvqqv/article/details/130194199

CSS字体背景样式

（一）字体样式
（二）背景样式

（一）字体样式

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style>
        #box {
            width: 500px;
            height: 200px;
            border: 1px solid black;
            /* 文字大小 谷歌默认16px，偶数，最小是12px */
            font-size:20px;
            /*字体*/
            font-family:"Arial Black";
            /*文字颜色*/
            color: blue;
            /*行高*/
            line-height: 200px;  /*(行高-字体大小)/2*/
            /* 文字对齐方式：center/left/right */
            text-align: center;
            /*首行缩进 em是字符数单位 */
            text-indent: 2em;
            /* 文字着重：bold加粗、normal原粗细 */
            font-weight: normal;
            /*文字倾斜:italic 不倾斜normal*/
            font-style: normal;
            /*文本修饰  下划线underline、上划线overline、中间线line-through、无线none*/
            text-decoration: none;
            /*字母间距*/
            /*letter-spacing: 5px;*/
            /*单词间距*/
            word-spacing: 20px;
            /*英文字母大小写转换*/
            font-variant: small-caps;
        }
    </style>
</head>
<body>
<div id="box">设置文本样式</div>
</body>

（二）背景样式

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>背景样式</title>
    <style>
        /*ctrl+alt+l 代码格式化快捷键，自动修改不规范的代码*/
        #box {
            width: 400px;
            height: 400px;
            /*背景颜色*/
            /*background-color: yellow;*/
            /*背景图片 url为图片地址*/
            /*background-image: url("../img/iulp.jpg");  !*1080x1080*!*/
            /*背景大小*/
            /*background-size: 400px;  !*图片压缩的比例：400/1080*!*/
            /*background-size: 200px 200px;  !*图片压缩的比例：400/1080*!*/
            /*背景平铺：no-repeat不重复、repeat重复、repeat-x/y x和y轴进行填充*/
            /*background-repeat: no-repeat;*/
            /*背景定位 可以为负值*/
            /*background-position:-40px 0;*/
            /*沿着x轴移动，上下居中*/
            /*background-position:40px;*/
            /*上下左右都居中*/
            /*background-position:center;*/
            /*上下左右*/
            /*background-position:top;*/
            /*background-position:bottom;*/
            /*background-position:left;*/
            /*background-position:right;*/
            /*百分比调节*/
            /*background-position:50% 50%;*/

            /*复合样式书写背景样式*/
            /*书写顺序：颜色，图片，平铺，定位/大小*/
            background:yellow url("../image/iu.jpg") no-repeat 0 0/400px 400px;


        }
    </style>
</head>
<body>
<div id="box"></div>
</body>