文本属性
演示解释
设定一个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 微软雅黑;