css 文本属性 文本两端对齐 单行文本间距 首行缩进
六行代码
已于 2022-08-19 17:04:14 修改
阅读量826
收藏
4
点赞数
1
已于 2022-08-19 17:04:14 修改
阅读量826
收藏
4
点赞数
1
于 2022-08-17 15:38:57 首次发布
文本属性
演示解释
设定一个class选择器，方便控制不同区域的内容, 背景颜色的设置是为了区分不同区域。
盒子1：设定width制定盒子宽度，通过text-align 将内容置于盒子中间位置，注意：设置了宽度，有了框架，内容才会在中间，如果没有width，内容就会自动显示在最左边。
盒子2：演示如何让多行内容两端对齐，text-align：justify 属性 text-indent: 可以进行首行缩进，但只对第一行起作用。
盒子3：这里演示了如何让单行的内容上下行高一致，使用line-height 的数值=height的数据，可以实现单行文本的垂直居中。
代码演示
<style>
.box1{
text-align: center;
background-color: aqua;
width: 500px;
}
.box2{
text-align: justify;
background-color: yellow;
width: 500px;
text-indent: 20px;
}
.box3{
text-align: center;
background-color: violet;
width: 500px;
height: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box1">这是文件</div>
<div class="box2">近期，以工代赈在各个政策文件中频频“露脸”：5月底，农业农村部
提出通过以工代赈等措施帮助农民工稳岗就业；7月中旬，国家发展改革委发文明确今年
以工代赈聚焦水利等七大领域
</div>
<div class="box3">第三段 </div>
</html>
文本修饰： text-decoration
text-decoration 可以给文本添加 下划线、删除线、上划线 。
如果不想用下划线就可以写none取消掉，一般用于图标
a{
text-decoration: none;
}
div{
text-decoration: underline;
}
| none | 默认，没有装饰线（最常用） |
| underline | 下划线，链接 a 自带下划线（常用） |
| overline | 上划线（几乎不用） |
| line-through | 删除线（不常用） |
如果想让一段文字实现既有上划线，又有下划线，删除线，写法如下（这种写法没有实用性）
text-decoration: underline overline line-throughfont
字体类型的使用 italic 是倾斜 bold 是加粗 这两个可以省略不写，但20px/1em 不能省略 微软雅黑也不能不写。
方式一：
font:italic bold 20px/1em 微软雅黑
方式二：
font: 30px 微软雅黑;
扫一扫
114
暂无认证
到【灌水乐园】发言
怒视天下: 大佬写的太好了相互关注一下可以吗
Passerby_Wang: 写得也太详细了吧，学到了好多 也欢迎博主来我这里指点一二呀
