一文带你快速css文本属性以及用法
Admin 2021-04-07 群英技术资讯 730 次浏览
css文本属性有哪些?css文本属性主要是针对文本的,能够设置文本颜色,文本对齐方式,文本修饰,文本行高等等。这篇文章总结了一些css文本属性,都是很有用的,感兴趣的朋友能够看一下。
1.line-height
可以给某个元素指定一个不带单位的缩放因子,这样它的后代元素就会继承这个缩放因子,再根据自身的字号大小来计算自己的行高(line-height)值,
代码如下:h1 {
font-size: 36px;
}
这里,body 的 line-height 是 18px(12 * 1.5),而 h1 的 line-height 则是 54px(36 * 1.5)。
就算使用 em,百分比等相对单位,后代元素继承的仍然是计算后的行高(line-height)值,比如把上面的 body 行高改成 1.5em,那么 h1 的行高就会继承这个值 18px。
2.text-decoration
文本修饰是非继承类属性,给 body 元素设置为 none,并不会影响到后代中默认有文本修饰的元素,例如超链接,所以如果要去掉超链接的默认下划线还是需要单独进行设置,
代码如下:虽然该属性默认不继承,但是祖先元素上设置的修饰会“延伸”到后代元素中,
代码如下:p span {
color: green;
text-decoration: none;
}
这里的下划线是 p 元素的。
代码如下:p span {
color: green;
text-decoration: underline;
}
由于文本修饰属性的延伸会造成一些兼容性的问题,所以最好的做法就是给需要修饰的文本单独设置 text-decoration 属性。
3.text-indent
可以使用该属性给每个段落首行缩进2个字符,而不是使用空格,
代码如下:也可以指定一个负数的值,产生首行悬挂的效果,
让引号悬挂也是一种常用做法,
让文本缩进到一个足够远的地方,可以让文字消失,
代码如下:因此,通常的图像替换文字常用方法,
代码如下:IE6/7 并不真正支持 inline-block,某些情况下可能会导致 .logo 消失不见,可以使用浮动或者 block 替代 inline-block,不过两者都会改变布局方式,也可以使用其它方法。
4.text-overflow
通常情况下,长串的URL地址,在超出容器时会溢出,我们可以设定当文本溢出包含容器时显示省略符号,
代码如下:必须配合 overflow: hidden; 一起使用;有时候可能还得加上一个宽度,比如IE 6,对于那些默认情况下并不会溢出的文本,需要强制其在一行内显示,这样才能产生效果,
代码如下:使用 white-space: pre; 或者 word-break: keep-all; 也能强制文本在一行显示,不过各有各的问题。在 IE 8/9 中,有时候会发现没有效果,那有可能是祖先元素中某个元素设置了word-wrap: break-word; 而该属性会表现得比 white-space: nowrap; 更强势,所以,有时候还得加上下面代码,
代码如下:5.text-shadow
在非白色背景的深色文字上,可以实现漂亮的内嵌效果,
代码如下:可以给文本添加多个阴影,用逗号分隔,
代码如下:6.white-space
white-space 属性设置如何处理元素内的空白。
设置值为 nowrap 让文本可以在同一行上继续,遇到边界也不会换行,直到遇到 <br> 标签,
代码如下:有时我们希望保留文本中的空格和换行符之类的,比如展示计算机的源代码的时候,就会用到 <pre>,而 <pre> 的 white-space 属性的值就是 pre,
代码如下:pre 也不那么尽如人意,遇到边界的时候不会自动换行,所以 CSS 2.1 新增了 pre-wrap,
代码如下:这样 pre 元素里的内容既能保持原有的格式,又能在内容超出边界的时候自动换行。由于不是所有浏览器都支持 pre-wrap,所以还需要让那些不支持浏览器强制换行,
代码如下:当然,也许你并不希望换行,也不介意水平滚动条,那可以用水平滚动条来代替换行,
代码如下:7.word-break
目前 webkit 大家族(包括 Google Chrome,Safari,Android Browser 等等)均不支持 keep-all 值,所以能用的也就 break-all 了,
代码如下:不过会造成英文文本阅读障碍,应该慎用,
8.word-wrap
这是比 word-break 更好的实现文本换行的方式,
代码如下:再添加一个溢出隐藏,避免一些恶意的连续字符,
代码如下:以上就是关于css文本属性的介绍,上述内容有详细的代码以及展示效果,对初学css朋友有一定参考价值,希望对大家学习css有所帮助。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
translate允许单独声明平移变换,并独立于transform属性。这在一些典型的用户界面上更好用,而且这样就无需在transform中声明该函数并记住转换函数的确切顺序了。
这篇文章主要介绍了canvas画图被放大且模糊的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
这篇文章主要介绍了html父子页面iframe双向发消息的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
对于CSS position属性不少朋友应该都不陌生,这篇文章我们来了解position: sticky的相关内容,一些朋友可能对sticky比较陌生,不知道sticky可以做什么及用法是什么,对此下面小编就给大家来详细的介绍一下,有需要的朋友可以参考,接下来就跟随小编来一起学习一下吧!
这篇文章主要介绍了使用canvas压缩图片大小的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008