第21节 css设置文本样式_css文本设置操作题设置文本样式-优快云博客

本文详细介绍如何使用CSS来设置文本的各种样式，包括颜色、字体、倾斜效果、加粗效果、大小写转换、大小调整、装饰效果等，并展示了如何控制段落布局及文字的水平垂直对齐。

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

css设置文本样式

<html>
    <head>
        <title>css设置文本样式</title>
        <style type="text/css">
        </style>
            <link href="css样式.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <h2>长度单位</h2>
        <img src="D:\温习网页\favicon.ico" width="200px" height="100px">
        <hr/>
        <h2>颜色定义</h2>
        <p id="red">red</p>
        <p id="blue">blue</p>
        <p id="green">green</p>
        <p class="gray">gray</p>
        <p class="orange">orange</p>
        <hr/>
        <h2>设置文字字体</h2>
        <p id="p1">楷体</p>
        <p id="p2">黑体</p>
        <p class="p3">宋体</p>
        <hr>
        <h2>设置文字倾斜效果</h2>
        <p class="">正常</p>
        <p class="">意大利体</p>
        <p class="italic">斜体</p>
        <hr/>
        <h2>设置文字的加粗效果</h2>
        <p class="normal">正常粗细</p>
        <p class="bold">粗体</p>
        <p class="bolder">加粗体</p>
        <p class="lighter">比正常粗细还细</p>
        <hr/>
        <h2>英文字母大小写转换</h2>
        <p class="one">abc</p>
        <p class="two">abc</p>
        <p class="three">abc</p>
        <hr/>
        <h2>控制文字的大小</h2>
        <p class="five">5号字体</p>
        <p class="fit">15号字体</p>
        <p class="tween">20号字体</p>
        <hr/>
        <h2>文字的装饰效果</h2>
        <p class="none">正常显示</p>
        <p class="underline">为文字加下划线</p>
        <p class="line">为文字加删除线</p>
        <p class="overline">为文字加顶线</p>
        <p class="blink">文字闪烁，仅部分浏览器支持</p>
        <hr/>
        <h2>段落首行缩进</h2>
        <p id="2em">首行缩进2个</p>
        <p id="10em">首行缩进10个</p>
        <p id="12em">首行缩进12个</p>
        <hr/>
        <h2 id="字词间距">设置字词间距</h2>
        <hr/>
        <h2>设置段落内部的文字行高</h2>
        <p id="long">长度</p>
        <p id="multiple">倍数</p>
        <p id="Percentage">百分比</p>
        <hr/>
        <h2>设置段落间的距离</h2>
        <p class="pp">段落1</p>
        <p class="pp">段落2</p>
        <p class="pp">段落3</p>
        <hr/>
        <h2>控制文本的水平位置</h2>
        <p id="pc">居中</p>
        <p id="pr">靠右</p>
        <p id="pj">两端对齐</p>
        <p id="pl">靠左</p>
        <hr/>
        <h2>设置文字与背景的颜色</h2>
        <p id="br">字黑背景红</p>
        <p id="wr">字白背景红</p>
        <p id="bb">字蓝背景黑</p>
        <p id="wb">字白背景蓝</p>
        <hr/>
        <h2>设置段落的垂直对齐方式</h2>
        <!--div是区域块标签 就是将相同的区域包起来-->
        <div id="middle"> Here is ONE line of text!</div>
    </body>
</html>