文本格式化属性
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的取值表示在元素块一个宽度满之后,换行后与前一行的距离*/
}
行高和元素块一致的结果图像
行高的作用效果: