css3中text属性有哪些

css3text属性有:1、颜色属性color;2、文本对齐属性【text-align】;3、字符间距属性【letter-spacing】;4、文本行高属性【line-height】;5、文本修饰属性【text-decoration】。

css3中text属性有哪些

本教程操作环境: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;        }        
        

            我是一名前端爱好者1        

        我是一名前端爱好者2    
            我是一名前端爱好者3        我是一名前端爱好者4        

登录后复制

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

(0)
上一篇 2025年3月10日 20:16:43
下一篇 2025年2月18日 11:09:50

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • css3中的2d变形有哪些

    css3中的2d变形有:1、位移transform:translate();2、缩放transform:scale();3、旋转transform:rotate();4、倾斜transform:skew()。 环境: 本文适用于所有品牌的电…

    2025年3月10日 编程技术
    200
  • css3都有哪些新内容

    css3新内容有:1、子选择器,用于选取带有特定父元素的元素;2、兄弟选择器,用于选择紧接在另一个元素后的兄弟元素;3、其他兄弟选中器;4、结构伪类选择器;5、伪元素选择器等等。 本文操作环境:windows7系统,css3版,DELL G…

    2025年3月10日 编程技术
    200
  • 如何解决css3 media不起作用的问题

    解决办法:1、保证media书写格式为“@media screen and (css样式){}”;2、检查样式是否冲突;3、设置meta标签的viewport属性;4、media后跟的括号中的内容不能写结束符“;”,如果有,需要去掉。 本教…

    2025年3月10日
    200
  • css3 sticky不生效怎么办

    css3 sticky不生效的解决办法:1、父元素不能overflow:hidden或者overflow:auto属性;2、必须指定top、bottom、left、right4个值之一;3、父元素的高度不能低于sticky元素的高度。 本教…

    2025年3月10日
    200
  • CSS nth-of-type和nth-child的区别是什么?

    区别:两种匹配的元素不同,“:nth-of-type(n)”选择器是匹配属于父元素的特定类型的第N个子元素,元素类型是有限制的;而“:nth-child(n)”选择器是匹配属于其父元素的第N个子元素,元素类型是没有限制的。 (推荐教程:CS…

    2025年3月10日 编程技术
    200
  • css3怎么实现字体倒影

    css3实现字体倒影的方法:首先创建一个HTML示例文件;然后定义一段文字;接着通过给指定文字添加“box-reflect”属性实现字体倒影即可。 本教程操作环境:windows7系统、css3版,该方法适用于所有品牌电脑。 推荐:《css…

    2025年3月10日
    200
  • CSS3 Cubic-Bezier()实现链接悬停动画效果的方法介绍

    我们将使用CSS3动画过渡来创建简单但引人入胜的链接悬停效果,将鼠标悬停在链接上时,会弹出一个小弹出框。 我们还将看一下CSS3 Cubic-Bezier(贝塞尔)曲线,它是CSS过渡,为弹出框提供了更加流畅的运动,而不是僵化的机械运动。 …

    2025年3月10日 编程技术
    200
  • css3 pie怎么用

    css3 pie的使用方法:首先下载CSS3PIE插件;然后将pie.htc文件,放到项目的文件夹中;接着在css代码中在需要使用css3的地方添加“behavior: url(PIE.htc)”;最后指定到htc文件的位置即可。 本教程操…

    2025年3月10日
    200
  • css3 skew()属性怎么用

    在css3中,skew()是一个倾斜属性,需要和transform属性一起使用,可以改变元素在页面中的形状,让元素沿着X和Y轴进行2D倾斜转换;语法“transform:skew(x,y)”。 本教程操作环境:Windows7系统、CSS3…

    2025年3月10日 编程技术
    200
  • 使用CSS3模拟打字效果(代码实例)

    本篇文章给大家通过代码实例来介绍一下使用css3模拟中文/英文打字效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 推荐:css视频教程 一、使用CSS3实现打字效果原理 要模拟打字的效果,就需要让字符一个一个逐…

    2025年3月10日
    200

发表回复

登录后才能评论