【问题标题】:Text decorations in CSSCSS中的文本装饰
【发布时间】:2009-07-22 12:11:48
【问题描述】:

我刚刚学会了如何让文本闪烁 (<div style="text-decoration:blink">text</div>)。

换色等其他装饰方式怎么样?它们在 CSS 中可用吗?

谢谢。

【问题讨论】:

  • 恭喜!你刚刚学会了最没用的 CSS 语句。
  • 不要让任何东西眨眼!
  • 请保证你永远不会使用它,除非在你的本地服务器上运行,在你的本地主机上运行!请不要再看 1998 年的网络……
  • 我想知道他们为什么还要费心将它添加到 CSS 规范中?
  • 为什么是 -1 ?即使这个 css 属性没有用,这个问题也不是。

标签: css text-decorations


【解决方案1】:

文本装饰没什么有趣的。一个好的资源总是 w3:
http://www.w3schools.com/Css/pr_text_text-decoration.asp

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}

关于您的第二个问题 - 当然。 CSS 可以(并且应该)用于几乎任何东西的样式,虽然闪烁的文本是一个极端的例子,但大多数规则更有用。

【讨论】:

    【解决方案2】:

    是的,CSS 中可以更改颜色。使用

    <div style="color:red">foo</div>
    

    例如。您可能想查看一个好的 CSS 介绍或官方标准:

    【讨论】:

      【解决方案3】:

      可用的文本装饰值是:

      • 眨眼
      • 直通
      • 上划线
      • 下划线

      更多详情请见http://reference.sitepoint.com/css/text-decoration

      【讨论】:

        【解决方案4】:

        是的,您可以使用以下内容:

        color: #FFFFFF;(这会使您的文本变成白色)

        font-weight:bold;

        text-decoration:underline;

        等等

        你真的应该用谷歌搜索一下。

        【讨论】:

          【解决方案5】:

          我想颜色变化你的意思不仅仅是像color那样设置文本颜色,而是更复杂的动画。

          有一些实验,比如 WebKit 的 -webkit-animation-webkit-transform-webkit-transition。但这些属性是专有的。

          如今,此类效果是在 JavaScript 的帮助下完成的。您可以使用很多 JavaScript 框架,例如 jQuerymootoolsPrototypeScript.aculo.us 等。

          【讨论】:

          【解决方案6】:

          不,这些通常使用 JavaScript 编程。

          如果您指的是悬停时链接颜色的变化,那是通过 css 完成的。

          a:link { color: blue; }
          a:hover { color: green; }
          

          【讨论】:

          • 你可以加颜色,看Patrice的回答
          • 是的,但我认为 OP 想要改变颜色,比如来回闪烁颜色。
          【解决方案7】:

          目前支持四种文本装饰。 (大多数浏览器不再支持闪烁。)

          在文本上画一条线

          h1 {text-decoration:overline;}
          

          在文本下方画一条线

          h1 {text-decoration:underline;}
          

          突破。 (在文本中画一条线。)

          h1 {text-decoration:line-through;}
          

          没有装饰。

          h1 {text-decoration:none;}
          

          永远不要使用 BLINK,它几乎没有浏览器支持,没用,并且存在严重的可访问性问题。它是在 IE 和 Netscape 之间的浏览器大战期间作为专有属性制作的,大多数浏览器从不支持它,从 Netscape 复制它的 IE 已经弃用它,而 Netscape 已经死了将近 6 年。

          (请随时纠正我的小历史课。)

          【讨论】:

            【解决方案8】:

            CSS text-decoration 属性用于装饰文本或删除文本的装饰。 CSS text-decoration 属性主要用于设置或移除网页上的下划线。

            在许多情况下,当您希望文本没有装饰时,您可以简单地说 text-decoration: none;。这使得文本没有任何装饰。

            更多理解请看下面的例子

            h1 {
                text-decoration: overline;
            }
            
            h2 {
                text-decoration: line-through;
            }
            
            h3 {
                text-decoration: underline;
            }  
            

            参考:http://www.snoopcode.com/css/css-texts

            【讨论】:

              猜你喜欢
              • 2010-10-14
              • 2012-04-10
              • 2014-03-11
              • 1970-01-01
              • 2013-01-12
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多