CSS——文本样式
程序员文章站
2022-09-06 08:34:41
CSS——文本样式颜色 agb/agba文本对齐 text-align:left,center,right首行缩进 text-indent行高 line-height 让行高(文字在文本框里的高度)和文本高相同,则文字居中装饰 text-decoration 下,中,上划线文本图片水平对齐 vertical-align:middle文本样式测试 &l...
CSS——文本样式
- 颜色 agb/agba
- 文本对齐 text-align:left,center,right
- 首行缩进 text-indent
- 行高 line-height 让行高(文字在文本框里的高度)和文本高相同,则文字居中
- 装饰 text-decoration 下,中,上划线
- 文本图片水平对齐 vertical-align:middle
文本样式测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*颜色
rgb(红,绿,蓝) 0-F(用十六进制表示)
rgba a(0-1);增加透明度
*/
h1{
color:rgba(0 ,255,255,0.5);
text-align:center; /*水平居中*/
}
/*属性选择器*/
p[class]{
text-indent:2em; /*首行缩进*/
font-family: "楷体";
font-size:20px;
}
.p4{
background:pink;
height:150px; /*文本的高*/
line-height:150px; /*让行高(文字在文本框里的高度)和文本高相同,则文字居中*/
}
.a1{
text-decoration:underline; /*下划线*/
}
.a2{
text-decoration:line-through; /*中划线*/
}
.a3{
text-decoration:overline; /*上划线*/
}
/*a标签自带下划线,用none去除*/
a{
text-decoration:none;
}
</style>
</head>
<body>
<h1>一程光阴,一朵温婉</h1>
<p class="p1">
难得,一个清新朗照的日子,心上的明媚便在闲时光里悄悄生长。
</p>
<p class="p2">
光阴清宁,书香屋静。轻捻一份久违的闲情逸致,是馨香,亦是惬意。这是多好的时光,有深深浅浅的牵念丰盈寸寸光阴,有花开花谢的四季相随,
有忧忧喜喜的过往安静回忆……日子,是串起岁月长河的诗行,点点滴滴,婉约成一阕一句。
</p>
<p class="p4">
人生,漫漫,如何如何捕捉水意的清欢?白音格力说,心上打木屋,让风住,让云住,让月住……如若,美好的木屋可以相借,那么,我愿恋恋红尘中,
</p>
<p class="a1">aaabbbccc</p>
<p class="a2">dddeeefff</p>
<p class="a3">ggghhhiii</p>
<a href="">123456</a>
</body>
</html>
效果图
测试文本图片水平对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img,span{
vertical-align:middle;
}
span{
font-size:250px;
}
</style>
</head>
<body>
<p>
<img src="images\b.png">
<span>哈士奇</span>
</p>
</body>
</html>
效果图
本文地址:https://blog.csdn.net/wpc2018/article/details/109569609