900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > css 文本属性 文本两端对齐 单行文本间距 首行缩进

css 文本属性 文本两端对齐 单行文本间距 首行缩进

时间:2023-09-09 09:55:53

相关推荐

css 文本属性 文本两端对齐 单行文本间距 首行缩进

文本属性

演示解释

设定一个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;}

如果想让一段文字实现既有上划线,又有下划线,删除线,写法如下(这种写法没有实用性)

text-decoration: underline overline line-through

font

字体类型的使用 italic 是倾斜 bold 是加粗 这两个可以省略不写,但20px/1em 不能省略 微软雅黑也不能不写。

方式一:font:italic bold 20px/1em 微软雅黑方式二:font: 30px 微软雅黑;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。