css文本颜色1-优快云博客

本文详细介绍了如何使用CSS为不同HTML元素设置样式，包括颜色、字体大小及斜体效果，通过多个示例展示了如何针对p标签和i标签进行精确的样式控制。

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

<head>
        <meta charset="utf-8" />
        <title>练习一</title>
        <style type="text/css">
            p{
                color: red;
            }
            i{
                color: #FF0000;
            }
            .box{
                color: #f00;
            }
            .box-p1{
                color: rgb(255,0,0);
            }
            .box-p2{
                color: rgb(255,0,1);
            }
            .box-p3{
                color: rgb(255,0,0,0.5);
            }
            .box-p4{
                color: rgb(255,0,0,0.3);
            }
            .box-p5{
                font-size: 12px;
                color: #000000;
            }        
            .p1{
                font-size: 14px;
                color: #000000;
            }
            .p2{
                font-size: 16px;
                color: #000000;
            }
            .p3{
                font-size: 18px;
                color: #000000;
            }
            .p4{
                font-size: 20px;
                color: #000000;
            }
            
            .p5{
                font-style: italic;
                color: #000000;
            }
            .box-p6{
                font-style: italic;
                color: #000000;
            }
            .box-p7{
                font-style: italic;
                color: #000000;
            }
        </style>
    </head>
    <body>
            <p>p标签</p>
        <i>i标签</i>
        <br />
        <i class="box">i标签</i>
        <p class="box-p1">p标签</p>
        <i class="box-p2">i标签</i>
        <p class="box-p3">p标签</p>
        <p class="box-p4">p标签</p>
        <p class="box-p5">p标签</p>
        <p class="p1">p标签</p>
        <p class="p2">p标签</p>
        <p class="p3">p标签</p>
        <p class="p4">P标签</p>
        <p class="p5">p标签</p>
        <p class="box-p6">p标签</p>
        <p class="box-p7">p标签</p>
    </body>
</html>