css3中text属性有:1、颜色属性color;2、文本对齐属性【text-align】;3、字符间距属性【letter-spacing】;4、文本行高属性【line-height】;5、文本修饰属性【text-decoration】。
本教程操作环境:windows10系统、css3版,该方法适用于所有品牌电脑。
(学习视频分享:css视频教程)
css3中text属性有:
1、color
立即学习“前端免费学习笔记(深入)”;
作用:指定文本的颜色
说明:该属性在块、行内、行内块的样式表中都可以使用,改变被控制元素内部所有文本的颜色
示例:
nbsp;html>CSS3之text属性 #coDiv { color: #00c6ff; } #coP { color: #2b542c; } #coSpan { color: palevioletred; } #coStrong { color: blueviolet; } #colIn { color: deeppink; }我是一名前端爱好者3 我是一名前端爱好者4我是一名前端爱好者1
我是一名前端爱好者2
登录后复制
2、text-align
作用:指定元素文本的水平对齐方式
说明:只在块级元素中使用生效,直接用在内联元素上不生效。如果使用该属性,在块元素中包含的文本、内联元素将会对齐,其内的块元素默认不设置此属性的话也会对齐,是因为子块元素继承父块元素的text-align的属性
示例:
nbsp;html>CSS3之font属性 div { border: 1px solid; width: 1200px; height: 150px; } #showdiv1 { text-align: left; } #showdiv2 { text-align: center; } #showdiv3 { text-align: right; } #showdiv4 { text-align: justify; }大家好大家好大家好In a sense we've come to our nation's capital to cash a check. When the architects of our republic wrote the magnificent words of the Constitution and the Declaration of Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men, would be guaranteed the "unalienable Rights" of "Life, Liberty and the pursuit of Happiness." It is obvious today that America has defaulted on this promissory note, insofar as her citizens of color are concerned. Instead of honoring this sacred obligation, America has given the Negro people a bad check, a check which has come back marked "insufficient funds."
登录后复制
3、letter-spacing:
作用:增加或减少字符间的空白 (字符间距)
说明:负值过大时,字体会产生挤压,但不会重叠
示例:
nbsp;html>CSS3之text属性 #lsSpan1 { letter-spacing: normal; } #lsSpan2 { letter-spacing: 10px; } #lsSpan3 { letter-spacing: -4px; } Hello World
Hello World
Hello World
登录后复制
4、line-height:
作用:设置文本的行高
说明:不允许使用负值
示例:
nbsp;html>CSS3之text属性 #lsSpan1 { line-height: 16px; border: 1px solid; } #lsSpan2 { line-height: 2em; border: 1px solid; }Hello World
Hello World
登录后复制
5、text-decoration
作用:规定添加到文本的修饰,下划线、上划线、删除线等
说明:该属性有以下三种简写 text-decoration-line,text-decoration-color,text-decoration-style
示例:
nbsp;html>CSS3之text属性 #lsSpan1 { text-decoration: none; text-decoration-line: overline; } #lsSpan2 { text-decoration: underline; text-decoration-color: pink; } #lsSpan3 { text-decoration: overline; text-decoration-style: wavy; } #lsSpan4 { text-decoration: line-through; } #lsSpan5 { text-decoration: overline wavy palevioletred; } 这是超链接
Hello World
Hello World
Hello World
Hello World
登录后复制
相关推荐:CSS教程
以上就是css3中text属性有哪些的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2883125.html