CSS文字相关设置(大小、加粗、倾斜、颜色、居中、下划线、行高)和background背景设置

Bulut0907

已于 2023-11-19 16:26:46 修改

阅读量1.8w

点赞数 8

分类专栏： CSS3 文章标签： css文字加粗 css文字颜色 css文字居中 css文字行高 css backgroup背景

于 2022-01-27 21:03:45 首次发布

本文链接：https://blog.csdn.net/yy8623977/article/details/121585263

版权

CSS3 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1. 文字大小

每个浏览器的默认文字大小都一样，我们给HTML的body标签设置统一的文字大小

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>
    <style>

        body {
            font-size: 50px;
        }
        
    </style>
</head>
<body>

<h4>4级标题</h4>
<div>盒子一</div>

</body>
</html>

显示效果如下：
文字大小

2. 加粗、倾斜、颜色、居中、下划线、行高

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>
    <style>


        .font-set {
            font-weight: 700;
            font-style: italic;
            color: #ff0000;
            text-align: center;
            text-decoration: underline;
            line-height: 50px;
        }

        .font-style-normal {
            font-style:normal
        }

    </style>
</head>
<body>



<div class="font-set">盒子一</div>

<em class="font-style-normal">斜着的文字, 搜索引擎我告诉你, 我很重要</em> <br />
<i class="font-style-normal">斜着的文字, 搜索引擎我告诉你, 我不重要</i>


</body>
</html>

font-weight的700等同于bold, 400等同于normal
font-style默认是normal
color还可以是red、rgb(255, 0, 0)、rgb(100%, 0%, 0%)
text-align还可以是left(默认)、right
text-decoration还可以是none、line-through、overline
line-height等于上间距 + 文字高度 + 下间距。值可以是50px，或者是5(表示相对于文字的倍数)

显示效果如下：
加粗等设置

3. 设置文字垂直居中

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

        div {
            font-size: 50px;
            line-height: 100px;
            width: 500px;
            height: 100px;
            background: red;
        }

    </style>
</head>
<body>


<div>盒子一</div>



</body>
</html>

将line-height设置的和盒子一样的高度，则文字垂直居中
line-height大于盒子高度，文字偏下；反之

4. 文字缩进

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>
    <style>

    .text-set {
        text-indent: 2em;
    }

    </style>
</head>
<body>

<div class="text-set">盒子一</div>
<div>盒子二</div>

</body>
</html>

缩进的单位还可以是px，缩进的值可以是负数

显示效果如下：

文字缩进

5. backgroup背景设置

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

        div {
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(images/baidu.png);
            background-repeat: repeat-x;
            background-position: 50% center;
            background-attachment: fixed;
        }

    </style>

</head>
<body>

<div>盒子一</div>

</body>
</html>

参数说明如下：请添加图片描述

background-color默认的值是transparent, 表示没有背景颜色
background-color位于background-image底下
另一种指定backgroup-color的方式是通过: background: rgba(0, 0, 0, 0.3);, 可以通过最后一个参数指定透明度, 参数范围为0-1
background-image默认值是none
background-repeat默认值是repeat, 表示x和y轴都重复。取值还有no-repeat、repeat-y
background-position第一个参数表示x的位置, 第二个参数表示y的位置。可以有3种形式, 而且3种形式可以混用
1. px形式
2. 第一个参数值可以是left、center、right, 第二个参数值可以是top、center、bottom
3. 百分比：相对于父盒子来说
background-attachment默认值是scroll, 即背景图片会随着屏幕的滚动而滚动, 是正常的现象。当设置为fixed时, 此时background-position的x,y就相对于视口窗口, 而不是父盒子, 随着屏幕滚动, 背景图片固定在视口窗口, 但父盒子是滚动的, 背景图片只有在父盒子中才能显示

显示效果如下：
背景设置效果

5.1 背景线性渐变

语法: background: -webkit-linear-gradient(left, red, blue, black);。必须添加浏览器私有前缀

第一个参数表示起始方法，可以是方位名称或度数，如left，left top。默认是top
后面可以添加多个颜色参数

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

        div {
            width: 200px;
            height: 200px;
            background: -webkit-linear-gradient(left top, red, blue);
        }

    </style>

</head>
<body>

<div></div>

</body>
</html>

效果如下。从左上到右下，背景色从红色渐变成蓝色
背景线性渐变效果