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

本文详细介绍了CSS中关于文字大小、加粗、倾斜、颜色、居中、下划线、行高、文字缩进及背景设置等基本样式技巧,并演示了如何实现文字垂直居中和背景线性渐变。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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);。必须添加浏览器私有前缀

  • 第一个参数表示起始方法,可以是方位名称或度数,如leftleft 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>

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

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>网上花店</title> </head> <style> body{ background-color: lightgray; color:darkgray; font-size: 16px; font-family: "楷体",serif; } h1{ text-align: center; height: 86px; line-height: 86px; font-weight: lighter; } h1 em{ font:14px; } p img{ display:block; margin:auto; } p em{ font-style: italic; text-decoration: underline; } p{ text-indent: 2em; line-height: 30px; } </style> <body> <!-- 1.通过CSS设置网页背景颜色为浅灰色,文字颜色为深灰色,字号16px,字体为楷体--> <!-- 2.通过CSS设置标题1水平居中都为86px,字体粗细为lighter。 3.通过CSS改变“偏安一隅 静静生活”的文字大小--> <h1>彼岸の花偏安一隅 静静生活</h1> <hr /> <!-- 4.通过CSS设置图片居中。注意:对段落设置水平对齐方式才起作用。--> <p>< img src="images/bestseller2.jpg" /></p > <br /><br /> <!-- 5.通过CSS设置段落缩进2个字符,30px--> <p>多肉植物是指植物营养器官肥大的等植物,通常具根、茎、叶三种营养器官花、果实、种子三种繁殖器官。在园艺上,又称肉质植物或多肉花卉,但以多肉植物这个名称最为常用。</p > <!-- 6.通过CSS设置“全世界共有多肉植物一万余种”倾斜并加下划线--> <p>全世界共有多肉植物一万余种,它们绝大部分属于等植物(绝大多数是被子植物)。植物上隶属几十个科,个别专家认为有67个科中含有多肉植物,但大多数专家认为只有50余科。</p > <br /> </body> </html>
03-10
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值