本文主要是介绍那些好用却被忽视的文本属性!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
学习CSS是构建好看网页的一种方式。但是,在学习过程中,我们倾向于(大部分时间)限制自己,一遍又一遍地使用相同的属性。毕竟,我们是一种习惯性的动物,我们会使用自己习惯且熟悉的东西。
因此,在这篇文章中,向你介绍 比较好用的 CSS 属性,希望对你有所帮助。
1.text-align 内容对齐方式,它是针对于元素的内容
属性值 left|center|right
center(居中)left(左边对齐) right(右边对齐)
p{text-align:center;}
p是块元素,left、right和center会作用于整个行
2.text-decoration指定文字有无装饰,默认值为none
属性值:
underline指定文字的装饰是下划线
overline指定文字的装饰是上划线
line
-through指定文字的装饰是贯穿线,类似于删除标签的效果
3.text-transform设置对象中的文本的大小写
默认值none无转换
属性值:
capitalized将每个单词的第一个字母转换成大写
p{text-transform:capitalize;}
< p>this is paragraph< /p>
uppercase 全部转换成大写
p{text-transform:uppercase;}
lowercase 转换成小写
p{text-transform:lowercase;}
< p>THIS IS PARAGRAPH< /p>
4.text-indent文本缩进
文本缩进属性是用来指定文本的第一行的缩进
em是以字为单位,加减都可以。
如:p{text-indent:2em;}
lem和当前字体大小相等。在浏览器中默认的文字大小是16px.因此,lem的默认大小是16px。
5.word-wrap 设置当前行超过指定容器的边界时是否换行
首先我们要知道一种情况:如果你容器中的单词过长,超出了容器本身的宽度,会造成”长单词溢出“
word-wrap:break -word;
可设置过长的文本自动换行
6.vertical-align 设置对象内容的垂直对齐方式
是容器中元素相对于内容的显示
示例:
div{background:orange; height:100px;}
a{display:inline-block;height:100px;width:80px; background:red;vertical-align:middle;}
< div>这里有内容< a href="#">< /a>< /div>
*div中定义a,vertical定义的是a相对于div内容的对齐方式,它和容器的高度无关,与文字内容有关
示例:
p{background:orange;}
img{width:100px;vertical-align:middle;}
< p> this is paragraph!!!< img src="images/boy.jpg" alt=""/>< /p>
7.line-height 设置对象的行高(不允许使用负值)
normal:默认值。设置合理的行间距。
number:设置数字,此数字会与当前的字尺寸相乘来设置行间距。
length:设置固定的行间距。
我们一般用行高来使一行文字垂直居中,当行高等于高时,一行文字垂直居中。
(ps:如果您觉得有用,请点赞转发,让更多人看到哦)
小伙伴也可以加一下QQ群,可以获取资源以及更多学习方法哦
QQ群:1126277960 (暗号:zhihu)
这篇关于那些好用却被忽视的文本属性!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!