文本属性

时间:2022-06-08
本文章向大家介绍文本属性,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

文本格式化属性

    3.字体样式  <i></i>

        1.属性

            font-style:

        2.取值

            1.normal(默认的)  正常显示

            2.italic   斜体

<style>p{
font-style: italic;
/*font-style默认、;normal(正常显示无特殊作用)*/

}
p{
font-style: normal;

}
</style>
斜体样式:<p>这段文字用css展现斜体。hello,html!</p>
正常显示:<div>这是段正常显示的字体</div>

文本属性

    1.文本颜色

        color:颜色值;

p{
color: pink;


}
</style> 
</head>
<body>
文本颜色:<p>这段文字颜色会变成骚粉色!</p>
</body>

    2.文本的排列

        text-align:水平对齐方式

        取值

            left/center/right

<style>
.p1{

text-align: center;

}
.p2{

text-align: right;

}
.p3{

text-align: left;

}
</style>

    3.文本的修饰(a u s)

        text-decoration:值;

        取值

            none  代表没有修饰线

            underline  下划线

            overline    上划线

            line-through 删除线

#p1{
text-decoration:none;/*正常显示*/
}
#p2{
text-decoration:underline;/*underline下划线*/
}
#p3{
text-decoration: overline;/*overline上划线*/
}
#p4{
text-decoration: line-through; /*line-through删除线*/
}
正常显示 <p id="p1">正常显示的文字</p>
下划线<p id="p2">这是展示下划线</p>
上划线 <p id="p3">这是展示上划线</p>
删除线 <p id="p4">这是展示删除线</p>

4.首行缩进

        text-indent:2em;

#p5{
text-indent:2em;/*空出2个字体空间*/
}

    5.文本阴影

        box-shadow:0 0 blur color;

        text-shadow:0 0 blur color;

#p6{
text-align: center;
font-size: 30px;
text-shadow:1px 1px 1px red;
/*文本阴影。表示 水平阴影 垂直阴影 模糊距离 模糊颜色*/
}

  注意:text-shadow(文本阴影):第一个值表示水平阴影 第二个垂直 第三模糊距离第四个模糊像素

常用取值:0 0 模糊距离 模糊颜色。

取值情况。水平大于0右偏移,垂直大于0向下偏移,负值相反!

  6.行高

        line-height:值;

        当行高和块元素的高度一致的时候,

         文字垂直居中

div{
width:800px;
height:320px;
background-color: orange;
border: 1px solid purple;
line-height:320px;/*当行高和元素块的高一致时,元素内文字将居中显示
其他的将会显示在元素块之外。line-height的取值表示在元素块一个宽度满之后,换行后与前一行的距离*/

}

行高和元素块一致的结果图像

行高的作用效果: